/* ==========================================================================
   iSocial24 — responsive.css
   style.css holds the desktop-complete layout; this file steps it down.
   Breakpoints: 1080 (laptop), 900 (tablet), 640 (phone), 420 (small phone).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Laptop — 1080px
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .value { grid-template-columns: 150px 1fr; gap: 1rem; }
  .hero__arch { top: 90px; }
}

/* --------------------------------------------------------------------------
   Tablet — 900px
   Navigation collapses into a drawer.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --section-y: clamp(3.5rem, 8vw, 5rem); }

  html { scroll-padding-top: 80px; }

  .nav__toggle { display: block; }
  .nav__inner, .nav.is-stuck .nav__inner { height: 72px; }

  .nav__links {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--white);
    border-bottom: 1px solid var(--marble);
    box-shadow: 0 24px 40px -24px rgba(4,33,75,.45);

    /* Drawer starts closed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__links > a:not(.btn) {
    padding-block: .95rem;
    border-bottom: 1px solid var(--marble);
    font-size: 1.05rem;
    font-weight: 500;
  }
  .nav__links > a:not(.btn)::after { display: none; }
  .nav__cta { margin-top: 1.25rem; align-self: flex-start; }

  /* Hero stacks; the statue keeps its stage but shrinks */
  .hero { padding-top: 108px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__arch { width: min(400px, 84%); }
  .hero__stage { min-height: 420px; margin-top: 1.5rem; }
  .float--leaf { left: 2%; }
  .float--hand { right: 4%; }

  /* About */
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { position: static; max-width: 460px; }
  .about__cactus { left: 0; }

  /* Departments — the chess piece sits in the flow rather than over the copy */
  .departments__grid { grid-template-columns: 1fr; }
  .departments__chess { width: clamp(84px, 16vw, 120px); margin: 1.5rem 0 2rem; }

  /* Why */
  .why__grid { grid-template-columns: 1fr; }
  .why__figure { order: -1; margin-bottom: 1rem; }

  /* CTA — columns drop away rather than crowd the copy */
  .cta__inner { grid-template-columns: 1fr; }
  .cta__column { display: none; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; }

  /* Brief page — the pitch stops being sticky and sits above the form */
  .brief { padding-top: 96px; }
  .brief__grid { grid-template-columns: 1fr; }
  .brief__aside { position: static; }
}

/* --------------------------------------------------------------------------
   Phone — 640px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero__actions .btn { flex: 1 1 auto; }

  .pillar { grid-template-columns: 1fr; gap: .5rem; }
  .pillar h3 { justify-self: start; }
  .cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: .65rem; }

  .band__leaf { display: none; }

  /* Captions are hover-only on pointer devices; show them always on touch */
  .tile figcaption { transform: none; opacity: 1; padding-top: 1.75rem; }

  .value { grid-template-columns: 1fr; gap: .25rem; }
  .value dt { font-size: 1.05rem; }

  .footer__nav { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .footer__base { justify-content: flex-start; }

  .totop { width: 44px; height: 44px; }

  /* Brief page */
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .steps { gap: .35rem 1rem; }
  .panel__actions .btn { flex: 1 1 auto; }


}

/* --------------------------------------------------------------------------
   Small phone — 420px
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --fs-h1: 2.5rem; }

  .hero__stage { min-height: 300px; }
  .float--hand { display: none; }

  .footer__nav { grid-template-columns: 1fr; }
  .dept { gap: .8rem; padding: 1rem; }
}

/* --------------------------------------------------------------------------
   Touch — no hover lift on devices that can't hover
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover, .pillar:hover, .tile:hover, .btn:hover { transform: none; }
  .dept:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .totop, .marquee, .hero__arch, .float { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}