/* ============================================================
   Forsthaus Mähring — RESPONSIVE / TOUCH LAYER
   Loaded last. Tunes the experience for phones & tablets:
   safe-areas, calmer spacing, shorter scroll-scrub scenes,
   full-width tap targets, no sticky hover states on touch.
   ============================================================ */

/* ---- universal touch niceties ---- */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 1024px) {
  /* never let a stray wide element cause sideways scroll */
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* honour the notch / rounded corners on phones */
@supports (padding: max(0px)) {
  .site-header > .wrap {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  .hero-inner > .wrap {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  .hero { padding-bottom: env(safe-area-inset-bottom); }
}

/* hover effects only where a real pointer exists — prevents
   "stuck" zoom/lift after a tap on touchscreens */
@media (hover: none) {
  .gal-item:hover img,
  .unit-strip .unveil:hover img,
  .hl-row:hover .hl-figure img,
  .unit-figure:hover img { transform: none !important; }
  .hl-card:hover { transform: none !important; }
  .map-linkbtn:hover, .btn-primary:hover, .btn-outline:hover { transform: none !important; }
}

/* ============================================================
   TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-y: clamp(84px, 10vw, 128px); }
  .gallery { columns: 2; }
}

/* ============================================================
   PHONE  (≤ 680px)
   ============================================================ */
@media (max-width: 680px) {
  :root {
    --section-y: clamp(64px, 13vw, 92px);
    --pad-x: 20px;
  }

  /* header: brand + one compact action, comfortably tappable */
  .site-header > .wrap { padding-top: 11px; padding-bottom: 11px; gap: 12px; }
  .brand { font-size: 1.15rem; }
  .header-cta .btn { padding: 12px 18px; min-height: 44px; }

  /* hero: full-width stacked actions = big tap targets */
  .hero-inner { padding-top: 96px; }
  .hero .btn-row { width: 100%; gap: 11px; }
  .hero .btn-row .btn { width: 100%; min-height: 52px; }
  .hero-badge { font-size: 12px; gap: 9px; flex-wrap: wrap; }

  /* generic buttons: meet the 44px min target */
  .btn { min-height: 48px; }

  /* gallery switcher: centred, thumb-sized */
  .gal-tabs { display: flex; width: 100%; margin-left: auto; margin-right: auto; }
  .gal-tab { flex: 1; padding: 12px 10px; min-height: 44px; text-align: center; }

  /* units: full-width primary action + rating below it */
  .unit-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .unit-foot .btn { width: 100%; min-height: 52px; }
  .unit-rating { justify-content: center; }
  .unit-strip { gap: 10px; }

  /* maps: comfortable height + tappable link */
  .map-embed { aspect-ratio: 3 / 2.4; }
  .map-open { min-height: 40px; }
  .map-links { grid-template-columns: 1fr; }
  .map-linkbtn { min-height: 56px; justify-content: center; }

  /* amenity grid: 2-up reads better than cramped 5-up */
  .amen { padding: 20px 14px; }
  .amen span { font-size: 14px; }

  /* trips list: a touch more breathing room per row */
  .trip { padding: 16px 0; }

  /* footer nav links: easier to hit */
  .footer-nav a, .footer-link { padding-top: 4px; padding-bottom: 4px; }
}

/* ============================================================
   SHORTER SCROLL-SCRUB SCENES ON TOUCH
   (so phones don't scroll "forever" through the pinned blocks;
    progress stays proportional, just less travel)
   ============================================================ */
@media (max-width: 820px) {
  .showcase { height: 300vh; }
  .statement { height: 180vh; }
  .scrolly-text { gap: 12vh; }
}
@media (max-width: 680px) {
  .showcase { height: 260vh; }
  .statement { height: 160vh; }
  .scene-caption { bottom: 12vh; padding: 0 6vw; }
  .scene-caption h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .scene-caption p { font-size: 1rem; }
  .statement-line { font-size: clamp(1.9rem, 8.5vw, 3rem); padding: 0 7vw; }
  .scrolly-media { height: 56vh; }
}

/* very small / landscape phones: keep pinned captions clear of the fold */
@media (max-height: 520px) and (orientation: landscape) {
  .scene-caption { bottom: 8vh; }
  .scene-caption h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-bottom: 8px; }
  .sc-idx { margin-bottom: 8px; }
  .showcase-progress { bottom: 4vh; }
}