/* Brand borders on every card (user: "sabhi cards ke border ffd700 aur
   323f2f se jude dikhe jisse humari branding reflect ho"). A gradient ring
   from brand gold #ffd700 to brand green #323f2f, drawn with the two-layer
   background trick (fill on padding-box, gradient on border-box) so it
   follows each card's radius. --bb-fill keeps cards that use an off-white
   fill. Loaded on every page after the page CSS and gov.css. */

:root { --bb-ring: linear-gradient(135deg, #ffd700 0%, #ffd700 18%, #8a8f3a 52%, #323f2f 100%); }

/* section cards */
.lx-sec > .lx-wrap:not(.lx-wrap--bare), .lx-panel, .lx-inner .sec-card, .lx-read__card,
/* home cards */
.lx-card, .lx-area, .lx-story, .lx-post, .lx-sdg__tile, .lx-cloud:not(.lx-cloud--mini), .lx-quote, .lx-logo,
/* inner-page cards */
.lx-inner .project-card, .lx-inner .counter-card, .lx-inner .feature-card, .lx-inner .steps__item,
.lx-inner .pathways__col, .lx-inner .program__card, .lx-inner .story-card,
.lx-story-page .rw-stat, .lx-story-page .rw-info-card, .lx-story-page .rw-story-card,
.lx-story-page .rw-hero, .lx-story-page .rw-story-bg {
  border: 2px solid transparent !important;
  background: linear-gradient(var(--bb-fill, #fff), var(--bb-fill, #fff)) padding-box, var(--bb-ring) border-box !important;
}
.lx-sec > .lx-wrap:not(.lx-wrap--bare), .lx-panel, .lx-inner .sec-card, .lx-read__card,
.lx-story-page .rw-hero, .lx-story-page .rw-story-bg { border-width: 2.5px !important; }
.lx-inner .pathways__col, .lx-inner .program__card, .lx-story-page .rw-info-card { --bb-fill: #fafaf8; }
.lx-cloud:not(.lx-cloud--mini) { --bb-fill: rgba(255, 255, 255, .97); }

/* on hover the ring turns: green leads, gold trails, with a soft gold glow */
.lx-card:hover, .lx-area:hover, .lx-story:hover, .lx-post:hover, .lx-sdg__tile:hover, .lx-logo:hover,
.lx-inner .project-card:hover, .lx-inner .counter-card:hover, .lx-inner .feature-card:hover, .lx-inner .steps__item:hover, .lx-inner .story-card:hover {
  --bb-ring: linear-gradient(315deg, #ffd700 0%, #ffd700 22%, #8a8f3a 55%, #323f2f 100%);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .18), 0 24px 40px -24px rgba(20, 30, 20, .5);
}
/* the Key Areas card fills its body green on hover; keep that fill under the ring */
.lx-area .lx-area__body::before { border-radius: 0 0 20px 20px; }

html.hc .lx-card, html.hc .lx-area, html.hc .lx-story, html.hc .lx-post, html.hc .lx-logo { background: #000 !important; border-color: #fff !important; }

/* hand-written pages (body.lx-auto): any element whose class ends in "-card"
   or is "card" gets the same brand ring; images and media inside are untouched */
body.lx-auto main [class$="-card"]:not(img):not(a:only-child),
body.lx-auto main [class*="-card "]:not(img),
body.lx-auto main .card {
  border: 2px solid transparent !important;
  background: linear-gradient(var(--bb-fill, #fff), var(--bb-fill, #fff)) padding-box, var(--bb-ring) border-box !important;
}