/* ==========================================================
   Production responsive system
   Loaded after global and page-specific styles.
   Layout responds to available space, not named devices.
========================================================== */

:root {
    --page-gutter: clamp(16px, 4vw, 48px);
    --section-space: clamp(72px, 8vw, 112px);
    --section-space-compact: clamp(52px, 6vw, 82px);
    --readable-measure: 68ch;
    --touch-target: 48px;
    --font-display: clamp(2.35rem, 5vw + 0.8rem, 4.9rem);
    --font-section: clamp(2rem, 3.4vw + 0.65rem, 3.55rem);
    --font-body-fluid: clamp(1rem, 0.34vw + 0.93rem, 1.125rem);
}

html {
    overflow-x: clip;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    font-size: var(--font-body-fluid);
    overflow-x: clip;
}

:where(main [id]) {
    scroll-margin-top: calc(var(--header-height, 96px) + 22px);
}

:where(main, section, article, header, footer, nav, div, figure, form) {
    min-width: 0;
}

:where(img, video, iframe, canvas, svg) {
    max-width: 100%;
}

:where(video, iframe, canvas) {
    display: block;
}

:where(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    font-size: max(16px, 1em);
}

:where(button, .btn, .activity-button, .profile-button, .detail-button,
       .evidence-button, .gallery-button, .footer-action, .donation-button,
       .certificate-submit, .copy-button) {
    min-height: var(--touch-target);
}

:where(.btn, .activity-button, .profile-button, .detail-button,
       .evidence-button, .gallery-button, .footer-action, .donation-button,
       .certificate-submit, .copy-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

:where(h1, h2, h3, .site-title) {
    text-wrap: balance;
    overflow-wrap: break-word;
}

:where(main h1) {
    font-size: var(--font-display);
}

:where(main h2) {
    font-size: var(--font-section);
}

:where(p, li, figcaption, address) {
    overflow-wrap: break-word;
}

:where(.container, .activity-wrap, .profile-wrap, .gallery-wrap) {
    max-width: calc(100% - var(--page-gutter) - var(--page-gutter));
}

:where(.activity-index-links, .profile-jump-links, .trust-index-links,
       .gallery-filters, .document-links) {
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.mobile-back-to-top {
    position: fixed;
    z-index: 979;
    right: max(28px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
    display: grid;
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    place-items: center;
    cursor: pointer;
    color: #4b2222;
    border: 1px solid rgba(111, 39, 48, 0.22);
    border-radius: 50%;
    background: rgba(255, 251, 243, 0.96);
    box-shadow: 0 10px 28px rgba(47, 24, 27, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease,
        border-color 180ms ease, background-color 180ms ease;
}

.mobile-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-back-to-top:hover,
.mobile-back-to-top:focus-visible {
    border-color: rgba(111, 39, 48, 0.48);
    background: #fffaf0;
}

.mobile-back-to-top svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(.trust-chart-scroll, .table-scroll, .legal-table-scroll) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

:where(.activity-hero-grid, .profile-hero-grid, .detail-hero-grid,
       .gallery-hero-grid, .evidence-hero-grid, .contact-hero-grid,
       .donation-hero-grid, .activity-section-header, .selection-header,
       .detail-intro, .evidence-heading, .contact-enquiry-grid,
       .donation-route-grid) > * {
    min-width: 0;
}

/* Four living pillars: the grid chooses 4, 2 or 1 columns from its own width. */
.activity-pillars-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.activity-pillar {
    min-height: clamp(330px, 35vw, 430px);
}

/* ==========================================================
   Compact desktop and navigation changeover
========================================================== */

@media (max-width: 70rem) {
    :root {
        --header-height: 118px;
    }

    .container,
    .activity-wrap,
    .profile-wrap,
    .gallery-wrap {
        width: min(calc(100% - var(--page-gutter) - var(--page-gutter)), var(--container-content, 1200px));
    }

    .header-grid {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: clamp(18px, 3vw, 28px);
    }

    .site-title {
        font-size: clamp(1.4rem, 2.4vw, 1.7rem);
    }

    .activity-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 62rem) {
    :root {
        --header-height: 94px;
    }

    body.nav-open {
        overflow: hidden;
    }

    .header-grid {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 16px;
        min-height: var(--header-height);
    }

    .site-brand,
    .site-brand-logo {
        max-height: 82px;
    }

    .header-row-top {
        display: none;
    }

    .header-right {
        padding-block: 7px;
    }

    .header-row-bottom {
        height: 100%;
        padding-top: 0;
        justify-content: flex-end;
        border-top: 0;
    }

    .nav-toggle {
        position: relative;
        z-index: 1003;
        display: flex;
        width: 46px;
        height: 46px;
        margin-left: auto;
        flex: 0 0 auto;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        border: 1px solid rgba(200, 161, 59, 0.28);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 8px 24px rgba(45, 37, 27, 0.08);
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 99px;
        background: var(--color-text);
        transition: opacity 220ms ease, transform 320ms ease;
    }

    .nav-toggle.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .site-nav,
    #header .site-nav,
    .site-header .site-nav {
        position: fixed;
        z-index: 1002;
        top: 0;
        right: 0;
        display: flex;
        width: min(88vw, 390px);
        height: 100vh;
        height: 100dvh;
        padding: 108px clamp(24px, 7vw, 38px) 40px;
        overflow-y: auto;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        background:
            radial-gradient(circle at top right, rgba(200, 161, 59, 0.13), transparent 36%),
            #fffdf8;
        box-shadow: -20px 0 60px rgba(40, 31, 20, 0.15);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform 420ms ease, visibility 420ms ease;
    }

    .site-nav.is-open,
    #header .site-nav.is-open,
    .site-header .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-nav .nav-list {
        width: 100%;
    }

    .site-nav .nav-item > a,
    .nav-submenu-toggle {
        min-height: 56px;
    }

    .nav-overlay {
        position: fixed;
        z-index: 1001;
        inset: 0;
        display: block;
        visibility: hidden;
        cursor: pointer;
        background: rgba(29, 25, 21, 0.48);
        opacity: 0;
        transition: opacity 320ms ease, visibility 320ms ease;
    }

    .nav-overlay.is-visible {
        visibility: visible;
        opacity: 1;
    }

    .footer-introduction {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-intro-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-back-to-top {
        right: max(21px, env(safe-area-inset-right));
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
        width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .mobile-scroll-cue:not(.is-at-end) {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
    }

    :where(.activity-breadcrumb, .profile-breadcrumb, .detail-breadcrumb,
           .evidence-breadcrumb, .gallery-breadcrumb, .contact-breadcrumb,
           .donation-breadcrumb) a,
    :where(.proof-strip-link, .practice-source, .footer-top-link,
           .footer-map-link, .impact-stream-link, .evidence-card a,
           .trust-card a, .contact-essentials a) {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

    .impact-tab,
    .activity-index-links a,
    .profile-jump-links a,
    .trust-index-links a,
    .gallery-filter {
        min-height: 44px;
    }

    .footer-intro-actions .footer-action {
        min-height: 48px;
    }

    .footer-social a {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================
   Content reflow
========================================================== */

@media (max-width: 50rem) {
    :root {
        --page-gutter: clamp(18px, 5vw, 32px);
    }

    .section {
        padding-block: var(--section-space);
    }

    :is(.activity-hero, .profile-hero, .detail-hero, .gallery-hero,
        .evidence-hero, .contact-hero, .donation-hero) h1 {
        font-size: clamp(2.65rem, 9.5vw, 3.65rem);
        line-height: 1.02;
    }

    :is(.activity-hero-grid, .profile-hero-grid, .detail-hero-grid,
        .gallery-hero-grid, .evidence-hero-grid, .contact-hero-grid,
        .donation-hero-grid, .activity-section-header, .selection-header,
        .activity-bridge-grid, .contact-enquiry-grid, .donation-route-grid,
        .detail-intro, .evidence-heading) {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-pillars-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .activity-pillars-heading h2 {
        max-width: 30ch;
        text-align: left;
    }

    .activity-pillar {
        min-height: clamp(330px, 56vw, 390px);
    }

    .activity-pillars-core {
        display: none;
    }

    .practice-item,
    .practice-item.is-reversed {
        grid-template-columns: minmax(0, 1fr);
    }

    .practice-item.is-reversed .practice-copy {
        order: 0;
    }

    .profile-jump-links,
    .trust-index-links,
    .activity-index-links,
    .gallery-filters {
        display: flex;
        padding-bottom: 7px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
    }

    .profile-jump-links > *,
    .trust-index-links > *,
    .activity-index-links > *,
    .gallery-filters > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .contact-form-grid,
    .certificate-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-field--wide,
    .certificate-field--wide {
        grid-column: auto;
    }

    .footer-closing {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
    }

    .footer-link-group a,
    .footer-contact address a,
    .footer-map-link {
        width: 100%;
        min-height: 44px;
        padding-block: 10px;
        align-items: center;
    }

    .footer-link-group a + a,
    .footer-contact address a + a {
        margin-top: 0;
    }
}

/* ==========================================================
   Narrow content: prioritise reading and touch interaction
========================================================== */

@media (max-width: 35rem) {
    :root {
        --header-height: 82px;
        --page-gutter: clamp(16px, 5vw, 22px);
    }

    .header-grid {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
    }

    .site-brand,
    .site-brand-logo {
        max-height: 70px;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
    }

    .site-nav,
    #header .site-nav,
    .site-header .site-nav {
        width: min(92vw, 360px);
        padding: 92px 24px 34px;
    }

    :is(.activity-hero, .profile-hero, .detail-hero, .gallery-hero,
        .evidence-hero, .contact-hero, .donation-hero) h1 {
        font-size: clamp(2.35rem, 11vw, 3rem);
        line-height: 1.03;
    }

    :is(.activity-hero-copy, .gallery-hero-copy, .evidence-hero-copy,
        .contact-hero-copy, .donation-hero-copy) {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .activity-pillars {
        margin-top: 42px;
    }

    .activity-pillars-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 8px;
    }

    .activity-pillar {
        min-height: clamp(360px, 112vw, 430px);
    }

    .activity-pillar-copy {
        min-height: 54%;
        padding: 26px 22px 23px;
    }

    .activity-pillar-copy strong {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .activity-pillar-copy > span:not(.activity-pillar-number):not(.activity-pillar-action) {
        max-width: 28ch;
        font-size: 0.95rem;
    }

    .activity-pillar-action {
        min-height: 44px;
        margin-top: 10px;
        align-items: center;
        font-size: 0.68rem;
    }

    .activity-pillars-purpose {
        max-width: 28ch;
        margin-inline: auto;
    }

    .activity-index-inner,
    .profile-jump-nav-inner,
    .trust-index-inner {
        display: block;
    }

    .activity-index-label {
        display: block;
        margin-bottom: 10px;
    }

    .hero-buttons,
    .activity-actions,
    .footer-intro-actions,
    .contact-form-actions,
    .certificate-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .hero-buttons > *,
    .activity-actions > *,
    .footer-intro-actions > *,
    .contact-form-actions > *,
    .certificate-actions > * {
        width: 100%;
        justify-content: center;
    }

    .footer-introduction,
    .footer-navigation {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-intro-actions {
        grid-column: auto;
    }

    .practice-copy p,
    .trust-card p,
    .activity-bridge p {
        text-align: left;
        hyphens: none;
    }

    :where(.section-heading p, .activity-hero-copy, .profile-hero-copy,
           .detail-hero-copy, .evidence-hero-copy, .gallery-hero-copy,
           .contact-hero-copy, .donation-hero-copy, .figure-note,
           .impact-note, .chart-note, .document-note) {
        color: #5f574f;
        font-size: 1rem;
        line-height: 1.65;
    }

    :where(.story-grid, .success-stories-grid, .testimonial-grid,
           .testimonial-cards, .alumni-action-grid, .document-grid,
           .governance-grid, .contact-essentials-grid, .donation-purpose-grid,
           .trust-programme-grid, .detail-feature-grid) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 23.75rem) {
    :root {
        --page-gutter: 14px;
    }

    :is(.activity-hero, .profile-hero, .detail-hero, .gallery-hero,
        .evidence-hero, .contact-hero, .donation-hero) h1 {
        font-size: clamp(2.15rem, 11.5vw, 2.65rem);
    }

    .activity-pillar {
        min-height: 350px;
    }
}

@media (hover: none) {
    :where(a, button) {
        -webkit-tap-highlight-color: rgba(200, 161, 59, 0.12);
    }
}

@media (min-width: 62.01rem) {
    .mobile-quick-nav {
        display: none !important;
    }
}

@media (max-width: 62rem) {
    .mobile-quick-nav {
        position: sticky;
        z-index: 850;
        top: var(--header-height, 94px);
        display: block;
        overflow: hidden;
        border-block: 1px solid rgba(116, 84, 35, 0.14);
        background: rgba(255, 251, 243, 0.96);
        box-shadow: 0 8px 24px rgba(49, 38, 25, 0.08);
        backdrop-filter: blur(14px);
    }

    .mobile-quick-nav__inner {
        display: flex;
        gap: 8px;
        padding: 9px var(--page-gutter);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

    .mobile-quick-nav__inner::-webkit-scrollbar {
        display: none;
    }

    .mobile-quick-nav a {
        display: inline-flex;
        min-height: 42px;
        padding: 9px 15px;
        flex: 0 0 auto;
        align-items: center;
        color: #5c3a32;
        border: 1px solid rgba(116, 84, 35, 0.17);
        border-radius: 999px;
        background: #fffdf8;
        font-family: "Cinzel", serif;
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

@media print {
    .mobile-back-to-top,
    .mobile-quick-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}