/* ==========================================================================
   12 — HOME PAGE BANDS
   --------------------------------------------------------------------------
   The homepage-only components from `06-pages.md` §1 that no other page uses
   and that the base kit never shipped: the hero, the delivery strip, the
   band/section header, the department grid, the horizontal product rail, the
   loyalty explainer, the trust band and the WhatsApp strip.

   Rules this file follows, same as the rest of the kit:
   - every value is a var() from 00-tokens.css, with the two documented
     exceptions called out inline below;
   - the brand serif is reached ONLY through `.aly-display` (02-typography),
     never via var(--font-display) here;
   - logical properties only, so `rtl.css` needs no additions for this file.

   Loaded only on the Home template (see aly_enqueue_assets() in functions.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   The band stack needs the full viewport width

   hello-elementor constrains `main.site-main` to Elementor's content width
   (1140px here). Every band on this page is specified as a full-bleed
   horizontal strip whose *content* is centred at --container-max — a hero on
   a night ground that stops 190px short of each edge is not the design. The
   kit body class is on the prefix for the same specificity reason section 18
   of the bridge documents.

   Scoped to `.aly-home`, so no other template's main column is touched.

   The rule this has to beat is hello-elementor's
   `body:not([class*="elementor-page-"]) .site-main`, which weighs (0,2,1) —
   the same as `.elementor-kit-4271 main.aly-home` — and loads later, so a tie
   hands it the win. Naming `.site-main` too takes this to (0,3,1) and settles
   it without reaching for !important.
   -------------------------------------------------------------------------- */
.elementor-kit-4271 main.site-main.aly-home,
main.site-main.aly-home {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Shared band scaffolding
   Every horizontal band is full-bleed; its content is centred at
   --container-max. `--aly-band-pad-block` keeps the vertical rhythm identical
   across bands so the page reads as one stack, not nine unrelated strips.
   -------------------------------------------------------------------------- */
.aly-band {
  --aly-band-pad-block: var(--space-8);
  padding-block: var(--aly-band-pad-block);
  padding-inline: var(--space-4);
}

.aly-band--tight { --aly-band-pad-block: var(--space-5); }
.aly-band--sunk  { background-color: var(--color-surface-sunk); }
.aly-band--cream { background-color: var(--cream-50); }

.aly-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Band header: display-serif opener + optional "View all" link.
   `align-items: baseline` keeps the link's baseline on the heading's, which
   an `end` alignment would not do once the heading wraps to two lines. */
.aly-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}

.aly-band__head h2 { margin: 0; }

.aly-band__more {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--gold-text-on-cream);
  text-decoration: none;
  white-space: nowrap;
}

.aly-band__more:hover { text-decoration: underline; }

.aly-band__more:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   1. Hero
   Night ground, Cormorant headline with a gold emphasis word, Inter subcopy,
   one primary button, and a gold panel on the end side.

   DOCUMENTED EXCEPTION — the headline size.
   `03-typography.md` §2 fixes the hero headline at 64px Cormorant (53px Inter
   x the 1.20 multiplier). The token scale's top display step,
   --fs-display-xl, is 3.3rem/52.8px — i.e. it stops exactly at the
   *un-multiplied* Inter figure, one step short of what the hero needs. The
   clamp below therefore ends at 4rem (64px) with --fs-display-xl as its
   floor-ish middle. This is the only size in this file not taken whole from
   a token; see INSTALLED.md for the open item.
   -------------------------------------------------------------------------- */
.aly-hero {
  background-color: var(--night-900);
  color: var(--cream-50);
  padding-block: var(--space-9);
  padding-inline: var(--space-4);
}

.aly-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-7);
  align-items: center;
}

.aly-hero__title {
  font-size: clamp(var(--fs-display-md), 5vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  color: var(--cream-50);
  margin: 0;
}

/* The emphasised word. `font-style: normal` because the markup uses <em> for
   the semantic emphasis and the brand treatment is colour, not italic. */
.aly-hero__title em {
  font-style: normal;
  color: var(--gold-500);
}

.aly-hero__lede {
  color: var(--ink-300);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  max-width: 44ch;
  margin-block: var(--space-4) 0;
}

.aly-hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-6);
}

/* ---- Hero: product cluster on the gold panel (direction board) ---- */
.aly-hero { position: relative; overflow: hidden; }
.aly-hero__mark { position: absolute; inset-inline-end: -60px; inset-block-end: -80px; inline-size: 340px; block-size: auto; opacity: 0.06; pointer-events: none; }
.aly-hero__inner { position: relative; }
.aly-hero__kicker { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-500); margin-block-end: var(--space-3); }
.aly-hero__ghost { color: var(--cream-50); box-shadow: inset 0 0 0 1px rgb(248 246 241 / 0.28); }
.aly-hero__ghost:hover { background: rgb(248 246 241 / 0.08); }
.aly-hero__proof { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--night-ink-2); }
.aly-hero__proof b { color: var(--cream-50); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.aly-hero__art {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background-image: linear-gradient(155deg, var(--gold-500) 0%, var(--gold-600) 100%);
  display: grid; place-items: center; padding: var(--space-5);
}
.aly-hero__art > svg { width: 42%; height: 42%; color: var(--night-900); opacity: 0.8; }
.aly-hero__watermark { position: absolute; inset-inline-end: -8%; inset-block-end: -10%; inline-size: 58%; block-size: auto; opacity: 0.14; pointer-events: none; }
.aly-hero__pill { position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4); z-index: 2; background: var(--night-900); color: var(--cream-50); font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 6px 12px; border-radius: var(--radius-pill); }
.aly-hero__cluster { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); inline-size: 100%; }
.aly-hero__tile {
  background: var(--surface-white); border-radius: var(--radius-md); padding: var(--space-2);
  box-shadow: 0 10px 24px rgb(32 22 8 / 0.18); display: grid; gap: 4px; text-align: center;
}
.aly-hero__tile img { inline-size: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; border-radius: var(--radius-sm); }
.aly-hero__tile-name { font-size: 11px; line-height: 1.25; color: var(--ink-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aly-hero__tile-price { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.aly-hero__tile:nth-child(1) { transform: rotate(-3deg); }
.aly-hero__tile:nth-child(3) { transform: rotate(2.5deg); }
.aly-hero__tile:nth-child(5) { transform: rotate(-2deg); }
.aly-hero__tile:nth-child(6) { transform: rotate(3deg); }
@media (prefers-reduced-motion: reduce) { .aly-hero__tile { transform: none; } }

/* --------------------------------------------------------------------------
   2. Delivery-area strip
   Thin, persistent, gold-wash. Sits directly under the hero with no gap.
   -------------------------------------------------------------------------- */
.aly-delivery-strip {
  background-color: var(--gold-100);
  border-block-end: var(--border-width) solid var(--gold-200);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--gold-text-on-cream);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.aly-delivery-strip__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.aly-delivery-strip svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.aly-delivery-strip__action {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

.aly-delivery-strip__action:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   3. Department grid
   `.aly-category-tile` in 05-product-card.css is the centred, white-surface
   variant. `05-components.md` §Category tile specifies a department-tinted
   wash with the label on the tint, which is what the homepage strip uses —
   hence this modifier rather than an edit to the base component.

   The tint pair (--aly-tile-bg / --aly-tile-fg) is set inline per tile from
   the department colour table in `elementor-globals.md` §3, because the
   department a tile represents is content, not style.
   -------------------------------------------------------------------------- */
.aly-dept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .aly-dept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .aly-dept-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.aly-category-tile--tinted {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: start;
  gap: var(--space-1);
  min-height: 8.5rem;
  padding: var(--space-4);
  background-color: var(--aly-tile-bg, var(--color-surface));
  color: var(--aly-tile-fg, var(--color-text));
  box-shadow: none;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.aly-category-tile--tinted .aly-category-tile__icon {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.42;
  color: currentColor;
}

.aly-category-tile--tinted .aly-category-tile__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: currentColor;
}

.aly-category-tile--tinted .aly-category-tile__count {
  font-size: var(--fs-sm);
  opacity: 0.74;
  color: currentColor;
}

/* New Arrival is a merchandising tag, not a department (elementor-globals.md
   §3), so it is marked out by colour — the `New Arrival` semantic, not a
   department tint.

   `06-pages.md` §1 calls it a "pill". Taken literally — --radius-pill on a
   tile 8.5rem tall — it renders as an ellipse in a six-across grid, which is
   not what that word is reaching for. It keeps the tile silhouette its five
   neighbours have, one radius step softer, which is how the prototype draws
   it too. */
.aly-category-tile--pill {
  border-radius: var(--radius-xl);
}

/* --------------------------------------------------------------------------
   4. Product rail
   Grid on desktop, one-row horizontal scroll below tablet (06-pages.md §1
   "Responsive"). Scroll-snap so a partial card never becomes the rest state.

   The cards inside are WooCommerce's own `ul.products li.product`, styled by
   §2 of 11-woocommerce-bridge.css — this only changes how they are laid out,
   never how they look, so a card is identical on the home page and the
   archive.
   -------------------------------------------------------------------------- */
.aly-rail .products {
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 45%);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--space-3);
  scroll-padding-inline: var(--space-4);
}

.aly-rail .products > li { scroll-snap-align: start; }

@media (min-width: 768px) {
  .aly-rail .products {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-block-end: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Loyalty explainer — "Earn · Track · Redeem"
   -------------------------------------------------------------------------- */
.aly-loyalty-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .aly-loyalty-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aly-loyalty-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.aly-loyalty-step__num {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  background-color: var(--gold-500);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.aly-loyalty-step__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.aly-loyalty-step__body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-body);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   6. Trust band
   -------------------------------------------------------------------------- */
.aly-trust-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .aly-trust-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aly-trust-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-hairline);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.aly-trust-card svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--gold-text-on-white);
  margin-block-start: 0.15rem;
}

.aly-trust-card__title {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-block-end: var(--space-1);
}

.aly-trust-card__body {
  font-size: var(--fs-sm);
  color: var(--color-text-body);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   7. WhatsApp strip
   -------------------------------------------------------------------------- */
.aly-whatsapp-strip {
  background-color: var(--night-900);
  color: var(--cream-50);
}

.aly-whatsapp-strip .aly-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.aly-whatsapp-strip__title {
  margin: 0 0 var(--space-1);
  color: var(--cream-50);
}

/* The heading inside carries .aly-section-title (ink-900), which beat the wrapper's
   cream: the title was ink on the night band and could not be read. */
.aly-whatsapp-strip .aly-section-title { color: var(--cream-50); }

.aly-whatsapp-strip__body {
  margin: 0;
  color: var(--ink-300);
  font-size: var(--fs-sm);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Reduced motion — the kit's system-wide rule lives in 00-tokens.css; the
   only motion this file adds beyond it is the tile/card lift, which is
   already covered there via --duration-*. Nothing further needed.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Inline SVG sizing

   The icons in inc/home-sections.php carry no width/height attributes — they
   are sized by their container so a tile icon and a trust-card icon can share
   one sprite. Without this rule they fall back to the SVG default (300x150)
   and render as a clipped blob.
   -------------------------------------------------------------------------- */
/* Fill the parent — only where the parent has a size of its own. */
.aly-category-tile__icon svg { width: 100%; height: 100%; display: block; }

/* Size explicitly everywhere else. These sit in flex rows with no intrinsic
   dimensions to inherit, so a percentage here stretches the icon to the height
   of the row — which is exactly what a `width:100%` on every svg did to the
   delivery strip before this was split in two. */
.aly-delivery-strip svg { width: 1rem;    height: 1rem;    display: block; }
.aly-trust-card svg     { width: 1.25rem; height: 1.25rem; display: block; }
.aly-band .aly-btn svg  { width: 1.125rem; height: 1.125rem; display: block; }

/* --------------------------------------------------------------------------
   Department tile colour vs Elementor's global link colour

   The tiles are anchors, and Elementor's Theme Style paints every anchor with
   the Primary global (gold-800) at a selector weight that beats a plain
   `.aly-category-tile--tinted`. Left alone, all six tiles render their label
   in the same brown regardless of their tint — including New Arrival, which
   is specified white on magenta and was coming out brown on magenta.

   Same one-class-of-specificity fix as section 18 of the bridge, and the same
   caveat: IF THE KIT ID CHANGES, UPDATE THIS PREFIX.
   -------------------------------------------------------------------------- */
.elementor-kit-4271 a.aly-category-tile--tinted,
.elementor-kit-4271 a.aly-category-tile--tinted:hover,
.elementor-kit-4271 a.aly-category-tile--tinted:focus {
  color: var(--aly-tile-fg, var(--color-text));
}

/* ---- Section titles: Cormorant 26 + 40px gold rule ---- */
.aly-section-title-wrap { display: grid; gap: var(--space-1); }
.aly-section-title { font-size: 1.625rem; line-height: var(--lh-tight); margin: 0; color: var(--color-text); }
.aly-section-title::after { content: ""; display: block; inline-size: 40px; block-size: 2px; background: var(--gold-500); margin-block-start: var(--space-2); }
.aly-section-title__sub { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Department tiles with a featured product ---- */
.aly-category-tile--tinted { min-height: 12rem; padding-block-start: var(--space-3); }
.aly-category-tile__media { inline-size: 100%; aspect-ratio: 5 / 3; display: grid; place-items: center; margin-block-end: auto; }
.aly-category-tile__media img { max-inline-size: 78%; max-block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.aly-category-tile__media svg { inline-size: 2rem; block-size: 2rem; opacity: 0.42; }
.aly-category-tile--tinted .aly-category-tile__icon { display: none; }
.aly-category-tile--tinted .aly-category-tile__label { font-size: 1.25rem; font-weight: var(--fw-display); }
.aly-category-tile__chip { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); inline-size: 28px; block-size: 28px; border-radius: var(--radius-circle); background: rgb(255 254 251 / 0.7); color: currentColor; display: grid; place-items: center; font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .aly-category-tile--tinted { transition: transform var(--duration-fast) var(--ease-brand), box-shadow var(--duration-fast) var(--ease-brand); }
  .aly-category-tile--tinted:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* ---- Promo band ---- */
.aly-band--promo { position: relative; overflow: hidden; background: var(--gold-500); color: var(--ink-900); --aly-band-pad-block: var(--space-7); }
.aly-band__watermark { position: absolute; inset-inline-end: 4%; inset-block-start: -30%; inline-size: 260px; block-size: auto; opacity: 0.12; pointer-events: none; }
.aly-band--promo__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.aly-band--promo__title { font-size: 1.875rem; margin: 0 0 var(--space-1); color: var(--ink-900); }
.aly-band--promo__body { margin: 0; max-inline-size: 56ch; color: var(--ink-800); }
.aly-band--promo .aly-btn--tertiary { border-color: var(--ink-900); color: var(--ink-900); }