/* ==========================================================================
   responsive.css: progressive layout enhancements (mobile-first)
   Breakpoints: 640px (large phones / small tablets), 900px (tablets / small
   laptops), 1200px (desktops)
   ========================================================================== */

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats .stat:last-child { grid-column: auto; }

  ul.design-grid { gap: 1.25rem; }
  .design-item:first-child,
  .design-item--info { grid-column: auto; }
  .design__note { display: none; }

  .module-map__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

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

  .cs-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .earlier__item { grid-template-columns: 1fr auto; align-items: baseline; }
  .earlier__item span { grid-column: 1 / -1; }

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

  .seg { display: inline-flex; }

  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }

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

  .skills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-group:last-child { grid-column: 1 / -1; }
}

/* ---------- ≥ 900px ---------- */
@media (min-width: 900px) {
  :root { --header-h: 80px; }

  .proof__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof__item,
  .proof__item:nth-child(odd),
  .proof__item:nth-child(even) {
    padding: 2rem 1.5rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .proof__item:first-child { padding-left: 0; }
  .proof__item:last-child { border-right: 0; }

  /* Design showcase: three columns, middle column offset for an editorial rhythm */
  ul.design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
  .design-item:nth-child(3n + 2) { margin-top: 3.5rem; }
  .design-item--info { align-self: stretch; }

  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-cv { display: inline-flex; }
  .mobile-menu { display: none; }

  .hero__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem; }
  .hero-visual { max-width: none; }
  .hero__scroll { display: inline-flex; }

  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; column-gap: 4rem; }
  .section-head .eyebrow { grid-column: 1 / -1; }
  .section-head__lead { justify-self: end; }

  .work-head { grid-template-columns: 1fr auto; }

  /* Project layouts, intentionally varied */
  .project__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }

  .project__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; align-items: start; }
  .project__body .facts { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .project__body .facts .fact--wide { grid-column: 1 / -1; }

  /* Split layout: media + text side-by-side */
  .project--split .project__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  .project--split.project--reverse .project__grid > .project__media { order: -1; }
  .project--split .project__media { margin-top: 0; }
  .project--split .project__body { grid-template-columns: 1fr; gap: 2rem; }
  .project--split .project__body .facts { grid-template-columns: 1fr; gap: 1.5rem; }

  .media-combo { margin-bottom: 0; }
  .media-combo .phone { right: -2.5%; bottom: -6%; width: 17%; padding: 6px; border-radius: 30px; }
  .media-combo .phone .phone__screen { border-radius: 25px; }
  .project--meloflip .project__body { margin-top: clamp(4rem, 7vw, 6rem); }
  .project--leoweb .project__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .project--leoweb .project__body .facts { grid-template-columns: 1fr; gap: 1.5rem; }

  .about__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .about__statement { position: sticky; top: calc(var(--header-h) + 3rem); }

  .skills__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .skill-group { grid-column: span 2; }
  .skill-group:nth-child(4), .skill-group:last-child { grid-column: span 3; }

  .role { grid-template-columns: 200px minmax(0, 1fr); column-gap: 3rem; }
  .role__period { padding-top: 0.5rem; }
  .role:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.015), transparent); }
  .role__content { display: grid; gap: 0.9rem; }

  .earlier { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 3rem; }
  .earlier__title { padding-top: 1rem; }

  .resume { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }

  .contact__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }

  .cs-section { grid-template-columns: 240px minmax(0, 1fr); column-gap: 4rem; }
  .cs-section > .cs-section__label { padding-top: 0.6rem; }
  .cs-section > :not(.cs-section__label) { grid-column: 2; }
  .cs-section__label { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; grid-row: 1 / span 6; }

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

  .gallery--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .gallery__phones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ≥ 1200px ---------- */
@media (min-width: 1200px) {
  .hero__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .project__title { font-size: 6.5rem; }
}

/* Short-height laptops: keep the hero composed */
@media (min-width: 900px) and (max-height: 760px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 4rem); padding-bottom: 5rem; }
  .hero__scroll { display: none; }
}

/* Touch devices: no hover-scroll (avoids nested scroll traps); hide the hint */
@media (hover: none) {
  .browser__viewport--scroll img { transition: none; transform: none !important; }
  .browser__hint { display: none; }
}
.seg[hidden] { display: none !important; }

/* Laptops 900 to 1099px: with six nav links, keep the brand to its mark (name stays readable by screen readers) */
@media (min-width: 900px) and (max-width: 1099px) {
  .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}