/* =========================================================
   Responsive breakpoints
   ========================================================= */

/* Large tablet and down */
@media (max-width: 1024px) {
  section { padding: 64px 0; }

  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { margin-left: 0; max-width: 100%; }
  .hero-card-1 { top: 4%; left: -20px; }
  .hero-card-2 { bottom: 6%; right: -20px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

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

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

  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-image { max-width: 520px; margin: 0 auto; }

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

  .prize-grid { grid-template-columns: 1fr; gap: 24px; }
  .prize-amount { text-align: left; }
  .prize-banner { padding: 40px 32px; }

  .footer-grid { grid-template-columns: 1.45fr 1fr 1fr; gap: 36px; }

  .campaign-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .donation-sidebar { position: static; }

  .campaign-content { grid-template-columns: 1fr; gap: 32px; }

  .donate-grid { grid-template-columns: 1fr; gap: 20px; }
  .donate-recap { position: static; }

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

  .values-grid { grid-template-columns: 1fr; }
}

/* Tablet and down */
@media (max-width: 768px) {
  :root { --container: 100%; }

  section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }

  .nav-links a { padding: 14px 16px; border-radius: 10px; }

  .hero { padding: 48px 0 64px; }
  .hero h1 { font-size: 2.25rem; }
  .hero .lead { font-size: 1rem; }

  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; }

  .campaigns-grid { grid-template-columns: 1fr; gap: 20px; }

  .testimonials-grid { grid-template-columns: 1fr; }

  .causes-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }

  .footer-bottom { flex-direction: column; text-align: center; }

  .how-steps { grid-template-columns: 1fr; }

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

  .filters-bar { padding: 14px; }
  .filters-bar .search-input { min-width: 100%; }

  .page-hero { padding: 56px 0 40px; }

  .prize-amount { font-size: 5rem; }
  .prize-banner { padding: 32px 24px; }

  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
  .timeline-year { font-size: 1.375rem; }

  .campaign-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; }

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

  .hero-card { padding: 12px 14px; }
  .hero-card-value { font-size: 1rem; }

  .form-row { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat-item .value { font-size: 1.75rem; }

  .causes-grid { grid-template-columns: 1fr; }

  .hero-card-1 { left: -10px; top: 4%; transform: scale(0.85); transform-origin: top left; }
  .hero-card-2 { right: -10px; bottom: 4%; transform: scale(0.85); transform-origin: bottom right; }

  .prize-amount { font-size: 4rem; }

  .modal { border-radius: var(--radius); }
  .modal-head, .modal-body { padding: 20px; }

  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* =========================================================
   Sidebar — mobile defaults (before media queries kick in).
   On mobile the sidebar is a continuation of cd-card (edge-to-edge,
   white background, no rounded corners). On desktop a media query
   below repositions it as a sticky right-column card.
   ========================================================= */
.cd-sidebar {
  margin: 0 -16px;
}
.cd-sidebar-card {
  background: #fff;
  padding: 18px 20px 22px;
  /* Mobile: no shadow — sits flush below cd-card as one white surface.
     Desktop media query below re-adds a shadow when the sidebar lifts
     into its own column. */
}
.cd-sidebar-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 18px 0 14px;
}
.cd-card { margin-bottom: 0; }
.cd-sidebar { margin-bottom: 0; }

/* Mobile default: hide the desktop-inline donations block,
   show the standalone #cd-donations card below story/organizer. */
.cd-donations-inline { display: none; }

.cd-donations { margin: 0 -16px 16px; }
.cd-donations-card {
  background: #fff;
  padding: 18px 20px 22px;
  box-shadow: 0 1px 2px rgba(16, 37, 26, 0.04), 0 6px 18px rgba(16, 37, 26, 0.06);
}
/* The donations block reuses .cd-sidebar-divider visually,
   but on mobile it's the first thing in its own card so hide it. */
.cd-donations .cd-sidebar-divider { display: none; }

/* 600–767px (large phones / small tablets / landscape): still one column,
   but neutralise the edge-to-edge negative margins so the sidebar and the
   standalone donations block line up with the rounded, contained card above
   them (the rest of that polish lives in style.css). These live here — after
   the unconditional mobile defaults above — so they actually win. */
@media (min-width: 600px) and (max-width: 767px) {
  .cd-sidebar { margin: 0; }
  .cd-donations { margin: 0 0 16px; }
}

/* =========================================================
   Desktop polish (≥ 880px)
   The base CSS was authored mobile-first; this block undoes
   the mobile-only patterns so the layout looks proper on
   wider screens.
   ========================================================= */
@media (min-width: 880px) {
  /* ---------- header: horizontal nav, hide hamburger ---------- */
  .menu-toggle,
  .nav-spacer { display: none !important; }

  .nav-bar { padding: 18px 0; gap: 24px; }

  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
    padding: 0;
    gap: 6px;
    width: auto;
    max-height: none;
    overflow: visible;
    margin-left: auto;
  }
  .nav-links li { width: auto; }
  .nav-links a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .nav-links a:hover { background: var(--brand-soft); color: var(--brand-deep); }
  .nav-links a.active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }

  /* brand stays on the left on desktop (override the mobile absolute center) */
  .brand {
    position: static;
    transform: none;
  }
  .brand-icon { width: 38px; height: 38px; }
  .brand-name { font-size: 1rem; }
  .brand-tag  { font-size: 0.75rem; }
  .brand-wordmark { height: 42px; }
}

/* =========================================================
   Campaign detail: two-column layout from tablet-portrait up.
   Starts at 768px (iPad portrait, large foldables) instead of
   880px so those widths get the main + sticky-sidebar layout
   rather than a narrow column marooned in the middle of the
   screen. The sidebar width is fluid (clamp) so it never
   crowds the story column on the smaller tablets.
   ========================================================= */
@media (min-width: 768px) {
  .cd-shell {
    max-width: 1160px;
    padding: 28px clamp(16px, 3vw, 24px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 380px);
    grid-template-areas:
      "card sidebar"
      "main sidebar";
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: 18px;
    align-items: start;
  }
  .cd-related-wrap {
    margin-top: 32px;
    padding: clamp(40px, 5vw, 56px) clamp(16px, 3vw, 24px) 72px;
  }
  .cd-related-wrap .cd-related-section {
    max-width: 1160px;
  }
  .cd-related-wrap .cd-related-section { margin: 0; }
  /* Donations live inline inside the sidebar card on desktop;
     the standalone #cd-donations block is mobile-only. */
  #cd-donations { display: none; }
  .cd-donations-inline { display: block; }
  .cd-card    { grid-area: card; margin: 0; }
  .cd-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 90px;
    align-self: start;
    margin: 0;
  }
  .cd-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }
  .cd-related-section {
    grid-area: related;
    margin: 24px 0 0;
  }
  .cd-sidebar-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(16, 37, 26, 0.04), 0 10px 32px rgba(16, 37, 26, 0.10);
  }

  .cd-card {
    border-radius: 18px;
    margin: 0;
    box-shadow: 0 1px 2px rgba(16, 37, 26, 0.04), 0 6px 18px rgba(16, 37, 26, 0.06);
  }
  .cd-section {
    border-radius: 18px;
    margin: 0;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 32px);
  }

  /* hero on desktop: keep landscape but cap height */
  .cd-hero { aspect-ratio: 4 / 3; max-height: 540px; }
  .cd-hero-title { font-size: 1.75rem; }

  /* sidebar inner styling */
  .cd-sidebar .cd-stats-row {
    gap: 18px;
    align-items: center;
  }
  .cd-sidebar .cd-ring { width: 64px; height: 64px; }
  .cd-sidebar .cd-ring-pct { font-size: 0.875rem; }
  .cd-sidebar .cd-raised-amt { font-size: 1.625rem; }
  .cd-sidebar .cd-raised-suffix { font-size: 0.9375rem; }

  .cd-sidebar .cd-actions { margin-top: 18px; gap: 10px; }
  .cd-sidebar .cd-btn { height: 50px; font-size: 1rem; }
  .cd-sidebar .cd-btn-share { width: 50px; }

  .cd-sidebar-divider {
    height: 1px;
    background: var(--line-soft);
    margin: 22px 0 18px;
  }

  /* donor list inside sidebar */
  .cd-sidebar .cd-recent-row {
    color: var(--brand-darker);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .cd-sidebar .cd-donor-list { margin-top: 4px; }
  .cd-sidebar .cd-donor-row { padding: 10px 0; gap: 12px; }
  .cd-sidebar .cd-donor-avatar { width: 36px; height: 36px; font-size: 0.875rem; }

  /* related grid → fluid columns: 2-up on a tablet, up to 4-up on a
     wide desktop, driven by available width rather than a fixed count. */
  .cd-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 20px;
  }

  /* story spacing */
  .cd-story-body p { font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
  .cd-story-body p.cd-story-lead { font-size: 1.0625rem; }
}

@media (min-width: 880px) {
  /* ---------- footer polish ---------- */
  .site-footer { padding: 64px 0 28px; }
  .footer-grid {
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 64px;
    margin-bottom: 48px;
  }
  .footer-col h4 {
    font-size: 1rem;
    color: var(--ink, #10251a);
    margin-bottom: 22px;
    letter-spacing: 0;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; }
  .footer-col li { margin-bottom: 14px; }
  .footer-col a {
    color: var(--ink, #10251a);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--transition);
  }
  .footer-col a:hover { color: #000; text-decoration: underline; }
  .footer-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 20px;
    border-top: 1px solid #dfe7e1;
    gap: 24px;
    margin-top: 0;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .footer-locale { margin: 0; padding: 0; border: 0; }
  .footer-bottom {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    justify-content: flex-start;
  }
  .footer-bottom > div { font-size: 0.8125rem; color: var(--ink-soft, #405247); }

  /* ---------- causes (categories) grid breathing room ---------- */
  .causes-grid { gap: 24px; }

  /* ---------- contact form: cap width like donate ---------- */
  .contact-grid { padding: 16px 0; }

  /* ---------- campaigns list: wider container, larger search ---------- */
  .filters-bar { padding: 12px; gap: 14px; }
  .filters-bar .search-input { padding: 14px 18px 14px 48px; }
}

/* =========================================================
   Wider desktop (≥ 1200px) — extra breathing room
   ========================================================= */
@media (min-width: 1200px) {
  .cd-shell { max-width: 1200px; padding: 40px 32px 100px; gap: 40px; }
}

/* Print */
@media print {
  .site-header, .site-footer, .cta-final, .donation-sidebar, .share-row { display: none; }
  body { background: #fff; color: #000; }
}

/* Desktop header: centered brand, navigation at left, actions at right. */
@media (min-width: 880px) {
  .site-header .nav-bar { justify-content: flex-start; }
  .site-header .brand {
    position: absolute;
    left: 50%;
    z-index: 1;
    margin: 0;
    transform: translateX(-50%);
  }
  .site-header .nav-links {
    margin-left: 0;
    margin-right: auto;
  }
  .site-header .nav-search-btn { margin-left: auto; }
}

/* The supplied SVG has equal side whitespace; offset it so its visible art
   aligns with the address text below it. */
.site-footer .footer-logo { transform: translateX(-18.2%); }
/* Refined mobile header controls: soft squircle buttons and balanced icons. */
@media (max-width: 879px) {
  .site-header .menu-toggle,
  .site-header .nav-search-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    color: #024924;
    background: linear-gradient(145deg, #ffffff 0%, #f3f8f5 100%);
    border: 1px solid #d7e5db;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(27, 79, 49, 0.08);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  }
  .site-header .menu-toggle:hover,
  .site-header .nav-search-btn:hover {
    color: #035c2f;
    background: #eef5f0;
    border-color: #bcd8c7;
    box-shadow: 0 7px 18px rgba(27, 79, 49, 0.12);
    transform: translateY(-1px);
  }
  .site-header .menu-toggle:active,
  .site-header .nav-search-btn:active {
    box-shadow: 0 3px 9px rgba(27, 79, 49, 0.09);
    transform: translateY(0);
  }
  .site-header .menu-toggle:focus-visible,
  .site-header .nav-search-btn:focus-visible {
    outline: 3px solid rgba(4, 106, 54, 0.22);
    outline-offset: 2px;
  }
  .site-header .menu-toggle.is-open,
  .site-header .nav-search-btn[aria-expanded="true"] {
    color: #024924;
    background: #e7f3eb;
    border-color: #9bc8ad;
  }

  /* Keep search visually neutral while preserving the menu's brand styling. */
  .site-header .nav-search-btn {
    color: #405247;
    background: linear-gradient(145deg, #ffffff 0%, #f7f9f7 100%);
    border-color: #dfe5e1;
    box-shadow: 0 5px 16px rgba(23, 33, 26, 0.06);
  }
  .site-header .nav-search-btn:hover,
  .site-header .nav-search-btn[aria-expanded="true"] {
    color: #17211a;
    background: #edf2ee;
    border-color: #cbd5ce;
  }
  .site-header .nav-search-btn:focus-visible {
    outline-color: rgba(23, 33, 26, 0.16);
  }
  .menu-toggle-lines {
    width: 20px;
    height: 16px;
  }
  .menu-toggle-lines span {
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: top 200ms ease, width 200ms ease, opacity 160ms ease, transform 200ms ease;
  }
  .menu-toggle-lines span:first-child { top: 1px; }
  .menu-toggle-lines span:nth-child(2) { top: 7px; width: 14px; }
  .menu-toggle-lines span:last-child { top: 13px; width: 20px; }
  .menu-toggle.is-open .menu-toggle-lines span:first-child {
    top: 7px;
    width: 20px;
    transform: rotate(45deg);
  }
  .menu-toggle.is-open .menu-toggle-lines span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.35);
  }
  .menu-toggle.is-open .menu-toggle-lines span:last-child {
    top: 7px;
    width: 20px;
    transform: rotate(-45deg);
  }
  .site-header .nav-search-icon {
    width: 21px;
    height: 21px;
  }
}
/* Compact floating mobile menu, aligned with the light application shell. */
@media (max-width: 879px) {
  .site-header .nav-links {
    position: fixed;
    top: 76px;
    right: auto;
    bottom: auto;
    left: 14px;
    width: min(260px, calc(100vw - 28px));
    min-height: 0;
    max-height: calc(100dvh - 92px);
    padding: 8px;
    gap: 2px;
    overflow-y: auto;
    color: #10251a;
    background: #ffffff;
    border: 1px solid #dce6df;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(20, 56, 35, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(0.985);
    transform-origin: top center;
    transition: opacity 160ms ease, visibility 160ms ease, transform 190ms ease;
  }
  .site-header .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .site-header .nav-links li { width: 100%; }
  .site-header .nav-links li > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: #10251a;
    background: transparent;
    border: 0;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .site-header .nav-links li > a:hover {
    color: #035c2f;
    background: #f3f8f5;
  }
  .site-header .nav-links li > a.active {
    color: #035c2f;
    background: #e7f3eb;
  }
  .site-header .nav-links .nav-link-index { display: none; }
  .nav-links.open li { animation: navMenuCompactItemIn 200ms both; }
  .nav-links.open li:nth-child(2) { animation-delay: 25ms; }
  .nav-links.open li:nth-child(3) { animation-delay: 50ms; }
}
@keyframes navMenuCompactItemIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links,
  .nav-links.open li { animation: none; transition: none; }
}
/* =========================================================
   Desktop-only framing: campaign detail + donation checkout
   Mobile and tablet layouts remain unchanged below 880px.
   ========================================================= */
@media (min-width: 880px) {
  /* Campaign: a balanced media/action pair with a readable content rail. */
  .page-campaign-detail .cd-shell {
    width: 100%;
    max-width: 1180px;
    padding: 32px clamp(28px, 3.5vw, 44px) 72px;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
    column-gap: clamp(24px, 3vw, 36px);
    row-gap: 24px;
  }
  .page-campaign-detail .cd-card,
  .page-campaign-detail .cd-sidebar-card,
  .page-campaign-detail .cd-section {
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(16, 37, 26, 0.07);
  }
  .page-campaign-detail .cd-card {
    border-radius: 20px;
  }
  .page-campaign-detail .cd-hero {
    aspect-ratio: 16 / 9;
    max-height: none;
  }
  .page-campaign-detail .cd-sidebar {
    top: 96px;
  }
  .page-campaign-detail .cd-sidebar-card {
    min-height: 0;
    padding: clamp(24px, 2.6vw, 30px);
    display: block;
    border-radius: 20px;
  }
  .page-campaign-detail .cd-side-title {
    margin-bottom: 22px;
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    line-height: 1.28;
  }
  .page-campaign-detail .cd-sidebar .cd-stats-row {
    gap: 20px;
  }
  .page-campaign-detail .cd-sidebar .cd-actions {
    margin-top: 22px;
    padding-top: 0;
  }
  .page-campaign-detail .cd-main {
    gap: 24px;
  }
  .page-campaign-detail .cd-section {
    padding: clamp(28px, 3vw, 34px);
    border-radius: 20px;
  }
  .page-campaign-detail .cd-story-body p {
    max-width: 66ch;
  }
  .page-campaign-detail .cd-related-wrap .cd-related-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Checkout: campaign context and gift controls share one desktop frame. */
  .donate-page {
    padding: 44px 0 88px;
  }
  .donate-page .donate-grid {
    width: 100%;
    max-width: 1080px;
    padding: 0 clamp(28px, 4vw, 44px);
  }
  .donate-page .donate-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: clamp(28px, 3.5vw, 38px);
    align-items: start;
  }
  .donate-page .recap-card,
  .donate-page .donate-card {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(16, 37, 26, 0.07);
  }
  .donate-page .recap-media {
    aspect-ratio: 16 / 10;
  }
  .donate-page .recap-body {
    padding: 24px 26px 26px;
  }
  .donate-page .recap-label {
    margin-bottom: 8px;
  }
  .donate-page .recap-title {
    margin-bottom: 18px;
    font-size: 1.3rem;
    line-height: 1.32;
  }
  .donate-page .donate-card {
    position: sticky;
    top: 96px;
  }
  .donate-page .donate-card-head {
    padding: 26px 28px 0;
  }
  .donate-page .donate-card-title {
    font-size: 1.35rem;
  }
  .donate-page .donate-card-body {
    padding: 20px 28px 28px;
    gap: 22px;
  }
  .donate-page .amount-grid {
    gap: 8px;
  }
  .donate-page .amount-btn {
    height: 58px;
  }
}
/* Minimal mobile header controls: quiet icons with a full 44px touch target. */
@media (max-width: 879px) {
  .site-header .menu-toggle,
  .site-header .nav-search-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    color: #405247;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    transform: none;
  }
  .site-header .menu-toggle:hover,
  .site-header .nav-search-btn:hover {
    color: #17211a;
    background: #f2f5f3;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .site-header .menu-toggle:active,
  .site-header .nav-search-btn:active,
  .site-header .menu-toggle.is-open,
  .site-header .nav-search-btn[aria-expanded="true"] {
    color: #17211a;
    background: #edf2ee;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .site-header .menu-toggle:focus-visible,
  .site-header .nav-search-btn:focus-visible {
    outline: 2px solid rgba(23, 33, 26, 0.22);
    outline-offset: 1px;
  }
  .site-header .nav-search-btn svg {
    width: 19px;
    height: 19px;
  }
  .site-header .menu-toggle-lines {
    width: 19px;
    height: 14px;
  }
  .site-header .menu-toggle-lines span {
    width: 19px;
    height: 1.5px;
  }
  .site-header .menu-toggle-lines span:first-child { top: 1px; }
  .site-header .menu-toggle-lines span:nth-child(2) { top: 6px; width: 13px; }
  .site-header .menu-toggle-lines span:last-child { top: 11px; width: 19px; }
}