/* Keep photo canvases stable while Safari changes its visible toolbar area. */
@media (max-width:760px) {
  .approved-experience { --mobile-view-height:100vh; --mobile-scene-height:100vh; }
  @supports (height:100dvh) {
    .approved-experience { --mobile-view-height:100dvh; --mobile-scene-height:100lvh; }
  }
  .approved-experience[data-experience="home"] {
    --mobile-scene-height:calc(100lvh + env(safe-area-inset-bottom,0px));
    --mobile-toolbar-space:max(0px,calc(var(--mobile-scene-height) - var(--mobile-view-height)));
  }
  html:has(.approved-experience) { background:transparent; scroll-padding-top:0; }
  body:has(.approved-experience) { background:#f7f8f6; }
  /* Never switch mandatory document snap on while a reading gesture is running. */
  html:has(.approved-experience[data-experience="home"]) { scroll-snap-type:none; }
  .approved-experience[data-experience="home"] :is(.hero,#pakker,#reisen,#minnepenn,#teknologi) { position:relative; scroll-margin-top:0; }
  .approved-experience[data-experience="home"] .hero { min-height:var(--mobile-scene-height); }
  .approved-experience[data-experience="home"] .hero .hero-content { margin-bottom:var(--mobile-toolbar-space); }
  .approved-experience[data-experience="home"] .hero-photo-control { bottom:calc(8px + var(--mobile-toolbar-space)); }
  /* Safari also displays content above the layout viewport under its status bar.
     Bleed artwork into that inset, without moving headings or touch controls. */
  .approved-experience[data-experience="home"] :is(.hero,.product-showcase,.story-stage,#minnepenn,#teknologi .mobile-care) {
    overflow:visible; clip-path:inset(calc(0px - env(safe-area-inset-top,0px)) 0 0);
  }
  .approved-experience[data-experience="home"] .hero :is(.hero-image,.hero-scrim),
  .approved-experience[data-experience="home"] .product-showcase > :is(.product-image,.product-stage-shade),
  .approved-experience[data-experience="home"] .story-stage > .story-scene,
  .approved-experience[data-experience="home"] .care-photo {
    top:calc(0px - env(safe-area-inset-top,0px)); height:calc(100% + env(safe-area-inset-top,0px));
  }
  .approved-experience[data-experience="home"] .packages .product-showcase,
  .approved-experience[data-experience="home"] .story .story-stage {
    height:var(--mobile-scene-height); min-height:var(--mobile-scene-height);
  }
  .approved-experience[data-experience="home"] .packages .product-showcase { padding-bottom:calc(96px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] .package-image-caption { bottom:calc(20px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] .story .story-overlay { height:var(--mobile-view-height); }
  .approved-experience[data-experience="home"] #minnepenn { height:var(--mobile-scene-height); min-height:var(--mobile-scene-height); }
  .approved-experience[data-experience="home"] #minnepenn .extras-card { scroll-snap-stop:always; }
  .approved-experience[data-experience="home"] #minnepenn .extras-gallery {
    position:absolute; inset:calc(0px - env(safe-area-inset-top,0px)) 0 0;
    height:calc(100% + env(safe-area-inset-top,0px));
  }
  .approved-experience[data-experience="home"] #minnepenn .extras-card img { height:100%; }
  .approved-experience[data-experience="home"] #minnepenn .extras-card::after { background:linear-gradient(180deg,#302c25ba,transparent 35%,#302c2540 48%,#302c25eb 73%,#302c25e0); }
  .approved-experience[data-experience="home"] #minnepenn .extras-card h3 { bottom:calc(250px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #minnepenn .extras-card p { bottom:calc(215px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #minnepenn .extras-card strong { bottom:calc(171px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #minnepenn .extras-dock { bottom:calc(86px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #minnepenn .extras-caption { bottom:calc(63px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #minnepenn .mobile-extras>a { bottom:calc(12px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #teknologi .mobile-care { min-height:var(--mobile-scene-height); padding-bottom:calc(24px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #teknologi .care-photo { background:linear-gradient(180deg,#302c2540,#302c2540 25%,#302c25eb 62%,#302c25e0),url('/assets/experience/hands.webp') 50% 0/cover no-repeat; }
  /* The delivery overview is a screen; the later white sections stay free. */
  .approved-experience[data-experience="home"] #resultat { scroll-margin-top:0; min-height:var(--mobile-scene-height); padding-bottom:calc(24px + var(--mobile-toolbar-space)); }
  .approved-experience[data-experience="home"] #resultat .result-gallery { height:clamp(130px,calc(var(--mobile-view-height) - 550px),270px); }
  .approved-experience[data-experience="home"] #resultat .result-gallery .result-photo { height:100%; }
  .approved-experience[data-experience="home"] :is(#pakker,.packages .product-showcase,#klar) { background-color:#24231f; }
}

/* Ordinary painted content extends beneath Safari's glass; no fixed full-screen
   background surface. Match the animation range to the larger photo canvas. */
@media (max-width:760px) {
  @supports (animation-timeline:view()) {
    .approved-experience[data-experience="home"] #pakker { view-timeline:--package-hold block; }
    .approved-experience[data-experience="home"] #reisen { view-timeline:--story-hold block; }
    .approved-experience[data-experience="home"] :is(.product-showcase,.story-stage) {
      position:absolute; top:0; left:0; right:0; margin:0;
      animation:mobile-scene-hold 1s linear both;
      animation-range:contain 0px contain var(--mobile-scene-travel,0px);
    }
    .approved-experience[data-experience="home"] .product-showcase { animation-timeline:--package-hold; }
    .approved-experience[data-experience="home"] .story-stage { animation-timeline:--story-hold; }
  }
}
@keyframes mobile-scene-hold { from { translate:0 0; } to { translate:0 var(--mobile-scene-travel,0px); } }