/* ==========================================================================
   Sobha Seinna — Responsive refinements
   Base styles are mobile-first; this file holds breakpoint adjustments and
   safeguards that keep the layout intact from 320px upward.
   ========================================================================== */

/* ---- Very small phones (320px–359px) ------------------------------------- */

@media (max-width: 359px) {
  :root {
    --gutter: 0.875rem;
    --fs-md: 1rem;
  }

  .btn { padding-inline: 1.1rem; font-size: var(--fs-xs); }
  .btn-row { gap: var(--space-2); }
  .btn-row .btn { flex: 1 1 100%; }

  .highlights { grid-template-columns: 1fr; }

  .hero__stats { gap: var(--space-4); }
  .hero__stat { min-width: 45%; }

  .mobile-bar__item { font-size: 0.625rem; letter-spacing: 0.02em; }

  .brand__name { font-size: 1.3rem; }
}

/* ---- Phones (up to 599px) ------------------------------------------------ */

@media (max-width: 599px) {
  .hero__viewport { min-height: clamp(480px, 88vh, 640px); }

  .hero__controls { bottom: var(--space-4); }

  .slider-btn { width: 38px; height: 38px; }

  .section-head { margin-bottom: var(--space-5); }

  .facts dd { text-align: left; }
  .facts > div { flex-direction: column; gap: 2px; }

  .lightbox__prev { left: var(--space-2); }
  .lightbox__next { right: var(--space-2); }
  .lightbox__close { top: var(--space-3); right: var(--space-3); }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Full-width CTAs are easier to hit with a thumb */
  .cta-band .btn-row .btn,
  .lead-form .btn { width: 100%; }
}

/* ---- Large phones / small tablets (600px–899px) -------------------------- */

@media (min-width: 600px) and (max-width: 899px) {
  .hero__inner { max-width: 84%; }
  .interlinks { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablets and up (900px+) --------------------------------------------- */

@media (min-width: 900px) {
  .page-hero__meta { gap: var(--space-4) var(--space-8); }
  .faq { max-width: 880px; }
}

/* ---- Desktop (1200px+) --------------------------------------------------- */

@media (min-width: 1200px) {
  .section-head p { font-size: var(--fs-lg); }
}

/* ---- Very wide screens --------------------------------------------------- */

@media (min-width: 1680px) {
  :root { --container-width: 1280px; }
}

/* ---- Landscape phones ---------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero__viewport { min-height: 460px; }
  .modal__dialog { max-height: calc(100vh - 1rem); }
  .lightbox__stage img { max-height: 60vh; }
}

/* ---- Pointer-coarse devices get larger tap targets ----------------------- */

@media (pointer: coarse) {
  .nav__link,
  .footer-col a,
  .breadcrumb a { padding-block: var(--space-2); }

  .gallery-filter { min-height: 42px; }
}

/* ---- Print --------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-bar,
  .float-cta,
  .consent-bar,
  .hero__controls,
  .modal,
  .lightbox,
  .drawer,
  .cta-band,
  .btn,
  .btn-row { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    padding-bottom: 0;
  }

  .section { padding-block: 1rem; page-break-inside: avoid; }

  .page-hero,
  .section--dark,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .page-hero h1,
  .section--dark h2,
  .site-footer h3 { color: #000 !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .faq__panel { display: block !important; }
}

/* ---- High-contrast / forced colours -------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .card,
  .lead-form,
  .highlight { border: 1px solid CanvasText; }

  .slider-dot[aria-selected="true"] { background: Highlight; }
}