/* ==========================================================================
   Responsive Stylesheet — Thirumurugan Samajam Trust
   ==========================================================================
   Mobile-first approach: base (smallest screen) styles live in style.css.
   This file contains ONLY min-width media queries for progressive enhancement,
   scaling the layout UP from mobile to large desktops.

   Breakpoints (em-based for accessibility — respects user font-size prefs):
   -------------------------------------------------------------------------
     30 em   (480 px)  — Large Phones
     48 em   (768 px)  — Tablets
     64 em   (1024 px) — Small Desktops  (navigation switches to horizontal)
     75 em   (1200 px) — Desktops
     87.5 em (1400 px) — Large Screens

   Key design principles:
   - Fluid typography via clamp() for smooth scaling between breakpoints
   - Progressive grid column expansion (1 → 2 → 3 → 4+ columns)
   - Desktop navigation with animated dropdown reveal at 64em
   - Print-optimized stylesheet at the end
   ========================================================================== */


/* ==========================================================================
   ULTRA-SMALL SCREENS (below 480px) — max-width overrides
   ==========================================================================
   These are safety-net fixes for 320px-class devices (iPhone SE, Galaxy S Mini).
   We use max-width here because these are downsizing corrections, not upscaling.
   ========================================================================== */

/* Topbar: hide address text, show only phone on tiny screens */
@media (max-width: 29.999em) {
  .topbar {
    font-size: var(--text-xs);
  }

  .topbar__left {
    gap: var(--space-2);
  }

  .topbar__left .topbar__divider,
  .topbar__left .topbar__item:not(a) {
    display: none;
  }

  .topbar__right {
    gap: var(--space-2);
  }

  .topbar__right .topbar__divider {
    display: none;
  }

  .topbar__link {
    font-size: var(--text-xs);
  }

  /* Hero: tighter padding */
  .hero--home {
    min-height: 70vh;
    padding: var(--space-12) var(--space-4);
  }

  .hero--inner,
  .hero--interior,
  .interior-hero {
    min-height: auto;
    padding: var(--space-10) var(--space-4) var(--space-8);
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  /* Section: reduced padding */
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .section--compact {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  /* Container: tighter side padding */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Section header */
  .section__header {
    margin-bottom: var(--space-8);
  }

  .section__title {
    font-size: var(--text-xl);
  }

  .section__subtitle {
    font-size: var(--text-base);
  }

  /* Cards: full bleed on tiny screens */
  .card__body {
    padding: var(--space-4);
  }

  .card__icon {
    width: 40px;
    height: 40px;
    font-size: var(--text-lg);
  }

  .card__icon--large {
    width: 52px;
    height: 52px;
  }

  /* Buttons: full width on tiny screens */
  .btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
  }

  .btn--block,
  .section__cta .btn {
    width: 100%;
  }

  /* Breadcrumb: compact */
  .breadcrumb {
    padding: var(--space-2) 0;
  }

  .breadcrumb__list {
    font-size: var(--text-xs);
    gap: var(--space-1);
  }

  /* Grids: force single column on ultra-small */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Stats: single column, left-aligned */
  .stats {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .stat__number {
    font-size: var(--text-3xl);
  }

  /* Footer: single column */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    text-align: center;
  }

  .footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  /* Donation form */
  .donation-form-wrap {
    padding: var(--space-4);
  }

  .donation-amounts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .donation-purposes {
    grid-template-columns: 1fr;
  }

  /* Trustee avatar: smaller on mobile */
  .trustee-card__image svg,
  .trustee-avatar {
    width: 90px;
    height: 90px;
  }

  /* Accordion: full width */
  .accordion {
    max-width: 100%;
  }

  /* Calendar: compact */
  .calendar__day {
    height: 2rem;
    font-size: var(--text-xs);
  }

  /* Activity cards: stack image above text */
  .activity-card {
    grid-template-columns: 1fr;
  }

  .activity-card--reverse {
    direction: ltr;
  }

  /* Visual placeholders: smaller */
  .visual-placeholder {
    aspect-ratio: 4 / 3;
  }

  .visual-placeholder svg {
    width: 60px;
    height: 60px;
  }

  /* Timings strip: stack */
  .timings-strip__grid {
    flex-direction: column;
    align-items: stretch;
  }

  /* Cookie banner: stack on mobile */
  .cookie-banner__inner {
    flex-direction: column;
    text-align: center;
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }

  /* CTA buttons: stack on tiny screens */
  .cta__actions,
  .cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta__actions .btn,
  .cta__buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Notice box: tighter padding */
  .notice-box {
    padding: var(--space-4) var(--space-5);
  }

  /* Data tables: smaller text */
  .data-table th,
  .table th {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .data-table td,
  .table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
}


/* ==========================================================================
   22.5em (360px) — COMMON PHONES (Galaxy S, Pixel)
   ==========================================================================
   Most Android phones are 360px+. Slightly more room than 320px.
   ========================================================================== */
@media (min-width: 22.5em) {
  .hero__cta-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__cta-group .btn {
    width: auto;
  }

  .donation-purposes {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   30em (480px) — LARGE PHONES
   ==========================================================================
   At this breakpoint we leave single-column stacking but introduce 2-col
   grids for compact content, slightly upscale typography, and begin
   shaping the gallery and stats layouts.
   ========================================================================== */
@media (min-width: 30em) {

  /* --------------------------------------------------------------------------
     Fluid Typography — step up from mobile base
     --------------------------------------------------------------------------
     Use clamp() so text scales fluidly between 480px and 768px viewports.
     The middle value (vi-based) provides smooth interpolation.
     -------------------------------------------------------------------------- */
  body {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16px → 17px */
  }

  h1 {
    font-size: var(--text-2xl, 1.875rem);
  }

  h2 {
    font-size: var(--text-xl, 1.5rem);
  }


  /* --------------------------------------------------------------------------
     Hero — slightly larger title for phones in landscape
     -------------------------------------------------------------------------- */
  .hero__title {
    font-size: var(--text-2xl, 1.875rem);
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: 0.75rem;
  }


  /* --------------------------------------------------------------------------
     Grids — introduce 2-column layout for all grid variants
     --------------------------------------------------------------------------
     On large phones, all multi-column grids collapse to 2 columns. This is
     the first step away from single-column stacking.
     -------------------------------------------------------------------------- */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .grid--6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Utility: force 2-col on mobile regardless of other breakpoints */
  .grid--2-mobile {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }


  /* --------------------------------------------------------------------------
     Cards — a touch more padding in the body area
     -------------------------------------------------------------------------- */
  .card__body {
    padding: 1.25rem;
  }


  /* --------------------------------------------------------------------------
     Gallery — 2 columns, tight gap for thumbnail density
     -------------------------------------------------------------------------- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }


  /* --------------------------------------------------------------------------
     Stats — shift from stacked list to 2-column grid
     --------------------------------------------------------------------------
     On mobile, stats are stacked vertically. At 480px we introduce a
     2x2 (or 2xN) grid so counters sit side-by-side.
     -------------------------------------------------------------------------- */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }


  /* --------------------------------------------------------------------------
     Calendar — scale day cell height for readability
     -------------------------------------------------------------------------- */
  .calendar__day {
    height: 2.5rem;        /* 40px */
    font-size: var(--text-sm, 0.875rem);
  }


  /* --------------------------------------------------------------------------
     Donation amounts — 2 across on large phones
     -------------------------------------------------------------------------- */
  .donation-amounts {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}


/* ==========================================================================
   48em (768px) — TABLETS
   ==========================================================================
   This is the first "real" breakpoint where layouts start feeling spacious.
   Grids expand, the footer moves to 2 columns, horizontal cards appear,
   forms lay out side-by-side, and the gallery gains a third column.
   ========================================================================== */
@media (min-width: 48em) {

  /* --------------------------------------------------------------------------
     Fluid Typography — tablet range
     --------------------------------------------------------------------------
     Scales body text from 17px to 18px across the tablet range.
     -------------------------------------------------------------------------- */
  body {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17px → 18px */
  }


  /* --------------------------------------------------------------------------
     Section Spacing — more vertical breathing room
     --------------------------------------------------------------------------
     Fluid padding that scales between 3rem and 4rem across tablet widths.
     -------------------------------------------------------------------------- */
  .section {
    padding-block: clamp(3rem, 2.5rem + 2vw, 4rem);
  }


  /* --------------------------------------------------------------------------
     Hero — scale up title and subtitle for tablet screens
     -------------------------------------------------------------------------- */
  .hero__title {
    font-size: var(--text-3xl, 2.25rem);
  }

  .hero__subtitle {
    font-size: var(--text-lg, 1.25rem);
  }

  .hero__actions {
    gap: 1rem;
  }


  /* --------------------------------------------------------------------------
     Grids — refine column counts for tablet
     --------------------------------------------------------------------------
     .grid--2: stays at 2 columns (already correct)
     .grid--3: still 2 columns (3 at desktop)
     .grid--4: 2 columns (promoted to 3, then 4 at desktop)
     .grid--6: jumps to 3 columns
     .grid--3-tablet: explicitly 3 columns at this breakpoint
     -------------------------------------------------------------------------- */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .grid--6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .grid--3-tablet {
    grid-template-columns: repeat(3, 1fr);
  }


  /* --------------------------------------------------------------------------
     Card — horizontal (side-by-side) layout
     --------------------------------------------------------------------------
     The image sits on the left, content on the right. At tablet the image
     column is a fixed 200px; it grows at larger breakpoints.
     -------------------------------------------------------------------------- */
  .card--horizontal {
    grid-template-columns: 200px 1fr;
  }

  .card--horizontal .card__image {
    aspect-ratio: auto;
    height: 100%;
    object-fit: cover;
  }


  /* --------------------------------------------------------------------------
     Footer — 2-column grid (from single-column stacking)
     -------------------------------------------------------------------------- */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }


  /* --------------------------------------------------------------------------
     Donation — amounts expand to 3 across
     -------------------------------------------------------------------------- */
  .donation-amounts {
    grid-template-columns: repeat(3, 1fr);
  }


  /* --------------------------------------------------------------------------
     Gallery — 3 columns with slightly wider gaps
     -------------------------------------------------------------------------- */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }


  /* --------------------------------------------------------------------------
     Forms — horizontal layout for form rows
     --------------------------------------------------------------------------
     Form rows switch from stacked to side-by-side. Each .form-group within
     a .form-row takes equal space. The --2col variant uses CSS Grid.
     -------------------------------------------------------------------------- */
  .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .form-row > .form-group {
    flex: 1 1 0%;
    min-width: 0;
  }

  .form-row--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }


  /* --------------------------------------------------------------------------
     Accordion — center and cap width for readability
     -------------------------------------------------------------------------- */
  .accordion {
    max-width: 48rem;
    margin-inline: auto;
  }


  /* --------------------------------------------------------------------------
     Timings Strip — horizontal row layout
     --------------------------------------------------------------------------
     Switch from vertical stack to a horizontally-wrapped flex row, centered.
     -------------------------------------------------------------------------- */
  .timings-strip__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }


  /* --------------------------------------------------------------------------
     Activity Cards — side-by-side image and text
     --------------------------------------------------------------------------
     Each activity card becomes a 2-column grid. The --reverse modifier
     swaps the visual order using CSS direction trick.
     -------------------------------------------------------------------------- */
  .activity-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }

  .activity-card--reverse {
    direction: rtl;
  }

  .activity-card--reverse > * {
    direction: ltr;
  }


  /* --------------------------------------------------------------------------
     Calendar — horizontal header and scaled cells
     -------------------------------------------------------------------------- */
  .calendar__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .calendar__day {
    height: 2.75rem;   /* 44px */
    font-size: var(--text-sm, 0.875rem);
  }


  /* --------------------------------------------------------------------------
     Lightbox — give more viewport to the image on tablets
     -------------------------------------------------------------------------- */
  .lightbox__image {
    max-width: 85vw;
    max-height: 85vh;
  }

  /* Donation grid: 2-column at tablet */
  .donation-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  /* Contact info cards: ensure proper stacking */
  .contact-info-grid {
    gap: 1rem;
  }

  /* Trustee avatar: proper size */
  .trustee-card__image svg {
    width: 110px;
    height: 110px;
  }
}


/* ==========================================================================
   64em (1024px) — SMALL DESKTOPS
   ==========================================================================
   The critical breakpoint: navigation switches from mobile hamburger drawer
   to a full horizontal desktop nav bar with animated dropdown submenus.
   Grids expand further, content layouts gain sidebars, and the footer
   reaches its full 4-column form.
   ========================================================================== */
@media (min-width: 64em) {

  /* --------------------------------------------------------------------------
     Typography — desktop body size
     -------------------------------------------------------------------------- */
  body {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17px → 18px */
  }


  /* --------------------------------------------------------------------------
     Section Spacing — generous desktop padding
     --------------------------------------------------------------------------
     Fluid padding scaling between 4rem and 5rem.
     -------------------------------------------------------------------------- */
  .section {
    padding-block: clamp(4rem, 3rem + 2.5vw, 5rem);
  }


  /* --------------------------------------------------------------------------
     Hero — large desktop hero treatment
     -------------------------------------------------------------------------- */
  .hero__title {
    font-size: var(--text-4xl, 3rem);
  }

  .hero__subtitle {
    font-size: var(--text-xl, 1.5rem);
  }

  .hero__content {
    max-width: 48rem;
    margin-inline: auto;
  }

  .hero__actions {
    gap: 1.25rem;
  }


  /* ========================================================================
     NAVIGATION — Desktop Horizontal Layout
     ========================================================================
     At 64em the mobile hamburger menu is hidden and replaced with a fully
     horizontal navigation bar. Dropdowns are absolutely positioned and
     revealed via hover and focus-within with smooth CSS transitions.
     ======================================================================== */

  /* Hide the hamburger toggle button on desktop
     ---------------------------------------------------------------------- */
  .hamburger {
    display: none;
  }

  /* Desktop nav container — override all mobile drawer styles
     ---------------------------------------------------------------------- */
  .header__nav {
    display: flex;
    align-items: center;
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    transform: none;
    visibility: visible;
    opacity: 1;
  }

  /* Hide mobile-only nav elements and overlay backdrop
     ---------------------------------------------------------------------- */
  .mobile-nav {
    display: none;
  }

  .mobile-nav__overlay {
    display: none;
  }

  /* Horizontal nav list — flex row, no wrapping
     ---------------------------------------------------------------------- */
  .nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Nav items — relative for dropdown positioning
     ---------------------------------------------------------------------- */
  .nav-item {
    position: relative;
  }

  /* Nav links — inline, padded, no bottom border from mobile
     ---------------------------------------------------------------------- */
  .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    border-bottom: none;
    transition: color 0.2s ease;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--color-saffron, #FF6B00);
  }

  .nav-link.is-active {
    color: var(--color-saffron, #FF6B00);
  }

  /* Dropdown submenu — positioned below parent, hidden by default
     ---------------------------------------------------------------------- */
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
    padding-block: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease,
                transform 0.25s ease,
                visibility 0.25s;
    z-index: var(--z-dropdown, 100);
    pointer-events: none;
  }

  /* Reveal dropdown on hover or keyboard focus-within
     ---------------------------------------------------------------------- */
  .nav-item--dropdown:hover > .nav-dropdown,
  .nav-item--dropdown:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Dropdown links — full-width, padded, hover highlight
     ---------------------------------------------------------------------- */
  .nav-dropdown .nav-link,
  .nav-dropdown__link {
    display: block;
    padding: 0.625rem 1.25rem;
    white-space: nowrap;
  }

  .nav-dropdown .nav-link:hover,
  .nav-dropdown__link:hover {
    background: var(--color-bg-alt, #f5f5f5);
    color: var(--color-saffron, #FF6B00);
  }

  /* Dropdown caret indicator (CSS-only arrow)
     ---------------------------------------------------------------------- */
  .nav-item--dropdown > .nav-link::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.4em;
    vertical-align: middle;
    transition: transform 0.25s ease;
  }

  /* Rotate caret upward when dropdown is open */
  .nav-item--dropdown:hover > .nav-link::after,
  .nav-item--dropdown:focus-within > .nav-link::after {
    transform: rotate(-135deg);
  }

  /* ========================================================================
     END NAVIGATION
     ======================================================================== */


  /* --------------------------------------------------------------------------
     Grids — 3-column and 6-column layouts
     -------------------------------------------------------------------------- */
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .grid--6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
  }


  /* --------------------------------------------------------------------------
     Card Horizontal — wider image column for desktop
     -------------------------------------------------------------------------- */
  .card--horizontal {
    grid-template-columns: 280px 1fr;
  }

  .card--horizontal .card__body {
    padding: 2rem;
  }


  /* --------------------------------------------------------------------------
     Footer — full 4-column grid
     -------------------------------------------------------------------------- */
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }


  /* --------------------------------------------------------------------------
     Donation — 2-column layout: form on left, summary sidebar on right
     --------------------------------------------------------------------------
     The donation page splits into a wider form column and a narrower
     summary/sidebar. This gives a clean desktop checkout-style layout.
     -------------------------------------------------------------------------- */
  .donation-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: start;
  }

  .donation-amounts {
    grid-template-columns: repeat(3, 1fr);
  }


  /* --------------------------------------------------------------------------
     Gallery — 4 columns on small desktops
     -------------------------------------------------------------------------- */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }


  /* --------------------------------------------------------------------------
     Stats — full horizontal row with generous spacing
     --------------------------------------------------------------------------
     At desktop, stats flow into a single horizontal row using flexbox.
     This replaces the 2-column grid from tablet.
     -------------------------------------------------------------------------- */
  .stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
  }

  .stat {
    text-align: center;
    flex-shrink: 0;
  }


  /* --------------------------------------------------------------------------
     Calendar — wider and larger cells
     -------------------------------------------------------------------------- */
  .calendar {
    max-width: 56rem;
    margin-inline: auto;
  }

  .calendar__day {
    height: 3rem;       /* 48px */
    font-size: 1rem;
  }


  /* --------------------------------------------------------------------------
     Content with Sidebar — 2-column layout
     --------------------------------------------------------------------------
     Main content area (2fr) alongside a narrower sidebar (1fr) for
     related links, filters, or secondary information.
     -------------------------------------------------------------------------- */
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
  }


  /* --------------------------------------------------------------------------
     Activity Cards — wider gap for desktop
     -------------------------------------------------------------------------- */
  .activity-card {
    gap: 2rem;
  }


  /* --------------------------------------------------------------------------
     Lightbox — constrain image for comfortable desktop viewing
     -------------------------------------------------------------------------- */
  .lightbox__image {
    max-width: 80vw;
    max-height: 80vh;
  }

  .lightbox__nav {
    font-size: 2rem;
    padding: 0.75rem;
  }

  /* Trustee avatar: full size */
  .trustee-card__image svg {
    width: 120px;
    height: 120px;
  }

  /* Interior hero: proper spacing */
  .interior-hero {
    padding: var(--space-16) var(--container-pad) var(--space-12);
  }
}


/* ==========================================================================
   75em (1200px) — DESKTOPS
   ==========================================================================
   Fine-tuning for standard desktop monitors. Container widths are capped,
   grids reach their full column counts, cards and galleries get more
   generous spacing, and the hero scales to its largest form.
   ========================================================================== */
@media (min-width: 75em) {

  /* --------------------------------------------------------------------------
     Container — cap width for comfortable reading
     --------------------------------------------------------------------------
     Prevents content from stretching edge-to-edge on wide monitors.
     -------------------------------------------------------------------------- */
  .container {
    max-width: var(--container-max, 72rem);
    margin-inline: auto;
  }


  /* --------------------------------------------------------------------------
     Typography — body settles at 18px
     -------------------------------------------------------------------------- */
  body {
    font-size: 1.125rem; /* 18px */
  }


  /* --------------------------------------------------------------------------
     Section Spacing — generous desktop padding
     -------------------------------------------------------------------------- */
  .section {
    padding-block: clamp(4.5rem, 3.5rem + 2vw, 5.5rem);
  }


  /* --------------------------------------------------------------------------
     Hero — full-size desktop hero
     -------------------------------------------------------------------------- */
  .hero__title {
    font-size: var(--text-5xl, 3.75rem);
  }

  .hero__subtitle {
    font-size: var(--text-xl, 1.5rem);
    max-width: 40rem;
    margin-inline: auto;
  }

  .hero__content {
    max-width: 54rem;
  }


  /* --------------------------------------------------------------------------
     Grids — .grid--4 reaches its full 4-column layout
     -------------------------------------------------------------------------- */
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }


  /* --------------------------------------------------------------------------
     Cards — more padding and wider horizontal image column
     -------------------------------------------------------------------------- */
  .card__body {
    padding: 1.75rem;
  }

  .card--horizontal {
    grid-template-columns: 320px 1fr;
  }

  .card--horizontal .card__body {
    padding: 2.25rem;
  }


  /* --------------------------------------------------------------------------
     Donation — wider gap between form and sidebar
     -------------------------------------------------------------------------- */
  .donation-grid {
    gap: 3rem;
  }

  .donation-amounts {
    grid-template-columns: repeat(4, 1fr);
  }


  /* --------------------------------------------------------------------------
     Footer — wider gaps between columns
     -------------------------------------------------------------------------- */
  .footer__grid {
    gap: 3rem;
  }


  /* --------------------------------------------------------------------------
     Gallery — wider gaps at desktop
     -------------------------------------------------------------------------- */
  .gallery-grid {
    gap: 1.5rem;
  }


  /* --------------------------------------------------------------------------
     Lightbox — slightly more constrained for comfort
     -------------------------------------------------------------------------- */
  .lightbox__image {
    max-width: 75vw;
    max-height: 85vh;
  }

  .lightbox__nav {
    font-size: 2.25rem;
  }


  /* --------------------------------------------------------------------------
     Content with Sidebar — wider gap
     -------------------------------------------------------------------------- */
  .content-with-sidebar {
    gap: 3rem;
  }


  /* --------------------------------------------------------------------------
     Calendar — slightly larger cells
     -------------------------------------------------------------------------- */
  .calendar__day {
    height: 3.25rem;   /* 52px */
  }


  /* --------------------------------------------------------------------------
     Timings Strip — more spacing between items
     -------------------------------------------------------------------------- */
  .timings-strip__grid {
    gap: 2rem;
  }
}


/* ==========================================================================
   87.5em (1400px) — LARGE SCREENS
   ==========================================================================
   Ultra-wide refinements: wider containers, more generous hero padding,
   gallery expands to 5 columns, and stats get extra breathing room.
   These are subtle polish tweaks for large displays.
   ========================================================================== */
@media (min-width: 87.5em) {

  /* --------------------------------------------------------------------------
     Wide Container — allow content to stretch on large monitors
     -------------------------------------------------------------------------- */
  .container--wide {
    max-width: var(--container-wide-max, 85rem);
    margin-inline: auto;
  }

  .container {
    max-width: var(--container-max, 75rem);
  }


  /* --------------------------------------------------------------------------
     Hero — generous vertical padding for cinematic feel
     -------------------------------------------------------------------------- */
  .section--hero {
    padding-block: 6rem;
  }

  .hero__title {
    font-size: clamp(3.75rem, 3rem + 1.5vw, 4.5rem);
  }


  /* --------------------------------------------------------------------------
     Section Spacing — maximum comfort
     -------------------------------------------------------------------------- */
  .section {
    padding-block: clamp(5rem, 4rem + 2vw, 6rem);
  }


  /* --------------------------------------------------------------------------
     Gallery — 5 columns for large screens
     --------------------------------------------------------------------------
     This is the maximum column count. On ultra-wide displays, thumbnails
     remain a comfortable size while showing more content at once.
     -------------------------------------------------------------------------- */
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }


  /* --------------------------------------------------------------------------
     Stats — extra breathing room between items
     -------------------------------------------------------------------------- */
  .stats {
    gap: 4rem;
  }


  /* --------------------------------------------------------------------------
     Card Horizontal — even wider image on large screens
     -------------------------------------------------------------------------- */
  .card--horizontal {
    grid-template-columns: 360px 1fr;
  }


  /* --------------------------------------------------------------------------
     Activity Cards — wider gap for ultra-wide
     -------------------------------------------------------------------------- */
  .activity-card {
    gap: 3rem;
  }


  /* --------------------------------------------------------------------------
     Content with Sidebar — wider sidebar gap
     -------------------------------------------------------------------------- */
  .content-with-sidebar {
    gap: 4rem;
  }


  /* --------------------------------------------------------------------------
     Donation Grid — wider gap on large screens
     -------------------------------------------------------------------------- */
  .donation-grid {
    gap: 4rem;
  }


  /* --------------------------------------------------------------------------
     Footer — maximum gap between columns
     -------------------------------------------------------------------------- */
  .footer__grid {
    gap: 3.5rem;
  }


  /* --------------------------------------------------------------------------
     Calendar — max cell size
     -------------------------------------------------------------------------- */
  .calendar {
    max-width: 64rem;
  }

  .calendar__day {
    height: 3.5rem;     /* 56px */
  }
}


/* ==========================================================================
   PRINT STYLES
   ==========================================================================
   Comprehensive print stylesheet that strips all interactive/decorative
   elements, forces clean black-on-white typography, reveals link URLs,
   and manages page breaks for a professional printed output.

   Note: !important is used deliberately here to override inline styles
   and specificity from the screen stylesheets.
   ========================================================================== */
@media print {

  /* --------------------------------------------------------------------------
     Hide interactive and non-essential elements
     --------------------------------------------------------------------------
     Everything that serves no purpose on paper: navigation, buttons,
     overlays, filters, scroll indicators, cookie banners, etc.
     -------------------------------------------------------------------------- */
  header,
  .header,
  footer,
  .footer,
  .btn,
  .btn--primary,
  .btn--secondary,
  .back-to-top,
  .hamburger,
  .header__nav,
  .mobile-nav,
  .mobile-nav__overlay,
  .nav-dropdown,
  .gallery-filters,
  .lightbox,
  .lightbox__nav,
  .topbar,
  .cookie-banner,
  .scroll-indicator,
  .breadcrumb,
  .donation-form,
  .calendar__nav,
  .accordion__toggle,
  video,
  audio,
  iframe {
    display: none !important;
  }


  /* --------------------------------------------------------------------------
     Base Typography — clean, legible print text
     --------------------------------------------------------------------------
     12pt is standard for body text in print. Black on white with
     comfortable 1.6 line-height for readability.
     -------------------------------------------------------------------------- */
  body {
    font-size: 12pt;
    line-height: 1.6;
    color: #000 !important;
    background: #fff !important;
    font-family: "Georgia", "Times New Roman", serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  /* --------------------------------------------------------------------------
     Strip all decorative styles
     --------------------------------------------------------------------------
     Remove shadows, text-shadows, gradients, and background colors/images.
     This ensures clean, ink-efficient output.
     -------------------------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }


  /* --------------------------------------------------------------------------
     Links — visible and informative
     --------------------------------------------------------------------------
     Links are underlined in black. External links (http) append their URL
     in parentheses so the reader can follow them manually.
     -------------------------------------------------------------------------- */
  a,
  a:visited {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Show URL after external links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
    word-break: break-all;
  }

  /* Do not show URL for anchors, JS links, or tel/mailto */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "" !important;
  }


  /* --------------------------------------------------------------------------
     Headings — print-appropriate sizes
     --------------------------------------------------------------------------
     Slightly smaller than screen sizes. Headings never break after
     themselves (they stay with their content on the same page).
     -------------------------------------------------------------------------- */
  h1 {
    font-size: 24pt;
    margin-block: 1rem 0.5rem;
  }

  h2 {
    font-size: 20pt;
    margin-block: 1rem 0.5rem;
  }

  h3 {
    font-size: 16pt;
    margin-block: 0.75rem 0.5rem;
  }

  h4 {
    font-size: 14pt;
    margin-block: 0.75rem 0.25rem;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
    orphans: 3;
    widows: 3;
  }


  /* --------------------------------------------------------------------------
     Paragraphs and flowing text — orphan/widow control
     --------------------------------------------------------------------------
     Prevent single lines from being stranded at the top or bottom of a page.
     -------------------------------------------------------------------------- */
  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  blockquote {
    border-left: 3pt solid #999;
    padding-left: 12pt;
    margin-left: 0;
    font-style: italic;
  }


  /* --------------------------------------------------------------------------
     Images — constrain and border
     --------------------------------------------------------------------------
     Keep images within the printable area. Add a light border so they
     stand out from the white paper background.
     -------------------------------------------------------------------------- */
  img {
    max-width: 100% !important;
    height: auto !important;
    border: 1pt solid #ccc;
    page-break-inside: avoid;
    break-inside: avoid;
  }


  /* --------------------------------------------------------------------------
     Cards — clean bordered boxes, never split across pages
     -------------------------------------------------------------------------- */
  .card {
    border: 1pt solid #ccc;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .card__image {
    max-height: 200pt;
    object-fit: contain;
  }


  /* --------------------------------------------------------------------------
     Grids — collapse to single column for print
     --------------------------------------------------------------------------
     Multi-column layouts do not work well on paper. Everything stacks
     vertically for a clean, linear reading flow.
     -------------------------------------------------------------------------- */
  .grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6,
  .grid--2-mobile,
  .grid--3-tablet {
    display: block !important;
  }

  .grid > *,
  .grid--2 > *,
  .grid--3 > *,
  .grid--4 > *,
  .grid--6 > * {
    margin-bottom: 1rem;
  }


  /* --------------------------------------------------------------------------
     Section padding — minimal for print
     -------------------------------------------------------------------------- */
  .section {
    padding: 0.75rem 0 !important;
  }


  /* --------------------------------------------------------------------------
     Tables — bordered for clarity
     -------------------------------------------------------------------------- */
  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: auto;
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  th, td {
    border: 1pt solid #999;
    padding: 6pt 8pt;
    text-align: left;
  }

  th {
    font-weight: bold;
    background-color: #f0f0f0 !important;
  }


  /* --------------------------------------------------------------------------
     Content with Sidebar — stack for print
     -------------------------------------------------------------------------- */
  .content-with-sidebar {
    display: block !important;
  }


  /* --------------------------------------------------------------------------
     Stats — simple vertical list for print
     -------------------------------------------------------------------------- */
  .stats {
    display: block !important;
  }

  .stat {
    margin-bottom: 0.5rem;
    text-align: left;
  }


  /* --------------------------------------------------------------------------
     Footer Grid — single column
     -------------------------------------------------------------------------- */
  .footer__grid {
    display: block !important;
  }


  /* --------------------------------------------------------------------------
     Activity cards and horizontal cards — stack vertically
     -------------------------------------------------------------------------- */
  .activity-card,
  .card--horizontal {
    display: block !important;
  }


  /* --------------------------------------------------------------------------
     Donation grid — stack vertically for print
     -------------------------------------------------------------------------- */
  .donation-grid {
    display: block !important;
  }


  /* --------------------------------------------------------------------------
     Page margins — standard print margins
     -------------------------------------------------------------------------- */
  @page {
    margin: 2cm;
    size: A4;
  }

  @page :first {
    margin-top: 3cm;
  }

  /* Print-friendly heroes */
  .hero,
  .hero--home,
  .hero--inner,
  .hero--interior,
  .interior-hero {
    min-height: auto !important;
    padding: 1rem 0 !important;
    background: none !important;
    color: #000 !important;
  }

  .hero__title,
  .interior-hero__title {
    color: #000 !important;
    text-shadow: none !important;
    font-size: 20pt;
  }

  .hero__overlay,
  .hero__decoration,
  .hero::before,
  .hero::after,
  .hero--inner::before,
  .hero--inner::after,
  .hero--interior::before,
  .hero--interior::after,
  .interior-hero::before,
  .interior-hero::after {
    display: none !important;
  }

  /* Reveal accordion content */
  .accordion__panel {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Hide skip link and theme toggle */
  .skip-link,
  .theme-toggle {
    display: none !important;
  }
}