/* ==========================================================================
   PAGES — interior compositions.
   Same system as home. Different rhythm per page purpose.
   ========================================================================== */

/* --- BREADCRUMB --------------------------------------------------------- */

.crumbs {
  padding-top: 96px;
  padding-bottom: var(--sp-2);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

.crumbs a,
.crumbs li[aria-current] {
  display: inline-block;
  padding-block: 6px;
}

.crumbs a { transition: color var(--dur-fast) var(--ease-out); }
.crumbs a:hover { color: var(--paper); }
.crumbs li[aria-current] { color: var(--paper); }
.crumbs .sep { opacity: 0.45; }

.on-light .crumbs ol { color: var(--graphite); }
.on-light .crumbs a:hover,
.on-light .crumbs li[aria-current] { color: var(--ink); }

/* --- PAGE HERO ---------------------------------------------------------- *
   Shorter than the home hero — these pages navigate, they don't open.
   ------------------------------------------------------------------------ */

.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62svh;
  padding-block: var(--sp-8) var(--sp-6);
  overflow: hidden;
}

.phero--tall { min-height: 74svh; }
.phero--short { min-height: 46svh; padding-block: var(--sp-7) var(--sp-6); }

.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media .ph { min-height: 100%; padding: var(--sp-5) var(--gutter); }
.phero__media .ph::before { inset: var(--sp-4); }
/* a filled frame must go full-bleed — beats the padding rule above on specificity */
.phero__media .ph--filled { padding: 0; }

.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(6,6,8,0.92) 0%,
    rgba(6,6,8,0.62) 34%,
    rgba(6,6,8,0.16) 66%,
    rgba(6,6,8,0.38) 100%
  );
}

.phero__inner { position: relative; z-index: 2; width: 100%; }

.phero__descriptor {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-spec);
  letter-spacing: var(--tr-spec);
  text-transform: uppercase;
  color: var(--paper-dim);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  line-height: 1.5;
  max-width: 52ch;
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid rgba(255,255,255,0.22);
  margin-bottom: var(--sp-4);
}

.phero__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 700;
  letter-spacing: var(--tr-display-l);
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--paper);
}

/* no-image variant — typographic opening for text-led pages (Fordon hub,
   Sålda fordon). Sits on the default dark body bg — no override needed.
   Om oss / Kontakt wrap their whole page in .on-light instead. */
.phero--type {
  min-height: 0;
  padding-block: var(--sp-6) var(--sp-7);
  align-items: flex-start;
}

/* when a type hero opens a page with no breadcrumb above it */
.phero--type.phero--first { padding-top: 128px; }

.on-light .phero__title { color: var(--ink); }
.on-light .phero__descriptor {
  color: var(--graphite);
  text-shadow: none;
  border-top-color: var(--paper-hairline);
}

/* --- LEDE (asymmetric intro) -------------------------------------------- */

.lede { display: grid; gap: var(--sp-4); }
.lede__body { display: flex; flex-direction: column; gap: var(--sp-4); }

@media (min-width: 900px) {
  .lede { grid-template-columns: 4fr 8fr; gap: var(--sp-8); }
  .lede__aside { padding-top: var(--sp-1); }
}

/* --- HUB ROWS (fordon) -------------------------------------------------- *
   Full-width alternating rows. Deliberately NOT the home mosaic.
   ------------------------------------------------------------------------ */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: var(--hairline) solid var(--ink-hairline);
}

.row:last-child { border-bottom: var(--hairline) solid var(--ink-hairline); }

.row__media { overflow: hidden; aspect-ratio: 16 / 10; }
.row__media--3-4  { aspect-ratio: 3 / 4; }
.row__media--16-9 { aspect-ratio: 16 / 9; }
.row__media--4-3  { aspect-ratio: 4 / 3; }
.row__body { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }

.row__name {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.row__num {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--paper-dim);
}

@media (min-width: 900px) {
  .row {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    padding-block: var(--sp-7);
    align-items: center;
  }
  .row:nth-child(even) .row__media { order: 2; }
}

.on-light .row,
.on-light .row:last-child { border-color: var(--paper-hairline); }

/* --- SIBLING CATEGORIES ------------------------------------------------- */

.siblings {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--ink-hairline);
}

.sibling {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding-block: var(--sp-2);
  /* Inter, not the display face: the display tier is uppercase major
     headings only, and these are mixed-case navigation links. */
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 1.25rem;
  font-weight: 500;
  border-bottom: var(--hairline) solid var(--ink-hairline);
  transition: color var(--dur-fast) var(--ease-out);
}

.sibling:hover { color: var(--accent); }
.sibling:hover .btn__arrow { transform: translateX(4px); }

@media (min-width: 768px) {
  .siblings { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

.on-light .siblings { border-top-color: var(--paper-hairline); }
.on-light .sibling { border-bottom-color: var(--paper-hairline); }

/* --- CROSS-LINK BAND ---------------------------------------------------- */

.crossband {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--ink-raised);
  border: var(--hairline) solid var(--ink-hairline);
  border-radius: var(--radius);
}

.crossband__title {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  max-width: 24ch;
}

@media (min-width: 900px) {
  .crossband {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    padding: var(--sp-7);
  }
}

.on-light .crossband {
  background: var(--paper-raised);
  border-color: var(--paper-hairline);
}

/* --- MEDIA BREAKS ------------------------------------------------------- */

.mbreak { overflow: hidden; }
.mbreak--wide { aspect-ratio: 21 / 9; }
.mbreak--pair { display: grid; gap: var(--grid-gap); }
.mbreak--pair > * { aspect-ratio: 4 / 5; overflow: hidden; }

@media (min-width: 768px) {
  .mbreak--pair { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .mbreak--wide { aspect-ratio: 4 / 3; }
}

/* --- STEPS (real sequences only) ---------------------------------------- */

.steps { display: grid; gap: 0; }

.step {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-top: var(--hairline) solid var(--ink-hairline);
}

.step:last-child { border-bottom: var(--hairline) solid var(--ink-hairline); }

.step__num {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--paper-dim);
}

.step__name {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .step {
    grid-template-columns: 1fr 3fr 6fr;
    gap: var(--sp-6);
    align-items: baseline;
  }
}

/* --- FAQ (native details — accessible without JS) ----------------------- */

.faq { display: flex; flex-direction: column; }

.faq__item { border-top: var(--hairline) solid var(--ink-hairline); }
.faq__item:last-child { border-bottom: var(--hairline) solid var(--ink-hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap-min);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }

.faq__sign {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 1.25rem; /* a toggle icon, not prose — the graphical-object 3:1 contrast floor applies here */
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__a { padding-bottom: var(--sp-5); max-width: 62ch; color: var(--paper-dim); }

.on-light .faq__item,
.on-light .faq__item:last-child { border-color: var(--paper-hairline); }
.on-light .faq__a { color: var(--graphite); }

/* --- CONTACT ------------------------------------------------------------ */

.callblock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-top: var(--hairline) solid var(--ink-hairline);
  border-bottom: var(--hairline) solid var(--ink-hairline);
}

.callblock__num {
  display: inline-block;
  padding-block: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 700;
  letter-spacing: var(--tr-display-l);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}

.callblock__num:hover { color: var(--accent); }

.contact__grid { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
}

.deets { display: grid; gap: var(--sp-5); }

.deet { display: flex; flex-direction: column; gap: var(--sp-2); }

.deet__val { font-size: var(--fs-body-l); line-height: 1.5; font-style: normal; }
a.deet__val { display: inline-block; padding-block: 9px; }

.on-light .callblock { border-color: var(--paper-hairline); }

.pathways { display: grid; gap: var(--sp-3); }

@media (min-width: 768px) {
  .pathways { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.pathway {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--ink-raised);
  border: var(--hairline) solid var(--ink-hairline);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pathway:hover { border-color: var(--accent); }

.pathway__title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.on-light .pathway {
  background: var(--paper-raised);
  border-color: var(--paper-hairline);
}

/* --- PLACEHOLDER NOTICE (inline, in-copy) ------------------------------- */

.reqnote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: var(--hairline) dashed var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(214, 19, 44, 0.08);
}

.reqnote__tag {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

.reqnote__txt {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 56ch;
}

.on-light .reqnote { background: var(--accent-tint); }
.on-light .reqnote__tag { color: var(--accent-deep); }
.on-light .reqnote__txt { color: #59544C; } /* darker than --graphite for AA contrast against --accent-tint */

.on-light .deet__val { color: var(--ink); }

/* --- MOBILE CTA SIZING -------------------------------------------------- */
@media (max-width: 599px) {
  .blocket__actions .btn,
  .crossband .btn { width: 100%; }
}

/* --- BENEFITS (Steg 1/2, växellåda, A-traktor on /motoroptimering/) -------
   Same rhythm as .steps: hairline-separated rows, quiet Inter headings, red
   used only as a short rule. No cards, no icons.
   -------------------------------------------------------------------------- */
.benefits { display: grid; }

.benefits li {
  padding-block: var(--sp-5);
  border-top: var(--hairline) solid var(--ink-hairline);
}

.benefits li:last-child { border-bottom: var(--hairline) solid var(--ink-hairline); }

.benefits__t {
  position: relative;
  padding-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.benefits__t::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--accent);
}

.benefits__b {
  margin-top: var(--sp-2);
  color: var(--paper-dim);
  max-width: 52ch;
}

/* Compact variant of the homepage vehicles list, reused on /om-oss/ */
.worlds__list--compact { margin: 0; }

/* Closing CTA bands ------------------------------------------------------
   A .crossband already carries its own 64px padding and a border, so a
   section wrapping nothing else does not need the full section rhythm on top.
   Measured at 1440 before this rule: the Om oss closing band was a 447px
   section holding 91px of content, with ~178px of dead space above and below.
   Desktop only — on a phone the band needs the normal separation.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .section--band { padding-block: var(--sp-7); }
  /* bands that deliberately butt against the previous section keep their
     inline padding-top:0 */
  .section--band[style*="padding-top:0"] { padding-top: 0; }
}

/* --- SERVICES (/motoroptimering/) -----------------------------------------
   Same vocabulary as .benefits directly above it: hairline-separated rows,
   the red used only as a short rule, Inter for the quiet headings. Two
   columns from 768px where the descriptions are short enough to sit side by
   side; one column on a phone. No cards, no shadows, no new design language.
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  border-top: var(--hairline) solid var(--ink-hairline);
  margin-top: var(--sp-5);
}

.services li {
  padding-block: var(--sp-4);
  border-bottom: var(--hairline) solid var(--ink-hairline);
}

.services__t {
  position: relative;
  padding-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.services__t::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
}

.services__b {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 46ch;
}

.services__more {
  margin-top: var(--sp-5);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 60ch;
}

.services__more-t {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: var(--sp-2);
}

@media (min-width: 768px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-6);
  }
  /* the last row keeps its bottom hairline; with two columns the second-last
     item would otherwise lose it */
  .services li { padding-block: var(--sp-5); }
}

/* Long single-word display headings ("MOTOROPTIMERING.",
   "VÄXELLÅDSOPTIMERING.") overflow a 335px content column on a 375px phone at
   the full display size. Scoped to these headings — the shared .t-display-l
   size is unchanged everywhere else on the site. */
@media (max-width: 480px) {
  .services__head { font-size: clamp(1.5rem, 7.6vw, var(--fs-display-l)); }
}

/* --- ÖVRIGA TJÄNSTER (compact service list, /motoroptimering/) ------------
   Names only, no descriptions — a deliberately quiet list so the emissions-
   and software-related entries read as a service inventory rather than as
   nine things being advertised. Same vocabulary as .services above: hairline
   rows, a short red rule, Inter for the names. Two columns from 640px, three
   from 1100px where the column is wide enough for the longest entry
   ("Övrig programmering och styrdonstjänster").
   -------------------------------------------------------------------------- */
.svclist {
  display: grid;
  margin-top: var(--sp-5);
  border-top: var(--hairline) solid var(--ink-hairline);
}

.svclist li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: var(--hairline) solid var(--ink-hairline);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1.4;
}

.svclist li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.875rem;
  height: 2px;
  background: var(--accent);
  transform: translateY(-0.35em);
}

@media (min-width: 640px) {
  .svclist { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-6); }
}

@media (min-width: 1100px) {
  .svclist { grid-template-columns: repeat(3, 1fr); }
}

/* Legal qualifier under the service list. Quiet by design — it is a
   limitation, not a selling point — but separated by its own rule so it is
   clearly a statement in its own right and not a caption to the last item. */
.legalnote {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--ink-hairline);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 62ch;
}

/* A-traktor CTA pair. Matches the hero/crossband button behaviour: side by
   side where there is room, full width on a phone so neither button ends up
   a cramped half-width target. */
.atraktor__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

@media (max-width: 599px) {
  .atraktor__cta .btn { width: 100%; }
}

/* Homepage service overview (2026-09-16). The same .services rows as the
   service page, with a "läs mer" link per row — so each item is a real
   destination rather than a name in a list. The column layout, hairlines and
   red rule all come from .services itself; this only handles the link. */
.services--overview li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.services--overview .tlink { margin-top: var(--sp-3); }

.services__more .tlink {
  display: inline-flex;
  margin-top: var(--sp-3);
}

/* The homepage variant carries its body copy in its own <p>, so the shared
   .services__more colour and size have to reach it. */
.services__more > p { color: inherit; font-size: inherit; line-height: inherit; }