/* =====================================================================
   responsive.css — Adapt the site to EVERY screen size
   ---------------------------------------------------------------------
   Loaded LAST so its rules win. One readable place for all breakpoints,
   from small Android phones up to 4K monitors. The strategy:

     • Phones  → tighter padding, smaller nav, 1-column, big tap targets
     • Laptops → the default look (defined in the other CSS files)
     • 1080p+  → slightly wider column + larger type
     • 2K      → wider column + larger type again
     • 4K      → much wider column + much larger type (so it never looks
                 tiny + lost on a huge display)

   Most of the heavy lifting is done by changing three variables —
   --maxw (column width), --nav-h (nav height) and --pad (side padding) —
   plus a font-size bump on big screens. Headings already scale fluidly
   with the viewport (clamp + vw) so they mostly take care of themselves.
   ===================================================================== */

/* ====================== BIG SCREENS (scale UP) ===================== */

/* ---- 1080p / large laptops & desktops (≥ 1680px) ---- */
@media (min-width: 1680px) {
  :root { --maxw: 1380px; --pad: 40px; }
  body { font-size: 18px; }
}

/* ---- 2K / QHD displays (≥ 2240px) ---- */
@media (min-width: 2240px) {
  :root { --maxw: 1680px; --nav-h: 92px; --pad: 56px; }
  body { font-size: 21px; }
  .nav__brand { font-size: 27px; }
  .nav__link  { font-size: 17px; }
  .hero__lead, .row__desc, .about__lead + .about__lead { font-size: 22px; }
  .card__title, .vcard__title { font-size: 26px; }
  .tag, .btn { font-size: 18px; }
  .detail__about p { font-size: 21px; }
}

/* ---- 4K / UHD displays (≥ 3000px) ---- */
@media (min-width: 3000px) {
  :root { --maxw: 2200px; --nav-h: 120px; --pad: 80px; }
  body { font-size: 27px; }
  .nav__brand { font-size: 34px; }
  .nav__link  { font-size: 21px; }
  .hero__lead, .row__desc, .about__lead + .about__lead { font-size: 28px; }
  .card__title, .vcard__title { font-size: 33px; }
  .card__loc, .vcard__loc { font-size: 15px; }
  .tag, .btn { font-size: 22px; padding-block: 16px; }
  .detail__about p { font-size: 27px; }
  .detail__about h2 { font-size: 36px; }
  .thumb { width: 120px; height: 120px; }
  .social { width: 60px; height: 60px; }
  .social svg { width: 26px; height: 26px; }
  /* let the big section-heading clamps grow further on 4K */
  .hero__title { font-size: clamp(78px, 6vw, 120px); }
  .page-head h1 { font-size: clamp(74px, 7vw, 130px); }
}

/* ====================== SMALL SCREENS (phones) ===================== */

/* ---- Tablets & large phones (≤ 760px): nav switches to hamburger ---- */
/* (the hamburger swap itself lives in layout.css). Here we tidy spacing
   and guarantee comfortable 44px+ touch targets.                        */
@media (max-width: 760px) {
  :root { --nav-h: 62px; --pad: 20px; }
  .nav__brand { font-size: 20px; }

  /* full-width, easy-to-tap mobile menu rows */
  .nav__mobile a { padding: 14px 0; font-size: 17px; }

  /* page header breathing room */
  .page-head { padding: 40px 0 28px; }

  /* filter pills: wrap nicely + min 44px tall for thumbs */
  .tags { gap: 8px; margin-bottom: 32px; }
  .tag { padding: 11px 18px; }

  /* buttons comfortable to tap */
  .btn { padding: 13px 24px; }
}

/* ---- Phones (≤ 560px) ---- */
@media (max-width: 560px) {
  body { font-size: 16px; }

  .hero { padding: 24px 0 40px; gap: 28px; }
  .hero__contact { gap: 10px 22px; }

  .row { padding: 30px 0; }

  /* detail page: description sits comfortably under the photo */
  .detail { gap: 26px; }
  .detail__about { padding: 22px 20px; }

  /* lightbox controls: smaller + tucked into the corners on small screens */
  .lightbox__btn { width: 42px; height: 42px; }
  .lightbox__close { top: 14px; right: 14px; }
  .lightbox__prev  { left: 10px; }
  .lightbox__next  { right: 10px; }
  .lightbox__img   { max-width: 94vw; max-height: 78vh; }
}

/* ---- Very small Android phones (≤ 380px) ---- */
@media (max-width: 380px) {
  :root { --pad: 16px; }
  body { font-size: 15.5px; }
}

/* ================== NOTCHED PHONES (safe areas) ==================== */
/* Keep the nav + content clear of the iPhone notch / rounded corners by
   honouring the device's safe-area insets when present.                */
@supports (padding: max(0px)) {
  .nav__inner,
  .container {
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
}

/* =================== TOUCH-DEVICE REFINEMENTS ===================== */
/* On touch screens there's no hover, so reveal the photo "view" hint and
   captions by default rather than only on hover.                        */
@media (hover: none) {
  .card__view { color: var(--clay-ink); }
}