/* ==========================================================================
   HOME — section compositions
   ========================================================================== */

/* --- 01 HERO ------------------------------------------------------------ */

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

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* desktop: car sits right-of-centre in the source photo — keep it there */
  object-position: 62% 48%;
  animation: heroSettle 8s var(--ease-out) forwards;
}

/* mobile: a narrow, tall viewport crops most of the wide source photo away —
   shift toward the car (right side of the frame) so it stays the subject,
   without cropping into the headlight/grille above the fold */
@media (max-width: 767px) {
  .hero__media img { object-position: 80% 42%; }
}

@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Dark, cinematic — the composition (car right two-thirds, quiet dark
   left/lower third) does most of the legibility work; the scrim deepens
   toward the bottom-left where copy sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(4,4,5,0.92) 0%,
    rgba(4,4,5,0.72) 28%,
    rgba(4,4,5,0.22) 56%,
    rgba(4,4,5,0.05) 78%
  ), linear-gradient(
    to top,
    rgba(4,4,5,0.88) 0%,
    rgba(4,4,5,0.4) 30%,
    rgba(4,4,5,0.05) 55%,
    rgba(4,4,5,0.32) 100%
  );
}

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

/* The H1 carries BOTH jobs:
   - a descriptive spec line (search clarity, visible, not hidden text)
   - the emotional display line (brand)                                     */
.hero__h1 { display: block; margin: 0; }

.hero__descriptor {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-spec);
  font-weight: 600;
  letter-spacing: var(--tr-spec);
  text-transform: uppercase;
  color: var(--paper-dim);
  line-height: 1.5;
  max-width: 34ch;
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid var(--accent);
  margin-bottom: var(--sp-4);
}

.hero__display {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 700;
  letter-spacing: var(--tr-display-xl);
  line-height: var(--lh-display);
  text-transform: uppercase; /* matches the approved reference's hero typography exactly */
  max-width: 22ch; /* wide enough for "KVALITET & PRESTANDA" / "I VARJE DETALJ." to wrap in two lines, matching the reference */
  text-wrap: balance;
  color: var(--paper);
}

.hero__lead {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-body-l);
  color: var(--paper-dim);
  max-width: 36ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__actions .btn { flex: 1 1 auto; }

@media (min-width: 768px) {
  .hero { min-height: 92svh; }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* staged page-load reveal */
.hero [data-stage] {
  opacity: 0;
  transform: translateY(16px);
  animation: stageIn 600ms var(--ease-out) forwards;
}

.hero [data-stage='1'] { animation-delay: 100ms; }
.hero [data-stage='2'] { animation-delay: 180ms; }
.hero [data-stage='3'] { animation-delay: 260ms; }

@keyframes stageIn {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero [data-stage] { opacity: 1; transform: none; animation: none; }
  .hero__media img { animation: none; }
}

/* --- 02 TRUST STRIP -------------------------------------------------------
   Restrained — four short, verified claims directly under the hero. Same
   dark surface as the hero itself; a thin red rule is the only accent.
   -------------------------------------------------------------------------- */

.truststrip { border-top: var(--hairline) solid var(--ink-hairline); }

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

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

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

.truststrip__item {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--accent);
}

.truststrip__title {
  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);
  margin-bottom: var(--sp-2);
}

.truststrip__body { font-size: var(--fs-body-s); color: var(--paper-dim); line-height: 1.6; max-width: 32ch; }

/* --- 03 VEHICLE WORLDS -------------------------------------------------- *
   Asymmetric mosaic. Cars take the most space because cars are the
   primary business. One cell is deliberately empty and holds the note.
   ------------------------------------------------------------------------ */

.worlds__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.world {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-raised);
  border-radius: var(--radius);
}

.world .ph { min-height: 100%; }
.world .ph__note { max-width: 24ch; }

.world__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-4);
  background: linear-gradient(to top, rgba(4,4,5,0.92) 0%, rgba(4,4,5,0) 100%);
  color: var(--paper);
}

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

.world__line {
  display: block;
  font-size: var(--fs-body-s);
  color: var(--paper-dim);
  margin-top: var(--sp-1);
}

.world__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  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); /* red is reserved for lines/icons/CTAs, not running text */
}

.world:hover .btn__arrow { transform: translateX(4px); }
.world:hover img { transform: scale(1.04); }

.world img { transition: transform var(--dur-mid) var(--ease-out); }

/* thin red top rule reveals on hover — subtle, not a full red section */
.world::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.world:hover::before { transform: scaleX(1); }

.worlds__note {
  display: none;
  align-self: end;
  padding-bottom: var(--sp-4);
}

/* mobile: full-width stack, alternating text alignment */
.world { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.world:nth-child(even) .world__body { text-align: right; }

@media (min-width: 768px) {
  .world:nth-child(even) .world__body { text-align: left; }

  .world--bilar  { grid-column: 1 / 8;  grid-row: 1 / 3; aspect-ratio: 3 / 4; }
  /* MC and ATV stretch to split Bilar's height between them — a fixed 16:9
     left a large hole in the right column and clipped the MC link. */
  .world--mc     { grid-column: 8 / 13; grid-row: 1 / 2; aspect-ratio: auto; }
  .world--atv    { grid-column: 8 / 13; grid-row: 2 / 3; aspect-ratio: auto; }
  .world--vatten { grid-column: 1 / 6;  grid-row: 3 / 4; aspect-ratio: 4 / 3; }

  .worlds__note {
    display: block;
    grid-column: 7 / 13;
    grid-row: 3 / 4;
  }
}

/* --- 05 MOTOROPTIMERING — MAJOR SECTION -----------------------------------------
   One of Speedy Motors' two core business areas — deliberately built to
   carry near-hero weight, not a footnote service card. Dark, technical,
   subtle red accent.
   -------------------------------------------------------------------------- */

.tuning {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--section-y);
}

/* Was the only bordered pill/badge on the site — a different vocabulary
   from the spec-line eyebrow every other section uses, which made this
   block read as a template component dropped into an editorial page.
   Now it is the same device: a red rule above, letterspaced label below. */
.tuning__eyebrow {
  display: block;
  padding: var(--sp-3) 0 0;
  margin-bottom: var(--sp-5);
  border-top: 2px solid var(--accent);
  width: fit-content;
  min-width: 8rem;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper);
}

.tuning__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.tuning__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}

/* the one clip-path reveal on the site — marks the pivot to services */
.tuning__media[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-reveal) var(--ease-inout);
}

.tuning__media[data-reveal].is-visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .tuning__media[data-reveal] { clip-path: none; }
}

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

.tuning__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

@media (min-width: 900px) {
  .tuning__grid {
    grid-template-columns: 50fr 50fr;
    gap: var(--sp-9);
  }
  .tuning__media {
    aspect-ratio: 5 / 6;
  }
  .tuning__body { padding-left: var(--sp-4); }
}

/* --- 06 OM OSS STRIP ---------------------------------------------------- */

.about__grid { display: grid; gap: var(--sp-6); align-items: center; }
.about__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.about__body { display: flex; flex-direction: column; gap: var(--sp-4); }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 45fr 55fr; gap: var(--sp-8); }
  .about__media { aspect-ratio: 4 / 5; }
}

/* --- 07 LOCATION -------------------------------------------------------- */

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

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

@media (min-width: 900px) {
  .location__grid { grid-template-columns: 40fr 60fr; gap: var(--sp-8); align-items: center; }
}

/* --- "HITTAR DU INTE RÄTT?" SOURCING SECTION ------------------------------
   Photographic, dark, personal — not a sales pitch. One promise, one CTA.
   -------------------------------------------------------------------------- */

.sourcing {
  position: relative;
  background: var(--ink-raised);
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--sp-7) var(--gutter);
}

.sourcing::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.sourcing__inner { max-width: 56ch; }

.sourcing__body { margin-top: var(--sp-4); color: var(--paper-dim); font-size: var(--fs-body-l); }

.sourcing__actions { margin-top: var(--sp-6); }

@media (min-width: 768px) {
  .sourcing { padding: var(--sp-8); }
}

/* ==========================================================================
   SIMPLIFIED HOMEPAGE (2026-08-31)
   Components for the rebuilt homepage. The old mosaic (.worlds__grid /
   .world) belonged to the vehicle-category architecture and is no longer
   used on any public page; it is left in place because the archived pages
   under _archive/ still reference it.
   ========================================================================== */

/* --- PROOF LIST (short credibility row in the intro) --------------------- */
.proof {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--ink-hairline);
  border-bottom: 1px solid var(--ink-hairline);
}

.proof li { display: flex; flex-direction: column; gap: 2px; }

.proof__k {
  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);
}

/* the red stays graphic — a short rule above each item, not coloured text */
.proof li { position: relative; padding-top: var(--sp-3); }
.proof li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--accent);
}

.proof__v { font-size: var(--fs-body); color: var(--paper); }

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

/* The tuning section is the site's main pitch, so it earns extra air — but
   only where there is room for it. On a phone the old fixed 128px/96px block
   padding read as a void before the section had even started. */
@media (min-width: 1024px) {
  /* Binds the photograph and the copy into one block. At 1440 the two columns
     sat 128px apart with the section carrying extra padding of its own, so the
     pair floated. The section now follows the normal rhythm. */
  .tuning__grid { column-gap: var(--sp-8); }
}