/*
 * Tried Trails — MOBILE LAYER (phones + small tablets).
 *
 * This file is the single home for phone/tablet layout overrides. It is loaded
 * with media="(max-width: 960px)", so nothing in here is ever applied on desktop
 * — you can edit this file freely without any risk of breaking the desktop design.
 * (The desktop / base design lives in style.css.)
 *
 * Rules keep their own inner @media breakpoints (960 / 760 / 720) for the finer
 * phone-vs-tablet steps; the link-level 960px ceiling is the hard desktop guard.
 *
 * @package tried-trails
 */

/* Tablet: collapse the multi-column grids. */
@media (max-width:960px){
  .g3{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .aside{position:static;order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .facts-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.facts-bar div:nth-child(2){border-right:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  /* First gallery image: on mobile drop the desktop 2x2 featured span entirely and make
     it a normal square cell like the others. The spanning item (grid-column/row span 2)
     had no height source on a 2-col grid — it either flattened to ~0 or, with an
     aspect-ratio, fed its size into the 1fr tracks and pushed the whole page wider than
     the screen. A plain single cell like its siblings avoids both. */
  .gallery .ph:first-child{grid-column:auto;grid-row:auto;aspect-ratio:1/1}
  .trip-map{grid-template-columns:1fr}
  .map-panel{max-height:none}
  /* Block-theme pages (legal, generic page, blog index) put constrained content straight
     in .pad with no inner .wrap, so on phones it ran flush to the screen edges. Give the
     direct children the same 24px gutter that .wrap provides on the PHP-rendered pages. */
  .pad>:not(.wrap){padding-left:24px;padding-right:24px}
}

/* Phone: hamburger nav, single-column everything. */
@media (max-width:720px){
  .hdr-in{padding:12px 16px;gap:10px}
  .brand{min-width:0}
  .brand .wm{font-size:1rem;white-space:nowrap}
  .brand img{height:32px;width:auto}
  .hdr-actions{flex:0 0 auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px 16px;gap:2px;box-shadow:var(--shadow)}
  .nav.open{display:flex}.nav a{padding:.8em 1em}
  .nav a.nav-cta{display:inline-flex;justify-content:center;color:var(--accent-ink);margin-top:10px;padding:.85em 1.5em}
  .nav a.nav-cta::after{display:none}
  .has-drop .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--surface-2);margin:2px 0 2px 12px;padding:6px}
  .hamb{display:grid}
  .g3,.split,.values,.feat-grid,.contact-grid,.field-2,.incl,.period-range{grid-template-columns:1fr}
  .hide-sm{display:none}
  .gallery{grid-template-columns:1fr 1fr}
  #reizenList .card{flex-direction:column!important}#reizenList .card .ph{flex-basis:auto!important;width:100%}
}

/* Phone: home accordion becomes a vertical stack. Open panel = fixed-height photo
   with the caption flowing beneath on a solid panel, so text can never clip no
   matter how narrow the phone. */
@media (max-width:760px){
  .trips{flex-direction:column;height:auto;min-height:0}
  .trip{height:19vh;min-height:100px;transition:height .5s var(--tt-ease)}
  .trip .rot{writing-mode:horizontal-tb;rotate:0deg;left:20px;bottom:18px;transform:none;font-size:1.2rem}
  .trip.open{height:auto;flex-grow:0}
  .trip.open .bg{position:relative;height:34vh}
  .trip.open::after{inset:0 0 auto 0;height:34vh}
  .trip.open .cap{position:relative;opacity:1;transform:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:22px 22px 26px;background:var(--field-2)}
  .trip .cap h3{font-size:1.6rem;margin:4px 0 8px;white-space:normal}
  .trip .cap .meta{gap:6px 14px;font-size:.84rem}
  .trip .cap .side{text-align:left}
  .trip .cap .go{margin-left:0;width:46px;height:46px}
}

/* Phone: onze-reizen region rows stack (image above text). The image is made
   in-flow here (position:static) so it defines the media box height itself —
   otherwise the parent grid's align-items:stretch collapses the aspect-ratio box
   (its only child is absolutely positioned) to zero height and the photo vanishes. */
@media (max-width:760px){
  .region{grid-template-columns:1fr;gap:22px;padding:34px 0}
  .region:nth-child(even) .region-media{order:0}
  /* align-self:start stops the grid stretching the box to 0 (its <img> is absolute);
     aspect-ratio then gives it a proper CROPPED height (not the raw wide 900x560, which
     looked flattened), and min-height is a safety floor so it can never collapse. */
  .region-media{min-height:210px;aspect-ratio:16/11;align-self:start}
}

/* Phone: the FAQ category jump-nav becomes a one-row horizontal swipe strip. Sticky +
   flex-wrap turned it into a tall block that ate half the screen and left a sliver of
   page showing above it; static + nowrap + horizontal scroll fixes both. */
@media (max-width:720px){
  .faqnav{position:static;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .faqnav::-webkit-scrollbar{display:none}
  .faqnav a{flex:0 0 auto;white-space:nowrap}
}

/* Phone: the hero's round prev/next arrows sit at the vertical centre and overlap the
   heading on a narrow screen. Drop them — the hero auto-rotates and the dots below stay
   tappable — so nothing covers the text. */
@media (max-width:760px){
  .car-arrow{display:none}
}