/* ==== SLOT:WP7 om-os-view ==== */
/* Om os view (#view-om-os): story reveal, team, Instagram clips. Prefix om-. */

/* --- Historien bag IIP: the Hero layout (issue #9, chosen by Martin
   2026-10-22). A full-bleed opener with the title in red tight into its
   bottom-left corner; then, edge to edge within the gutter, the lead and
   first paragraph beside a photo, and the rest of the story as text cells in
   an uneven mosaic of their gap-year photos. Each paragraph and photo is
   placed on one 12-column grid. Paragraphs and photos fade up gently as they
   enter the screen. --- */
/* A short step from the last mosaic row to "Mød os" instead of two full section gaps (Martin, 2026-10-20). */
#om-story { padding-top: 0; padding-bottom: 0; }
#om-team { padding-top: var(--space-6); }
#om-story .media { border-radius: 0; }   /* square photos throughout (Martin, 2026-10-20) */
#om-story .om-story-grid {
  --om-tile: clamp(8px, 0.8vw, 12px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto;   /* band, lead, first paragraph; the mosaic rows below get a floor */
  grid-auto-rows: minmax(clamp(240px, 24vw, 400px), auto); gap: var(--om-tile);
}
.om-s-text { display: contents; }
.om-story.om-js .om-reveal { opacity: 0; will-change: opacity, transform; }
/* The band uses the 16:9 diving photo, which crops far less in it than the
   4:3 restaurant photo; that one moves into the mosaic (Martin, 2026-10-20). */
#om-story .om-story-band {
  grid-area: 1 / 1 / 2 / -1; height: min(78vh, 760px);
  margin: 0 calc(-1 * var(--gutter)) var(--space-4);
}
#om-story .om-story-band img { object-position: 50% 42%; }
#om-story .om-story-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(17,29,64,0.9) 0%, rgba(17,29,64,0.55) 24%, rgba(17,29,64,0) 50%);
}
#om-story .om-story-title {
  grid-area: 1 / 1 / 2 / -1; align-self: end; position: relative; z-index: 1;
  margin: 0 0 calc(var(--space-4) + clamp(6px, 1.2vw, 20px)) calc(clamp(16px, 2.2vw, 36px) - var(--gutter));
  color: var(--red); font-size: clamp(2.8rem, 7.4vw, 7rem); line-height: 0.95;
}
/* The paragraphs beside the photos fill their cells rather than floating in them (Martin, 2026-10-20). */
#om-story .om-para { color: var(--navy); font-size: clamp(1.2rem, 1.62vw, 2rem); line-height: 1.5; letter-spacing: -0.005em; }
#om-story .om-para--lead { font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.35; letter-spacing: -0.015em; }
/* The lead and first paragraph share the photo's height, centred: the
   photo spans both rows and its extra height is split between them. */
#om-story .om-s-a { display: block; grid-area: 2 / 1 / 3 / 7; align-self: end; padding-right: var(--space-5); }
#om-story .om-s-b { display: block; grid-area: 3 / 1 / 4 / 7; align-self: start; padding: var(--space-2) var(--space-5) 0 0; }
/* The mosaic: text cells sit between the photos, which fill their cells. */
#om-story .om-story-ph,
#om-story .om-s-x { align-self: stretch; }
#om-story .om-story-ph > img,
#om-story .om-s-x > img { position: absolute; inset: 0; }   /* the photo's own height must not size its row: the text and the row floor do */
#om-story .om-story-ph--market { grid-area: 2 / 7 / 4 / 13; aspect-ratio: 3 / 2; }
#om-story .om-s-c .om-para,
#om-story .om-s-d,
#om-story .om-s-e .om-para { align-self: center; padding: var(--space-3) clamp(12px, 2vw, 32px); }
#om-story .om-s-d { display: block; }
#om-story .om-s-d .om-para + .om-para { margin-top: 1em; }
#om-story .om-s-c .om-para:nth-child(1) { grid-area: 4 / 1 / 5 / 5; padding-left: 0; }
#om-story .om-s-x--pair { grid-area: 4 / 5 / 5 / 10; }
#om-story .om-story-ph--hike { grid-area: 4 / 10 / 6 / 13; }
#om-story .om-s-x--gondola { grid-area: 5 / 1 / 6 / 5; }
#om-story .om-s-c .om-para:nth-child(2) { grid-area: 5 / 5 / 6 / 10; }
#om-story .om-story-ph--meadow { grid-area: 6 / 1 / 7 / 4; }
#om-story .om-s-d { grid-area: 6 / 4 / 7 / 9; }
#om-story .om-s-x--group { grid-area: 6 / 9 / 7 / 13; }
#om-story .om-s-x--jungle { grid-area: 7 / 1 / 8 / 5; }
#om-story .om-s-e .om-para { grid-area: 7 / 5 / 8 / 10; }
#om-story .om-s-x--ski { grid-area: 7 / 10 / 8 / 13; }
.om-story-ph--market img { object-position: 55% 72%; }   /* Asha stands low in the tall meadow photo (the slot kept its market name) */
.om-story-ph--meadow img { object-position: 50% 55%; }   /* Bertram in the cave mouth, just above the middle (the slot kept its round-4 name) */
.om-story-ph--hike img { object-position: 50% 25%; }   /* Bertram's face and raised arm are in the top third */
.om-s-x--pair img { object-position: 50% 28%; }   /* their faces, not the table */
.om-s-x--gondola img { object-position: 60% 45%; }
.om-s-x--group img { object-position: 40% 35%; }
.om-s-x--jungle img { object-position: 50% 62%; }
.om-s-x--ski img { object-position: 50% 40%; }

/* --- Mød os. "Kant til kant" (Martin, 2026-10-05): the group clip and the
   two guides' photos span the full width with square corners and tight gaps,
   text kept off the edge by --om-edge. --- */
.om-team { --om-edge: clamp(16px, 1.6vw, 24px); }
/* Display size (Martin, 2026-10-20), with the letters right on the group clip: the
   glyphs end ~0.13em above the line box (the "ø" dips just below the baseline;
   "Meet us" has no descender). */
.om-team .t-h2 {
  position: relative; z-index: 1;
  margin-bottom: -0.127em; margin-left: calc(var(--om-edge) - var(--gutter));
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em;
}
body.show-en .om-team .t-h2 { margin-bottom: -0.157em; }
.om-team-group { aspect-ratio: 21 / 9; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
.om-team-group video { object-position: 50% 70%; }   /* keeps both waving figures in the 21:9 crop of the 4:3 clip */
/* Landscape photos (Martin, 2026-10-05) that scale with their column, so they
   fill any screen at 3:2. Hovering swaps to the second photo. Photos from
   Martin's AB-Photos (see photos/SOURCES.txt). */
.om-team-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 14px) 0; align-items: stretch;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
}
/* Both photos overlap their neighbour by half a pixel, which hides a half-pixel seam at odd
   widths and keeps them the same width, so their 3:2 bottoms line up (Martin, 2026-10-20). */
.om-person-media { position: relative; aspect-ratio: 3 / 2; margin: 0 -0.5px var(--space-3); border-radius: 0; }
.om-person-media > img { position: absolute; inset: 0; }
.om-person-media > .om-person-alt { opacity: 0; transition: opacity 450ms var(--ease); }
.om-person-media.is-alt .om-person-alt { opacity: 1; }   /* toggled by the script each time the pointer enters the photo */
.om-person-alt--closer { transform: scale(1.18); transform-origin: 46% 52%; }   /* Bertram on the interview set: a little closer (Martin, 2026-10-20) */
/* The name sits in the photo's bottom-left corner, large and red,
   scaling with the screen, and stays put through the hover swap
   (Martin, 2026-10-05). No shadow or fade behind it. */
.om-person .om-person-name {
  position: absolute; left: clamp(10px, 1.4vw, 20px); bottom: clamp(2px, 0.5vw, 8px); z-index: 1; margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 6.5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--red);
}
/* A faint hairline between the two guides' text; the photos above keep the tight gap. */
.om-person { display: flex; flex-direction: column; }
.om-person .t-body { flex: 1; padding-left: var(--om-edge); padding-right: clamp(16px, 2.6vw, 40px); }
.om-person + .om-person .t-body { padding-right: var(--om-edge); border-left: 1px solid var(--border); }

/* --- Følg med på rejsen: Instagram-style vertical clips --- */
.om-follow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.om-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.om-reel { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-media); background: var(--navy); }
.om-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.om-reel::after {   /* soft bottom shade so the caption stays readable on any clip */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(17,29,64,0.65), rgba(17,29,64,0)); pointer-events: none;
}
.om-reel-sound {   /* covers the whole tile: click anywhere toggles sound */
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px;
  color: var(--white); background: transparent;
}
.om-reel-sound:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; border-radius: var(--radius-media); }
.om-reel-icon {   /* glyph pinned to the top 38px, so the pill can grow down into a volume slider */
  display: inline-flex; align-items: flex-start; justify-content: center; padding-top: 10px;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: rgba(17,29,64,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: height 200ms var(--ease);
}
.om-reel-icon svg { width: 18px; height: 18px; }
.om-reel-icon .om-ico-on { display: none; }
.om-reel.is-sound .om-reel-icon .om-ico-on { display: block; }
.om-reel.is-sound .om-reel-icon .om-ico-off { display: none; }
.om-reel-icon .om-ico-play { display: none; }
.om-reels.is-static .om-reel:not(.is-playing) .om-reel-icon .om-ico-play { display: block; }
.om-reels.is-static .om-reel:not(.is-playing) .om-reel-icon .om-ico-off { display: none; }
.om-reel-cap {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  color: var(--white); font-size: var(--fs-small); font-weight: 700; line-height: 1.3; pointer-events: none;
}
.om-reel-cap-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* a real reel's caption: first line only */
.om-reel-hint { display: block; font-weight: 400; opacity: 0; transition: opacity var(--dur) var(--ease); }
.om-reel:hover .om-reel-hint { opacity: 0.85; }
.om-reel-ig {   /* appears once the tile has sound, as the spec asks */
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: none; padding: 4px 9px; border-radius: var(--radius-btn);
  background: var(--white); color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.2; text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 440px) { .om-reel-ig { font-size: 15px; padding: 3px 7px; } }   /* two ~170px tiles: same proportions, smaller */
.om-reel-ig:hover { background: var(--red); color: var(--white); }
.om-reel.is-sound .om-reel-ig { display: inline-flex; }
/* Volume (Martin, 2026-10-05): hovering the speaker grows its pill down and
   a vertical slider appears inside the extension. The slider can't live in
   the tile-wide button, so it is a sibling laid over the grown pill; it
   stays open while hovered itself. */
.om-reel:has(.om-reel-icon:hover) .om-reel-icon,
.om-reel:has(.iip-volume:hover) .om-reel-icon { height: 138px; }
.om-reel .iip-volume {
  position: absolute; right: 14px; top: 52px; z-index: 3; width: 38px; height: 94px;
  justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity 150ms var(--ease), visibility 0s linear 150ms;
}
.om-reel .iip-volume input { flex: none; transform: rotate(90deg); }   /* 0 at the top, next to the speaker; louder further down */
.om-reel:has(.om-reel-icon:hover) .iip-volume, .om-reel .iip-volume:hover {
  opacity: 1; visibility: visible; transition: opacity 150ms var(--ease) 60ms, visibility 0s;
}
.om-reel.is-sound .om-reel-cap { display: none; }

@media (max-width: 900px) {
  /* Phones: one column of text, with the photos full width or in pairs. */
  #om-story .om-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  #om-story .om-story-band { height: min(56vh, 460px); margin-bottom: var(--space-3); }   /* low enough that both faces fit the width */
  #om-story .om-story-band img { object-position: 50% 40%; }
  #om-story .om-story-title { margin-bottom: calc(var(--space-3) + 10px); font-size: clamp(2.4rem, 11vw, 3.6rem); }
  #om-story .om-s-a,
  #om-story .om-s-b,
  #om-story .om-s-c .om-para,
  #om-story .om-s-d,
  #om-story .om-s-e .om-para { grid-area: auto; grid-column: 1 / -1; align-self: start; padding: var(--space-1) 0 var(--space-2); }
  #om-story .om-para { font-size: 1.075rem; }
  #om-story .om-para--lead { font-size: 1.4rem; }
  #om-story .om-story-ph,
  #om-story .om-s-x { grid-area: auto; grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  #om-story .om-story-ph--hike,
  #om-story .om-s-x--gondola,
  #om-story .om-story-ph--meadow,
  #om-story .om-s-x--ski { grid-column: auto; aspect-ratio: 4 / 5; }
  #om-story .om-s-a { order: 1; }
  #om-story .om-s-b { order: 2; }
  #om-story .om-story-ph--market { order: 3; margin-bottom: var(--space-2); }
  #om-story .om-s-c .om-para:nth-child(1) { order: 4; grid-area: auto; grid-column: 1 / -1; padding-left: 0; }
  #om-story .om-s-x--pair { order: 5; }
  #om-story .om-s-c .om-para:nth-child(2) { order: 6; grid-area: auto; grid-column: 1 / -1; }
  #om-story .om-story-ph--hike { order: 7; }
  #om-story .om-s-x--gondola { order: 8; }
  #om-story .om-s-d { order: 9; }
  #om-story .om-s-x--group { order: 10; }
  #om-story .om-story-ph--meadow { order: 11; }
  #om-story .om-s-x--ski { order: 12; }
  #om-story .om-s-e .om-para { order: 13; }
  #om-story .om-s-x--jungle { order: 14; }

  .om-team-grid { grid-template-columns: 1fr; row-gap: var(--space-5); }
  .om-person .t-body, .om-person + .om-person .t-body { padding-left: var(--om-edge); padding-right: var(--om-edge); border-left: 0; }
  .om-reels { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .om-person-alt, .om-reel-hint { transition: none; }
}
/* ==== /SLOT:WP7 ==== */