/*
 * responsive.css — Mobile & tablet breakpoints
 */

/* ─── TABLET (≤ 900px) ─── */
@media (max-width: 900px) {
  :root {
    --col-pad: 32px;
  }

  html { font-size: 17px; }

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

  /* Match absolute text positions to hero-left padding */
  .hero-text,
  .hero-about {
    bottom: 56px;
    left: 40px;
    right: 40px;
  }

  /* Tighten the split gap on tablet */
  .content-split {
    gap: var(--space-md);
  }

  /* Contact grid — add side padding so it doesn't touch edges */
  .contact {
    padding-left: var(--col-pad);
    padding-right: var(--col-pad);
  }
}

/* ─── PHABLET (≤ 768px) — stack content-split, disable hero scroll anim ─── */
@media (max-width: 768px) {
  /* Stack columns; text before photo */
  .content-split {
    grid-template-columns: 1fr;
    padding: 56px var(--col-pad);
    gap: var(--space-md);
  }

  .content-split__text  { order: 1 !important; }
  .content-split__photo { order: 2 !important; }

  /* Show hero-about as normal flow below hero-text (JS animation disabled) */
  .hero-about {
    position: static;
    opacity: 1;
    transform: none;
    will-change: auto;
    margin-top: var(--space-xl);
  }
}

/* ─── MOBILE (≤ 640px) ─── */
@media (max-width: 640px) {
  :root {
    --col-pad: 24px;
    --space-xl:  72px;
    --space-2xl: 80px;
    --space-lg:  48px;
  }

  html { font-size: 16px; }

  /* ── HERO ── */
  .hero-stage {
    height: auto;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 52svh 1fr;
    height: auto;
    min-height: 100svh;
    position: static;
  }

  .hero-right {
    grid-row: 1;
    height: 52svh;
  }

  /* Fade photo into background on mobile */
  .hero-right::after {
    background: linear-gradient(to bottom, transparent 60%, var(--bg) 100%) !important;
  }

  .hero-left {
    grid-row: 2;
    justify-content: flex-start;
    padding: 36px 24px 56px 24px;
    overflow: visible;
  }

  .hero-left::after {
    display: none;
  }

  /* Restore normal flow for text on mobile */
  .hero-text,
  .hero-about {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* hero-about shows in normal flow on mobile */
  .hero-about {
    margin-top: var(--space-lg);
  }

  .hero-text {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
  }

  /* ── ABOUT ── */
  .about {
    padding: 64px 0 56px;
  }

  .about-intro {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  /* ── PHOTO BANDS ── */
  /* aspect-ratio already makes these responsive;
     min-height overrides ensure they stay visible */
  .conversation-band { min-height: 200px; }
  .thinking-band     { min-height: 180px; }

  /* ── COLUMN ── */
  .col {
    padding: 0 24px;
  }

  /* ── CURIOUS ── */
  .curious {
    padding-top: 64px;
    padding-bottom: 48px;
  }

  /* ── LATELY ── */
  .lately {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* ── PRESENTATION INSET ── */
  .presentation-inset {
    margin-bottom: 64px;
  }

  /* ── CONTENT SPLIT — stack on mobile, text always first ── */
  .content-split {
    grid-template-columns: 1fr;
    padding: 56px var(--col-pad);
    gap: var(--space-md);
  }

  .content-split__text  { order: 1 !important; }
  .content-split__photo { order: 2 !important; }

  /* ── ACKNOWLEDGEMENT ── */
  /* content-split provides horizontal padding; only reset vertical here */
  .acknowledgement {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ── CONTACT ── */
  .contact-headline {
    padding-top: 32px;
    padding-bottom: var(--space-sm);
    text-align: left;
  }

  .contact {
    grid-template-columns: 1fr;
    padding-bottom: 56px;
  }

  .photo-credit--right {
    text-align: left;
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}