/* Renaissance Dental — CSS för undersidorna (behandling, om oss, kontakt).
   Laddas efter tokens.css och layout.css och använder samma tokens och
   klasser (.inner, .btn-primary, .btn-ghost, .text-link, .intro,
   .content-block, .contact-panel). Här ligger bara det som är nytt. */

/* ── Sidhuvud: föräldern till aktuell sida markeras på dator ─────── */
@media (min-width: 901px) {
  .site-header .menu .current-menu-parent > a { color: var(--fg-strong); background: var(--blush-50); }
}

/* ── Sidhero (lumo/hero på undersidor) ───────────────────────────────
   Dator: text till vänster, bild till höger. Kompakt, så att hela heron
   syns under sidhuvudet (117 px) på en 1440×900-skärm. */
.page-hero { background: var(--blush-50); }
.page-hero .inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 96px); align-items: center;
  padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px);
}
.page-hero h1 {
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5); text-wrap: pretty;
}
.page-hero .ingress { font-size: var(--fs-lead); line-height: 1.6; max-width: 34em; margin-bottom: var(--space-6); }
.page-hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Punkter och betyg i behandlingsheron — samma stil som startsidans hero */
.page-hero .ingress:has(+ .bulletins) { margin-bottom: var(--space-5); }
.page-hero .bulletins { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 40px; margin-bottom: var(--space-6); }
.page-hero .bulletins li { display: flex; align-items: flex-start; text-wrap: pretty; gap: 8px; font-size: 15px; font-weight: 500; color: var(--fg); }
.page-hero .bulletins li::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a5c6' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-hero .bulletins li:empty { display: none; }
@media (max-width: 900px) {
  .page-hero .bulletins { grid-template-columns: 1fr; gap: 8px; margin-bottom: 28px; }
  .page-hero .ingress:has(+ .bulletins) { margin-bottom: 16px; }
}
.page-hero .media img {
  width: 100%; height: clamp(320px, 52vh, 520px);
  object-fit: cover; object-position: 60% 50%; border-radius: var(--radius-md);
}
/* Brett gruppfoto (Om oss): bredare bildkolumn och 2:1, så att hela teamet syns */
.page-hero.wide .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.page-hero.wide .media img { height: auto; aspect-ratio: 2 / 1; object-position: 50% 35%; }

/* Utan bild (Kontakt): bara rubrik och ingress */
.page-hero.text-only .inner {
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(36px, 5vh, 56px);
}
.page-hero.text-only .text { max-width: 760px; }
.page-hero.text-only .ingress { margin-bottom: 0; }

/* ── Innehållsblock: varianter ───────────────────────────────────── */
.content-block.tone-paper { background: var(--paper); }
/* Intro och första innehållsblocket delar vit yta — ingen dubbel luft */
.intro + .content-block:not(.tone-paper) { padding-top: 0; }
@media (min-width: 901px) {
  .content-block.reverse .media { order: -1; }
}
/* Röntgenbilden är ett brett panorama: implantatet sitter vänster om mitten */
.content-block .media img.pos-implant { object-position: 36% 50%; }

/* Implantatets delar: lugn lista med hårlinjer */
.content-block .parts { margin-bottom: 0; border-top: 1px solid var(--border); }
.content-block .parts > div {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.content-block .parts dt { font-weight: 600; color: var(--fg-strong); }
.content-block .parts dd { margin: 0; }

/* Behandlingens steg: siffra i klartext, inga cirklar */
.content-block .steps { list-style: none; margin-bottom: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--border); }
.content-block .steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.content-block .steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  font-size: 20px; line-height: 1.35; font-weight: 450; color: var(--blush-700);
}
.content-block .steps h3 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.content-block .steps p { font-size: var(--fs-body); line-height: 1.6; margin-top: 4px; }

/* ── Vanliga frågor (lumo/faq) ───────────────────────────────────── */
.faq { background: var(--white); padding: var(--space-8) 0; }
.faq .inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.faq .head { position: sticky; top: 141px; }
.faq h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; text-wrap: balance; }
.faq .help { font-size: var(--fs-body); }
.faq .help a { color: var(--blush-700); font-weight: 500; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq .list { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 48px; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-h4); line-height: 1.4; font-weight: 500; color: var(--fg-strong);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blush-700); }
/* Plus som blir minus när frågan är öppen */
.faq .pm { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.faq .pm::before, .faq .pm::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px;
  border-radius: 2px; background: var(--blush-600); transition: transform .2s ease;
}
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq .answer { max-width: 46em; padding: 0 44px 24px 0; }
.faq .answer p + p { margin-top: 12px; }

/* ── Teamet (lumo/text-blocks på Om oss) ─────────────────────────── */
.text-blocks { background: var(--white); padding: var(--space-8) 0; }
.text-blocks .head { max-width: 672px; margin-bottom: 40px; }
.text-blocks h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.text-blocks .head p { font-size: var(--fs-lead); line-height: 1.6; }
/* Fyra personer (Viktoria har slutat, 2026-10-29): fyra kolumner på datorn, 2×2 på surfplatta */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.team img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); background: var(--blush-50); }
.team h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin-top: 16px; }
.team .role { font-weight: 500; color: var(--fg); margin-top: 2px; }
.team .meta { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.team .role + .meta { margin-top: 10px; }
.team .focus { font-size: var(--fs-small); line-height: 1.55; margin-top: 10px; }
.team p:empty, .text-blocks .head p:empty { display: none; }

/* ── Medlemskap och samarbeten (lumo/partner-list på Om oss) ─────────
   En lugn lista med hårlinjer: logga, kort text om kopplingen, pil. Loggorna
   i full färg på vit yta, utjämnade via width/height i HTML och vänsterjusterade i
   en egen kolumn. Hela raden är länkyta (loggans länk täcker raden). */
.partner-list { background: var(--white); padding: var(--space-8) 0; }
.partner-list .head { max-width: 672px; margin-bottom: 32px; }
.partner-list h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; text-wrap: balance; }
.partner-list .head p { font-size: var(--fs-lead); line-height: 1.6; }
.partner-list .list { border-top: 1px solid var(--border); }
.partner-list .list li {
  position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) 24px;
  align-items: center; column-gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border);
}
.partner-list .mark { display: flex; align-items: center; justify-content: flex-start; height: 56px; }
.partner-list .mark img { max-width: 100%; height: auto; }
.partner-list .list p { font-size: var(--fs-body); line-height: 1.55; color: var(--fg); text-wrap: pretty; transition: color .2s ease; }
.partner-list .arrow { font-size: 20px; color: var(--blush-600); transition: transform .2s ease, color .2s ease; }
.partner-list .mark::after { content: ""; position: absolute; inset: 0; }
.partner-list .mark:focus-visible { outline: none; }
.partner-list .mark:focus-visible::after { outline: 2px solid var(--logo); outline-offset: 2px; border-radius: var(--radius-sm); }
.partner-list li:hover p { color: var(--fg-strong); }
.partner-list li:hover .arrow { color: var(--blush-700); transform: translateX(4px); }
.partner-list .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) {
  .partner-list { padding: var(--space-7) 0; }
}
/* Mobil: loggan och pilen på en rad, texten under */
@media (max-width: 600px) {
  .partner-list .head { margin-bottom: 24px; }
  .partner-list .list li { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "mark arrow" "text text"; row-gap: 10px; padding: 18px 0; }
  .partner-list .mark { grid-area: mark; justify-content: flex-start; height: 48px; }
  .partner-list .list p { grid-area: text; }
  .partner-list .arrow { grid-area: arrow; }
}
/* Dator: rubriken till vänster, listan till höger; raderna följer skärmhöjden */
@media (min-width: 901px) {
  .partner-list .inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
  .partner-list .head { margin-bottom: 0; }
  .partner-list .list li { grid-template-columns: 200px minmax(0, 1fr) 24px; column-gap: 32px; }
}
@media (min-width: 1024px) {
  .partner-list { padding: clamp(32px, 6vh, 64px) 0; }
  .partner-list .list li { padding: clamp(10px, 1.6vh, 18px) 0; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .partner-list .head, .partner-list .list { animation: page-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .partner-list .list { animation-range: entry 10% entry 55%; }
  }
}

/* ── Hitta hit (lumo/map-section) ────────────────────────────────── */
.map-section { background: var(--paper); padding: var(--space-8) 0; }
.map-section.tone-white { background: var(--white); }
.map-section .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.map-section h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 20px; }
.map-section address { font-style: normal; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; letter-spacing: -0.01em; color: var(--fg-strong); }
.map-section .floor { font-size: var(--fs-lead); line-height: 1.6; margin-top: 8px; max-width: 32em; }
.map-section .transit { margin: 28px 0 0; border-top: 1px solid var(--border); }
.map-section .transit > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.map-section dt { font-weight: 600; color: var(--fg-strong); }
.map-section dd { margin: 0; }
.map-section .text-link { margin-top: 24px; }
.map-section .media img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-md); }
/* Hitta hit följt av kontaktpanelen på samma yta: panelen räcker som avgränsning */
.map-section:not(.tone-white) + .contact-panel { padding-top: 0; }
/* Mening med länkar till artiklarna om närområdena (Kontakt, fältet areas_text) */
.map-section .areas { margin-top: 20px; font-size: var(--fs-body); line-height: 1.6; max-width: 34em; text-wrap: pretty; }
.map-section .areas a { text-decoration: underline; text-decoration-color: var(--logo); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.map-section .areas a:hover { color: var(--fg-strong); }

/* ── Kontaktpanel med formulär (lumo/contact-panel-with-form) ────── */
.contact-panel.with-form .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.contact-panel.with-form .reach .details { margin-top: 40px; }
.contact-panel .urgent { text-wrap: pretty; }

.contact-form { display: grid; gap: 20px; }
.contact-form .form-head h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.contact-form .form-head p { color: var(--fg); }
.contact-form .required-note { font-size: var(--fs-small); margin-top: 6px; }
.contact-form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.contact-form label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--fg-strong); }
.contact-form .req { color: var(--blush-700); }
.contact-form input:not([type="checkbox"]), .contact-form textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px;
  font: 400 16px/1.4 var(--font-sans); color: var(--fg-strong);
  background: var(--white); border: 1px solid var(--ink-400); border-radius: var(--radius-md);
  transition: border-color .2s ease;
}
.contact-form textarea { min-height: 148px; resize: vertical; }
.contact-form input:not([type="checkbox"]):hover, .contact-form textarea:hover { border-color: var(--blush-600); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--logo); outline-offset: 2px; border-color: var(--blush-600); }
.contact-form input:not([type="checkbox"]):focus-visible, .contact-form textarea:focus-visible { border-radius: var(--radius-md); }
.contact-form .consent { display: flex; align-items: flex-start; gap: 12px; }
.contact-form .consent input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: var(--blush-600); cursor: pointer; }
.contact-form .consent label { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--fg); cursor: pointer; }
.contact-form .consent a { color: var(--blush-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.contact-form button { justify-self: start; border: 0; cursor: pointer; margin-top: 4px; }

/* ── Surfplatta och mobil (≤900) ─────────────────────────────────────
   Sidheron följer startsidans mobilhero: bilden överst tonar ut i vitt,
   texten börjar i den vita delen. */
@media (max-width: 900px) {
  .page-hero { background: var(--surface); }
  .page-hero .inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .page-hero .media { order: -1; position: relative; height: clamp(300px, 48svh, 520px); }
  .page-hero .media img { height: 100%; border-radius: 0; }
  .page-hero .media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 50%, rgba(var(--surface-rgb), .85) 86%, var(--surface) 100%);
  }
  .page-hero .text { position: relative; z-index: 1; margin-top: -56px; padding: 0 var(--gutter) var(--space-6); }
  .page-hero h1 { font-size: clamp(38px, 10.5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 18px; }
  .page-hero .ingress { font-size: 17px; margin-bottom: 28px; }
  .page-hero .btn-row { flex-wrap: nowrap; gap: 12px; }
  .page-hero .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .page-hero.wide .media { height: clamp(240px, 36svh, 420px); }
  .page-hero.wide .media img { height: 100%; aspect-ratio: auto; }

  .page-hero.text-only { background: var(--blush-50); }
  .page-hero.text-only .text { margin-top: 0; padding: 40px var(--gutter) 36px; }

  .content-block .steps li { padding: 16px 0; }

  .faq { padding: var(--space-7) 0; }
  .faq .inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq .head { position: static; }

  .text-blocks { padding: var(--space-7) 0; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }

  .map-section { padding: var(--space-7) 0; }
  .map-section .inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .map-section .media img { height: 360px; }

  .contact-panel.with-form .cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 600px) {
  /* Ring blir en rund ikonknapp bredvid Boka tid — texten finns kvar för skärmläsare */
  .page-hero .btn-row .btn-primary { flex: 1; padding-top: 16px; padding-bottom: 16px; }
  .page-hero .btn-row .btn-ghost { flex: 0 0 54px; width: 54px; height: 54px; padding: 0; border-radius: 50%; }
  .page-hero .btn-row .btn-ghost .icon { font-size: 22px; color: #76b459; }
  .page-hero .btn-row .btn-ghost .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-hero.text-only .text { padding: 32px var(--gutter) 28px; }

  .content-block .parts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .faq summary { font-size: 17px; padding: 18px 0; gap: 16px; }
  .faq .answer { padding-right: 0; }

  /* Teamet som lista: porträtt till vänster, text till höger */
  .text-blocks .head { margin-bottom: 24px; }
  .team { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border); }
  .team li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border); }
  .team h3 { font-size: var(--fs-h4); margin-top: 0; }

  .map-section .media img { height: 260px; }
  .map-section .transit > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .contact-form .row { grid-template-columns: minmax(0, 1fr); }
  .contact-form button { justify-self: stretch; padding-top: 16px; padding-bottom: 16px; }
}

/* ── Stora skärmar ───────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .page-hero h1 { font-size: clamp(58px, 4vw, 76px); }
  .page-hero .ingress { font-size: 20px; }
  .page-hero .btn-row .btn-primary, .page-hero .btn-row .btn-ghost { font-size: 17px; padding: 17px 34px; }
  .page-hero .media img { height: clamp(360px, 56vh, 600px); }
  .faq summary { font-size: 19px; }
  .map-section .media img { height: 480px; }
}

/* ── Dator: varje sektion ryms på skärmen ────────────────────────────
   Från 1024 px ska en hel sektion synas under sidhuvudet (117 px) utan att
   man behöver skrolla inuti den, ned till en 1280×720-skärm. Luften följer
   skärmhöjden och innehållet använder bredden i stället för att staplas.
   Surfplatta och mobil (≤900) påverkas inte. */
@media (min-width: 1024px) {
  /* Behandlingens steg: 2×2 bredvid bilden, bilden lika hög som texten */
  .content-block:has(.steps) { padding: clamp(32px, 6vh, 64px) 0; }
  .content-block:has(.steps) .inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch; gap: clamp(40px, 4vw, 64px);
  }
  .content-block.reverse:has(.steps) .inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .content-block:has(.steps) .text { align-self: center; }
  .content-block:has(.steps) .media { position: relative; min-height: 360px; }
  .content-block:has(.steps) .media img { position: absolute; inset: 0; height: 100%; }
  .content-block .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 2.5vw, 40px); }
  .content-block .steps li { grid-template-columns: 28px minmax(0, 1fr); align-content: start; padding: 16px 0 18px; }

  /* Vanliga frågor */
  .faq { padding: clamp(32px, 6vh, 64px) 0; }

  /* Teamet: rubrik och ingress på en rad */
  .text-blocks { padding: clamp(32px, 6vh, 64px) 0; }
  .text-blocks .head {
    max-width: none; display: flex; align-items: baseline; gap: 12px 48px;
    margin-bottom: clamp(24px, 4vh, 40px);
  }
  .text-blocks h2 { flex: none; margin-bottom: 0; }
  .text-blocks .head p { max-width: 46em; }
  .team { column-gap: 24px; }
  /* Porträtten krymps aldrig efter skärmhöjden: alltid hela 3:4 (feedback 2026-10-28) */
  .team h3 { margin-top: 14px; }
  .team .role + .meta, .team .focus { margin-top: 8px; }
  .team .meta { line-height: 1.45; }
  .team .focus { line-height: 1.5; }

  /* Kontaktpanel med formulär: rubriken flyttar till vänsterspalten, så att
     formuläret börjar högst upp i panelen */
  .contact-panel.with-form { padding: clamp(24px, 4vh, 64px) 0; }
  .contact-panel.with-form .panel {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr;
    column-gap: clamp(48px, 5vw, 80px);
    padding: clamp(28px, 5vh, 64px) clamp(40px, 4vw, 64px);
  }
  .contact-panel.with-form .panel > h2 { grid-column: 1; grid-row: 1; }
  .contact-panel.with-form .urgent { grid-column: 1; grid-row: 2; margin-bottom: clamp(24px, 4vh, 40px); }
  .contact-panel.with-form .cols { display: contents; }
  .contact-panel.with-form .reach { grid-column: 1; grid-row: 3; }
  .contact-panel.with-form .contact-form { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .contact-panel.with-form .phone { line-height: 1.15; margin-bottom: 20px; }
  .contact-panel.with-form .reach .details { margin-top: clamp(24px, 4vh, 40px); }

  /* Formuläret: namn, telefon och e-post till vänster, meddelandet till höger */
  .contact-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
  .contact-form .form-head, .contact-form .consent, .contact-form button { grid-column: 1 / -1; }
  .contact-form .row { display: contents; }
  .contact-form .field { grid-column: 1; }
  .contact-form .field:has(textarea) { grid-column: 2; grid-row: 2 / span 3; display: flex; flex-direction: column; }
  .contact-form textarea { flex: 1; min-height: 0; }
  .contact-form input:not([type="checkbox"]) { min-height: 48px; padding-top: 11px; padding-bottom: 11px; }
}
/* Låga datorskärmar (1280×720, 1366×768): tätare rader */
@media (min-width: 1024px) and (max-height: 820px) {
  .faq summary { padding: 15px 0; }

  .contact-panel.with-form .urgent { margin-bottom: 24px; }
  .contact-panel.with-form .phone { margin-bottom: 16px; }
  .contact-panel.with-form .reach .details { margin-top: 24px; gap: 12px; }
  .contact-panel.with-form .details > div { line-height: 1.5; }
  .contact-panel.with-form .details > div:not(:last-child) { padding-bottom: 12px; }
  .contact-form { row-gap: 14px; }
  .contact-form label { margin-bottom: 4px; }
  .contact-form input:not([type="checkbox"]) { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  .contact-form .form-head h3 { margin-bottom: 4px; }
  .contact-form .required-note { margin-top: 2px; }
  .contact-form button { margin-top: 0; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .text-blocks { padding: 32px 0; }
  .contact-panel.with-form { padding: 24px 0; }
  .contact-panel.with-form .panel { padding-top: 28px; padding-bottom: 28px; }
}

/* Mjuka rörelser som på startsidan — bara med stöd för scroll-animationer */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .faq .head, .faq .list, .text-blocks .head, .team li, .map-section .text, .map-section .media {
      animation: page-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
    .faq .list, .map-section .media { animation-range: entry 10% entry 55%; }
    .team li:nth-child(2) { animation-range: entry 6% entry 51%; }
    .team li:nth-child(3) { animation-range: entry 12% entry 57%; }
    .team li:nth-child(4) { animation-range: entry 18% entry 63%; }
    .team li:nth-child(5) { animation-range: entry 24% entry 69%; }
    @keyframes page-rise { from { opacity: 0; transform: translateY(36px); } }
  }
}

/* ── Kontaktsidan: kontaktuppgifterna i heron (.page-hero.contact-hero) ──
   Samma delning som de andra sidheroerna. Under rubriken: akutraden, telefon,
   bokningsknapp och en rad med adress, e-post och öppettider avdelad med
   hårlinjer. Länkarna fyller hela sin cell, så att de är lätta att träffa.
   Gäller bara Kontakt — Tandimplantat och Om oss använder inte klassen. */
.page-hero.contact-hero { scroll-margin-top: 160px; }
.page-hero.contact-hero h1 { margin-bottom: clamp(14px, 2.4vh, 22px); }
.page-hero.contact-hero .urgent { font-size: var(--fs-lead); line-height: 1.6; max-width: 32em; text-wrap: balance; }
.page-hero.contact-hero .urgent strong { font-weight: 600; color: var(--fg-strong); }
.page-hero.contact-hero .reach { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(22px, 4vh, 40px); }
.page-hero.contact-hero .label { font-size: 15px; line-height: 1.4; color: var(--fg); }
.page-hero.contact-hero .phone {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(34px, 3vw, 48px); line-height: 1.1; font-weight: 450; letter-spacing: -0.025em;
  color: var(--fg-strong); transition: color .2s ease;
}
.page-hero.contact-hero .phone:hover { color: var(--blush-700); }
.page-hero.contact-hero .reach .btn-primary { margin-top: clamp(12px, 2vh, 18px); }

.page-hero.contact-hero .details { margin: clamp(24px, 4.4vh, 44px) 0 0; }
.page-hero.contact-hero .details > div { position: relative; }
.page-hero.contact-hero .details dt { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--fg-strong); }
.page-hero.contact-hero .details dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg); }
.page-hero.contact-hero .details a {
  color: var(--fg-strong); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: rgba(23, 91, 145, .3);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.page-hero.contact-hero .details a:hover { color: var(--blush-700); text-decoration-color: currentColor; }
/* Hela cellen är länkyta (minst 44 px hög) */
.page-hero.contact-hero .details a::after { content: ""; position: absolute; inset: 0; }

/* Dator och liggande surfplatta: raden med tre uppgifter, bilden lika hög som texten */
@media (min-width: 901px) {
  .page-hero.contact-hero .inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch;
    padding-top: clamp(32px, 6vh, 72px); padding-bottom: clamp(32px, 6vh, 72px);
  }
  .page-hero.contact-hero .text { align-self: center; }
  .page-hero.contact-hero .media { position: relative; min-height: 340px; }
  .page-hero.contact-hero .media img { position: absolute; inset: 0; height: 100%; }

  /* Två kolumner: adress och e-post till vänster, öppettiderna till höger */
  .page-hero.contact-hero .details {
    display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto auto;
    grid-auto-flow: column; column-gap: 0; row-gap: 14px;
    padding-top: clamp(16px, 2.6vh, 24px); border-top: 1px solid rgba(23, 91, 145, .15);
  }
  .page-hero.contact-hero .details > div { padding-right: 32px; }
  .page-hero.contact-hero .details > div:nth-child(3) {
    grid-row: 1 / span 2; padding: 0 0 0 32px; border-left: 1px solid rgba(23, 91, 145, .15);
  }
  .page-hero.contact-hero .details dt { margin-bottom: 4px; }
}
/* Från 1200 px: alla tre i en rad, avdelade med hårlinjer */
@media (min-width: 1200px) {
  .page-hero.contact-hero .details { grid-template-columns: repeat(3, max-content); grid-template-rows: auto; grid-auto-flow: row; }
  .page-hero.contact-hero .details > div { padding: 0 clamp(24px, 2.2vw, 40px); border-left: 1px solid rgba(23, 91, 145, .15); }
  .page-hero.contact-hero .details > div:first-child { padding-left: 0; border-left: 0; }
  .page-hero.contact-hero .details > div:nth-child(3) { grid-row: auto; padding-right: 0; }
}
@media (min-width: 1440px) {
  .page-hero.contact-hero .urgent { font-size: 19px; }
  .page-hero.contact-hero .reach .btn-primary { font-size: 17px; padding: 16px 32px; }
  .page-hero.contact-hero .details dd { font-size: 16px; }
}
/* Låga datorskärmar (1280×720, 1366×768): tätare */
@media (min-width: 1024px) and (max-height: 820px) {
  .page-hero.contact-hero .reach { margin-top: 20px; }
  .page-hero.contact-hero .details { margin-top: 24px; }
}

/* Surfplatta och mobil: bilden överst som på de andra undersidorna, sedan
   rubrik, akutrad, telefon, bred bokningsknapp och uppgifterna som rader */
@media (max-width: 900px) {
  .page-hero.contact-hero .text { padding-bottom: var(--space-7); }
  .page-hero.contact-hero h1 { margin-bottom: 14px; }
  .page-hero.contact-hero .urgent { font-size: 17px; }
  .page-hero.contact-hero .reach { margin-top: 28px; }
  .page-hero.contact-hero .phone { font-size: clamp(34px, 9.5vw, 44px); }
  .page-hero.contact-hero .reach .btn-primary { display: flex; width: 100%; margin-top: 16px; padding-top: 16px; padding-bottom: 16px; }
  .page-hero.contact-hero .details { margin-top: 32px; border-top: 1px solid var(--border); }
  .page-hero.contact-hero .details > div {
    display: grid; grid-template-columns: 6.75em minmax(0, 1fr); gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .page-hero.contact-hero .details dt { font-size: 15px; line-height: 1.6; }
  .page-hero.contact-hero .details dd { font-size: 16px; line-height: 1.6; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .page-hero.contact-hero .text { max-width: 680px; }
}
@media (max-width: 380px) {
  .page-hero.contact-hero .details > div { grid-template-columns: 5.75em minmax(0, 1fr); gap: 12px; }
}

/* ── Kontaktsidan: bara formuläret (.contact-panel.with-form.form-only) ──
   Rubriken, ingressen och fälten i en centrerad panel med lagom läsbredd. */
.contact-panel.with-form.form-only { scroll-margin-top: 120px; }
.contact-panel.with-form.form-only .panel { max-width: 880px; margin: 0 auto; }
.contact-panel.with-form.form-only .form-head h2 { margin-bottom: 10px; }
.contact-panel.with-form.form-only .form-head p:not(.required-note) { font-size: var(--fs-lead); line-height: 1.6; }
.contact-panel.with-form.form-only .form-head { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .contact-panel.with-form.form-only .panel {
    display: block; padding: clamp(28px, 5.5vh, 64px) clamp(40px, 5vw, 72px);
  }
  .contact-panel.with-form.form-only .contact-form { grid-column: auto; grid-row: auto; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .contact-panel.with-form.form-only .form-head h2 { margin-bottom: 6px; }
  .contact-panel.with-form.form-only .form-head { margin-bottom: 4px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .contact-panel.with-form.form-only .panel { padding-top: 28px; padding-bottom: 28px; }
}

/* Kontakt i mobil: lägre bild så att öppettiderna syns på första skärmen */
@media (max-width: 900px) {
  .page-hero.contact-hero .media { height: clamp(160px, 24svh, 240px); }
}

/* Intro på undersidorna: samma panel som startsidan, men utan loggans träd.
   Panelen är vit med hårlinje, så att den skiljer sig från den ljusblå heron ovanför. */
.intro-panel.no-mark .panel { background: var(--white); border: 1px solid var(--border); }
@media (min-width: 901px) {
  .intro-panel.no-mark .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* Undersidor i mobil: lägre bild och knapparna före punkterna, så att
   "Boka tid" alltid syns på första skärmen. Gäller inte Kontakt (egen hero). */
@media (max-width: 900px) {
  .page-hero:not(.contact-hero) .media { height: clamp(200px, 30svh, 340px); }
  .page-hero:not(.contact-hero) .text { display: flex; flex-direction: column; }
  .page-hero:not(.contact-hero) .text > h1 { order: 1; }
  .page-hero:not(.contact-hero) .text > .ingress { order: 2; }
  .page-hero:not(.contact-hero) .text > .price { order: 3; }
  .page-hero:not(.contact-hero) .text > .btn-row { order: 4; }
  .page-hero:not(.contact-hero) .text > .hero-score { order: 5; }
  .page-hero:not(.contact-hero) .text > .bulletins { order: 6; margin: 20px 0 0; }
  .page-hero:not(.contact-hero) .ingress:has(+ .bulletins), .page-hero:not(.contact-hero) .ingress { margin-bottom: 18px; }
  .page-hero:not(.contact-hero) .price { margin-bottom: 20px; }
}

/* Finputs: samma rubrikstorlek för alla sektionsrubriker på undersidorna */
.faq h2, .text-blocks h2, .partner-list h2, .map-section h2, .contact-panel.with-form h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; }
@media (min-width: 1024px) and (max-height: 760px) {
  .contact-panel.with-form h2 { font-size: 34px; }
}

/* ── lumo/price-row: priset på behandlingssidorna, före FAQ ─────────────
   Samma rutnät som FAQ:n (rubrik vänster, innehåll höger) så att de två läses
   som ett par. Panelton för att skilja dem åt. */
.price-row { background: var(--blush-50); padding: clamp(48px, 9vh, 96px) 0; }
.price-row .inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 64px; align-items: start; }
.price-row h2 { font-size: var(--section-h2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 450; text-wrap: balance; }
.price-row .figure { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.price-row .amount { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 450; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.price-row .caption { font-size: var(--fs-body); color: var(--fg); }
.price-row .body { max-width: 46em; }
.price-row .body p + p { margin-top: 12px; }
.price-row .text-link { margin-top: 20px; min-height: 44px; }
@media (max-width: 900px) {
  .price-row .inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .price-row .amount { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
  .price-row .figure { padding-bottom: 20px; margin-bottom: 20px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .price-row { padding: 40px 0; }
  .price-row .amount { font-size: 40px; }
}

/* Heron lämnar en glimt av nästa sektion (se --peek i layout.css) */
@media (max-width: 900px) {
  .page-hero:not(.contact-hero) .media { height: clamp(140px, calc(100svh - 660px), 340px); }
  .page-hero.contact-hero .media { height: clamp(120px, calc(100svh - 730px), 240px); }
  .page-hero + section[class] { padding-top: 24px; }
}
@media (max-width: 600px) and (max-height: 940px) {
  .page-hero.contact-hero .media { display: none; }
}
@media (min-width: 901px) and (max-height: 900px) {
  .page-hero.contact-hero .inner { padding-top: 24px; padding-bottom: 24px; }
}
.page-hero + section[class] .panel { padding-top: clamp(24px, 4.5vh, 48px); }
@media (min-width: 901px) { .page-hero + section[class] { padding-top: clamp(24px, 4vh, 48px); } }
.page-hero + .contact-panel.with-form.form-only .panel { padding-top: clamp(24px, 4.5vh, 40px); }
@media (min-width: 901px) and (max-height: 760px) {
  .page-hero.contact-hero h1 { font-size: 44px; margin-bottom: 12px; }
}
.page-hero .bulletins li::before { margin-top: 0.22em; }

/* Mobil: behandlingsbilderna är ofta föremål i mitten av bilden. Remsan är låg (glimten under
   heron), så rubriken ska inte täcka föremålen: mindre överlapp, senare toning, bilden lite nedåt. */
@media (max-width: 900px) {
  .page-hero:not(.contact-hero) .text { margin-top: -28px; }
  .page-hero:not(.contact-hero) .media img { object-position: 50% 70%; }
  .page-hero:not(.contact-hero) .media::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 62%, rgba(var(--surface-rgb), .85) 90%, var(--surface) 100%); }
}

/* Mobil, alla sidhuvuden med bild: samma princip som startsidan — bilden är ett eget band
   (mjuk kant bara längst ned), rubriken och texten börjar på ren yta under bilden. */
@media (max-width: 900px) {
  .page-hero .text, .page-hero:not(.contact-hero) .text { margin-top: 0; padding-top: 20px; }
  .page-hero .media img, .page-hero:not(.contact-hero) .media img { object-position: 50% 50%; }
  .page-hero .media::after, .page-hero:not(.contact-hero) .media::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 80%, var(--surface) 100%); }
}
@media (max-width: 900px) {
  /* Bildbandet krymper på låga telefoner så att nästa sektion fortfarande syns (texten ligger nu under bilden) */
  .page-hero:not(.contact-hero) .media { height: clamp(130px, calc(100svh - 690px), 340px); }
}
@media (max-width: 900px) {
  .page-hero .text, .page-hero:not(.contact-hero) .text { padding-bottom: 12px; }
  .page-hero + section[class] .panel { padding-top: 20px; }
}
@media (max-width: 900px) {
  .page-hero .media::after, .page-hero:not(.contact-hero) .media::after {
    background: linear-gradient(180deg, rgba(var(--surface-rgb), 0) 45%, rgba(var(--surface-rgb), .25) 62%, rgba(var(--surface-rgb), .65) 80%, rgba(var(--surface-rgb), .92) 92%, var(--surface) 100%);
  }
  .page-hero .text, .page-hero:not(.contact-hero) .text { margin-top: -18px; padding-top: 0; }
}

/* Mobil: samma ordning som startsidan — rubrik, ingress, punkter, Boka tid, betyg */
@media (max-width: 900px) {
  .page-hero:not(.contact-hero) .text > .bulletins { order: 3; margin: 0 0 24px; }
  .page-hero:not(.contact-hero) .text > .btn-row { order: 4; }
  .page-hero:not(.contact-hero) .text > .hero-score { order: 5; }
}

/* H1 i hero: flytande storlek, och ortnamnet ("i Solna") hålls ihop och hoppar ner som en enhet */
.h1-place { white-space: nowrap; }
.hero h1, .page-hero h1 { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
@media (max-width: 900px) {
  .page-hero h1 { font-size: clamp(30px, 9.6vw, 48px); }
}
/* Långa e-postadresser bryts hellre än att sticka ut på smala skärmar */
.page-hero.contact-hero .details a, .contact-panel .details a { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .contact-panel .details > div { grid-template-columns: minmax(0, 1fr); display: block; }
  .content-block .inner, .content-block .inner > * { min-width: 0; }
  .content-block .inner { grid-template-columns: minmax(0, 1fr); }
}

/* Råd före/efter tandutdragning: håll instrumenten (nedre höger) i bild vid beskärning */
.page-hero .media img.pos-instrument { object-position: 70% 75%; }

/* ── Allmänna bilder på textsidor (Priser, Klagomål, juridiska sidor, Råd, 404) ──
   .page-hero.compact: sidhero med mindre bild än behandlingssidornas.
   .inline-figure: lugn bild i löpande text, högst 520 px bred; .is-wide fyller
   textspalten (juridiska sidornas sidhuvud). Mobil: full bredd.
   .nf-media: 404-bilden står bredvid texten på dator, som ett band ovanför på mobil. */
@media (min-width: 901px) {
  .page-hero.compact .inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .page-hero.compact .media img { height: clamp(260px, 38vh, 380px); }
  .page-hero.compact .text > :last-child { margin-bottom: 0; }
  .not-found .inner:has(.nf-media) {
    max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    column-gap: clamp(48px, 6vw, 96px); align-items: start;
  }
  .not-found .inner > * { grid-column: 1; }
  .not-found .inner > .nf-media { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
}
.page-hero.compact .ingress:has(+ .ingress) { margin-bottom: var(--space-4); }
.inline-figure { margin: 0 0 40px; max-width: 520px; }
.inline-figure img, .not-found .nf-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.inline-figure.is-wide { max-width: none; }
.legal-body .inline-figure { margin: 36px 0 0; }
.advice .head .inline-figure { margin: 28px 0 0; max-width: 400px; }
.not-found .nf-media { margin: 0 0 var(--space-6); }
@media (max-width: 900px) {
  .inline-figure, .advice .head .inline-figure { max-width: none; }
  .not-found .nf-media img { aspect-ratio: 16 / 9; object-fit: cover; }
}
/* Ingen automatisk avstavning i rubriker (pages.css laddas efter layout.css) */
.hero h1, .page-hero h1 { hyphens: manual; }
/* Länklista till artiklar på behandlingssidor */
.article-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }

/* ── Sidhero på dator: bilden täcker hela ytan (2026-10-27) ───────────────
   Kunden gillade inte "titthålet" (bilden som kort till höger om texten). Från 901 px
   ligger bilden kant till kant bakom hela heron, som på surfplatta men i full bredd.
   Texten står till vänster på en yta som tonar ut över bilden (≥ .93 täckning bakom
   texten, kontrast > 7:1). Gäller sidheroer med bild (.media): behandling, Om oss
   (.wide), Priser/Klagomål/Patienter (.compact), Kontakt, Akut, Utrustning, områden.
   Text-only-heroer har ingen bild och påverkas inte. Mobil och surfplatta (≤900) är oförändrade. */
@media (min-width: 901px) {
  .page-hero:has(.media) {
    --hero-tw: clamp(440px, 42vw, 640px);
    --hero-edge: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--hero-tw));
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center;
    min-height: clamp(420px, calc(100svh - 117px - var(--peek)), 760px);
  }
  .page-hero:has(.media) .inner { position: static; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); }
  .page-hero:has(.media) .text { position: relative; z-index: 2; max-width: var(--hero-tw); }
  .page-hero:has(.media) .media { position: absolute; inset: 0; z-index: 0; min-height: 0; }
  .page-hero:has(.media) .media img { position: static; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
  .page-hero:has(.media) .media img:not(.pos-instrument) { object-position: 50% 40%; }
  .page-hero:has(.media) .media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      rgba(var(--surface-rgb), .96) 0,
      rgba(var(--surface-rgb), .93) var(--hero-edge),
      rgba(var(--surface-rgb), .6) calc(var(--hero-edge) + 120px),
      rgba(var(--surface-rgb), .25) calc(var(--hero-edge) + 240px),
      rgba(var(--surface-rgb), 0) calc(var(--hero-edge) + 400px));
  }
  /* Kontakt: tre uppgifter i rad kräver bredare textyta */
  .page-hero.contact-hero:has(.media) { --hero-tw: clamp(520px, 56vw, 820px); }
  .page-hero.contact-hero:has(.media) .text { max-width: var(--hero-tw); }
}
@media (min-width: 1440px) {
  .page-hero:has(.media) { --hero-tw: 680px; }
  .page-hero.contact-hero:has(.media) { --hero-tw: 840px; }
}

/* ── Behandlingshero på dator: motivet till höger (2026-10-27) ────────────
   Gäller bara heroer med punktlista (.bulletins) och bild, dvs behandlingsmallen (sv/en/ru).
   Bilden tar den högra delen av ytan, börjar strax innan textkolumnens slut och tonar ut
   mot ytfärgen åt vänster med en mask på själva bilden (kort, mjuk fade). Textkolumnen
   är smalare så att den inte täcker motivet. Mobil och surfplatta (≤900) oförändrade. */
@media (min-width: 901px) {
  .page-hero:has(.bulletins):has(.media) {
    --hero-tw: clamp(420px, 38vw, 560px);
    --hero-img-left: calc(var(--hero-edge) + 48px);
  }
  .page-hero:has(.bulletins):has(.media) .media { left: var(--hero-img-left); }
  .page-hero:has(.bulletins):has(.media) .media::after { background: none; }
  .page-hero:has(.bulletins):has(.media) .media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 9%, rgba(0,0,0,.8) 20%, #000 30%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 9%, rgba(0,0,0,.8) 20%, #000 30%);
  }
}
@media (min-width: 1440px) {
  .page-hero:has(.bulletins):has(.media) { --hero-tw: 560px; }
}

/* ── Övriga sidors hero på dator: samma utseende, bilden tar 75 % (2026-10-27) ──
   Som behandlingsheron (bilden till höger, fade som mask på själva bilden, ytan bakom
   är sidans egen bakgrund) men bilden börjar vid 25 % av hero-bredden och fyller resten.
   Gäller .page-hero med bild utan punktlista: Om oss, Jobba med oss, Priser, Klagomål,
   Patienter, Utrustning, Kontakt (+ EN/RU). Textkolumnen är begränsad; masken är helt
   genomskinlig bakom textens senare del och når full styrka först en bit efter den,
   så att texten ligger på ren yta (kontrast, se PROJEKT.md). Mobil/surfplatta (≤900)
   oförändrade. Textlösa heroer (områden, artiklar) har ingen bild. */
@media (min-width: 901px) {
  .page-hero:has(.media):not(:has(.bulletins)) {
    --hero-tw: clamp(400px, 34vw, 560px);
    /* bilden börjar vid textblockets mitt */
    --hero-img-left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--hero-tw) / 2);
    /* textkolumnens slut räknat från bildens vänsterkant (vw ≈ hero-bredd) */
    --hero-ov: max(0px, calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--hero-tw) - 25vw));
  }
  .page-hero.contact-hero:has(.media) { --hero-tw: clamp(440px, 40vw, 600px); }
  .page-hero:has(.media):not(:has(.bulletins)) .media { left: var(--hero-img-left); }
  .page-hero:has(.media):not(:has(.bulletins)) .media::after { background: none; }
  /* Masken är helt genomskinlig bakom hela textkolumnen (bilden börjar vid textens mitt, så
     kolumnen går --hero-tw/2 in i bilden) plus 24 px, och tonar in först därefter
     (2026-10-29: texten låg annars över fotot på Om oss, Priser m.fl.) */
  .page-hero:has(.media):not(:has(.bulletins)) .media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--hero-tw) / 2 + 24px), rgba(0,0,0,.3) calc(var(--hero-tw) / 2 + 110px), rgba(0,0,0,.75) calc(var(--hero-tw) / 2 + 220px), #000 calc(var(--hero-tw) / 2 + 320px));
            mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--hero-tw) / 2 + 24px), rgba(0,0,0,.3) calc(var(--hero-tw) / 2 + 110px), rgba(0,0,0,.75) calc(var(--hero-tw) / 2 + 220px), #000 calc(var(--hero-tw) / 2 + 320px));
  }
  /* Kontakt: uppgifterna i två kolumner (adress + e-post | öppettider) så att de ryms i smal textkolumn */
  .page-hero.contact-hero:has(.media) .details { grid-template-columns: max-content max-content; grid-template-rows: auto auto; grid-auto-flow: column; }
  .page-hero.contact-hero:has(.media) .details > div { padding: 0 32px 0 0; border-left: 0; }
  .page-hero.contact-hero:has(.media) .details > div:nth-child(3) { grid-row: 1 / span 2; padding: 0 0 0 32px; border-left: 1px solid rgba(23, 91, 145, .15); }
}
@media (min-width: 1440px) {
  .page-hero:has(.media):not(:has(.bulletins)) { --hero-tw: 560px; }
  .page-hero.contact-hero:has(.media) { --hero-tw: 600px; }
}

/* Priser-heron (2026-10-29): bilden med surfplattan, fokus på skärmen och handen (alla bredder).
   Samma specificitet som regeln för .page-hero:has(.media) .media img ovan, och står efter den. */
.page-hero:has(.media) .media img.pos-priser { object-position: 50% 62%; }