/* ==========================================================================
   KinRidge — Responsive
   Mobile-first refinements layered on top of main.css / components.css.
   Breakpoints:
     <= 1100px : tablet landscape
     <= 860px  : tablet
     <= 640px  : mobile
   ========================================================================== */

/* Tablet landscape and below */
@media (max-width: 1100px) {
  :root { --header-h: 68px; }
  .nav { gap: var(--sp-4); }
  .nav-secondary .icon-btn { width: 36px; height: 36px; }
  .lang__btn { padding: 6px 10px; }
}

/* Tablet */
@media (max-width: 860px) {
  .nav,
  .nav-secondary .icon-btn,
  .nav-secondary .lang { display: none; }

  .menu-toggle { display: inline-flex; }

  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .hero__inner { padding-block: var(--sp-7); }
  .hero__title { font-size: clamp(48px, 12vw, 92px); }
  .hero__subtitle { font-size: 17px; }

  .subhero__title { font-size: clamp(36px, 8vw, 56px); }
  .statement__title { font-size: clamp(28px, 6vw, 44px); }

  .values { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .product-hero__name { font-size: clamp(36px, 8vw, 56px); }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.65; }

  .container { padding-inline: 20px; }

  .section { padding-block: var(--sp-8); }

  .hero { min-height: 86vh; }
  .hero__inner { padding-block: var(--sp-6); }
  .hero__title {
    font-size: clamp(44px, 14vw, 72px);
    letter-spacing: -0.02em;
  }
  .hero__ctas .btn { padding: 12px 18px; font-size: 11px; }

  .subhero { padding-block: var(--sp-8); }
  .subhero__title { font-size: 38px; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .statement,
  .product-hero,
  .split,
  .lifestyle { grid-template-columns: 1fr; }

  .audience-grid,
  .process { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr; }
  .gallery .media:first-child { grid-column: span 1; aspect-ratio: 4 / 3; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .site-footer { padding-block: var(--sp-7) var(--sp-4); }

  .btn { padding: 12px 18px; font-size: 11px; }

  .cta-strip__actions { width: 100%; }
  .cta-strip__actions .btn { flex: 1; justify-content: center; }

  .mobile-menu { padding: var(--sp-5) 20px var(--sp-7); }
  .mobile-menu__list a { font-size: 28px; }
}

/* Large displays */
@media (min-width: 1600px) {
  :root {
    --container: 1480px;
    --fs-h1: 96px;
    --fs-display: 168px;
  }
}