/* ==========================================================================
   ALBI HOME — COMPONENTS
   Reusable pieces shared by every section. Depends on tokens.css + base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ICONS
   Inline SVG only — no icon font, no emoji. Sizes come from a closed scale so
   stroke weight stays visually consistent across the page.
   -------------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* Brand SVGs inlined by svg_asset(). They carry their own gold + white fills
   and their own intrinsic sizes — the set is deliberately not uniform, so
   NEVER set fill or a fixed square here. max-* only, to contain them. */
.svg-icon {
  display: block;
  flex: none;
  max-width: 100%;
  max-height: 100%;
}

/* --------------------------------------------------------------------------
   2. BUTTONS
   Figma: 56px tall, 6px radius, 16px label, 32px horizontal padding.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 56px;              /* also satisfies the 44px touch minimum */
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-normal);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Press feedback that does not move neighbouring content. */
.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

/* --- Primary: the gold gradient CTA -------------------------------------- */
/* NOTE ON CONTRAST — the one accessibility debt in this design.
   The Figma file puts WHITE on the gold gradient. Measured:
       white on #B48019 (gradient start) ... 3.48:1
       white on #D3A248 (gradient end) ..... 2.33:1
   WCAG AA needs 4.5:1 for 16px text, so both fail.

   It ships as designed, because it is the client's brand button and appears
   on every page. To make it compliant, change one line:
       --btn-primary-fg: var(--text-on-gold);
   #141007 measures 5.46:1 at the start and 8.16:1 at the end. Nothing else
   in the button changes — same gradient, same size, same weight. */
.btn--primary {
  --btn-primary-fg: var(--white);
  background: var(--grad-gold);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-400) 62%);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-gold);
}

/* --- Solid white: the CTA panel's primary, sitting on the gold ----------
   The gold gradient cannot be the primary button when the panel behind it is
   already gold, so the design inverts it. Measured 18.9:1 — the strongest
   pairing on the site. */
.btn--on-gold {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-sm);
}
.btn--on-gold:hover {
  border-color: var(--white-95);
  background-color: var(--white-95);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-md);
}

/* --- Ghost: 1px outline over photography --------------------------------- */
.btn--ghost {
  border-color: var(--white);
  background-color: transparent;
  color: var(--text-primary);
}
/* The hero's ghost button leads with a WhatsApp disc, which needs less room
   in front of it than a bare label does. Enhancement only — without :has()
   support the button keeps even padding, which is 8px wider and harmless. */
.btn--ghost:has(> .bubble:first-child) {
  padding-inline: var(--space-5) var(--space-6);
}
.btn--ghost:hover {
  border-color: var(--gold-400);
  background-color: var(--a-gold-12);
  color: var(--text-primary);
}

/* --- Gold outline: the header WhatsApp CTA ------------------------------- */
.btn--outline-gold {
  border-color: var(--border-gold);
  background-color: transparent;
  color: var(--text-primary);
}
.btn--outline-gold:hover {
  border-color: var(--gold-400);
  background-color: var(--a-gold-12);
  color: var(--text-primary);
}

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   3. ICON BUBBLE
   The circular badge that precedes a label (WhatsApp mark, feature glyphs).
   -------------------------------------------------------------------------- */
.bubble {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  flex: none;
}
.bubble--light { background-color: var(--white); color: var(--whatsapp); }
.bubble--muted { background-color: #565656; color: var(--white); }
.bubble--gold  { background: var(--grad-gold); color: var(--text-on-gold); }
.bubble--sm    { width: 26px; height: 26px; }
.bubble--lg    { width: 60px; height: 60px; }
/* The brand WhatsApp mark is 16px inside a 34px disc, as drawn. */
.bubble .svg-icon { width: 16px; height: 16px; }
.bubble--sm .svg-icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   4. EYEBROW
   The dot + label pill that opens every section.
   Figma: 54px tall, 3px radius, 12% gold wash, 28% white hairline,
   14px gold dot, 24px Inter Tight Medium label.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 54px;
  padding-inline: 18px 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--a-gold-12);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-normal);
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background-color: var(--gold-500);
  flex: none;
}

/* Over photography the gold wash disappears into the image, so the hero
   variant swaps it for a dark scrim that keeps the label legible. */
.eyebrow--on-media {
  background-color: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Long labels must wrap rather than force a horizontal scroll on mobile. */
@media (max-width: 599.98px) {
  .eyebrow {
    align-items: flex-start;
    padding-block: var(--space-3);
    line-height: var(--lh-snug);
  }
  .eyebrow::before { margin-top: .35em; }
}

/* --------------------------------------------------------------------------
   5. SECTION HEADER
   Eyebrow + heading on the left, supporting copy on the right at >=1024px.
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  gap: var(--space-5) var(--space-8);
  align-items: end;
}
/* Two columns only from 1200. At 1024 the left column would be ~268px, which
   wraps the eyebrow pill and shatters the heading. */
@media (min-width: 1200px) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 644px); }
}
/* Both built sections top-align their two columns; the baseline alignment
   above only suits a head whose right column is a single paragraph. */
.section-head--top { align-items: start; }

.section-head__title { margin-top: var(--space-4); max-width: 22ch; }

/* The trailing clause of a section heading, lifted to gold and dropped onto
   its own line — the same two-tone emphasis the hero h1 uses, so the whole
   page reads as one system. Left to wrap, the 22ch measure pulls part of the
   clause up onto line one and the split stops looking deliberate. */
.section-head__title em {
  display: block;
  color: var(--gold-400);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   6. SPLIT CTA ROW
   Two buttons side by side; stacked and full width on small screens.
   -------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
@media (max-width: 519.98px) {
  .actions { flex-direction: column; gap: var(--space-3); }
  .actions > .btn { width: 100%; }
}