/* ==========================================================================
   MotoJoy — homepage hero block

   Owns blocks/hero only. Registered through block.json `style`, so it loads
   on the frontend and in the editor canvas from one declaration.

   Reproduces docs/motojoy-front-page-design.html lines 69-86. Values come
   from theme.json; the scrim uses color-mix() so its translucency is derived
   from the ink token rather than restated as a literal rgba().
   ========================================================================== */

.mj-home-hero {
  position: relative;
  min-height: var(--wp--custom--hero-h);
  overflow: hidden;
}

.mj-home-hero__track {
  display: flex;
  height: 100%;
  min-height: var(--wp--custom--hero-h);
  /* JS sets the running transform; this only covers the no-JS/no-slider
     single-slide case, where the track never moves. */
  transition: transform 0.5s ease;
}

/* Autoplay still advances under reduced motion (JS disables the timer
   itself), but any advance that does happen — arrows, dots, swipe — should
   not animate. */
@media (prefers-reduced-motion: reduce) {
  .mj-home-hero__track {
    transition: none;
  }
}

.mj-home-hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 100%;
  min-width: 100%;
  background-color: var(--wp--preset--color--ink);
}

.mj-home-hero__slide--light,
.mj-home-hero__slide--none {
  background-color: var(--wp--preset--color--surface);
}

/* The nav floats over light and dark slides alike, so it keeps the default
   ring on a white halo; only content inside a dark slide takes the on-dark
   one. */
.mj-home-hero__slide:not(.mj-home-hero__slide--light, .mj-home-hero__slide--none) {
  --wp--preset--color--focus: var(--wp--preset--color--focus-on-dark);
}

.mj-home-hero__slide--none {
  background-color: transparent;
}

.mj-home-hero__media,
.mj-home-hero__scrim {
  position: absolute;
  inset: 0;
}

.mj-home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the machine in frame on tall crops rather than centring on sky. */
  object-position: 50% 40%;
}

/* Horizontal scrim, dark at the reading edge — the reference's defining
   move. A bottom-up scrim was what made the pattern hero read as a different
   composition. */
.mj-home-hero__scrim {
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wp--preset--color--ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--ink) 66%, transparent) 46%,
    color-mix(in srgb, var(--wp--preset--color--ink) 24%, transparent) 100%
  );
}

.mj-home-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* The header's content edge, so the text lines up with the logo. */
  padding-inline: var(--wp--custom--page-edge);
  /* Symmetric so the centred text sits in the optical middle; the bottom
     value also clears the slider nav row. */
  padding-block: var(--wp--preset--spacing--9);
  color: var(--wp--preset--color--text-on-dark);
}

/* Eyebrow is a filled brand chip, not coloured text — it is the only brand
   plane above the fold and carries the marking role from design-system.md
   §3.2. Real lowercase in the DOM; uppercase is presentational. */
.mj-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-block: 0 var(--wp--preset--spacing--5);
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
  color: var(--wp--preset--color--text-on-dark);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  background-color: var(--wp--preset--color--brand);
}

.mj-home-hero__title {
  max-width: var(--wp--custom--measure-display);
  margin-block: 0;
  color: var(--wp--preset--color--text-on-dark);
  font-size: var(--wp--preset--font-size--display);
  font-weight: 800;
  line-height: var(--wp--custom--leading-display);
  letter-spacing: var(--wp--custom--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Softened white, not the warm text-on-dark-muted token. That token is tuned
   for a flat ink plane; over photography it reads muddy and loses contrast
   against lighter areas of the image. Matches the reference's rgba(255,255,255,.86),
   derived from the token rather than restated as a literal. */
.mj-home-hero__lead {
  max-width: var(--wp--custom--measure-lead);
  margin-block: var(--wp--preset--spacing--5) 0;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--text-on-dark) 86%,
    transparent
  );
  font-size: var(--wp--preset--font-size--lead);
  line-height: var(--wp--custom--leading-body);
}

/* 1px gap, so the two buttons read as one control split by a hairline —
   the grid language from design-system.md §5.3, not two detached pills. */
.mj-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-block-start: var(--wp--preset--spacing--6);
}

.mj-home-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--control-h);
  padding-inline: var(--wp--preset--spacing--6);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  border: 1px solid transparent;
}

/* design-system.md §8.1 "Brand": the marketing CTA in a hero. It reads on
   ink, photography and the light slides alike, so no per-slide override. */
.mj-home-hero__cta--primary {
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--wp--preset--color--brand);
}

.mj-home-hero__cta--primary:hover,
.mj-home-hero__cta--primary:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--wp--preset--color--brand-hover);
}

.mj-home-hero__cta--secondary {
  color: var(--wp--preset--color--text-on-dark);
  background-color: transparent;
  border-color: var(--wp--preset--color--text-on-dark);
}

.mj-home-hero__cta--secondary:hover,
.mj-home-hero__cta--secondary:focus-visible {
  color: var(--wp--preset--color--ink);
  background-color: var(--wp--preset--color--text-on-dark);
}

.mj-home-hero__cta:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid
    var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--focus-ring-offset);
}

.mj-home-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--6);
  margin-block: var(--wp--preset--spacing--6) 0;
  padding-block-start: var(--wp--preset--spacing--5);
  padding-inline: 0;
  /* Same reasoning as the lead: white over photography, per the reference. */
  color: color-mix(
    in srgb,
    var(--wp--preset--color--text-on-dark) 80%,
    transparent
  );
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  list-style: none;
  border-block-start: 1px solid var(--wp--preset--color--rule-on-dark);
}

/* Light and no-background slides carry no scrim, so they need the inverse
   text palette: ink on the surface tone instead of white on photography. */
.mj-home-hero__slide--light .mj-home-hero__content,
.mj-home-hero__slide--none .mj-home-hero__content {
  color: var(--wp--preset--color--ink);
}

.mj-home-hero__slide--light .mj-home-hero__title,
.mj-home-hero__slide--none .mj-home-hero__title {
  color: var(--wp--preset--color--ink);
}

.mj-home-hero__slide--light .mj-home-hero__lead,
.mj-home-hero__slide--none .mj-home-hero__lead {
  color: var(--wp--preset--color--text-muted);
}

.mj-home-hero__slide--light .mj-home-hero__cta--secondary,
.mj-home-hero__slide--none .mj-home-hero__cta--secondary {
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
}

.mj-home-hero__slide--light .mj-home-hero__cta--secondary:hover,
.mj-home-hero__slide--none .mj-home-hero__cta--secondary:hover,
.mj-home-hero__slide--light .mj-home-hero__cta--secondary:focus-visible,
.mj-home-hero__slide--none .mj-home-hero__cta--secondary:focus-visible {
  color: var(--wp--preset--color--text-on-dark);
  background-color: var(--wp--preset--color--ink);
}

.mj-home-hero__slide--light .mj-home-hero__trust,
.mj-home-hero__slide--none .mj-home-hero__trust {
  color: var(--wp--preset--color--text-muted);
  border-block-start-color: var(--wp--preset--color--rule);
}

.mj-home-hero__slide--light .mj-home-hero__trust-item + .mj-home-hero__trust-item,
.mj-home-hero__slide--none .mj-home-hero__trust-item + .mj-home-hero__trust-item {
  border-block-start-color: var(--wp--preset--color--rule);
}

/* Slider chrome: one row at the foot of the hero — prev, markers, next —
   matching the mobile scroller nav (assets/css/scroller-nav.css) under the
   feature grid and product rail. It only exists when render.php outputs more
   than one slide. The white arrow fill reads on photography and on the light
   slides alike, so it needs no per-slide contrast switching. */
.mj-home-hero__nav {
  position: absolute;
  z-index: 2;
  right: var(--wp--custom--gutter);
  bottom: var(--wp--preset--spacing--5);
  left: var(--wp--custom--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--4);
  pointer-events: none;
}

.mj-home-hero__nav > * {
  pointer-events: auto;
}

.mj-home-hero__arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--wp--preset--color--ink);
  font-size: 1.5rem;
  line-height: 1;
  background-color: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--hard);
  cursor: pointer;
}

.mj-home-hero__arrow:hover {
  background-color: var(--wp--preset--color--surface);
}

.mj-home-hero__arrow:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--focus-ring-offset);
  box-shadow:
    0 0 0 var(--wp--custom--focus-ring-offset) var(--wp--preset--color--bg),
    var(--wp--preset--shadow--hard);
}

.mj-home-hero__dots {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
}

.mj-home-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background-color: var(--wp--preset--color--rule);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.mj-home-hero__dot[aria-current="true"] {
  width: 24px;
  background-color: var(--wp--preset--color--brand);
}

.mj-home-hero__dot:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--focus-ring-offset);
  box-shadow: 0 0 0 var(--wp--custom--focus-ring-offset) var(--wp--preset--color--bg);
}

@media (prefers-reduced-motion: reduce) {
  .mj-home-hero__dot {
    transition: none;
  }
}

/* Visually hidden: the live region exists only for assistive tech to
   announce the current slide. */
.mj-home-hero__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Below the tablet breakpoint the buttons stack to full width so both stay
   above the 44px touch target, and the hero gives back height rather than
   pushing everything below the fold. Literal breakpoint: media-query
   conditions cannot read custom properties. */
@media (max-width: 781px) {
  .mj-home-hero,
  .mj-home-hero__track,
  .mj-home-hero__slide {
    min-height: 0;
  }

  /* Arrows at the edges, markers between — the scroller nav's mobile row. */
  .mj-home-hero__nav {
    justify-content: space-between;
  }

  /* Buttons span the column, so their labels need centring — left-aligned
     text in a full-width button reads as a mistake. */
  .mj-home-hero__actions {
    display: grid;
  }

  .mj-home-hero__cta {
    justify-content: center;
  }

  /* Stacked and ruled rather than wrapped: three claims sharing one line at
     this width wrap unpredictably in Lithuanian. One per row, separated by
     the same hairline the rest of the system uses. */
  .mj-home-hero__trust {
    display: grid;
    gap: 0;
  }

  .mj-home-hero__trust-item {
    padding-block: var(--wp--preset--spacing--3);
  }

  .mj-home-hero__trust-item + .mj-home-hero__trust-item {
    border-block-start: 1px solid var(--wp--preset--color--rule-on-dark);
  }
}