/* ============================================================
   Responsive overrides — mobile & tablet
   Breakpoints:
     ≤ 980px   = tablet / large phone landscape
     ≤ 720px   = phone landscape / small tablet
     ≤ 480px   = phone portrait
   ============================================================ */

/* ---------- Tablet (≤ 980px) ---------- */
@media (max-width: 980px) {
  /* Container narrower padding */
  .container { padding: 0 22px; }
  .nav__inner { padding: 0 22px; }

  /* Hero — hide decorative hairlines that look weird on narrow */
  .hero__lines::after { display: none; }
  .hero__lines .v-left { display: none; }

  /* Hero figure smaller */
  .hero__figure { width: 90% !important; }

  /* Marquee — slow down a bit */
  .hero__marquee-track { font-size: 14px; }
}

/* ---------- Phone / large screen mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
  /* Nav — make brand smaller, hide decoration */
  .nav { height: 56px; }
  .nav__brand { font-size: 17px; gap: 8px; }
  .nav__logo { width: 26px; height: 26px; }

  /* Hide all decorative corner labels and hairlines */
  .hero__lines,
  .hero__corner-tl,
  .hero__corner-tr,
  .hero__corner-bl,
  .hero__corner-br { display: none; }

  /* Hero — vertical stack */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 40px;
  }
  .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .hero__figure {
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto !important;
  }
  .hero__title {
    font-size: clamp(38px, 10vw, 64px);
    margin-bottom: 20px;
  }
  .hero__sub { font-size: 11px; margin-bottom: 16px; }
  .hero__lead { font-size: 14.5px; margin-bottom: 24px; }

  /* Buttons full-width-ish */
  .hero__cta { gap: 8px; }
  .btn { padding: 11px 18px; font-size: 12.5px; }

  /* Stats 4 → 2 columns */
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .stat { padding: 18px 14px; }
  .stat__num { font-size: clamp(26px, 8vw, 36px); }
  .stat__label { font-size: 9.5px; }
  /* Fix 2-col grid borders: right border only between columns, bottom border between rows */
  .stat { border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

  /* Sections tighter */
  .section { padding: clamp(36px, 8vw, 56px) 0; }
  .section--tight { padding: clamp(28px, 6vw, 44px) 0; }
  .section-title { font-size: clamp(26px, 7vw, 38px); margin-bottom: 14px; }
  .section-lead { font-size: 14.5px; }

  /* Page header (other pages) */
  .page-header {
    padding: calc(var(--nav-h) + 36px) 0 32px;
  }
  .page-header__title {
    font-size: clamp(34px, 10vw, 56px);
    margin-bottom: 16px;
  }
  .page-header__lead { font-size: 14px; }

  /* Skills grid stacks */
  .skills-grid { grid-template-columns: 1fr !important; }
  .skill-card { padding: 20px 18px; }

  /* Timeline single column — align content with rest of section (no horizontal padding) */
  .timeline__item {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 18px 0;
  }
  .timeline__date { font-size: 10.5px; padding-top: 0; }
  .timeline__company { font-size: 20px; }
  .timeline__desc { font-size: 13.5px; }

  /* Education stack */
  .edu { grid-template-columns: 1fr !important; }
  .edu__card { padding: 20px 18px; }
  .edu__school { font-size: 22px; }

  /* Contact */
  .contact { padding: clamp(40px, 10vw, 72px) 0; }
  .contact__title { font-size: clamp(28px, 9vw, 52px); margin-bottom: 22px; }
  .contact__email { font-size: 13px; padding: 10px 18px; }

  /* Footer stack */
  .footer__inner { flex-direction: column; gap: 10px; text-align: center; }

  /* Marquee — smaller text, faster */
  .hero__marquee-track { font-size: 13px; gap: 36px; animation-duration: 40s; }
  .hero__marquee-track span { gap: 36px; }

  /* Project layout: vertical stack */
  .project,
  .project.is-flip {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 32px 0;
  }
  .project.is-flip .project__visual { order: 0; }
  .project__title { font-size: clamp(22px, 6vw, 32px); }
  .project__desc { font-size: 14px; }

  /* Project meta — labels on top, values below */
  .project__meta {
    grid-template-columns: 1fr;
    gap: 4px 0;
    padding-top: 16px;
  }
  .project__meta dt { padding-top: 10px; }
  .project__meta dt:first-of-type { padding-top: 0; }

  /* Collection head stack */
  .collection { padding: 36px 0; }
  .collection__head {
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-bottom: 22px;
  }
  .collection__title { font-size: clamp(22px, 6.5vw, 34px); }
  .collection__desc { font-size: 13.5px; }

  /* Group head */
  .group-head { padding: 28px 0 0; margin-bottom: 14px; }
  .group-head__title { font-size: clamp(20px, 5.5vw, 28px); }

  /* Mosaic → single column */
  .mosaic { grid-template-columns: 1fr !important; gap: 10px; }
  .mosaic .m,
  .mosaic .m--lg,
  .mosaic .m--md,
  .mosaic .m--sm,
  .mosaic .m--w {
    grid-column: span 1 !important;
    aspect-ratio: 16/9 !important;
  }

  /* Gallery — fewer columns */
  .gallery--2 { grid-template-columns: 1fr !important; gap: 10px; }
  .gallery--3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .gallery--4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .gallery--6 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }

  /* Albums (picture books) → single column on phone */
  .albums {
    grid-template-columns: 1fr !important;
    max-width: 340px;
    margin: 0 auto;
    gap: 16px;
  }
  .album__title { font-size: 16px; }

  /* Video pair → keep side-by-side but tight */
  .video-pair { gap: 8px; max-width: 100%; }

  /* Perfume extras grid */
  .perfume-extras__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Modal popup */
  .modal { padding: 16px; }
  .modal__inner {
    padding: 24px 20px 28px;
    max-height: 92vh;
  }
  .modal__title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 14px; }
  .modal__text { font-size: 14px; }
  .modal__close { top: 10px; right: 10px; width: 36px; height: 36px; }
  .modal__images { columns: 1; }
  .modal__images--vertical { columns: 2; }

  /* Process button — wider tappable area */
  .process-btn { padding: 12px 18px; width: 100%; justify-content: center; }
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
  /* Nav even smaller */
  .nav__brand { font-size: 15px; }
  .nav__brand .mark { display: none; }
  .nav__logo { width: 24px; height: 24px; }

  /* Hero title smaller still */
  .hero__title { font-size: clamp(32px, 11vw, 52px); }

  /* Gallery 6 → 2 col on smallest */
  .gallery--6 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats 2 → 1 row stacked? Keep 2 cols, just tighter */
  .stat { padding: 14px 12px; }

  /* Tags wrap nicely */
  .tag { font-size: 11px; padding: 3px 9px; }
}

/* ---------- Touch optimizations ---------- */
@media (hover: none) {
  /* Devices without hover (phones/tablets) */
  .fig:hover img,
  .project__visual:hover img,
  .hero__figure:hover video {
    transform: none;
  }

  /* Show fig captions by default on touch */
  .fig__caption {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
    padding-top: 40px;
  }
  .fig::before { opacity: 1 !important; }
}