/* Phone mockups, hero journey and dashboard cards (M360-4723).
 *
 * Two rules the handoff is strict about and that are easy to erode later:
 *
 * 1. Coral belongs to DemoPharm — the fictional manufacturer shown inside the
 *    phone screens — and must never appear in the page design. Every coral
 *    token below is scoped under `.screen`/`.mock` for that reason.
 * 2. Mockups carry real text: product names, ratings, prices, opening hours.
 *    Never grey placeholder bars; a mockup that shows nothing sells nothing.
 */

/* ── Phone shell ───────────────────────────────────────────────────────── */

.phone {
  background: var(--c-navy);
  border-radius: var(--r-lg);
  padding: 7px;
  width: 100%;
  max-width: 252px;
}
.phone__viewport {
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* All three "So funktioniert's" frames share one fixed height so the row
     reads as three identical devices rather than three different phones. */
  height: 344px;
}

/* iPhone chrome — status bar, browser line, home indicator. */
.screen__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px 5px; font-size: 10px; font-weight: var(--fw-semi);
  color: var(--c-navy); flex: 0 0 auto;
}
.screen__status-right { display: flex; align-items: center; gap: 4px; }
.screen__battery {
  width: 18px; height: 9px; border: 1px solid rgba(12, 35, 66, .4);
  border-radius: var(--r-sm); padding: 1px; display: flex;
}
.screen__battery i { width: 72%; background: var(--c-navy); border-radius: var(--r-sm); display: block; }
.screen__bars { display: flex; align-items: flex-end; gap: 1.5px; }
.screen__bars i { width: 3px; border-radius: var(--r-sm); background: var(--c-navy); display: block; }
.screen__bars i:nth-child(1) { height: 4px; }
.screen__bars i:nth-child(2) { height: 6px; }
.screen__bars i:nth-child(3) { height: 8px; }
.screen__bars i:nth-child(4) { height: 10px; background: rgba(12, 35, 66, .28); }
.screen__url {
  border-top: 1px solid rgba(12, 35, 66, .1); background: var(--c-ice);
  padding: 7px 16px; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-mono); font-size: 8px; color: var(--c-label); flex: 0 0 auto;
}
.screen__home {
  background: var(--c-ice); display: flex; justify-content: center;
  padding: 6px 0 9px; flex: 0 0 auto;
}
.screen__home i { width: 104px; height: 4px; border-radius: var(--r-sm); background: rgba(12, 35, 66, .25); display: block; }
.screen__body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-height: 0; }

/* DemoPharm brand marks — scoped so coral cannot leak into the page. */
.dp { display: flex; align-items: center; gap: 6px; }
.dp__badge {
  width: 15px; height: 15px; border-radius: var(--r-sm);
  background: var(--c-demo-coral); color: var(--c-white);
  font-family: var(--font-mono); font-size: 6.5px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dp__name { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--c-demo-coral); }
.screen__panel {
  background: var(--c-demo-coral); padding: 10px 11px;
  display: flex; flex-direction: column; gap: 7px;
}
.screen__panel-title { font-size: 13px; font-weight: var(--fw-black); line-height: 1.15; letter-spacing: var(--ls-tight); color: var(--c-white); }
.screen__panel-sub { font-size: 9.5px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.screen__btn {
  background: var(--c-white); color: var(--c-demo-coral);
  border-radius: var(--r-sm); padding: 7px 11px;
  font-size: 10px; font-weight: var(--fw-bold);
}
.screen__btn--solid {
  background: var(--c-demo-coral); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  height: 44px; font-size: 13.5px; font-weight: var(--fw-semi);
}
.screen__frame { border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(12, 35, 66, .1); }
.screen__lines { display: flex; flex-direction: column; gap: 5px; }
.screen__lines i { height: 4px; border-radius: var(--r-sm); background: rgba(12, 35, 66, .08); display: block; }

/* The cyan ring that taps the button once per loop. */
.tap-ring {
  position: absolute; right: -9px; bottom: -9px;
  width: 24px; height: 24px; border: 2px solid var(--c-cyan);
  border-radius: 50%; animation: tapRing 4.2s ease-out infinite;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden; background: var(--c-bg);
  padding: clamp(56px, 6vw, 96px) var(--sp-section-x) clamp(44px, 4.6vw, 64px);
}
/* Background photo: blurred, desaturated, under a white veil, and masked away
   toward the bottom so the section below starts with no visible seam. */
.hero__bg {
  position: absolute; inset: -8% -4% 0 -4%; z-index: 0;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 112%;
  object-fit: cover; object-position: 32% 52%;
  filter: blur(6px) saturate(.62) contrast(.86) brightness(1.05);
  will-change: transform;
}
/* The veil is the page colour at 72%, so the photo sits under the page in
   both themes instead of under a white wash on a dark background. */
.hero__veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-bg) 72%, transparent); }
:root.dark .hero__veil { background: color-mix(in srgb, var(--c-bg) 90%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .hero__veil { background: color-mix(in srgb, var(--c-bg) 90%, transparent); }
}
.hero__stage { position: relative; max-width: var(--w-container); margin: 0 auto; min-height: clamp(680px, 88vh, 740px); }
.hero__cols {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.hero__claim .h1 { margin-bottom: 22px; }
.hero__claim .lead { max-width: 28em; margin-bottom: 30px; color: var(--c-text-muted); }

/* The journey line, drawn as an SVG path so it can grow via stroke-dashoffset. */
.hero__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }

.hero__frame {
  position: relative; width: 297px; height: 520px; margin-top: 28px;
  flex: 0 0 auto; animation: heroFloat 6s ease-in-out infinite;
}
.hero__chip {
  position: absolute; left: 16px; top: -24px; z-index: 25;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-navy);
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 5px 9px; white-space: nowrap; overflow: hidden;
}
.hero__shell {
  position: absolute; left: 0; top: 0; width: 330px; height: 578px;
  transform: scale(.9); transform-origin: top left;
  background: var(--c-navy); border-radius: var(--r-lg); padding: 9px;
  box-shadow: var(--sh-float); z-index: 1;
}
.hero__viewport { position: relative; height: 560px; border-radius: var(--r-md); overflow: hidden; background: var(--c-white); }
/* Screens are stacked; only the active one is visible. The frame never moves —
   only its content swaps, which is what makes the phone read as one device. */
/* Only the active screen is visible. Without JS nothing swaps them, so the
   stack collapses to the first screen alone rather than to four blank ones. */
.hero__screen { display: none; }
.js .hero__screen {
  display: flex;
  position: absolute; inset: 0; background: var(--c-white);
  flex-direction: column;
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-screen) var(--ease-soft), transform var(--d-screen) var(--ease-soft);
}
.hero__screen:first-child { display: flex; position: absolute; inset: 0; flex-direction: column; }
/* The first screen carries its own visibility instead of relying on the
   u-op-1 utility in home.html.j2 (M360-4727, F41). That utility is (0,1,0)
   and loses to `.js .hero__screen` at (0,2,0) no matter which file loads
   last, so the opacity:0 above stood until hero.js wrote an inline style over
   it. If hero.js failed to load — a deploy that missed the file, a blocker,
   a 404 — all four screens stayed at opacity 0 and the phone on the home page
   rendered as an empty white rectangle. Measured: with hero.js blocked, all
   four read opacity "0". */
.js .hero__screen:first-child { opacity: 1; transform: none; z-index: 20; }
.hero__screen .screen__body { padding: 12px 18px 18px; gap: 12px; }
.hero__screen .screen__status { padding: 13px 22px 7px; font-size: 12px; }
.hero__screen .screen__url { padding: 9px 22px 4px; font-size: 10px; }

.hero__band { position: absolute; left: 0; right: 0; bottom: 92px; height: 0; z-index: 1; }
.hero__station {
  position: absolute; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.hero__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-white); border: 2px solid rgba(30, 183, 212, .45);
  transition: background .3s ease, border-color .3s ease;
}
.hero__station.is-on .hero__dot { background: var(--c-cyan); border-color: var(--c-cyan); }
.hero__station-label {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.hero__num { color: var(--c-cyan-label); opacity: .75; transition: opacity .3s ease; }
.hero__station.is-on .hero__num { opacity: 1; color: var(--c-cyan-text); }
.hero__label { color: var(--c-label); transition: color .3s ease; }
.hero__station.is-on .hero__label { color: var(--c-text); }
.hero__pin-wrap {
  position: absolute; top: 0; transform: translate(-50%, -100%);
  width: 34px; height: 44px; display: flex; align-items: flex-end;
  justify-content: center; pointer-events: none;
}
.hero__pin { position: relative; width: 22px; height: 29px; opacity: .28; transition: opacity .4s ease; }
.hero__ring {
  position: absolute; bottom: -9px; left: 50%; width: 18px; height: 18px;
  margin-left: -9px; border-radius: 50%; border: 2px solid var(--c-cyan);
  opacity: 0; transform: scale(.5);
}

@media (max-width: 900px) {
  /* Below the two-column breakpoint the stations would collide with the phone,
     so the band and the line step aside and the hero becomes claim + device. */
  .hero__band, .hero__line { display: none; }
  .hero__stage { min-height: 0; }
  .hero__frame { margin-left: auto; margin-right: auto; }
}

/* ── Dashboard card ────────────────────────────────────────────────────── */

.dash {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 18px;
}
.dash__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash__live { display: flex; align-items: center; gap: 7px; }
.dash__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); display: block; }
.dash__bars { display: flex; align-items: flex-end; gap: clamp(5px, 1vw, 10px); height: 132px; }
.dash__bar {
  flex: 1; background: rgba(30, 183, 212, .22); border-radius: var(--r-sm) var(--r-sm) 0 0;
  position: relative; transition: background var(--d-base) ease;
}
.dash__bar--peak { background: var(--c-cyan); }
.dash__tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--c-navy); color: var(--c-white);
  padding: 6px 9px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  white-space: nowrap;
}
.dash__foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--c-border); }

/* ── Pharmacy portal mockup (Apotheken page) ───────────────────────────── */

.res-card { position: relative; animation: resTap 6s ease-in-out infinite; }
.res-card__new  { animation: resNew 6s ease-in-out infinite; }
.res-card__done { position: absolute; inset: 0; animation: resDone 6s ease-in-out infinite; }
.portal-row {
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 9px 10px; display: flex; flex-direction: column; gap: 4px;
}
.portal-badge {
  border-radius: var(--r-sm); padding: 3px 6px;
  font-family: var(--font-mono); font-size: 7.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.portal-badge--new  { background: rgba(232, 115, 74, .12); color: var(--c-demo-coral); }
.portal-badge--done { background: rgba(22, 112, 90, .12); color: var(--c-demo-success); }

/* ── Open image slots ──────────────────────────────────────────────────── */

/* ── Fixed positions and sizes lifted out of the markup ────────────────── */

/* Station positions along the journey line. Fixed by the design at
   12.5 / 37.5 / 62.5 / 87.5 %, so they are classes rather than inline styles —
   which the CSP forbids anyway. */
.hero__station--1 { left: 12.5%; }
.hero__station--2 { left: 37.5%; }
.hero__station--3 { left: 62.5%; }
.hero__station--4 { left: 87.5%; }
/* The pin sits at the last station and anchors the end of the line. */
.hero__pin-wrap { left: 87.5%; }
.hero__anchor {
  position: absolute; left: 87.5%; top: 0;
  transform: translate(-50%, -50%); width: 0; height: 0;
}

/* The dashboard bar chart is a fixed sequence: eight ordinary bars, one peak
   carrying the tooltip, two more after it. */
.dash__bar:nth-child(1) { height: 38%; }
.dash__bar:nth-child(2) { height: 52%; }
.dash__bar:nth-child(3) { height: 44%; }
.dash__bar:nth-child(4) { height: 61%; }
.dash__bar:nth-child(5) { height: 57%; }
.dash__bar:nth-child(6) { height: 73%; }
.dash__bar:nth-child(7) { height: 66%; }
.dash__bar:nth-child(8) { height: 92%; }
.dash__bar:nth-child(9) { height: 70%; }
.dash__bar:nth-child(10) { height: 64%; }

/* Chrome sizes: the hero phone is larger than the three inline ones, so its
   status bar and browser line get the roomier variant. */
.screen__status--lg { padding: 13px 22px 7px; font-size: 12px; }
.screen__url--lg { padding: 9px 22px 4px; font-size: 10px; }
.screen__5g { font-family: var(--font-mono); font-size: 8px; letter-spacing: .04em; }
.screen__status--lg .screen__5g { font-size: 9.5px; }
.screen__lock {
  width: 8px; height: 9px; display: block;
  border: 1.5px solid rgba(12, 35, 66, .4); border-radius: var(--r-sm);
}
.dp__badge--lg { width: 20px; height: 20px; font-size: 8.5px; }
.dp__name--lg { font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: -.01em; }


/* ── Mockups do not follow the theme ───────────────────────────────────── */

/* A phone in a screenshot shows a light app whatever the page around it does.
   The screens inherit the page's colour tokens, though, so dark mode washed
   their text out to near-invisible. Pinning the light values on the device
   shells keeps the depiction honest and costs one rule.

   --c-navy is included because the phone frame is that colour: in dark mode it
   shifts to the page navy and the device stops reading as an object. */
.phone,
.hero__shell,
.hero__chip {
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F2F5FA;
  --c-ice: #F2F5FA;
  --c-navy: #0C2342;
  --c-text: #0C2342;
  --c-text-muted: #4A5462;
  --c-label: #5B6472;
  --c-border: rgba(12, 35, 66, .12);
  --c-border-strong: rgba(12, 35, 66, .22);
  color: var(--c-text);
}

/* ── The portal card is page furniture, not a phone screen ─────────────── */

/* The Apotheken page shows the pharmacy portal as a full-size card rather than
   inside a device frame, so it is read at page scale and has to meet AA like
   any other content. The badge sizes are inherited from the phone mockups,
   where 7.5px is right because the whole device is scaled down — here it was
   8px type at 2.4:1. */
.dash .portal-badge {
  font-size: 11px;
  letter-spacing: .08em;
  padding: 4px 8px;
}
.dash .portal-badge--new  { background: rgba(232, 115, 74, .16); color: #A8441F; }
.dash .portal-badge--done { background: rgba(22, 112, 90, .16); color: var(--c-demo-success); }
.dash .screen__btn { font-size: 13px; }
/* White type needs 4.5:1 at this size, and neither coral cut reaches it —
   #CE5C36 gets to 4.03. This is the one place the page shows a coral button at
   reading size, so it takes a deeper shade than the phone screens do. */
.dash .screen__btn--solid,
.dash .screen__btn.u-bg-demo-coral { background: #A8441F; }

/* Dark mode: the two tinted badges sit on a dark card, where a 16% wash of
   their own colour is not enough separation and the dark green disappears. */
:root.dark .dash .portal-badge--new  { background: rgba(232, 115, 74, .22); color: #F0A184; }
:root.dark .dash .portal-badge--done { background: rgba(52, 168, 137, .22); color: #6FD3B6; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .dash .portal-badge--new  { background: rgba(232, 115, 74, .22); color: #F0A184; }
  :root:not(.light) .dash .portal-badge--done { background: rgba(52, 168, 137, .22); color: #6FD3B6; }
}