/*
 * Beacon of Tender Love v4.2 — Spectra layout adapter
 *
 * Version 4.1 remains the visual source of truth. This file only normalises
 * Spectra's wrappers, fixes spacing/responsive behaviour and removes the old
 * decorative media overlays. It introduces no new brand colours or redesign.
 */

:root {
  --botl-section-space: clamp(72px, 7vw, 96px);
  --botl-section-space-mobile: 56px;
  --botl-content-gap: clamp(42px, 6vw, 82px);
}

/*
 * Standard-page Spectra reset.
 *
 * The reset must never run inside a page-specific design. In v4.3.1 it was
 * global, so its `padding: 0 !important` removed every About section's native
 * spacing. The main element now receives a layout class in header.php and this
 * reset is deliberately limited to the standard page system.
 */
.site-main:where(.botl-main-standard) > * { margin-block: 0 !important; }
.site-main:where(.botl-main-standard) .wp-block-spectra-container {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  margin-block: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.site-main:where(.botl-main-standard) .botl-container,
.site-main:where(.botl-main-standard) .botl-column,
.site-main:where(.botl-main-standard) .botl-media { display: block !important; }
.site-main:where(.botl-main-standard) .wp-block-spectra-content { margin-block: 0; }
.site-main:where(.botl-main-standard) > .alignfull,
.site-main:where(.botl-main-standard) .alignfull { width: 100%; max-width: none; margin-inline: 0 !important; }
.site-main:where(.botl-main-standard) .alignwide {
  width: min(calc(100% - 48px), var(--max)) !important;
  max-width: var(--max) !important;
  margin-inline: auto !important;
}

/* The approved v4.1 layout tracks. */
.site-main .hero-grid,
.site-main .intro-grid,
.site-main .page-hero-grid,
.site-main .manifesto,
.site-main .values-grid,
.site-main .trust-grid,
.site-main .action-grid,
.site-main .split-feature,
.site-main .cta-band-inner,
.site-main .about-story,
.site-main .mission-grid,
.site-main .program-overview,
.site-main .credential-grid,
.site-main .pillar-grid,
.site-main .support-band,
.site-main .contact-grid,
.site-main .product-detail,
.site-main .cart-layout,
.site-main .checkout-layout,
.site-main .participation-stage > .botl-grid,
.site-main .program-grid,
.site-main .impact-grid,
.site-main .gallery-preview,
.site-main .gallery-grid,
.site-main .involve-cards,
.site-main .product-grid,
.site-main .section-head { display: grid !important; }

.site-main .hero-grid { grid-template-columns: minmax(0, 5.35fr) minmax(0, 6.65fr); gap: clamp(40px, 5vw, 68px) !important; align-items: center; }
.site-main .intro-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--botl-content-gap) !important; align-items: start; }
.site-main .page-hero-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(42px, 6vw, 78px) !important; align-items: center; }
.site-main .program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px !important; }
.site-main .impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px !important; }
.site-main .manifesto { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 0 !important; min-height: 620px; }
.site-main .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; }
.site-main .trust-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--botl-content-gap) !important; }
.site-main .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; }
.site-main .gallery-preview { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); }
.site-main .gallery-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.25fr); }
.site-main .split-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; }
.site-main .cta-band-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 7vw !important; align-items: center; }
.site-main .about-story { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--botl-content-gap) !important; align-items: start; }
.site-main .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px !important; }
.site-main .program-overview { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 9vw !important; align-items: start; }
.site-main .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; }
.site-main .support-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 9vw !important; align-items: center; }
.site-main .contact-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--botl-content-gap) !important; }
.site-main .credential-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: var(--botl-content-gap) !important; }
.site-main .involve-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px !important; }
.site-main .participation-stage > .botl-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 8vw !important; align-items: start; }

/* Consistent section rhythm and heading hierarchy. */
.site-main .section { padding-block: var(--botl-section-space) !important; }
.site-main .hero { padding-block: clamp(28px, 3.5vw, 46px) 46px !important; }
.site-main .page-hero { padding-block: clamp(30px, 4vw, 52px) clamp(64px, 6vw, 88px) !important; }
.site-main .cta-band { padding-block: clamp(70px, 7vw, 94px) !important; }
.site-main .section-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 510px);
  grid-template-rows: auto auto;
  column-gap: 40px !important;
  row-gap: 0 !important;
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 44px) !important;
}
.site-main .section-head > .eyebrow { grid-column: 1; grid-row: 1; }
.site-main .section-head > .display { grid-column: 1; grid-row: 2; }
.site-main .section-head > :last-child:not(.display):not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; }
.site-main .section-head .display { font-size: clamp(2.6rem, 4.4vw, 4.5rem); }
.site-main .section > .display { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; font-size: clamp(2.6rem, 4.4vw, 4.5rem); }
.site-main .section > .eyebrow + .display + .pillar-grid { margin-top: clamp(34px, 4vw, 44px) !important; }
.site-main .participation-stage .display { font-size: clamp(2.5rem, 4vw, 4rem); }
.site-main .hero h1 { max-width: 10.25ch; font-size: clamp(3.25rem, 5.15vw, 5.4rem); text-wrap: balance; }
.site-main .page-hero-copy h1 { max-width: 11.5ch; font-size: clamp(3.1rem, 5.45vw, 5.5rem); text-wrap: balance; }
.site-main :where(.program-card, .pillar-card, .action-card, .value-card, .involve-card) h3 { line-height: 1.15; }

/* Preserve v4.1 content spacing after Spectra's wrapper reset. */
.site-main .hero .lede { max-width: 560px; margin-top: 22px; }
.site-main .page-hero-copy .lede { margin-top: 26px; }
.site-main .actions { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 18px !important; margin-top: 32px !important; }
.site-main .botl-button-wrap { display: block !important; width: auto !important; }
.site-main .program-card,
.site-main .action-card,
.site-main .involve-card { display: flex !important; flex-direction: column; }
.site-main .program-copy { display: block !important; padding: 28px 29px 34px !important; }
.site-main .program-copy > * { max-width: none; }
.site-main .program-copy .program-number { margin: 0; }
.site-main .program-copy .text-link { margin-top: 16px; }
.site-main .action-card .text-link { margin-top: auto; }
.site-main .about-story h2 + p,
.site-main .split-copy h2 + p,
.site-main .support-band h2 + p,
.site-main .participation-stage h2 + p { margin-top: 18px; }
.site-main .about-story p + p { margin-top: 16px; }
.site-main .trust-intro .display + .lede { margin-top: 22px; }
.site-main .trust-intro > .botl-button-wrap { margin-top: 24px !important; }
.site-main .action-card,
.site-main .involve-card { justify-content: space-between; }
.site-main .impact-card { display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 225px; padding: 30px !important; }
.site-main .manifesto-copy { padding: clamp(46px, 5vw, 70px) !important; }
.site-main .value-card { padding: 42px 36px 48px !important; }
.site-main .action-card { padding: 34px !important; }
.site-main .split-copy { display: flex !important; flex-direction: column; justify-content: center; padding: clamp(45px, 7vw, 90px) !important; }
.site-main .mission-card { padding: clamp(45px, 6vw, 78px) !important; }
.site-main .pillar-card { padding: 34px 32px 38px !important; }
.site-main .involve-card { padding: 26px 24px !important; }
.site-main .involve-cards { margin-top: 50px !important; }
.site-main .participation-stage { margin-top: 32px !important; padding: clamp(32px, 5vw, 70px) !important; }
.site-main .contact-list { margin-top: 38px !important; }
.site-main .quick-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - 48px), var(--max)) !important;
  margin: 38px auto 0 !important;
  gap: 0 !important;
}
.site-main .quick-links > p { min-width: 0; margin: 0; }
.site-main .quick-links > p > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 16px 12px; }
.site-main .quick-links > p > a > span { display: none; }
.site-main .quick-links > p:not(:last-child) { border-right: 1px solid var(--line); }

/* Image containers: no AI-style decoration, text label, tint or overlay. */
.site-main .image-placeholder {
  position: relative;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 26px 4px 26px 4px;
  box-shadow: none !important;
}
.site-main .image-placeholder:not(.spectra-background-image) { background: var(--paper-deep) !important; }
.site-main .image-placeholder.spectra-background-image { background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; }
.site-main .image-placeholder::before,
.site-main .image-placeholder::after,
.site-main .image-placeholder .spectra-container__overlay,
.site-main .image-placeholder.has-container-overlay::before { display: none !important; content: none !important; background: none !important; opacity: 0 !important; }
.site-main .placeholder-label,
.site-main .gallery-tile-label { display: none !important; }
.site-main .hero-image-placeholder { min-height: 520px !important; height: 520px !important; }
.site-main .page-image-placeholder { min-height: 470px !important; height: 470px !important; }
.site-main .story-image-placeholder { min-height: 480px !important; height: 480px !important; }
.site-main .certificate-placeholder { min-height: 470px !important; height: 470px !important; }
.site-main .manifesto-image { min-height: 620px !important; height: 620px !important; border-radius: 0; }
.site-main .split-image-placeholder { min-height: 520px !important; height: 520px !important; border-radius: 0; }
.site-main .card-placeholder { min-height: 265px !important; height: 265px !important; border-radius: 0; }

/* Gallery containment prevents the overflow seen on the uploaded site. */
.site-main .program-grid,
.site-main .impact-grid,
.site-main .gallery-preview,
.site-main .gallery-grid,
.site-main .action-grid,
.site-main .values-grid {
  width: min(calc(100% - 48px), var(--max)) !important;
  max-width: var(--max) !important;
  margin-inline: auto !important;
}
.site-main :where(.program-card, .impact-card, .gallery-tile, .action-card, .value-card) { min-width: 0; max-width: 100%; }
.site-main .gallery-preview,
.site-main .gallery-grid { grid-auto-rows: 245px; gap: 16px !important; overflow: hidden; isolation: isolate; }
.site-main .gallery-tile { min-width: 0; min-height: 0 !important; height: 100% !important; overflow: hidden !important; contain: layout paint; border-radius: 0; }
.site-main .gallery-preview .gallery-tile:first-child { grid-row: span 2; }
.site-main .gallery-preview .gallery-tile:last-child { grid-column: span 2; }

/* Forms remain usable and cannot create horizontal overflow. */
.site-main :where(.botl-form, .forminator-ui, form) { min-width: 0; max-width: 100%; }
.site-main :where(input, select, textarea, button) { max-width: 100%; }

@media (max-width: 1100px) {
  .site-main .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --botl-section-space: 72px; --botl-content-gap: 38px; }
  .desktop-nav { visibility: hidden; pointer-events: none; }
  .desktop-nav.open { visibility: visible; pointer-events: auto; }
  .site-main .alignwide { width: min(calc(100% - 32px), var(--max)) !important; }
  .site-main .hero-grid,
  .site-main .intro-grid,
  .site-main .page-hero-grid,
  .site-main .program-overview,
  .site-main .trust-grid,
  .site-main .support-band,
  .site-main .about-story,
  .site-main .contact-grid,
  .site-main .cta-band-inner,
  .site-main .credential-grid,
  .site-main .split-feature,
  .site-main .participation-stage > .botl-grid { grid-template-columns: 1fr; }
  .site-main .hero-grid,
  .site-main .page-hero-grid { gap: 34px !important; }
  .site-main .hero-grid > .botl-column:last-child,
  .site-main .page-hero-grid > .botl-column:last-child { order: -1; }
  .site-main .hero-copy { text-align: center; }
  .site-main .hero-copy .eyebrow,
  .site-main .hero h1,
  .site-main .hero .lede { margin-inline: auto; }
  .site-main .hero-copy .actions { justify-content: center; }
  .site-main .section-head { grid-template-columns: 1fr; grid-template-rows: auto; }
  .site-main .section-head > .eyebrow,
  .site-main .section-head > .display,
  .site-main .section-head > :last-child:not(.display):not(.eyebrow) { grid-column: 1; grid-row: auto; justify-self: start; }
  .site-main .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-main .manifesto { grid-template-columns: 1fr; min-height: 0; }
  .site-main .involve-cards,
  .site-main .gallery-preview,
  .site-main .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-main .gallery-preview .gallery-tile:first-child,
  .site-main .gallery-preview .gallery-tile:last-child,
  .site-main .gallery-grid .gallery-tile { grid-column: auto !important; grid-row: auto !important; }
  .site-main .hero-image-placeholder { min-height: 400px !important; height: 400px !important; }
  .site-main .page-image-placeholder { min-height: 390px !important; height: 390px !important; }
  .site-main .manifesto-image { min-height: 430px !important; height: 430px !important; }
}

@media (max-width: 650px) {
  .site-main .section { padding-block: var(--botl-section-space-mobile) !important; }
  .site-main .hero { padding-block: 20px 40px !important; }
  .site-main .page-hero { padding-block: 18px 54px !important; }
  .site-main .hero-grid,
  .site-main .page-hero-grid { gap: 26px !important; }
  .site-main .hero h1 { max-width: 11ch; font-size: clamp(2.72rem, 12.5vw, 3.1rem); line-height: 1.03; }
  .site-main .page-hero-copy h1 { max-width: 11ch; font-size: clamp(2.7rem, 12vw, 3.15rem); line-height: 1.03; }
  .site-main .hero .lede { margin-top: 18px; font-size: 1rem; }
  .site-main .hero-copy .actions { margin-top: 24px !important; }
  .site-main .hero-image-placeholder { min-height: 310px !important; height: 310px !important; }
  .site-main .page-image-placeholder { min-height: 300px !important; height: 300px !important; }
  .site-main .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 32px), var(--max)) !important;
    margin-top: 30px !important;
  }
  .site-main .quick-links > p { border-right: 0; border-bottom: 1px solid var(--line); }
  .site-main .quick-links > p:nth-child(odd) { border-right: 1px solid var(--line); }
  .site-main .quick-links > p:nth-last-child(-n + 2) { border-bottom: 0; }
  .site-main .quick-links > p > a { min-height: 62px; padding: 13px 10px; font-size: .8rem; }
  .site-main .section-head { row-gap: 0 !important; margin-bottom: 30px !important; }
  .site-main .section-head .display { font-size: clamp(2.2rem, 10.5vw, 2.75rem); line-height: 1.05; }
  .site-main .section > .display { width: min(calc(100% - 32px), var(--max)); font-size: clamp(2.2rem, 10.5vw, 2.75rem); line-height: 1.05; }
  .site-main .section-head > :last-child:not(.display):not(.eyebrow) { margin-top: 12px; }
  .site-main .program-grid,
  .site-main .values-grid,
  .site-main .action-grid,
  .site-main .pillar-grid,
  .site-main .involve-cards,
  .site-main .mission-grid { grid-template-columns: 1fr; }
  .site-main .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-main .impact-card { min-height: 0; padding: 28px 20px !important; }
  .site-main .impact-card h3 { font-size: clamp(2.65rem, 13vw, 3.4rem); }
  .site-main .impact-card p { margin-top: 12px; font-size: .8rem; }
  .site-main .card-placeholder { min-height: 210px !important; height: 210px !important; }
  .site-main .program-copy { padding: 24px 24px 28px !important; }
  .site-main .program-card h3 { font-size: 1.65rem; }
  .site-main .value-card { padding: 30px 22px 34px !important; }
  .site-main .action-card { min-height: 255px; padding: 28px !important; }
  .site-main .gallery-preview,
  .site-main .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 12px !important; }
  .site-main .gallery-preview .gallery-tile,
  .site-main .gallery-grid .gallery-tile { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; height: 180px !important; }
  .site-main .manifesto-image { min-height: 300px !important; height: 300px !important; }
  .site-main .story-image-placeholder,
  .site-main .certificate-placeholder { min-height: 330px !important; height: 330px !important; }
  .site-main .split-image-placeholder { min-height: 320px !important; height: 320px !important; }
  .site-main .split-copy { padding: 48px 24px !important; }
  .site-main .manifesto-copy { padding: 42px 24px 48px !important; }
  .site-main .cta-band { padding-block: 56px !important; }
  .site-main .cta-band-inner { gap: 24px !important; }
}