/**
 * home.css — homepage-only styling.
 *
 * Loaded on is_front_page() alone. Consumes tokens.css exclusively: no colour, size or
 * breakpoint is hardcoded here. Where a shade is needed that is not a token, it is
 * derived from one with color-mix() rather than written as a literal.
 *
 * Mobile-first. Logical properties only — no left/right anywhere, so the same rules
 * serve the Arabic RTL front end and a future LTR locale.
 *
 * Breakpoints (from the build contract): sm 480, md 768, lg 1024, xl 1280.
 */

/* ------------------------------------------------------------------ *
 * Shared homepage scaffolding
 * ------------------------------------------------------------------ */

.jm-home-wrap {
  inline-size: 100%;
  max-inline-size: var(--jm-container);
  margin-inline: auto;
  padding-inline: var(--jm-space-4);
}

.jm-home-section {
  margin-block: var(--jm-space-7);
}

.jm-home-section:first-child {
  margin-block-start: 0;
}

@media (min-width: 1024px) {
  .jm-home-wrap {
    padding-inline: var(--jm-space-6);
  }

  .jm-home-section {
    margin-block: var(--jm-space-8);
  }
}

/* --- Section heading + "view all" ------------------------------------ */

.jm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jm-space-4);
  margin-block-end: var(--jm-space-5);
  padding-block-end: var(--jm-space-3);
  border-block-end: 1px solid var(--jm-color-line-soft);
}

.jm-section-head__title {
  margin: 0;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-lg);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-ink);
}

.jm-section-head__more {
  flex: none;
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-medium);
  color: var(--jm-color-accent);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  padding-block-end: var(--jm-space-1);
  transition: color var(--jm-transition), border-color var(--jm-transition);
}

.jm-section-head__more:hover,
.jm-section-head__more:focus-visible {
  color: var(--jm-color-accent-hover);
  border-block-end-color: var(--jm-color-accent-hover);
}

@media (min-width: 768px) {
  .jm-section-head__title {
    font-size: var(--jm-fs-xl);
  }
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.jm-hero {
  /* Scrim shades, derived from the ink token so no colour is hardcoded. It stays a
     scrim, not a blackout: enough separation for text on a pale image, still gentle
     enough that a dark image is not crushed. */
  --jm-hero-scrim-strong: color-mix(in srgb, var(--jm-color-ink) 66%, transparent);
  --jm-hero-scrim-mid: color-mix(in srgb, var(--jm-color-ink) 34%, transparent);

  position: relative;
  display: grid;
  isolation: isolate;
  background-color: var(--jm-color-surface-2);
}

.jm-hero__media,
.jm-hero__inner {
  grid-area: 1 / 1;
  min-inline-size: 0;
}

.jm-hero__media {
  position: relative;
  z-index: 0;
}

/* The scrim sits on the media, under the copy. Bottom-weighted so the top of the
   photograph stays untouched. */
.jm-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    var(--jm-hero-scrim-strong) 0%,
    var(--jm-hero-scrim-mid) 42%,
    transparent 78%
  );
  pointer-events: none;
}

.jm-hero__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

.jm-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  inline-size: 100%;
  max-inline-size: var(--jm-container);
  margin-inline: auto;
  padding: var(--jm-space-5) var(--jm-space-4) var(--jm-space-6);
}

.jm-hero__copy {
  max-inline-size: 34ch;
  color: var(--jm-color-on-accent);
}

/* With no image there is no scrim to read against, so the copy reverts to ink on the
   page ground and centres in the container. */
.jm-hero--plain {
  background-color: var(--jm-color-surface);
  border-block-end: 1px solid var(--jm-color-line-soft);
}

.jm-hero--plain .jm-hero__inner {
  padding-block: var(--jm-space-7);
}

.jm-hero--plain .jm-hero__copy {
  color: var(--jm-color-ink);
}

.jm-hero__heading {
  margin: 0;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-2xl);
  font-weight: var(--jm-fw-bold);
  line-height: var(--jm-lh-head);
  color: inherit;
}

.jm-hero__text {
  margin-block: var(--jm-space-3) 0;
  font-size: var(--jm-fs-base);
  line-height: var(--jm-lh-body);
  color: inherit;
}

.jm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jm-space-3);
  margin-block: var(--jm-space-5) 0;
}

/* The secondary CTA sits on photography, so it needs its own light outline rather than
   the ink-on-ground ghost button used elsewhere. */
.jm-hero:not(.jm-hero--plain) .jm-hero__cta--secondary {
  color: var(--jm-color-on-accent);
  background-color: transparent;
  border-color: var(--jm-color-on-accent);
}

.jm-hero:not(.jm-hero--plain) .jm-hero__cta--secondary:hover,
.jm-hero:not(.jm-hero--plain) .jm-hero__cta--secondary:focus-visible {
  color: var(--jm-color-ink);
  background-color: var(--jm-color-on-accent);
}

@media (min-width: 768px) {
  .jm-hero__image {
    aspect-ratio: 16 / 9;
  }

  .jm-hero__inner {
    padding: var(--jm-space-7) var(--jm-space-6);
  }

  .jm-hero__copy {
    max-inline-size: 42ch;
  }

  .jm-hero__heading {
    font-size: var(--jm-fs-3xl);
  }

  .jm-hero__text {
    font-size: var(--jm-fs-md);
  }
}

@media (min-width: 1024px) {
  .jm-hero__inner {
    padding-block: var(--jm-space-8);
  }
}

/* ------------------------------------------------------------------ *
 * Featured categories
 * ------------------------------------------------------------------ */

.jm-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-cat-grid__item {
  margin: 0;
}

.jm-cat-tile {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--jm-color-ink);
  background-color: var(--jm-color-surface);
  border: 1px solid var(--jm-color-line-soft);
  border-radius: var(--jm-radius);
  overflow: hidden;
  transition: border-color var(--jm-transition), box-shadow var(--jm-transition);
}

.jm-cat-tile:hover,
.jm-cat-tile:focus-visible {
  border-color: var(--jm-color-line);
  box-shadow: var(--jm-shadow-sm);
}

.jm-cat-tile__media {
  display: block;
  aspect-ratio: 3 / 4;
  background-color: var(--jm-color-surface-2);
  overflow: hidden;
}

.jm-cat-tile__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--jm-transition);
}

.jm-cat-tile:hover .jm-cat-tile__image,
.jm-cat-tile:focus-visible .jm-cat-tile__image {
  transform: scale(1.015);
}

.jm-cat-tile__label {
  display: block;
  padding: var(--jm-space-3) var(--jm-space-4);
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-base);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  text-align: start;
  border-block-start: 1px solid var(--jm-color-line-soft);
}

@media (min-width: 768px) {
  .jm-cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--jm-space-5);
  }
}

/* ------------------------------------------------------------------ *
 * Editorial carousel
 * ------------------------------------------------------------------ */

.jm-carousel {
  /* Scoped, derived duration for the slide transition — a movement this large reads
     better slower than the 160ms token used for micro-interactions elsewhere. Not a
     colour or a size, so it does not belong in tokens.css; scoped locally the same
     way the hero's scrim shades are (see .jm-hero above). */
  --jm-carousel-duration: 420ms;

  position: relative;
  isolation: isolate;
}

.jm-carousel__viewport {
  overflow: hidden;
  border-radius: var(--jm-radius);
}

.jm-carousel__track {
  display: flex;
  touch-action: pan-y;
  transition: transform var(--jm-carousel-duration) ease;
}

.jm-carousel__track.is-dragging {
  transition: none;
}

.jm-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-inline-size: 0;
  display: grid;
}

.jm-carousel__media {
  grid-area: 1 / 1;
  position: relative;
  min-inline-size: 0;
  background-color: var(--jm-color-surface-2);
}

/* Same bottom-weighted scrim technique as the hero, so overlaid copy stays readable
   against any photograph without crushing the image itself. */
.jm-carousel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--jm-color-ink) 66%, transparent) 0%,
    color-mix(in srgb, var(--jm-color-ink) 34%, transparent) 42%,
    transparent 78%
  );
  pointer-events: none;
}

.jm-carousel__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.jm-carousel__inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  inline-size: 100%;
  max-inline-size: var(--jm-container);
  margin-inline: auto;
  padding: var(--jm-space-5) var(--jm-space-4) var(--jm-space-6);
}

.jm-carousel__copy {
  max-inline-size: 34ch;
  color: var(--jm-color-on-accent);
}

.jm-carousel__heading {
  margin: 0;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-xl);
  font-weight: var(--jm-fw-bold);
  line-height: var(--jm-lh-head);
  color: inherit;
}

.jm-carousel__text {
  margin-block: var(--jm-space-3) 0;
  font-size: var(--jm-fs-base);
  line-height: var(--jm-lh-body);
  color: inherit;
}

.jm-carousel__actions {
  margin-block: var(--jm-space-5) 0;
}

.jm-carousel__btn {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--jm-space-7);
  block-size: var(--jm-space-7);
  min-block-size: 0;
  padding: 0;
  background-color: var(--jm-color-surface);
  color: var(--jm-color-ink);
  border: 1px solid var(--jm-color-line-soft);
  border-radius: var(--jm-radius-pill);
  box-shadow: var(--jm-shadow-sm);
  transition: background-color var(--jm-transition), border-color var(--jm-transition);
}

.jm-carousel__btn:hover,
.jm-carousel__btn:focus-visible {
  background-color: var(--jm-color-accent-soft);
  border-color: var(--jm-color-accent);
}

.jm-carousel__btn--prev {
  inset-inline-start: var(--jm-space-3);
}

.jm-carousel__btn--next {
  inset-inline-end: var(--jm-space-3);
}

/*
 * The shared chevron icon points visual-right by default. "Next" keeps that as-is in
 * LTR (forward = right); "prev" mirrors it. Under RTL the meaning of "forward" flips,
 * so the two swap — same scaleX(-1) technique the breadcrumb separator already uses
 * for the same reason (see content.css).
 */
.jm-carousel__btn--prev .jm-icon {
  transform: scaleX(-1);
}

:where([dir="rtl"]) .jm-carousel__btn--prev .jm-icon {
  transform: none;
}

:where([dir="rtl"]) .jm-carousel__btn--next .jm-icon {
  transform: scaleX(-1);
}

.jm-carousel__dots {
  position: absolute;
  inset-block-end: var(--jm-space-3);
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm-space-1);
}

/* A 24px hit target (the WCAG 2.2 minimum) around a visually smaller dot, via a
   centred pseudo-element, so the indicator can stay small without punishing touch. */
.jm-carousel__dot {
  position: relative;
  inline-size: var(--jm-space-5);
  block-size: var(--jm-space-5);
  min-block-size: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}

.jm-carousel__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--jm-space-3);
  block-size: var(--jm-space-3);
  border: 2px solid var(--jm-color-on-accent);
  border-radius: var(--jm-radius-pill);
  opacity: 0.6;
  transition: opacity var(--jm-transition), background-color var(--jm-transition);
}

.jm-carousel__dot:hover::before,
.jm-carousel__dot:focus-visible::before {
  opacity: 1;
}

/* State is never colour-only: the active dot also fills solid, not just a colour
   shift, so it reads under a colour-vision deficiency too. */
.jm-carousel__dot.is-active::before {
  background-color: var(--jm-color-on-accent);
  opacity: 1;
}

@media (min-width: 768px) {
  .jm-carousel__image {
    aspect-ratio: 21 / 9;
  }

  .jm-carousel__inner {
    padding: var(--jm-space-7) var(--jm-space-6);
  }

  .jm-carousel__copy {
    max-inline-size: 42ch;
  }

  .jm-carousel__heading {
    font-size: var(--jm-fs-2xl);
  }

  .jm-carousel__btn {
    inline-size: var(--jm-space-8);
    block-size: var(--jm-space-8);
  }
}

/* ------------------------------------------------------------------ *
 * Brand story
 * ------------------------------------------------------------------ */

.jm-story__wrap {
  text-align: center;
}

.jm-story__heading {
  margin: 0;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-xl);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-ink);
}

.jm-story__text {
  margin-block: var(--jm-space-3) 0;
  font-size: var(--jm-fs-base);
  line-height: var(--jm-lh-body);
  color: var(--jm-color-ink-2);
}

.jm-story__heading + .jm-story__text {
  margin-block-start: var(--jm-space-2);
}

@media (min-width: 768px) {
  .jm-story__heading {
    font-size: var(--jm-fs-2xl);
  }

  .jm-story__text {
    font-size: var(--jm-fs-md);
  }
}

/* ------------------------------------------------------------------ *
 * Sale
 * ------------------------------------------------------------------ */

/* The only bespoke touch this row needs: its heading picks up the sale accent so it
   reads as more time-sensitive than the evergreen best-sellers row beside it. Cards
   already carry their own sale badge (.jm-badge--sale in woocommerce.css) — not
   duplicated here. */
.jm-sale .jm-section-head__title {
  color: var(--jm-color-sale);
}

/* ------------------------------------------------------------------ *
 * Promo band
 * ------------------------------------------------------------------ */

.jm-promo__inner {
  display: grid;
  gap: var(--jm-space-5);
  align-items: center;
  background-color: var(--jm-color-surface);
  border: 1px solid var(--jm-color-line-soft);
  border-radius: var(--jm-radius);
  overflow: hidden;
}

.jm-promo__media {
  min-inline-size: 0;
  background-color: var(--jm-color-surface-2);
}

.jm-promo__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.jm-promo__copy {
  padding: var(--jm-space-2) var(--jm-space-5) var(--jm-space-6);
}

.jm-promo--no-media .jm-promo__copy {
  padding-block: var(--jm-space-6);
  text-align: center;
}

.jm-promo__heading {
  margin: 0;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-xl);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-ink);
}

.jm-promo__text {
  margin-block: var(--jm-space-3) 0;
  font-size: var(--jm-fs-base);
  line-height: var(--jm-lh-body);
  color: var(--jm-color-ink-2);
}

.jm-promo__actions {
  margin-block: var(--jm-space-5) 0;
}

@media (min-width: 768px) {
  .jm-promo__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }

  .jm-promo--no-media .jm-promo__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .jm-promo__image {
    aspect-ratio: 3 / 2;
  }

  .jm-promo__copy {
    padding: var(--jm-space-7) var(--jm-space-6);
  }

  .jm-promo__heading {
    font-size: var(--jm-fs-2xl);
  }
}

/* ------------------------------------------------------------------ *
 * Trust row
 * ------------------------------------------------------------------ */

.jm-trust {
  padding-block: var(--jm-space-6);
  border-block: 1px solid var(--jm-color-line-soft);
  background-color: var(--jm-color-olive-soft);
}

.jm-trust__list {
  display: grid;
  gap: var(--jm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-trust__item {
  display: flex;
  align-items: start;
  gap: var(--jm-space-3);
  margin: 0;
}

.jm-trust__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--jm-space-6);
  block-size: var(--jm-space-6);
  margin-block-start: var(--jm-space-1);
  color: var(--jm-color-olive);
  border: 1px solid var(--jm-color-olive);
  border-radius: var(--jm-radius-pill);
}

.jm-trust__body {
  display: block;
  min-inline-size: 0;
}

.jm-trust__title {
  display: block;
  font-family: var(--jm-font-head);
  font-size: var(--jm-fs-base);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-ink);
}

.jm-trust__text {
  display: block;
  margin-block-start: var(--jm-space-1);
  font-size: var(--jm-fs-sm);
  line-height: var(--jm-lh-body);
  color: var(--jm-color-ink-2);
}

@media (min-width: 768px) {
  .jm-trust__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--jm-space-6);
  }
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .jm-cat-tile__image,
  .jm-cat-tile,
  .jm-section-head__more,
  .jm-carousel__track,
  .jm-carousel__btn,
  .jm-carousel__dot::before {
    transition: none;
  }

  .jm-cat-tile:hover .jm-cat-tile__image,
  .jm-cat-tile:focus-visible .jm-cat-tile__image {
    transform: none;
  }
}