/* ============================================================================
   Ventera Service — responsive layer
   style.css is the small-screen layout. This file adds the larger arrangements
   and the phone-specific behaviour (drawer nav, sticky contact bar), rather
   than shrinking a desktop design down.
   ========================================================================= */

/* ── phones: 360 – 767 ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --sec-y: clamp(3.25rem, 2rem + 6vw, 4.5rem); }

  /* room for the sticky contact bar */
  body { padding-bottom: 54px; }
  .callbar { display: flex; }

  .hero { min-height: 92svh; padding-top: 96px; }
  .pagehead { padding-top: calc(72px + 2rem); }
  /* one image, one scrim — no side-by-side composition at this width */
  .hero__img { width: 100%; object-position: 56% 42%; }
  .hero__scrim {
    /* Keep the ductwork legible: darken enough for the headline to hold, not
       so much that the photograph disappears. */
    background:
      linear-gradient(to bottom, rgba(3, 10, 17, .58) 0%, rgba(3, 10, 17, .80) 52%, var(--bg-1) 97%),
      linear-gradient(90deg, rgba(3, 10, 17, .42), rgba(3, 10, 17, .18));
  }
  .hero__grid { mask-image: linear-gradient(to bottom, #000 10%, transparent 70%); }
  .hero__airflow { opacity: .3; }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* stats read as a row of compact cards rather than a floating panel */
  .hero__panel { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .stats {
    grid-auto-flow: column;
    grid-auto-columns: minmax(136px, 1fr);
    gap: .6rem;
    background: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .35rem;
    scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat {
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(9, 25, 38, .8);
  }

  .section__title, .cinematic__title, .band__title { letter-spacing: -.015em; }
  .band__title { max-width: none; }
  .band__actions .btn { flex: 1 1 100%; }

  .about__badge { right: 12px; bottom: 12px; padding: .8rem 1.1rem; }
  .mats { grid-template-columns: 1fr; }

  .footer__bar { flex-direction: column; align-items: flex-start; gap: .85rem; }
}

/* very small phones: 360 and below */
@media (max-width: 380px) {
  .brand__sub { letter-spacing: .28em; }
  .lang__opt { padding: .3rem .38rem; }
  .chip { font-size: .8125rem; padding: .45rem .75rem; }
  .hero__title { letter-spacing: -.02em; }
}

/* ── drawer navigation: below 1024 ───────────────────────────────────── */
@media (max-width: 1023px) {
  .burger { display: inline-flex; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    align-content: start;
    padding: 96px var(--gutter) calc(var(--gutter) + 54px);
    background: rgba(3, 10, 17, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* kept in the DOM but fully inert until opened */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link {
    padding: 1.05rem .25rem;
    font-size: 1.125rem;
    color: var(--text);
  }
  .nav__link::after { display: none; }

  /* the CTA repeats inside the drawer, injected by main.js */
  .nav__cta { margin-top: 1.75rem; }

  body.nav-open { overflow: hidden; }
}

/* ── tablets: 600+ ───────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .grid--tiles, .grid--benefits, .grid--reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--services, .grid--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions .btn { flex: 0 1 auto; }
}

/* ── 768+ : stats panel returns, section heads split ─────────────────── */
@media (min-width: 768px) {
  .section__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: end;
  }
  .section__head--center { grid-template-columns: 1fr; }
  .section__lead { justify-self: end; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

/* ── 1024+ : desktop navigation and two-column sections ──────────────── */
@media (min-width: 1024px) {
  html { scroll-padding-top: 96px; }

  .nav { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; background: none; backdrop-filter: none; }
  .nav__cta { display: none; }

  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
  .hero__panel { justify-self: end; width: min(100%, 340px); }
  .stats { grid-auto-flow: row; }

  .about { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .tech { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

  .grid--services, .grid--projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--benefits, .grid--reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }

  /* horizontal process timeline */
  .timeline {
    --tl-gap: clamp(1rem, .4rem + 1.4vw, 2rem);
    --tl-node: 13px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--tl-gap);
    padding-top: 42px;
  }
  /* Nodes sit at the left edge of each column, so a full-width rail runs past
     the last one. End it on that node's centre instead. */
  .timeline__rail {
    left: calc(var(--tl-node) / 2);
    right: calc(((100% - 5 * var(--tl-gap)) / 6) - var(--tl-node) / 2);
    top: 14px;
    bottom: auto;
    width: auto; height: 1px;
  }
  .timeline__fill { inset: 0 auto 0 0; width: 0; height: 1px; transition: width .35s linear; }
  .step { padding-left: 0; padding-top: 30px; }
  .step__node { left: 0; top: -22px; }
}

/* ── 1280+ : projects to 4 up, wider gutters ─────────────────────────── */
@media (min-width: 1280px) {
  .grid--projects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 1600+ : let the shell breathe on large desktops ─────────────────── */
@media (min-width: 1600px) {
  :root { --shell: 1440px; }
  .hero__img { width: 58%; }
}

@media (min-width: 1920px) {
  :root { --shell: 1520px; }
}

/* ── pointer-coarse: no hover-dependent affordances ──────────────────── */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover .card__img, .card:hover .card__diagram { transform: none; }
  .tile:hover, .reason:hover { transform: none; }
  .reason::before { transform: scaleY(1); }
}

/* ── print ───────────────────────────────────────────────────────────── */
@media print {
  .header, .callbar, .hero__media, .cinematic__media, .chips, .toTop, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding-block: 1.5rem; min-height: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}