/* =========================================================
   OSA ARILJE — Responsive refinements
   Most responsive rules live alongside their components in
   style.css. This file holds cross-cutting fine-tuning and
   small-viewport polish.
   ========================================================= */

/* Large desktops */
@media (min-width: 1600px) {
  :root { --gutter: 56px; }
}

/* Laptops */
@media (max-width: 1200px) {
  .header__inner { gap: var(--sp-5); }
}

/* Tablets */
@media (max-width: 900px) {
  :root {
    --header-h: 72px;
    --sp-9: 72px;
    --sp-10: 96px;
  }
  .section { padding-block: clamp(56px, 8vw, 112px); }
  .hero { min-height: 560px; height: 100svh; }
  .hero__ui { bottom: 24px; }
  .hero__title { font-size: clamp(38px, 7vw + 8px, 72px); margin-bottom: 16px; }
  .hero__lede { font-size: 16px; margin-bottom: 24px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Phones */
@media (max-width: 640px) {
  :root {
    --header-h: 64px;
    --topbar-h: 36px;
  }
  .btn { padding: 14px 22px; min-height: 48px; font-size: 13px; }
  .section { padding-block: 64px; }
  .hero { min-height: 520px; }
  .hero__scroll { display: none; }
  .hero__ui { bottom: 16px; }
  .hero__ui-inner { gap: var(--sp-3); }
  .hero__counter { min-width: 64px; font-size: 11px; }
  .hero__counter .num { font-size: 15px; }
  .hero__actions { gap: 10px; }
  .section-title { font-size: clamp(28px, 7vw + 8px, 40px); }
  .cta-band__title { font-size: clamp(32px, 8vw + 8px, 54px); }
}

/* Very small */
@media (max-width: 380px) {
  .hero__actions { flex-direction: column; width: 100%; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

/* Dark color-scheme hint */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* Print */
@media print {
  .header, .topbar, .footer, .hero__ui, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  * { color: inherit !important; background: transparent !important; }
}