/* =========================================================================
   The Planters' Guild — Botanical line-art system (Design Review x.0 · Phase 2)
   Promotes the botanical motif out of the photography and into the system:
     D2 — specimen-tray band behind the homepage hero
     D1 — the same motif as system texture (page watermarks + utilities)
     D4 — a leaf tick that makes primary CTAs read as the Guild's
   Loads globally, after base.css. Every motif is a CSS mask over a brand
   colour, so it tints from tokens and never carries its own colour.
   Assets: /assets/img/line-art/*.svg  (single-colour, currentColor source)
   ========================================================================= */

/* Shared mask helper — set --la-src and a background-color to paint a motif. */
.la-motif {
  background-color: var(--forest-pine);
  -webkit-mask: var(--la-src) no-repeat center / contain;
          mask: var(--la-src) no-repeat center / contain;
}

/* ---- D2 · specimen-tray band (homepage hero) --------------------------- */
.hp-hero { position: relative; overflow: hidden; }
.hp-hero__inner { position: relative; z-index: 1; }
.hp-hero__band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: clamp(64px, 9vw, 104px);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(22px, 6vw, 72px);
  pointer-events: none; opacity: 0.1;
}
.hp-hero__band span {
  display: block; width: clamp(34px, 5vw, 56px); height: 100%;
  background-color: var(--walnut);
  -webkit-mask: var(--la-src) no-repeat bottom center / contain;
          mask: var(--la-src) no-repeat bottom center / contain;
}
/* Drop the two outermost specimens on narrow screens so the tray stays airy. */
@media (max-width: 620px) {
  .hp-hero__band span:first-child,
  .hp-hero__band span:last-child { display: none; }
}

/* ---- D4 · leaf tick on the Guild's primary CTAs ------------------------ */
/* .hp-btn already lays out inline-flex with an 8px gap, so the ::before mark
   sits neatly before the label. currentColor = the button's text colour, so
   the tick always matches (cream on forest, etc.). */
.hp-btn--primary { transition: background var(--transition-default), color var(--transition-default), letter-spacing var(--transition-default); }
.hp-btn--primary::before {
  content: ""; flex: 0 0 14px; width: 14px; height: 15px;
  background-color: currentColor;
  -webkit-mask: url(/assets/img/line-art/tpg-leaf.svg) no-repeat center / contain;
          mask: url(/assets/img/line-art/tpg-leaf.svg) no-repeat center / contain;
}
.hp-btn--primary:hover { letter-spacing: 0.09em; }

/* ---- D1 · motif as system texture -------------------------------------- */
/* Homepage closer — a large, faint specimen anchored to the lower corner. */
.hp-join { position: relative; overflow: hidden; }
.hp-join__inner { position: relative; z-index: 1; }
.hp-join::after {
  content: ""; position: absolute; right: -6%; bottom: -12%; z-index: 0;
  width: min(360px, 44vw); height: min(360px, 44vw);
  background-color: var(--walnut); opacity: 0.05; pointer-events: none;
  -webkit-mask: url(/assets/img/line-art/tpg-fuller.svg) no-repeat center / contain;
          mask: url(/assets/img/line-art/tpg-fuller.svg) no-repeat center / contain;
}

/* Reusable utilities — shipped ready for incremental adoption elsewhere.
   Inert until the markup opts in; safe to leave in place.

   Section rule:   <div class="la-divider" aria-hidden="true"><i></i></div>
   Empty state:    <div class="la-empty"> …heading + copy… </div>          */
.la-divider {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 36px auto; max-width: 320px;
}
.la-divider::before, .la-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--color-rule);
}
.la-divider i {
  flex: 0 0 22px; width: 22px; height: 22px; opacity: 0.75;
  background-color: var(--forest-pine);
  -webkit-mask: url(/assets/img/line-art/tpg-leaf.svg) no-repeat center / contain;
          mask: url(/assets/img/line-art/tpg-leaf.svg) no-repeat center / contain;
}
.la-empty { text-align: center; }
.la-empty::before {
  content: ""; display: block; width: 66px; height: 80px; margin: 0 auto 14px;
  opacity: 0.5; background-color: var(--forest-pine);
  -webkit-mask: url(/assets/img/line-art/tpg-arching.svg) no-repeat center / contain;
          mask: url(/assets/img/line-art/tpg-arching.svg) no-repeat center / contain;
}

/* Honour reduced-motion: no letterspacing travel on the CTA. */
@media (prefers-reduced-motion: reduce) {
  .hp-btn--primary { transition: background var(--transition-default), color var(--transition-default); }
  .hp-btn--primary:hover { letter-spacing: 0.04em; }
}