/* ============================================================================
   MONARCA — COMPONENTS
   Reusable UI primitives shared across sections.
   Figma sources: button (158:713 / 158:707), tag (160:1540), icons (158:899).
   ========================================================================== */

/* --- Icon ------------------------------------------------------------------
   Monochrome glyph that inherits `currentColor`. One <img>-free system for the
   whole site. Size via --icon-size (default 20px); glyph via a modifier class.
   --------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  background-color: currentColor;
  -webkit-mask: var(--icon-src) no-repeat center / contain;
          mask: var(--icon-src) no-repeat center / contain;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
.icon--tree        { --icon-src: url("../icons/tree.svg"); }
.icon--wind        { --icon-src: url("../icons/wind.svg"); }
.icon--house-line  { --icon-src: url("../icons/house-line.svg"); }
.icon--arrow-right { --icon-src: url("../icons/arrow-right.svg"); }
.icon--education   { --icon-src: url("../icons/education.svg"); }
.icon--fork        { --icon-src: url("../icons/fork.svg"); }
.icon--heart       { --icon-src: url("../icons/heart.svg"); }
.icon--waves       { --icon-src: url("../icons/waves.svg"); }
.icon--tree-fill   { --icon-src: url("../icons/tree-fill.svg"); }
.icon--bed         { --icon-src: url("../icons/bed.svg"); }
.icon--sun-horizon { --icon-src: url("../icons/sun-horizon.svg"); }
.icon--cooking-pot { --icon-src: url("../icons/cooking-pot.svg"); }
.icon--armchair    { --icon-src: url("../icons/armchair.svg"); }
.icon--shield-check { --icon-src: url("../icons/shield-check.svg"); }
.icon--champagne       { --icon-src: url("../icons/champagne.svg"); }
.icon--tennis-ball     { --icon-src: url("../icons/tennis-ball.svg"); }
.icon--barbell         { --icon-src: url("../icons/barbell.svg"); }
.icon--puzzle-piece    { --icon-src: url("../icons/puzzle-piece.svg"); }
.icon--balloon         { --icon-src: url("../icons/balloon.svg"); }
.icon--dog             { --icon-src: url("../icons/dog.svg"); }
.icon--plant           { --icon-src: url("../icons/plant.svg"); }
.icon--storefront      { --icon-src: url("../icons/storefront.svg"); }
.icon--washing-machine { --icon-src: url("../icons/washing-machine.svg"); }
.icon--caret-right     { --icon-src: url("../icons/caret-right.svg"); }
.icon--whatsapp        { --icon-src: url("../icons/whatsapp.svg"); }
.icon--close           { --icon-src: url("../icons/close.svg"); }

/* --- Icon square ---------------------------------------------------------------
   Tinted square framing a single glyph (Figma component "icon-square").
   Tune per use with the --icon-square-* custom properties.
   --------------------------------------------------------------------------- */
.icon-square {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--icon-square-size, 48px);
  aspect-ratio: 1;
  background-color: var(--icon-square-bg, var(--color-icon-square-bg));
  color: var(--icon-square-fg, var(--color-accent));
}
.icon-square > .icon { --icon-size: var(--icon-square-glyph, 22px); }

/* --- Eyebrow / tag -------------------------------------------------------------
   Base type lives in base.css (.eyebrow). Boxed variants:
     .eyebrow--outline — hairline border, transparent   (Figma tag "cor=stroke")
     .eyebrow--solid   — brand-brown fill               (Figma tag "cor=fill")
     .eyebrow--chip    — translucent green-dark fill     (Figma caption override)
   --------------------------------------------------------------------------- */
.eyebrow--outline,
.eyebrow--solid,
.eyebrow--chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);   /* 12px 20px */
  line-height: 1;                            /* boxed label — no extra leading */
  color: var(--color-text-on-inverse);
}
.eyebrow--outline { border: 1px solid var(--color-eyebrow-border); }
.eyebrow--solid   { background-color: var(--color-eyebrow-solid-bg); }
.eyebrow--chip    { background-color: var(--color-chip-bg); }

/* --- Section header ----------------------------------------------------------
   Eyebrow + display heading. Reused by most sections.
   --------------------------------------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);            /* 24px */
}
.section-header > .eyebrow { align-self: flex-start; }
.section-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tr);
}

/* Centred variant */
.section-header--center { align-items: center; }
.section-header--center > .eyebrow { align-self: center; }
.section-header--center .section-header__title { text-align: center; }
@media (max-width: 1024px) { .section-header__title { font-size: 2.5rem; } }  /* 40 */
@media (max-width: 640px)  { .section-header__title { font-size: 2rem; } }    /* 32 */

/* --- Claims (icon + micro-label) -------------------------------------------
   Figma: claims / icon-text (169:6470–6482).
   --------------------------------------------------------------------------- */
.claims {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);           /* 40px */
}
.claim {
  display: flex;
  align-items: center;
  gap: var(--space-4);            /* 16px */
}
/* claim uses .icon-square with a warm tint and a 44px box */
.claim__icon {
  --icon-square-size: 44px;
  --icon-square-glyph: 20px;
  --icon-square-bg: var(--color-icon-chip-on-inverse);
  --icon-square-fg: var(--color-accent-warm);
}
.claim__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1.35;
  letter-spacing: var(--text-eyebrow-tr);
  text-transform: uppercase;
  color: var(--color-accent-warm);
}

/* --- Icon box (icon-square + text row, hairline underneath) --------------
   Figma component "icon-box" (159:1130 / 164:5077).
   --------------------------------------------------------------------------- */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);             /* 12px */
}
.icon-box {
  display: flex;
  align-items: center;
  gap: var(--space-5);             /* 20px */
  padding: var(--space-7);         /* 28px */
  border-bottom: 1px solid var(--color-border);
}
.icon-box__text {
  font-family: var(--font-sans);
  font-size: var(--text-b2-size);
  line-height: var(--text-b2-lh);
  letter-spacing: var(--text-b2-tr);
  color: var(--color-text-secondary);
}

/* --- Icon text (bare glyph + micro-label, inline) -----------------------------
   Figma "icon-text" (169:6521). Colour is set by the section.
   --------------------------------------------------------------------------- */
.icon-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);             /* 16px */
}
.icon-text__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1.4;
  letter-spacing: var(--text-eyebrow-tr);
  text-transform: uppercase;
}

/* --- Card link (label + caret, hairline underneath) --------------------------
   Figma "card-button" (162:4653).
   --------------------------------------------------------------------------- */
.card-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);              /* 12px */
  width: 100%;
  padding: var(--space-2) var(--space-3);   /* 8px 12px */
  border-bottom: 1px solid var(--color-border-strong);

  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1.6;
  letter-spacing: var(--text-eyebrow-tr);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-heading);
  cursor: pointer;

  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.card-link > span:first-child { flex: 1; }
.card-link .icon {
  --icon-size: 12px;
  transition: transform var(--transition-fast) var(--ease-out);
}
.card-link:hover,
.card-link:focus-visible { border-color: var(--color-heading); }
.card-link:hover .icon,
.card-link:focus-visible .icon { transform: translateX(3px); }

/* --- Button ------------------------------------------------------------------
   Variants:
     .button--solid  — green fill,  cream label   (primary)
     .button--light  — cream fill,  green label   (on dark imagery)
   --------------------------------------------------------------------------- */
.button {
  --_bg:     var(--color-accent);
  --_fg:     var(--color-on-accent);
  --_border: var(--color-accent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);                       /* 12px */
  padding: var(--space-4) var(--space-8);    /* 16px 32px */
  border: 1px solid var(--_border);
  background-color: var(--_bg);
  color: var(--_fg);

  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1;
  letter-spacing: var(--text-eyebrow-tr);
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.button__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
          mask: url("../icons/arrow-right.svg") no-repeat center / contain;
  transition: transform var(--transition-fast) var(--ease-out);
}

.button:hover .button__icon,
.button:focus-visible .button__icon { transform: translateX(4px); }

.button:active { transform: translateY(1px); }

/* Solid (default) */
.button--solid {
  --_bg:     var(--color-accent);
  --_fg:     var(--color-on-accent);
  --_border: var(--color-accent);
}
.button--solid:hover {
  --_bg:     var(--color-accent-hover);
  --_border: var(--color-accent-hover);
}

/* Light — for use over photography / dark surfaces */
.button--light {
  --_bg:     var(--monarca-white);
  --_fg:     var(--monarca-green);
  --_border: var(--monarca-white);
}
.button--light:hover {
  --_bg:     transparent;
  --_fg:     var(--monarca-white);
  --_border: var(--monarca-white);
}

.button--full { width: 100%; }

/* On small screens a full-width button with a long label must be allowed to wrap,
   otherwise `white-space: nowrap` forces the page wider than the viewport. */
@media (max-width: 640px) {
  .button {
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
}