/* 2026-11-08 (user: "har card ke border mein ffd700 karo, jyada mota mat
   karna, accha premium karna"). Loaded LAST on every page. One thin, solid
   brand-gold #ffd700 line on every card, replacing the old 2-2.5px
   gold->green gradient ring (brand-borders.css / theme-dark.gen.css draw
   that ring from --bb-ring, so the ring itself is made solid gold here and
   its width brought down). Premium = hairline gold + a soft top highlight
   and a deep shadow, and a gentle gold glow on hover. */
:root { --gb: #ffd700; --gb-w: 1.5px; --bb-ring: linear-gradient(#ffd700, #ffd700); }

html:not(.hc) .lx-sec > .lx-wrap:not(.lx-wrap--bare), html:not(.hc) .lx-panel, html:not(.hc) .lx-inner .sec-card, html:not(.hc) .lx-read__card,
html:not(.hc) .lx-card, html:not(.hc) .lx-area, html:not(.hc) .lx-story, html:not(.hc) .lx-post, html:not(.hc) .lx-sdg__tile,
html:not(.hc) .lx-cloud:not(.lx-cloud--mini), html:not(.hc) .lx-quote, html:not(.hc) .lx-logo,
html:not(.hc) .lx-inner .project-card, html:not(.hc) .lx-inner .counter-card, html:not(.hc) .lx-inner .feature-card,
html:not(.hc) .lx-inner .steps__item, html:not(.hc) .lx-inner .pathways__col, html:not(.hc) .lx-inner .program__card,
html:not(.hc) .lx-inner .story-card, html:not(.hc) .lx-story-page .rw-stat, html:not(.hc) .lx-story-page .rw-info-card,
html:not(.hc) .lx-story-page .rw-story-card, html:not(.hc) .lx-story-page .rw-hero, html:not(.hc) .lx-story-page .rw-story-bg,
html:not(.hc) body.lx-auto main [class$="-card"]:not(img):not(a:only-child), html:not(.hc) body.lx-auto main [class*="-card "]:not(img),
html:not(.hc) body.lx-auto main .card, html:not(.hc) body.lx-auto main#content,
html:not(.hc) .lx-live__tile, html:not(.hc) .lx-pcard, html:not(.hc) .lx-form__done {
  border-width: var(--gb-w) !important;
  --bb-ring: linear-gradient(#ffd700, #ffd700);
}

/* cards that never had the ring: same thin gold line */
html:not(.hc) .project-card, html:not(.hc) .counter-card, html:not(.hc) .feature-card, html:not(.hc) .story-card,
html:not(.hc) .program__card, html:not(.hc) .sec-card, html:not(.hc) .post-card, html:not(.hc) .fx-card,
html:not(.hc) .lx-kpi, html:not(.hc) .lx-fcard, html:not(.hc) .lx-focus-card, html:not(.hc) .an-kpi, html:not(.hc) .an-card,
html:not(.hc) .lx-bcard, html:not(.hc) .lx-ptile, html:not(.hc) .sp-kpi, html:not(.hc) .ulf-xp__card,
html:not(.hc) .rw-info-card, html:not(.hc) .rw-story-card, html:not(.hc) .lx-scard, html:not(.hc) .lx-job, html:not(.hc) .lx-team__card {
  border: var(--gb-w) solid var(--gb) !important;
}

/* premium finish: hairline highlight on top, deep soft shadow */
html:not(.hc) .lx-card, html:not(.hc) .lx-area, html:not(.hc) .lx-story, html:not(.hc) .lx-post, html:not(.hc) .lx-sdg__tile,
html:not(.hc) .project-card, html:not(.hc) .counter-card, html:not(.hc) .feature-card, html:not(.hc) .story-card,
html:not(.hc) .lx-kpi, html:not(.hc) .lx-fcard, html:not(.hc) .an-kpi, html:not(.hc) .lx-bcard, html:not(.hc) .lx-pcard,
html:not(.hc) .post-card, html:not(.hc) .lx-live__tile, html:not(.hc) .program__card, html:not(.hc) .lx-logo {
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, .16), 0 14px 32px -22px rgba(0, 0, 0, .7);
  transition: box-shadow .25s ease, transform .25s ease;
}
html:not(.hc) .lx-card:hover, html:not(.hc) .lx-area:hover, html:not(.hc) .lx-story:hover, html:not(.hc) .lx-post:hover,
html:not(.hc) .lx-sdg__tile:hover, html:not(.hc) .project-card:hover, html:not(.hc) .counter-card:hover,
html:not(.hc) .feature-card:hover, html:not(.hc) .story-card:hover, html:not(.hc) .lx-kpi:hover, html:not(.hc) .lx-fcard:hover,
html:not(.hc) .lx-bcard:hover, html:not(.hc) .lx-pcard:hover, html:not(.hc) .post-card:hover, html:not(.hc) .lx-logo:hover {
  --bb-ring: linear-gradient(#ffd700, #ffd700);
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, .22), 0 0 0 1px rgba(255, 215, 0, .25), 0 0 22px -6px rgba(255, 215, 0, .45), 0 18px 36px -22px rgba(0, 0, 0, .75);
}
@media (prefers-reduced-motion: reduce) { html:not(.hc) [class] { transition: none; } }

/* the old thick accent strips (5px left bar on section boxes, 4px top bar on
   number cards) read as a heavy border next to the new gold hairline */
html:not(.hc) .sec-card::before, html:not(.hc) .lx-kpi:not(.lx-kpi--main)::before,
html:not(.hc) .lx-inner .counter-card::before { display: none !important; }

/* focus-area cards too (user 2026-11-08: "focus cards bhi gold karo"):
   no coloured 6px sector strip; ring, dot and hover border all brand gold */
html:not(.hc) .lx-fcard { --c: #ffd700 !important; }
html:not(.hc) .lx-fcard::before { display: none !important; }
html:not(.hc) .lx-fcard:hover, html:not(.hc) .lx-fcard:focus-visible { border-color: #ffd700 !important; }

/* map cards (user 2026-11-08: "map card bhi sahi karo") */
html:not(.hc) .ulf-map-block { border: var(--gb-w) solid var(--gb) !important;
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, .16), 0 14px 32px -22px rgba(0, 0, 0, .7); }
html:not(.hc) .lx-contact__map { box-shadow: inset 0 1px 0 rgba(255, 215, 0, .16), 0 14px 32px -22px rgba(0, 0, 0, .7) !important; }
/* the 3px gold strip down the left of every home section box: the box already
   has the thin gold border, so the strip only made that side look thick */
html:not(.hc) body .lx-sec > .lx-wrap::before, html:not(.hc) body .lx-panel::before { display: none !important; }

/* Contact Us page: live map + one button per office (2026-11-08) */
.ulf-map-block--live { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; padding: 0 !important; overflow: hidden; }
.ulf-map-block--live .ulf-map-frame { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: 0; }
.ulf-map-offices { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ulf-map-office { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; text-align: left; padding: 12px 14px;
  border: 1px solid rgba(255, 215, 0, .35); border-radius: 12px; background: transparent; color: inherit; font: inherit; }
.ulf-map-office .ulf-map-pin { grid-row: span 2; width: 20px; height: 20px; fill: #ffd700; margin-top: 2px; }
.ulf-map-office .ulf-map-title { font-weight: 700; color: #ffd700; font-size: 15px; }
.ulf-map-office .ulf-map-sub { font-size: 13px; line-height: 1.45; opacity: .9; }
@media (max-width: 820px) { .ulf-map-block--live { grid-template-columns: 1fr; } .ulf-map-block--live .ulf-map-frame { min-height: 300px; } }
/* the old static map box had a fixed 220px height -- the live two-office map needs room */
.ulf-map-block.ulf-map-block--live { height: auto !important; min-height: 380px; align-items: stretch; }
.ulf-map-offices { justify-content: center; }

/* project top box photo (2026-11-08, Admin -> Project Photos): text ~62%, photo ~38% on the
   right; rounded, thin gold line; on phones the photo sits above the text (lx-sections.css) */
.lx-inner .sec--project-lead.sec--media .sec-inner--text { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lx-inner .sec--project-lead .sec-media__pic { border: 1px solid #ffd700; border-radius: 16px; background: #1f2a1e; }
html:not(.hc) .lx-inner .sec--project-lead.sec--media .sec-card { border-top-width: var(--gb-w) !important; }
@media (max-width: 767px) {
  .lx-inner .sec--project-lead.sec--media .sec-inner--text { grid-template-columns: 1fr; }
  .lx-inner .sec--project-lead .sec-media__pic { order: -1; width: 100%; aspect-ratio: 16 / 10; min-height: 0; height: auto; }
}

/* office map boxes (2026-11-08 map fix): no tilt/skew/move, clean rounded corners with
   no dark gaps -- isolate + mask fixes the Safari/Chrome corner-clipping glitch with
   Leaflet's transformed tile layers. Fade-in (opacity) still allowed. */
.lx-contact__map, .ulf-map-block--live {
  overflow: hidden; border-radius: 24px; isolation: isolate;
  transform: none !important; rotate: none !important; translate: none !important; scale: none !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black);
}
.lx-contact__map .fx-glare { display: none !important; }
.lx-contact__map .ulf-omap { border-radius: inherit; }
.ulf-map-block--live .ulf-omap { border-radius: 24px 0 0 24px; }
@media (max-width: 820px) { .ulf-map-block--live .ulf-omap { border-radius: 24px 24px 0 0; } }
/* Donate page: 80G receipt request button (2026-11-08) */
.donate__receipt { text-align: center; margin: 22px 0 0; }
.donate__receipt .lx-btn { display: inline-block; padding: 12px 22px; border-radius: 999px; background: #ffd700; color: #1f2a1e; font-weight: 800; text-decoration: none; }
.donate__receipt .lx-btn:hover { background: #ffe34d; }

/* 2026-11-08 (content/space review #1): no half-empty last rows -- cards wrap and the last
   row sits in the middle, whatever the number of cards */
.sp-story-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sp-story-grid > .sp-story { flex: 0 1 calc((100% - 3 * 18px) / 4); min-width: 220px; }
@media (max-width: 1000px) { .sp-story-grid > .sp-story { flex-basis: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 760px) { .sp-story-grid > .sp-story { flex-basis: calc((100% - 18px) / 2); min-width: 0; } }
@media (max-width: 480px) { .sp-story-grid > .sp-story { flex-basis: 100%; } }
.utkarsh-objectives-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 20px; }
.utkarsh-objectives-grid > .utkarsh-obj-item { flex: 0 1 calc((100% - 2 * 20px) / 3); }
@media (max-width: 900px) { .utkarsh-objectives-grid > .utkarsh-obj-item { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .utkarsh-objectives-grid > .utkarsh-obj-item { flex-basis: 100%; } }
/* Story of Change: less empty space under the cards */
.lx-inner .sec--stories .sec-card { padding-bottom: 30px; }
.lx-inner .sec--stories .carousel__dots { margin-top: 10px; }