/*
 * Homepage.
 *
 * Surface rhythm: one dark block at the top (bandeau, header, hero), the whole
 * catalogue light, then dark again from the editorial straight into the footer.
 * Three zones, not seven: alternating on every section made the page read as a
 * stack of unrelated slabs, and product photography — shot cut out on white —
 * never lands on the dark.
 *
 * Sections declare their context with data-eld-ctx; every value below comes
 * from the semantic layer, so flipping a section from dark to light is a
 * markup change, not a stylesheet rewrite.
 */

.eld-home { display: block; }

.eld-section {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background-color: var(--eld-bg);
}

.eld-section__head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.eld-section__title {
  margin: var(--eld-space-3) 0 0;
  font-family: var(--eld-font-display);
  font-size: var(--eld-text-h2);
  font-weight: 400;
  line-height: var(--eld-leading-tight);
  letter-spacing: var(--eld-tracking-tight);
  color: var(--eld-ink);
}

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

.eld-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* A fixed band, never the full viewport: the fold has to reach the
     catalogue, not end on a logo. */
  min-height: clamp(26rem, 52vh, 32rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background-color: var(--eld-bg);
  color: var(--eld-ink);
  overflow: hidden;
  text-align: left;
}

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

.eld-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

/*
 * Two overlays rather than one: a horizontal ramp keeps the left column
 * readable, a vertical one anchors the composition and hides the seam where
 * the photograph's own grey background stops.
 */
.eld-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--eld-bg) 94%, transparent) 0%,
      color-mix(in srgb, var(--eld-bg) 86%, transparent) 32%,
      color-mix(in srgb, var(--eld-bg) 45%, transparent) 62%,
      color-mix(in srgb, var(--eld-bg) 25%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--eld-bg) 75%, transparent) 0%,
      transparent 45%);
}

.eld-hero__inner { position: relative; z-index: 2; }

.eld-hero__eyebrow {
  display: block;
  margin: 0 0 var(--eld-space-4);
  font-size: var(--eld-text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--eld-tracking-eyebrow);
  color: var(--eld-accent);
}

.eld-hero__title {
  max-width: 16ch;
  margin: 0 0 var(--eld-space-4);
  font-family: var(--eld-font-display);
  font-size: var(--eld-text-hero);
  font-weight: 400;
  line-height: var(--eld-leading-tight);
  letter-spacing: var(--eld-tracking-tight);
  color: var(--eld-ink);
}

.eld-hero__subtitle {
  max-width: 46ch;
  margin: 0 0 var(--eld-space-5);
  font-size: var(--eld-text-lead);
  line-height: var(--eld-leading-relaxed);
  color: var(--eld-ink-2);
}

.eld-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eld-space-4) var(--eld-space-6);
}

/* --- Arrow link --------------------------------------------------------- */

.eld-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--eld-space-2);
  font-family: var(--eld-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--eld-tracking-wide);
  color: var(--eld-ink);
}

.eld-link-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--eld-transition);
}

.eld-link-arrow:hover { color: var(--eld-accent); }
.eld-link-arrow:hover svg { transform: translateX(4px); }

/* --- USP strip ---------------------------------------------------------- */

/*
 * A light strip, not a dark band. The homepage was flipping between dark and
 * light four times on the way down and reading as a stack of unrelated slabs;
 * the page now runs dark at the top, light through the whole catalogue, and
 * dark again from the editorial into the footer.
 */
.eld-usp {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: var(--eld-bg-2);
  color: var(--eld-ink);
  border-top: 1px solid var(--eld-border);
  border-bottom: 1px solid var(--eld-border);
}

.eld-usp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  text-align: center;
}

@media (min-width: 700px) {
  .eld-usp__grid { grid-template-columns: repeat(3, 1fr); gap: var(--eld-space-6); }
}

.eld-usp__item { display: flex; flex-direction: column; align-items: center; }

.eld-usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--eld-space-4);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius-full);
  background-color: var(--eld-bg-3);
  color: var(--eld-accent);
}

/* Thin strokes read as premium at this scale. */
.eld-usp__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}

/*
 * Body font, not the display face: these are functional claims a contractor
 * scans in passing, and a decorative serif slows that read.
 */
.eld-usp__title {
  margin: 0 0 var(--eld-space-2);
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-lead);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--eld-ink);
}

.eld-usp__text {
  max-width: 24rem;
  margin: 0;
  font-size: var(--eld-text-small);
  line-height: var(--eld-leading-relaxed);
  color: var(--eld-ink-2);
}

/* --- Category cards ----------------------------------------------------- */

.eld-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--eld-space-4);
}

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

.eld-cat-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.eld-cat-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
  aspect-ratio: 4 / 5;
}

.eld-cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--eld-ease-out);
}

.eld-cat-card:hover .eld-cat-card__media img { transform: scale(1.05); }

/* A hairline that draws itself on hover — the only motion flourish here. */
.eld-cat-card__media::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--eld-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--eld-ease-out);
}

.eld-cat-card:hover .eld-cat-card__media::after { transform: scaleX(1); }

.eld-cat-card__body { display: block; padding-top: var(--eld-space-4); }

.eld-cat-card__title {
  display: block;
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-lead);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--eld-ink);
  transition: color var(--eld-transition);
}

.eld-cat-card:hover .eld-cat-card__title { color: var(--eld-accent-h); }

.eld-cat-card__note {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--eld-ink-2);
}

.eld-cat-card__count {
  display: block;
  margin-top: var(--eld-space-2);
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

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

.eld-editorial {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background-color: var(--eld-bg);
}

.eld-editorial__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  align-items: stretch;
}

@media (min-width: 900px) {
  .eld-editorial__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* Fill the column so image and copy end on the same line. */
.eld-editorial__media { align-self: stretch; display: flex; }

.eld-editorial__media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  border-radius: var(--eld-radius);
  display: block;
}

.eld-editorial__title {
  margin: var(--eld-space-3) 0 var(--eld-space-4);
  font-family: var(--eld-font-display);
  font-size: var(--eld-text-h2);
  font-weight: 400;
  line-height: var(--eld-leading-tight);
  letter-spacing: var(--eld-tracking-tight);
  color: var(--eld-ink);
}

.eld-editorial__body p {
  margin: 0 0 var(--eld-space-4);
  line-height: 1.75;
  color: var(--eld-ink-2);
}

.eld-editorial__body .eld-link-arrow { margin-top: var(--eld-space-3); }

/* --- Closing CTA -------------------------------------------------------- */

.eld-cta {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background-color: var(--eld-bg-2);
  border-top: 1px solid var(--eld-border);
}

.eld-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--eld-space-6);
  align-items: flex-start;
}

@media (min-width: 800px) {
  .eld-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--eld-space-7);
  }
}

.eld-cta__title {
  margin: 0 0 var(--eld-space-2);
  font-family: var(--eld-font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: var(--eld-tracking-tight);
  color: var(--eld-ink);
}

.eld-cta__text {
  margin: 0;
  max-width: 44ch;
  line-height: 1.65;
  color: var(--eld-ink-2);
}

.eld-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eld-space-4) var(--eld-space-5);
}

.eld-cta__actions .eld-btn { font-variant-numeric: tabular-nums; }


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

.eld-hero__lede {
  max-width: 48ch;
  margin: 0 0 var(--eld-space-5);
  font-size: var(--eld-text-lead);
  line-height: 1.6;
  color: var(--eld-ink-2);
}

.eld-hero__lede strong {
  color: var(--eld-ink);
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}

.eld-btn--ghost {
  background-color: transparent;
  border: 1px solid var(--eld-border-2);
  color: var(--eld-ink);
}

.eld-btn--ghost:hover {
  background-color: color-mix(in srgb, var(--eld-ink) 8%, transparent);
  border-color: var(--eld-accent);
  color: var(--eld-ink);
}

/* --- Dispatch countdown -------------------------------------------------- */

.eld-dispatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--eld-space-5);
  font-size: var(--eld-text-small);
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-2);
}

.eld-dispatch__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--eld-radius-full);
  background-color: var(--eld-ink-3);
}

.eld-dispatch.is-today .eld-dispatch__dot { background-color: var(--eld-stock-in); }

@media (prefers-reduced-motion: no-preference) {
  .eld-dispatch.is-today .eld-dispatch__dot { animation: eld-pulse 2.4s ease-in-out infinite; }
}

@keyframes eld-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --- Category strip ------------------------------------------------------ */

.eld-catstrip {
  padding: var(--eld-space-6) 0;
  background-color: var(--eld-bg);
  border-bottom: 1px solid var(--eld-border);
}

/*
 * minmax(0, 1fr), not 1fr: a track sized 1fr still refuses to go below its
 * content's minimum width, so one long category name ("Croisillons
 * autonivelants") widens the whole grid past the viewport and the page
 * scrolls sideways.
 */
.eld-catstrip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--eld-space-3);
}

@media (min-width: 560px) {
  .eld-catstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .eld-catstrip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--eld-space-4);
  }
}

.eld-catstrip__item {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--eld-space-4);
  padding: var(--eld-space-3);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
  background-color: var(--eld-paper);
  color: inherit;
  overflow: hidden;
  transition: border-color var(--eld-transition), transform 280ms var(--eld-ease-out);
}

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

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .eld-catstrip__item:hover { transform: translateY(-2px); }
  .eld-catstrip__item:hover .eld-catstrip__media img { transform: scale(1.06); }
}

/* A rule that fills from the left on hover — the same gesture as the cards. */
.eld-catstrip__item::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--eld-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--eld-ease-out);
}

.eld-catstrip__item:hover::after { transform: scaleX(1); }

/*
 * Bigger than it was. At 64px a spacer or a joint section was a smudge, and
 * a tile you cannot read the picture in is just a bullet point with extra
 * steps.
 */
.eld-catstrip__media {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
}

/* contain, because most of these are now cut-out parts rather than scenes. */
.eld-catstrip__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  transition: transform 500ms var(--eld-ease-out);
}

.eld-catstrip__body { min-width: 0; }

/*
 * break-word, not anywhere. "anywhere" split "accessoires" across lines as
 * "accessoir/es" on a phone; this only breaks a word that genuinely cannot
 * fit, and the single-column layout below 560px means none of them has to.
 */
.eld-catstrip__title {
  display: block;
  font-size: var(--eld-text-body);
  font-weight: 600;
  color: var(--eld-ink);
  line-height: var(--eld-leading-snug);
  overflow-wrap: break-word;
}

.eld-catstrip__note {
  display: block;
  margin-top: 0.1875rem;
  font-size: var(--eld-text-micro);
  color: var(--eld-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eld-catstrip__count {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--eld-text-micro);
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink-3);
}

/* --- Section head with trailing link ------------------------------------- */

.eld-section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--eld-space-4);
  max-width: none;
}

/* --- Trade block --------------------------------------------------------- */

.eld-pro {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background-color: var(--eld-bg-2);
  border-block: 1px solid var(--eld-border);
}

.eld-pro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  align-items: center;
}

@media (min-width: 800px) {
  .eld-pro__grid { grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
}

.eld-pro__title {
  margin: var(--eld-space-3) 0 var(--eld-space-4);
  font-family: var(--eld-font-display);
  font-size: var(--eld-text-h3);
  font-weight: 400;
  letter-spacing: var(--eld-tracking-tight);
  color: var(--eld-ink);
}

.eld-pro__body p { margin: 0 0 var(--eld-space-4); line-height: 1.7; color: var(--eld-ink-2); }

.eld-pro__sample {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg);
}

.eld-pro__sample code {
  font-family: var(--eld-font-mono);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--eld-ink-2);
}