/* Zenda redesign — responsive pass (desktop CSS above 1024 stays as authored).
   Two breakpoints per design/RESPONSIVE-HANDOFF.md: 1024 (tablet) and 760 (phone). */

/* ---------------- TABLET ---------------- */
@media (max-width: 1024px) {
  .znav { padding-left: 40px; padding-right: 40px; }
  .v4-hero, .v4-thesis, .v4-common, .v4-impact, .v4-how, .v4-quotes, .v4-cine, .v4-cta,
  .uc-hero, .uc-problem, .uc-steps, .uc-outcomes, .uc-quote, .uc-resources,
  .ab-hero, .ab-started, .ab-lead, .ab-zenders, .ab-mission, .ab-partner, .ab-cta,
  .se-hero, .se-soc, .se-controls, .ab-foot, .se-foot, .v4-foot, .uc-foot {
    padding-left: 40px; padding-right: 40px;
  }
  .v4-thesis, .v4-common__inner, .v4-impact__head, .v4-how__row,
  .ab-hero, .ab-started__inner, .ab-lead__head, .ab-zenders__head, .se-soc__inner,
  .uc-steps__layout, .uc-outcomes__head, .uc-problem__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .v4-how__row:nth-child(even) > *:first-child,
  .v4-how__row:nth-child(even) > *:last-child { order: 0; }
  .v4-slide { grid-template-columns: 1fr !important; }
  .ab-hero__fig { max-width: 520px; }
  .se-soc__fig { max-width: 520px; }
  .ab-mission__body { columns: 2; }
  .se-grid { grid-template-columns: 1fr 1fr; }
  .se-item:nth-child(3n) { border-right: 1px dashed var(--slate-200); }
  .se-item:nth-child(2n) { border-right: 0; }
  .se-item:nth-child(2n+1) { padding-left: 0; }
  .se-item:nth-child(2n) { padding-left: 32px; }
}

/* ---------------- PHONE ---------------- */
@media (max-width: 760px) {
  .v4-hero, .v4-thesis, .v4-common, .v4-impact, .v4-how, .v4-quotes, .v4-cine, .v4-cta,
  .uc-hero, .uc-problem, .uc-steps, .uc-outcomes, .uc-quote, .uc-resources,
  .ab-hero, .ab-started, .ab-lead, .ab-zenders, .ab-mission, .ab-partner, .ab-cta,
  .se-hero, .se-soc, .se-controls, .ab-foot, .se-foot, .v4-foot, .uc-foot {
    padding-left: 20px; padding-right: 20px;
  }
  .v4-hero { min-height: 640px; padding-bottom: 48px; }
  .v4-thesis, .v4-common, .v4-how, .v4-quotes, .ab-started, .ab-lead, .ab-zenders,
  .ab-mission, .se-controls, .se-soc, .uc-problem, .uc-outcomes { padding-top: 72px; padding-bottom: 72px; }
  .ab-hero { padding-top: 120px; padding-bottom: 72px; }
  .se-hero { padding-top: 120px; padding-bottom: 72px; }
  .v4-cta { padding-top: 90px; padding-bottom: 100px; }
  .v4-cine { height: 420px; }
  .v4-cta__eye { width: min(700px, 118vw) !important; height: min(700px, 118vw) !important; }

  .ab-mission__body { columns: 1; }
  .ab-team, .se-grid, .uc-resources__grid { grid-template-columns: 1fr !important; }
  .se-item, .se-item + .se-item { padding-left: 0 !important; border-right: 0 !important; min-height: 0; padding-bottom: 32px; }
  .ab-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; gap: 8px; }
  .ab-collage .c1, .ab-collage .c2, .ab-collage .c3, .ab-collage .c4,
  .ab-collage .c5, .ab-collage .c6, .ab-collage .c7, .ab-collage .c8, .ab-collage .c9, .ab-collage .c10,
  .ab-collage .c11, .ab-collage .c12, .ab-collage .c13 { grid-area: auto; }
  .ab-collage .c1 { grid-column: 1 / -1; grid-row: span 2; }
  .ab-foot, .se-foot, .v4-foot, .uc-foot { grid-template-columns: 1fr 1fr; }
  .uc-outcomes__grid { grid-template-columns: 1fr 1fr !important; }
  .uc-outcomes__head { grid-template-columns: 1fr !important; }
  .ab-partner__inner { grid-template-columns: 1fr; gap: 24px; }
  .ab-modal__panel { grid-template-columns: 1fr; max-height: calc(100vh - 48px); overflow: auto; }
  .ab-modal__photo { min-height: 220px; }

  /* --- NAV: logo + burger only, links move into the drawer --- */
  .znav { padding-left: 20px !important; padding-right: 20px !important; }
  .znav__links { display: none !important; }
  .znav__burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent;
  }
  .znav__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
  .znav__burger span::before, .znav__burger span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
  }
  .znav__burger span::before { top: -7px; }
  .znav__burger span::after { top: 7px; }

  .znav-drawer {
    position: fixed; inset: 0; z-index: 60; display: none;
    padding: 24px 20px 28px; flex-direction: column;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  }
  .znav-drawer.is-open { display: flex; animation: znavIn 240ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes znavIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .znav-drawer__top { display: flex; align-items: center; justify-content: space-between; }
  .znav-drawer__close {
    width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px;
    color: var(--zenda-black); margin-right: -10px;
  }
  .znav-drawer__links { display: flex; flex-direction: column; gap: 4px; margin-top: 44px; }
  .znav-drawer__links a {
    font-size: 34px; font-weight: 200; letter-spacing: -0.03em; color: var(--zenda-black);
    padding: 10px 0; min-height: 44px;
  }
  .znav-drawer__cta {
    margin-top: auto; display: flex; align-items: center; justify-content: center;
    height: 56px; border-radius: 999px; background: var(--zenda-magenta);
    color: #000; font-weight: 600; font-size: 16px;
  }

  /* --- IMPACT selector: stepper with peeking next category --- */
  .v4-impact__pager { gap: 12px; margin-bottom: 14px; }
  .v4-impact__pager { flex-wrap: wrap; align-items: center; }
  .v4-impact__count { padding-top: 0; order: 1; }
  .v4-impact__arrows { order: 2; margin-left: auto; }
  .v4-impact__arrow { width: 44px; height: 44px; }
  .v4-impact__ticks { order: 3; flex: 1 0 100%; padding-bottom: 0; }
  .v4-impact__tick { padding: 12px 0; gap: 0; }
  .v4-eyebrow { font-size: 12px; }
  .v4-impact__tab .tab-num { font-size: 11px; }
  .v4-impact__stepper { display: none !important; align-items: stretch; gap: 8px; }
  .v4-impact__tabs {
    flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; border-left: 1px solid var(--slate-100);
  }
  .v4-impact__tabs::-webkit-scrollbar { display: none; }
  .v4-impact__tab { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
  .v4-impact__tab[aria-selected="false"] { opacity: 0.55; }
  .v4-impact__step {
    flex: 0 0 44px; width: 44px; min-height: 44px; border: 1px solid var(--slate-100);
    background: #fff; color: var(--zenda-black); font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .v4-impact__step:hover { border-color: var(--zenda-magenta); color: var(--zenda-magenta); }
}

@media (prefers-reduced-motion: reduce) {
  .znav-drawer.is-open { animation: none; }
}