/* ==========================================================================
   Tequp Publishers — Responsive Layer
   Breakpoints (max-width, desktop-first overrides):
     1200px  small laptop
     1024px  tablet landscape  → nav collapses
      860px  tablet portrait   → hero stacks
      600px  large phone
      420px  small phone
   Plus: fine-pointer / hover capability queries.
   ========================================================================== */

/* ==========================================================================
   1200px — SMALL LAPTOP
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --container: 1080px; }

}

/* ==========================================================================
   1024px — TABLET LANDSCAPE (nav collapses to menu)
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  .hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .hero__copy { max-width: 34rem; }
  .hero__lead { font-size: 1rem; }

  /* Services */
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
  }
  .section-head__aside { max-width: 40rem; padding-bottom: 0; }

  /* Bento collapses to equal halves */
  .svc:nth-child(n) { grid-column: span 6; }
  .svc { min-height: 0; }

  /* Team: cards take six of twelve, so two sit per row */
  .tm-field { max-width: 44rem; gap: 1rem; }
  .tm { grid-column: span 6; }
  .tm:last-child:nth-child(3n + 1) { grid-column: span 6; }

  .tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tstat:nth-child(2n+1) { border-left: 0; }
  .tstat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }

  /* Showcase */
  .showcase__row { gap: .75rem 1rem; }

  /* Footer */
  .footer__news { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   860px — TABLET PORTRAIT (hero stacks)
   ========================================================================== */
@media (max-width: 860px) {
  .hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    text-align: left;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 4.5rem);
  }

  .hero__copy { max-width: 38rem; }

  .hero__visual {
    min-height: 420px;
    order: 2;
  }

  /* Stacked hero: the frame can breathe again, so restore the overhangs */
  .stage__frame { width: clamp(260px, 52vw, 380px); }

  .scroll-cue { display: none; }

}

/* ==========================================================================
   600px — LARGE PHONE
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --header-h: 70px;
    --gutter: 1.25rem;
    --section-y: 2.75rem;
  }

  .header { padding-block: .75rem; }
  .header.is-stuck { padding-block: .5rem; }

  .logo__mark { width: 40px; height: 40px; border-radius: 12px; }
  .logo__text { font-size: 1.15rem; }

  .hero { padding-top: calc(var(--header-h) + 2rem); }
  .hero__title { margin-top: 1.25rem; }
  .hero__lead { margin-top: 1.15rem; }

  .hero__note {
    margin-top: 1.75rem;
    padding: 1.1rem 1.15rem;
    gap: .8rem;
  }
  .hero__note-avatar { width: 36px; height: 36px; }
  .hero__note blockquote p { font-size: .95rem; }
  .hero__facts { margin-top: 1.25rem; padding-top: 1.1rem; }

  .hero__visual { min-height: 0; }

  /* Keep the whole composition — book + cards — inside the gutter */
  .stage__frame { width: min(64vw, 300px); }

  /* Team: cards take all twelve, so one sits per row */
  .tm-field { max-width: 24rem; gap: 1rem; }
  .tm,
  .tm:last-child:nth-child(3n + 1) { grid-column: span 12; }

  .tm { padding: 1.75rem 1.25rem; }
  .tm__name { margin-top: 1rem; }

  .tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); }
  .tstat { padding: 1.35rem .85rem; }

  /* Services */
  .svc:nth-child(n) { grid-column: span 12; }
  .svc { padding: 1.5rem 1.35rem; }
  .svc__icon { width: 50px; height: 50px; border-radius: 15px; }
  .svc__title { margin-top: 1.35rem; font-size: 1.22rem; }
  .svc__foot { padding-top: 1.25rem; }
  .svc__dots { display: none; }

  .services__head { text-align: left; }
  .services__sub { margin-left: 0; }

  /* Portfolio */
  .showcase__row {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .slider-nav { justify-content: flex-end; }
  .slider-nav__btn { width: 42px; height: 42px; }

  .b-slide__title { font-size: 1.14rem; }

  /* Footer */
  .footer__news-text { font-size: var(--fs-xs); }
  .news-form__row { flex-direction: column; }
  .news-form__input { width: 100%; }
  .news-form__row .btn { width: 100%; }

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

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }
  .footer__made { order: 3; }
}

/* ==========================================================================
   420px — SMALL PHONE
   ========================================================================== */
@media (max-width: 420px) {

  .stage__frame { width: min(62vw, 250px); }

}

/* ==========================================================================
   POINTER / HOVER CAPABILITY
   Touch devices get no hover-dependent states and no faux cursor.
   ========================================================================== */
@media (hover: none) {
  .hover-lift:hover { transform: none; box-shadow: var(--sh-md); }
  .hover-sheen::before { display: none; }
  .btn:hover::after { transform: scaleY(0); }
  .btn:active::after { transform: scaleY(1); }
}

/* ==========================================================================
   SHORT VIEWPORTS — keep the hero from overflowing on laptops with low height
   ========================================================================== */
@media (min-width: 861px) and (max-height: 760px) {
  .hero { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 3.5rem; }
  .hero__visual { min-height: 0; }
  .stage__frame { width: clamp(220px, 26vw, 330px); }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .header, .loader, .cursor, .scroll-cue, .hero__bg { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding-top: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}