/* ==========================================================================
   Hero — front-page, premium centered, no image
   ========================================================================== */

.jl-hero {
  position: relative;
  background-color: var(--jl-cream-tint);
  border-bottom: 1px solid var(--jl-line);
  /* soft brass glow, restrained */
  background-image: radial-gradient(60% 80% at 50% -10%, rgba(181, 144, 77, .12), transparent 70%);
}
.jl-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 5.5em 2.618em 5em;
  text-align: center;
}

/* --- Eyebrow with sparkles flanking --- */
.jl-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jl-bordeaux);
}

/* --- Title --- */
.jl-hero__title {
  margin: 0 0 22px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--jl-ink);
}
.jl-hero__title em { color: var(--jl-bordeaux); font-style: italic; }

.jl-hero__text {
  max-width: 52ch;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--jl-text-70);
}

/* --- Actions: primary pill + secondary outlined --- */
.jl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* .jl-hero__cta inherits the bordeaux pill from buttons.css (.button) */
.jl-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid rgba(110, 28, 47, .35);
  border-radius: var(--jl-r-pill);
  font: 500 14px/1 var(--jl-sans);
  letter-spacing: .03em;
  color: var(--jl-bordeaux);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.jl-hero__secondary:hover { background: rgba(110, 28, 47, .07); border-color: var(--jl-bordeaux); color: var(--jl-bordeaux); }

/* --- Trust row: rating · craft · shipping, divided --- */
.jl-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--jl-text-50);
}
.jl-hero__trust li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 24px; }
.jl-hero__trust li:not(:last-child) { border-right: 1px solid var(--jl-line); }
.jl-hero__stars { color: var(--jl-brass); letter-spacing: .1em; }

/* --- Photo of Junia's creation, pinned to the bottom-right of the hero --- */
.jl-hero__image {
  position: absolute;
  bottom: 0;
  /* Anchor the photo's left edge a fixed distance right of the page centre, so
     it stays beside the centred content on every screen width instead of
     drifting to the far right (the content column is ~23.75rem half-width). */
  left: 50%;
  transform: translateX(13rem);
  display: block;
  width: clamp(240px, 38vw, 540px);
  height: auto;
}

/* The page's own H1 ("Accueil") is redundant with the hero title. */
.home .entry-title { display: none; }

/* Storefront adds a ~4.2em margin-bottom under the header on home pages that
   aren't the homepage template — a gap above the hero. Match its selector
   specificity (0,4,0) to remove it so the hero sits flush under the header. */
.home.page:not(.page-template-template-homepage) .site-header { margin-bottom: 0; }

@media (max-width: 768px) {
  .jl-hero__inner { padding: 3.5em 1.5em 0; }
  .jl-hero__eyebrow { gap: 9px; letter-spacing: .2em; }
  .jl-hero__trust li { border-right: 0; padding: 4px 12px; }
  /* Drop out of absolute positioning so the photo flows below the copy
     instead of overlapping it on narrow screens. */
  .jl-hero__image {
    position: static;
    transform: none;
    width: min(80%, 360px);
    margin: 32px auto 0;
  }
}