/* ==========================================================================
   Responsive & device layer
   --------------------------------------------------------------------------
   Component files are written mobile-first with their own breakpoints
   (640 / 768 / 1024 / 1280). This file adds the cross-device concerns:
     1. Viewport-height units (svh/dvh) with fallbacks
     2. Safe-area insets for notched / rounded-corner devices
     3. Touch devices (no hover, coarse pointers)
     4. Progressive enhancement: navigation without JavaScript
     5. Landscape phones (short viewports)
     6. Tablets
     7. Large & ultra-wide screens
     8. Readability: line length, zoom
     9. Feature fallbacks (@supports)
    10. Print
   Breakpoints: 480 · 640 · 768 · 1024 · 1280 · 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Viewport height: 100vh fallback → svh/dvh where supported
   -------------------------------------------------------------------------- */
@supports (height: 100svh) {
  .hero__inner {
    min-height: calc(100svh - var(--header-h));
  }
}

@media (max-width: 1023px) {
  @supports (height: 100dvh) {
    .site-nav__panel {
      height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    }
  }
}

/* --------------------------------------------------------------------------
   2. Safe-area insets (requires viewport-fit=cover in the viewport meta)
   -------------------------------------------------------------------------- */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
}

.container {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

@media (max-width: 1023px) {
  .site-nav__panel {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--space-7), env(safe-area-inset-bottom, 0px));
  }
}

.site-footer__bottom {
  padding-bottom: calc(var(--space-6) + 72px + env(safe-area-inset-bottom, 0px));
}

.lightbox__bar {
  padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
}

.lightbox__nav {
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   3. Touch devices
   Hover styles live inside @media (hover: hover) in the component files.
   Here, touch devices get always-on equivalents of hover-only affordances.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* Gallery "expand" badge is revealed on hover with a mouse; always show it on touch */
  .gallery__zoom {
    opacity: 1;
    transform: none;
  }

  /* Pressed feedback instead of hover lift */
  .btn:active,
  .filters__btn:active,
  .gallery__btn:active,
  .featured__item:active,
  .material-card:active,
  .card:active {
    transform: scale(0.985);
  }
}

@media (pointer: coarse) {
  /* Comfortable 44px+ tap targets for small inline links */
  .breadcrumbs a,
  .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .breadcrumbs__list {
    row-gap: 0;
  }

  .check {
    min-height: 44px;
    align-items: center;
  }

  /* Keep tapped elements from flashing the default blue highlight */
  a,
  button,
  summary {
    -webkit-tap-highlight-color: rgba(201, 137, 79, 0.18);
  }
}

/* Lightbox image: allow native pinch-zoom; horizontal swipes are handled in JS */
.lightbox__img {
  touch-action: pinch-zoom pan-x pan-y;
}

/* --------------------------------------------------------------------------
   4. Navigation without JavaScript (progressive enhancement)
   nav.js adds .nav-enhanced to <html>. Until then, the menu is a plain,
   always-visible list of links under the logo on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html:not(.nav-enhanced) .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    padding-block: var(--space-2);
  }

  html:not(.nav-enhanced) .site-nav {
    order: 3;
    width: 100%;
  }

  html:not(.nav-enhanced) .site-nav__toggle {
    display: none;
  }

  html:not(.nav-enhanced) .site-nav__panel {
    position: static;
    height: auto;
    padding: 0;
    background: none;
    color: inherit;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  html:not(.nav-enhanced) .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }

  html:not(.nav-enhanced) .site-nav__link {
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-graphite);
    border-bottom: 0;
  }

  html:not(.nav-enhanced) .site-nav__link[aria-current="page"] {
    color: var(--color-brass-ink);
  }

  html:not(.nav-enhanced) .site-nav__panel-footer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Landscape phones (short, wide viewports)
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --header-h: 64px;
  }

  .hero__inner {
    min-height: 0;
    padding-block: var(--space-8);
  }

  .hero__title {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  }

  .hero__meta {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }

  .page-hero {
    min-height: 0;
    padding-block: var(--space-9) var(--space-7);
  }

  /* Mobile menu: two columns of compact links so nothing needs scrolling */
  .site-nav__panel {
    gap: var(--space-5);
    padding-top: var(--space-5);
  }

  .site-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .site-nav__link {
    min-height: 44px;
    font-size: var(--text-xl);
  }

  /* Lightbox: maximise image height, overlay the controls */
  .lightbox[open] {
    grid-template-rows: 1fr;
  }

  .lightbox__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }

  .lightbox__img {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }

  .lightbox__caption {
    font-size: var(--text-sm);
  }

  .lightbox__caption small {
    display: none;
  }

  .lightbox__nav {
    position: absolute;
    inset: 50% max(var(--space-3), env(safe-area-inset-left, 0px)) auto;
    justify-content: space-between;
    padding: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .lightbox__nav .lightbox__btn {
    pointer-events: auto;
  }

  .video-facade {
    max-height: 80vh;
    max-height: 80dvh;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   6. Tablets (768–1023px): 2-up layouts where components default to 1 column
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .why__media {
    max-width: 380px;
  }

  .contact-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   7. Large & ultra-wide screens: content stays centred and constrained
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  :root {
    --gutter: 3rem;
  }

  .hero__content {
    max-width: 44rem;
  }

  /* Full-bleed imagery: keep focal point centred instead of stretching */
  .hero__bg img,
  .page-hero__media img,
  .cta-band__media img {
    object-position: 50% 50%;
  }
}

@media (min-width: 2400px) {
  html {
    font-size: 112.5%; /* gentle scale-up for very large monitors; layout stays capped */
  }
}

/* --------------------------------------------------------------------------
   8. Readability
   -------------------------------------------------------------------------- */
/* Keep running text around 60–75 characters per line */
.section__lead,
.page-hero__lead,
.cta-band__text,
.faq__a {
  max-width: 65ch;
}

.prose {
  max-width: 70ch;
}

.prose img,
.prose video,
.prose iframe {
  max-width: 100%;
  height: auto;
}

/* Long words / URLs / emails never force horizontal scrolling */
.prose,
.site-footer,
.contact-card,
.info-card {
  overflow-wrap: anywhere;
}

/* At high zoom levels / very narrow viewports, relax the sticky in-page nav */
@media (max-height: 480px) and (orientation: portrait), (max-width: 359px) {
  .service-nav {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   9. Feature fallbacks
   -------------------------------------------------------------------------- */
@supports not (aspect-ratio: 1 / 1) {
  .card__media,
  .gallery__btn,
  .material-card,
  .video-facade,
  .map {
    height: 0;
    padding-bottom: 75%;
  }

  .card__media > *,
  .gallery__btn > picture,
  .map iframe {
    position: absolute;
    inset: 0;
  }
}

@supports not (inset: 0) {
  .hero__bg,
  .page-hero__media,
  .cta-band__media {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-nav,
  .whatsapp-fab,
  .video-facade,
  .map,
  .filters,
  .cta-band__media,
  .page-hero__media,
  .hero__bg {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

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

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }
}