/* ==========================================================================
   CLOZSY - HOME / LANDING  (Phase 5)
   --------------------------------------------------------------------------
   Scope: .clz-home and its components only. Every rule is prefixed with
   .clz-home, which puts it at (0,2,0) so it outranks the Elementor kit's
   global element rules (.elementor-kit-11 h1 / h2 / button = (0,1,1)) without
   needing !important. That prefix discipline is deliberate.

   Colour, spacing, radius, shadow and motion all read --clz-* tokens. There
   are no literal colour values in this file.

   Font sizes are px, or px+vw clamps, never rem: Astra reduces the root
   font-size at its own breakpoints, which would silently shrink the type.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE-LOCAL MEASUREMENTS
   -------------------------------------------------------------------------- */
.clz-home {
  /* Sections use the kit's 1240px measure; the hero gets the wider 1360px so
     it aligns exactly with the approved header and footer gutters. */
  --clz-home-max: 1240px;
  --clz-hero-max: var(--clz-header-max);
  --clz-page-x:   var(--clz-space-7);

  /* A single value drives the vertical rhythm of every band. */
  --clz-section-pad: clamp(56px, 6.2vw, 112px);
}

/* --------------------------------------------------------------------------
   2. CONTAINERS
   -------------------------------------------------------------------------- */
.clz-home .clz-section { padding-block: var(--clz-section-pad); }

.clz-home .clz-container {
  width: 100%;
  max-width: var(--clz-home-max);
  margin-inline: auto;
  padding-inline: var(--clz-page-x);
}

/* Dissolve Elementor's shortcode wrappers so the authored markup is the real
   layout child of each section container.

   No padding or background reset here on purpose: the band containers carry
   .clz-section (which owns the vertical rhythm) and .clz-editorial /
   .clz-home-cta (which own the surface). Resetting them would flatten both.
   The two data-driven hosts get .clz-home__row alone, so they contribute no
   padding and collapse to zero height while the store is empty. */
.clz-home__row > .elementor-widget-shortcode,
.clz-home__row > .elementor-widget-shortcode > .elementor-shortcode {
  display: contents;
}

/* --------------------------------------------------------------------------
   3. SHARED TYPOGRAPHY
   -------------------------------------------------------------------------- */
.clz-home .clz-eyebrow {
  display: block;
  margin: 0 0 var(--clz-space-4);
  font-family: var(--clz-font-body);
  font-size: 12px;
  font-weight: var(--clz-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-accent);
}

.clz-home .clz-h2 {
  margin: 0;
  font-family: var(--clz-font-heading);
  font-size: clamp(28px, 18.6px + 2.51vw, 46px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--clz-text);
}

.clz-home .clz-lede {
  margin: 0;
  font-family: var(--clz-font-body);
  font-size: 17px;
  font-weight: var(--clz-fw-regular);
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

/* --------------------------------------------------------------------------
   5. HERO
   Asymmetric two-column composition. The copy column is intentionally the
   narrower of the two so the visual carries the first viewport.
   -------------------------------------------------------------------------- */
.clz-home .clz-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  width: 100%;
  max-width: var(--clz-hero-max);
  margin-inline: auto;
  padding-inline: var(--clz-page-x);
  /* Fills the first viewport under the sticky header without ever forcing an
     awkward tall band on short laptop screens. */
  min-height: min(calc(100vh - var(--clz-header-h)), 720px);
  min-height: min(calc(100svh - var(--clz-header-h)), 720px);
  padding-block: clamp(48px, 5vw, 88px);
}

.clz-home .clz-hero__copy { min-width: 0; }

.clz-home .clz-hero__title {
  margin: 0;
  font-family: var(--clz-font-heading);
  /* 38px at 375 -> 49px at 768 -> 56px at 1024 -> 68px at 1440. */
  font-size: clamp(38px, 27.4px + 2.82vw, 68px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--clz-text);
  text-wrap: balance;
}

.clz-home .clz-hero__lede {
  margin: var(--clz-space-5) 0 0;
  max-width: 46ch;
  font-family: var(--clz-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

/* ---- Hero visual ---- */
.clz-home .clz-hero__figure {
  position: relative;
  margin: 0;
  /* The grid centres its items, so the figure has to opt into stretching or
     the image collapses to its min-height instead of filling the hero. */
  align-self: stretch;
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-lg);
  overflow: hidden;
  background-color: var(--clz-surface);
}

.clz-home .clz-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  max-height: 620px;
  object-fit: cover;
  object-position: 50% 42%;
}

/* A token-derived scrim that marries the photograph into the near-black page
   instead of letting it sit on the background as a pasted rectangle. This is
   the only gradient on the page. */
.clz-home .clz-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--clz-bg) 0%, transparent 42%);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   6. SECTION HEADER (shared by data-driven sections)
   -------------------------------------------------------------------------- */
.clz-home .clz-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--clz-space-4) var(--clz-space-6);
  margin-bottom: var(--clz-space-7);
}

.clz-home .clz-section__link {
  font-family: var(--clz-font-body);
  font-size: 14px;
  font-weight: var(--clz-fw-medium);
  letter-spacing: 0.04em;
  color: var(--clz-text-secondary);
  text-decoration: none;
  transition: color var(--clz-transition);
}

.clz-home .clz-section__link:hover { color: var(--clz-accent); }

.clz-home .clz-section__link:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

/* --------------------------------------------------------------------------
   7. EDITORIAL / BRAND STATEMENT
   A tonal surface band, so the page changes texture rather than repeating the
   same near-black slab all the way down.
   -------------------------------------------------------------------------- */
.clz-home .clz-editorial {
  background-color: var(--clz-surface);
  border-block: 1px solid var(--clz-border);
}

.clz-home .clz-editorial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.clz-home .clz-editorial__title {
  margin: 0;
  font-family: var(--clz-font-heading);
  font-size: clamp(30px, 19.6px + 2.78vw, 52px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--clz-text);
  text-wrap: balance;
}

/* The single restrained gold detail in this band. */
.clz-home .clz-editorial__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--clz-space-5);
  background-color: var(--clz-accent);
}

.clz-home .clz-editorial__body p {
  margin: 0 0 var(--clz-space-4);
  font-family: var(--clz-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--clz-text-secondary);
}

.clz-home .clz-editorial__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. COLLECTION FEATURE
   Editorial band: image on one side, copy on the other. Direction is reversed
   relative to the hero so the page alternates rather than repeats.
   -------------------------------------------------------------------------- */
.clz-home .clz-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
}

.clz-home .clz-feature__figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-lg);
  overflow: hidden;
  background-color: var(--clz-surface);
}

.clz-home .clz-feature__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--clz-duration-slow) var(--clz-ease);
}

.clz-home .clz-feature__figure:hover img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   9. CATEGORY CARDS
   Reserved component. Renders only once real, non-empty product categories
   exist; "Uncategorized" is excluded at the query level in inc/home.php.
   -------------------------------------------------------------------------- */
.clz-home .clz-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--clz-space-5);
}

.clz-home .clz-category-card {
  position: relative;
  display: block;
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-md);
  overflow: hidden;
  background-color: var(--clz-surface);
  text-decoration: none;
  transition: border-color var(--clz-transition);
}

.clz-home .clz-category-card:hover { border-color: var(--clz-border-strong); }

.clz-home .clz-category-card:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

.clz-home .clz-category-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--clz-elevated);
}

.clz-home .clz-category-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--clz-duration-slow) var(--clz-ease);
}

.clz-home .clz-category-card:hover .clz-category-card__media img { transform: scale(1.04); }

.clz-home .clz-category-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-3);
  padding: var(--clz-space-4) var(--clz-space-4);
  background: linear-gradient(to top, var(--clz-bg) 10%, transparent 100%);
}

.clz-home .clz-category-card__name {
  margin: 0;
  font-family: var(--clz-font-heading);
  font-size: 18px;
  font-weight: var(--clz-fw-medium);
  letter-spacing: -0.01em;
  color: var(--clz-text);
}

.clz-home .clz-category-card__cue {
  font-family: var(--clz-font-body);
  font-size: 12px;
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-text-muted);
  transition: color var(--clz-transition);
}

.clz-home .clz-category-card:hover .clz-category-card__cue { color: var(--clz-accent); }

/* --------------------------------------------------------------------------
   10. PRODUCT GRID
   The card component itself now lives in components.css, shared verbatim with
   the Shop archive. Only the grid that lays the cards out is home-specific.
   -------------------------------------------------------------------------- */
.clz-home .clz-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--clz-space-6) var(--clz-space-5);
}

/* --------------------------------------------------------------------------
   11. CLOSING CTA
   Elevated surface so the page resolves into the footer rather than stopping.
   -------------------------------------------------------------------------- */
.clz-home .clz-home-cta {
  background-color: var(--clz-elevated);
  border-top: 1px solid var(--clz-border);
}

.clz-home .clz-home-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.clz-home .clz-home-cta__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--clz-font-heading);
  font-size: clamp(28px, 19.2px + 2.35vw, 44px);
  font-weight: var(--clz-fw-semibold);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--clz-text);
  text-wrap: balance;
}

.clz-home .clz-home-cta__lede {
  margin: var(--clz-space-4) 0 0;
  max-width: 52ch;
  font-family: var(--clz-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--clz-text-secondary);
}

.clz-home .clz-home-cta .clz-btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   12. TABLET  (768px - 1024px)
   The hero keeps two columns down to 768 - measured, it still holds - but the
   editorial and feature bands collapse, because their copy needs the measure.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .clz-home { --clz-page-x: var(--clz-space-5); }

  .clz-home .clz-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 40px);
    min-height: 0;
  }

  /* No max-height here: the figure stretches to the grid row, so capping the
     image would leave a strip of bare surface below it whenever the copy
     column is the taller of the two. */
  .clz-home .clz-hero__figure img {
    min-height: 320px;
    max-height: none;
  }

  /* A 3:2 image across the full tablet measure is ~640px tall, which swallows
     the viewport. Cropping keeps the band editorial rather than dominant. */
  .clz-home .clz-feature__figure img { max-height: 460px; }

  .clz-home .clz-editorial__grid,
  .clz-home .clz-feature__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .clz-home .clz-feature__figure { order: -1; }

  .clz-home .clz-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* --------------------------------------------------------------------------
   13. MOBILE  (below 768px)
   The hero is recomposed for mobile rather than shrunk: copy first, visual
   after the CTA, as a deliberate reading order.

   767.98px, not 767px, for the same fractional-viewport reason as the header.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .clz-home { --clz-page-x: var(--clz-space-4); }

  .clz-home .clz-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--clz-space-6);
    padding-block: var(--clz-space-6) var(--clz-space-7);
  }

  .clz-home .clz-hero__figure img {
    min-height: 0;
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .clz-home .clz-hero__lede { max-width: none; }

  .clz-home .clz-btn-row { gap: var(--clz-space-3); }

  .clz-home .clz-section__head {
    align-items: flex-start;
    gap: var(--clz-space-3);
  }

  .clz-home .clz-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clz-space-5) var(--clz-space-4);
  }

  .clz-home .clz-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .clz-home .clz-feature__figure img { aspect-ratio: 4 / 3; }
}

@media (max-width: 380.98px) {
  .clz-home .clz-product-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   14. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .clz-home .clz-feature__figure img,
  .clz-home .clz-category-card__media img {
    transition: none;
  }

  .clz-home .clz-feature__figure:hover img,
  .clz-home .clz-category-card:hover .clz-category-card__media img {
    transform: none;
  }
}