/* Shared responsive overrides for the Axel Steinbach site.
   Loaded on every page alongside its own inline styles; rules here use
   attribute selectors against the existing inline styles so no markup
   had to change, plus the hamburger nav injected by nav.js. */

@media (max-width: 860px) {
  /* stack any multi-column grid layout — except the date-picker's own 7-column
     calendar grid (.asdp-grid, see date-picker.js), which must stay 7 columns */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-column:span"], [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  div.asdp-grid { grid-template-columns: repeat(7, 1fr) !important; }

  /* the site's consistent 48px edge margins are too wide on phones
     (tagged by nav.js via computed style — see comment there on why) */
  [data-edge-left] { left: 20px !important; }
  [data-edge-right] { right: 20px !important; }

  #topnav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[data-screen-label] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #rechtliches-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #booking-steps {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* homepage "chapter" scroll-pinned panels: flow normally instead of sticking,
     which avoids clipped content once the two-column layout stacks to one */
  [data-panel] { height: auto !important; }
  [data-panel] > section {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 92svh !important;
    overflow: visible !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* leave the image column at its authored height:100vh (roomy enough for the
     tall absolutely-positioned photos inside it) — shrinking it previously made
     those photos bleed past the box into the next panel */


  /* photobook 3D scene: the caption sits beside the book on desktop (there's
     horizontal room); on a narrow phone it just needs to stack underneath */
  #fb-stage {
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 24vh !important;
    gap: 40px;
  }
  #fb-caption {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 88vw !important;
    text-align: center;
  }

  /* flip-book viewer: prev/next arrows move below the book instead of beside
     it, so the book itself can use the freed-up width. Structural selectors
     (not style-content matching) because this region re-renders on every
     auto-flip tick, which reserializes inline style attributes and breaks
     "property:value" substring matches. */
  #album > div > div:has(> button[data-mag]) {
    flex-wrap: wrap !important;
  }
  #album > div > div:has(> button[data-mag]) > div {
    width: 92vw !important;
    order: -1;
    flex-basis: 100%;
  }
  #album > div > div:has(> button[data-mag]) > button {
    margin-top: 16px;
  }

  /* horizontally scroll-jacked film strip becomes a native swipeable row */
  #strip-wrap { height: auto !important; }
  #strip-wrap > div {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  #strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }
  #strip > div { scroll-snap-align: start; }
}

/* the custom mouse-follower cursor makes no sense on touch devices */
@media (pointer: coarse) {
  #cursor { display: none !important; }
}

/* homepage hero in portrait mobile: the slide counter + "Entdecke meine
   Arbeit" button crowd out the tagline — drop them and let the tagline
   use the full width instead. */
@media (max-width: 860px) and (orientation: portrait) {
  #hero-tag { max-width: none !important; }
  #hero-tag + div { display: none !important; }
}

/* Hamburger nav — markup injected by nav.js on every page */
#nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  flex: 0 0 auto;
  color: inherit;
  position: relative;
  z-index: 80;
}
#nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin: 6px 0;
  transition: transform .3s ease, opacity .3s ease;
}
body.nav-open #nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open #nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open #nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

#nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10,9,7,.55);
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
body.nav-open #nav-scrim { opacity: 1; pointer-events: auto; }

/* #nav-links is a body-level clone of the real nav (see nav.js) so its
   position:fixed stays relative to the viewport even when #topnav gets a
   backdrop-filter/transform while scrolled — hidden outside mobile widths. */
#nav-links { display: none; }

@media (max-width: 860px) {
  #nav-toggle { display: block; }
  nav:not(#nav-links) { display: none !important; }
  #nav-links {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(78vw, 340px);
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 28px !important;
    background: #1B1915 !important;
    padding: 100px 40px !important;
    box-sizing: border-box;
    font-size: 17px !important;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.76,0,.24,1);
    z-index: 70;
  }
  body.nav-open #nav-links { transform: translateX(0); }
  #nav-links a { color: #F4F0E8 !important; }
}