/* =============================================================
   responsive.css
   Breakpoint overrides + touch-device adaptations.
   Mobile-first base lives in style.css; here we adapt down.
   ============================================================= */

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero__right {
    order: -1; /* portrait on top on smaller screens */
    max-width: 420px;
  }
  .portrait { aspect-ratio: 1 / 1; }
  .nav__status { display: none; }

  /* featured card stacks: viewport on top, meta below.
     No divider — the artwork keeps dissolving into the same black. */
  .feature__link { grid-template-columns: 1fr; }
  .feature__thumb { min-height: clamp(260px, 56vw, 360px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  body { font-size: 15px; }

  .hero {
    padding-block: 6rem 5rem;
    min-height: auto;
  }
  .hero__title { font-size: clamp(2rem, 11vw, 3.2rem); }
  .hero__meta { flex-direction: column; gap: 1rem; }

  .hero__index {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.9rem;
  }

  /* socials + scroll cue: relocate so they don't overlap content */
  .scroll-cue { display: none; }
  .socials {
    position: static;
    margin-top: 2.5rem;
    justify-content: flex-start;
  }

  .feature__thumb { min-height: clamp(220px, 64vw, 300px); }
  .footer__row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Very small ---------- */
@media (max-width: 380px) {
  .hero__index { grid-template-columns: repeat(2, 1fr); }
  .nav__brand { font-size: 0.7rem; }
}

/* ---------- Touch devices: disable custom cursor, restore native ---------- */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none !important; }
  a, button, [data-hover] { cursor: pointer; }
}

/* ---------- Large screens: a touch more breathing room ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1560px; }
}