/* ============================================================
   AMANA EXCELLENCE CENTER — Responsive CSS
   Mobile-first. Nav bar = horizontal on desktop, side drawer on mobile.
   ============================================================ */

/* ── Always: prevent horizontal scroll ── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video  { max-width: 100%; height: auto; }

/* ── Form rows default (2-col on >= tablet) ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ============================================================
   DESKTOP  ≥ 1025px
   Horizontal nav bar visible, hamburger hidden
   ============================================================ */
@media (min-width: 1025px) {

  /* NAV: show horizontal, hide mobile */
  .desktop-nav        { display: flex !important; }
  .menu-toggle        { display: none  !important; }
  .mobile-nav         { display: none  !important; }
  .mobile-nav-overlay { display: none  !important; }

  /* Show "Join AEC" button + search in header */
  .header-cta .btn-primary         { display: inline-flex !important; }
  .header-cta .header-search-btn   { display: flex !important; }

  .header-inner {
    height: 68px;
    border-bottom: 1px solid var(--color-border);
  }
  .site-logo__text { display: flex; }

  /* HERO — two columns */
  .hero {
    padding-top: calc(68px + clamp(3rem, 5vw, 5rem));
    padding-bottom: clamp(3rem, 5vw, 5rem);
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    text-align: left;
  }
  .hero__content        { order: 1; max-width: 580px; }
  .hero__image-wrap     { order: 2; max-height: 580px; aspect-ratio: 4/5; }
  .hero__actions        { justify-content: flex-start; flex-direction: row; }
  .hero__actions .btn   { width: auto; }
  .hero__org-label      { justify-content: flex-start; }
  .hero__image-badge    { display: flex; }

  /* IMPACT STRIP */
  .impact-strip__items {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }
  .impact-item {
    flex: 1;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
  }
  .impact-item:last-child { border-right: none; }

  /* WHO WE ARE */
  .who-we-are__inner   { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .who-we-are__pillars { grid-template-columns: repeat(4, 1fr); }

  /* PROGRAMS */
  .programs-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

  /* DEV MODEL */
  .dev-model__flow     { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .dev-model__flow::before { display: block; }
  .model-step {
    display: block;
    text-align: center;
    padding: var(--space-6);
    background: transparent;
    border: none;
  }
  .model-step__icon  { width: 80px; height: 80px; margin: 0 auto var(--space-5); }

  /* CONTENT GRIDS */
  .events-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .stories-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .get-involved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .two-col-section   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

  /* FOOTER */
  .footer-grid          { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); }
  .footer-brand         { grid-column: auto; }
  .footer-bottom__inner { flex-direction: row; justify-content: space-between; }

  /* PAGE HERO */
  .page-hero   { padding-top: calc(72px + clamp(3rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 5vw, 4rem); }
  .page-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }

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

/* ============================================================
   TABLET  768px – 1024px
   Hamburger + drawer, 2-column layouts
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* NAV: show hamburger, hide horizontal */
  .desktop-nav        { display: none  !important; }
  .menu-toggle        { display: flex  !important; }
  .mobile-nav         { display: flex  !important; }
  .mobile-nav-overlay { display: block !important; }
  .header-cta .btn-primary { display: inline-flex !important; }

  .header-inner    { height: 68px; }
  .site-logo__text { display: flex; }

  /* HERO */
  .hero {
    padding-top: calc(68px + 2.5rem);
    padding-bottom: 3rem;
    min-height: auto;
    display: block;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .hero__content     { order: 2; max-width: 100%; }
  .hero__image-wrap  { order: 1; max-height: 360px; aspect-ratio: 16/9; width: 100%; }
  .hero__actions     { justify-content: center; flex-direction: row; flex-wrap: wrap; }
  .hero__org-label   { justify-content: center; }
  .hero__image-badge { display: none; }

  /* IMPACT */
  .impact-strip__items { display: grid; grid-template-columns: repeat(3, 1fr); }
  .impact-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: var(--space-4); }

  /* LAYOUTS */
  .who-we-are__inner   { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
  .who-we-are__pillars { grid-template-columns: repeat(4, 1fr); }
  .programs-grid       { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .dev-model__flow     { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .dev-model__flow::before { display: none; }
  .model-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-4);
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .model-step__icon  { margin: 0; width: 56px; height: 56px; flex-shrink: 0; }
  .events-grid       { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .stories-grid      { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .get-involved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .two-col-section   { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .footer-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand         { grid-column: 1 / -1; }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: var(--space-3); }
  .page-hero   { padding-top: calc(68px + 2.5rem); padding-bottom: 2.5rem; }
  .page-hero h1 { font-size: clamp(1.875rem, 5vw, 3rem); }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBILE  ≤ 767px
   Logo + full name on left, hamburger ≡ on right
   Side drawer slides in from right
   ============================================================ */
@media (max-width: 767px) {

  /* NAV: show hamburger, hide horizontal */
  .desktop-nav        { display: none  !important; }
  .menu-toggle        { display: flex  !important; }
  .mobile-nav         { display: flex  !important; }
  .mobile-nav-overlay { display: block !important; }

  /* ── HEADER ── */
  .header-inner {
    height: 60px;
    gap: 0;
    /* Logo left, CTA (hamburger) right */
    justify-content: space-between;
  }

  /* Show logo text on mobile (matches reference image) */
  .site-logo__text   { display: flex; }
  .site-logo__name   { font-size: 10px; line-height: 1.15; }
  .site-logo__slogan { font-size: 6.5px; letter-spacing: 0.1em; }
  .site-logo__mark   { width: 36px; height: 36px; }

  /* Header CTA area — only show hamburger, hide Join button */
  .header-cta .btn-primary { display: none !important; }

  /* Hamburger always visible */
  .menu-toggle {
    display: flex !important;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
  }
  .menu-toggle svg { width: 24px; height: 24px; }

  /* ── CONTAINER / SECTION ── */
  .container { padding-inline: 1rem; }
  .section   { padding-block: clamp(2.5rem, 8vw, 4rem); }

  /* ── HERO ── */
  .hero {
    padding-top: calc(60px + 1.25rem);
    padding-bottom: 2rem;
    min-height: auto;
    display: block;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }
  .hero__content     { order: 2; max-width: 100%; }
  .hero__image-wrap  {
    order: 1;
    max-height: 210px;
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: var(--radius-xl);
  }
  .hero__headline    { font-size: clamp(2rem, 9vw, 2.75rem); letter-spacing: -0.025em; }
  .hero__lead        { font-size: var(--text-base); }
  .hero__body        { font-size: var(--text-sm); margin-bottom: var(--space-5); }
  .hero__org-label   { justify-content: center; }
  .hero__image-badge { display: none; }
  .hero__actions     { flex-direction: column; align-items: center; gap: var(--space-3); }
  .hero__actions .btn { width: 100%; max-width: 100%; }

  /* ── IMPACT STRIP ── */
  .impact-strip { padding-block: 1.75rem; }
  .impact-strip__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .impact-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-3) var(--space-2);
  }
  .impact-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
  .impact-item__value  { font-size: var(--text-2xl); }
  .impact-item__label  { font-size: 9px; }

  /* ── WHO WE ARE ── */
  .who-we-are__inner   { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
  .who-we-are__pillars { grid-template-columns: repeat(2, 1fr); }

  /* ── PROGRAMS ── */
  .programs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

  /* ── DEV MODEL ── */
  .dev-model__flow { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .dev-model__flow::before { display: none; }
  .model-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .model-step__icon  { margin: 0; width: 48px; height: 48px; flex-shrink: 0; }
  .model-step__title { font-size: var(--text-lg); }
  .model-step__number { font-size: 10px; }
  .dev-model__title  { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* ── GRIDS ── */
  .events-grid       { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .stories-grid      { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .get-involved-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .two-col-section   { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .grid-4, .grid-3, .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

  /* ── FOOTER ── */
  .footer-grid          { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-brand         { grid-column: auto; }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: var(--space-3); }
  .footer-bottom__legal { flex-wrap: wrap; justify-content: center; }

  /* ── FORMS ── */
  .form-row { grid-template-columns: 1fr !important; }

  /* ── SECTION TEXT ── */
  .section-header p     { font-size: var(--text-base); }
  .section-header--center { text-align: center; }

  /* ── PAGE HERO ── */
  .page-hero    { padding-top: calc(60px + 1.25rem); padding-bottom: 2rem; }
  .page-hero h1 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  .page-hero__desc { font-size: var(--text-base); }

  /* ── FILTER TABS — horizontal scroll ── */
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    min-height: 36px;
  }

  /* ── BUTTONS ── */
  .btn     { min-height: 48px; font-size: var(--text-sm); }
  .btn--sm { min-height: 42px; padding: 0.6rem 1rem; font-size: var(--text-xs); }
  .btn--lg { min-height: 52px; }
}

/* ============================================================
   MOBILE SMALL  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .container         { padding-inline: 0.875rem; }
  .hero__headline    { font-size: clamp(1.75rem, 10vw, 2.25rem); }
  /* Keep logo text visible (matches reference) but shrink a bit */
  .site-logo__name   { font-size: 9px; }
  .site-logo__slogan { font-size: 6px; }
  .site-logo__mark   { width: 34px; height: 34px; }
}

/* ============================================================
   MOBILE TINY  ≤ 375px
   ============================================================ */
@media (max-width: 375px) {
  .container        { padding-inline: 0.75rem; }
  .hero__headline   { font-size: 1.75rem; }
  .dev-model__title { font-size: 1.375rem; }
  .card__title      { font-size: var(--text-base); }
  .program-card     { padding: var(--space-5); }
}

/* ============================================================
   EXTRA TINY  ≤ 320px  (e.g. iPhone SE 1st gen)
   ============================================================ */
@media (max-width: 320px) {
  .site-logo__text   { display: none; } /* Only AEC mark */
  .hero__headline    { font-size: 1.6rem; }
  .container         { padding-inline: 0.625rem; }
}

/* ============================================================
   WIDE DESKTOP  ≥ 1280px
   ============================================================ */
@media (min-width: 1280px) {
  .hero__headline     { font-size: clamp(3.75rem, 5vw, 5rem); }
  .impact-item__value { font-size: 3.25rem; }
}

/* ============================================================
   ULTRAWIDE  ≥ 1440px
   ============================================================ */
@media (min-width: 1440px) {
  :root { --container-pad: 3rem; }
}

/* ============================================================
   TOUCH DEVICES — 48px minimum tap targets, prevent iOS zoom
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn        { min-height: 48px; }
  .filter-tab { min-height: 44px; }
  .action-btn { min-width: 44px; min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   MOBILE NAV DRAWER — structural styles
   (shown/hidden via responsive rules above)
   ============================================================ */

/* Dimmed overlay behind drawer */
.mobile-nav-overlay.visible {
  opacity: 1;
}

/* Drawer open state */
.mobile-nav.open {
  transform: translateX(0);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .mobile-nav, .mobile-nav-overlay,
  .menu-toggle, .dev-model, .impact-strip, .site-footer { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  a    { color: #000; text-decoration: underline; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mobile-nav         { transition: none !important; }
  .mobile-nav-overlay { transition: none !important; }
  [data-animate]      { opacity: 1 !important; transform: none !important; transition: none !important; }
}