/* ============================================================
   components.css — reusable component styles (buttons, cards,
   accordion, badges, theme toggle, basket button, whatsapp float).
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
/* text-decoration matches :hover. base.css underlines BOTH a:hover and
   a:focus-visible; .btn:hover cancels it and this did not, so every anchor
   button in the site underlined itself on keyboard focus and not on hover. */
.btn:focus-visible { outline-offset: 3px; text-decoration: none; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.85rem;
}

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

.btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: block;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ──────────────────────────────────────────────────────────
   FEATURE CARD
   ────────────────────────────────────────────────────────── */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.feature-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.feature-card__body {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────
   BISMILLAH ORNAMENT — views/partials/bismillah.php
   ────────────────────────────────────────────────────────── */
/* The partial inlines public/assets/svg/bismillah.svg so it paints with
   currentColor, and tags the root <svg> with .bismillah-svg. Eight views
   include it, into TWO different headers: .page-hero (about, activities,
   contact, gallery, 404) and .section--page-header (donate, donate-category
   and — easy to miss — branches).

   Until #3.7 EVERY declaration lived in a caller: `.page-hero .bismillah-svg`
   sized it and `.donation-card__bismillah .bismillah-svg` sized it smaller,
   and .section--page-header had nothing. So on /donate, the four category
   pages and /branches the ornament had no width at all — and the source SVG
   carries only a viewBox, no width/height attribute, so the SVG default of
   width="100%" applied and it rendered at the full 760px of
   .section__inner--narrow instead of 200px, touching the title beneath it.

   Colour had the same shape of defect (#3.7a). Every path is
   fill="currentColor", .page-hero set color: var(--color-accent) and
   .section--page-header set nothing, so the same ornament was teal on /about
   and body-text near-black on /donate, /branches and the four category pages
   — near-WHITE in dark mode, since --color-text flips and --color-accent is
   what the palette flips correctly.

   A shared partial whose appearance is defined only by its callers breaks
   again the ninth time someone includes it. This rule is the partial's own
   size, centring and colour; a context overrides only what genuinely differs.

   NOTE it sets no margin-bottom. The gap is set below instead. A
   margin-bottom here would have to survive margin collapsing in the two
   headers and NOT collapse inside .donation-card__bismillah, which is a flex
   container where margins never collapse: one declaration with two different
   outcomes. `margin-inline` rather than the `margin: 0 auto` shorthand this
   replaced, so the reset's zero block margins stay zero. */
.bismillah-svg {
  display: block;
  width: 200px;
  height: auto;
  margin-inline: auto;
  color: var(--color-accent);
}

/* The gap below the ornament, as a property of the PAIRING rather than of
   either element. .page-hero__title has carried its own margin-top since the
   fork and keeps it; .page-header__title cannot be given one, because basket
   and checkout share that class with no ornament above the title — checkout
   has a back link in that position, which would gain 24px of nothing.

   One adjacency, enumerated rather than assumed (#2E.5's rule): the include
   echoes the <svg> directly before the <h1> in all three of the views that
   pair them — donate, donate-category and branches. Nothing else in the site
   puts an element between them. */
.bismillah-svg + .page-header__title {
  margin-top: var(--space-6);
}

/* ──────────────────────────────────────────────────────────
   ZAKAT GUIDANCE — views/partials/zakat-guidance.php
   ────────────────────────────────────────────────────────── */
/* On the page, under the description. Renders with or without a gold price,
   unlike the calculator, because what zakat IS does not depend on a market. */
.zakat-guidance {
  margin-top: var(--space-6);
}

/* Two columns where there is room. Side by side, "what counts" and "what is
   left out" are read as a pair; stacked, the second reads as an afterthought
   to the first. */
.zakat-guidance__lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .zakat-guidance__lists {
    grid-template-columns: repeat(2, 1fr);
  }
}
.zakat-guidance__list {
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.zakat-guidance__list-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.zakat-guidance__list-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* Quoted words, given weight with a gold rule rather than a box. --color-gold
   is the palette's ornament colour and is used by almost nothing; it is
   explicitly never a button and never body text, and a left rule is neither.
   The words themselves stay --color-text, because gold fails contrast as
   text — the token's own warning in variables.css. */
.zakat-guidance__quote {
  margin: var(--space-6) 0 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 3px solid var(--color-gold);
}
.zakat-guidance__quote-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.zakat-guidance__quote-source {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────────────────
   ZAKAT CALCULATOR — views/partials/zakat-calculator.php
   ────────────────────────────────────────────────────────── */
/* Rendered only on /donate/zakat, and only when NisabService has a figure to
   name. The trigger carries the `hidden` attribute in the markup and
   donate-item.js removes it, so a browser with no JavaScript is never shown a
   control that cannot work. */
/* The trigger, in the purchase panel above "Add to basket". Full width to
   match .donation-form__submit beneath it, and separated from it so the
   secondary action does not read as part of the primary one. */
.zakat-calc__trigger {
  width: 100%;
  margin-top: var(--space-4);
}

/* Above the sticky purchase panel and the floating WhatsApp button, below the
   mobile navigation panel: a menu the visitor opened deliberately outranks a
   dialog they opened on the same page. Same family as the gallery lightbox,
   which sits at 1200 for the same reason. */
.zakat-calc__overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-lightbox-backdrop);
}
.zakat-calc__overlay[hidden] { display: none; }

.zakat-calc__dialog {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.zakat-calc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.zakat-calc__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.zakat-calc__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  font-size: 1.5rem;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
}
.zakat-calc__close:hover,
.zakat-calc__close:focus-visible {
  color: var(--color-text);
}

.zakat-calc__result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
}
.zakat-calc__result[hidden] { display: none; }
/* Due is the actionable answer, so it is the one that takes the action colour.
   --color-accent is the pair that flips correctly between themes. */
.zakat-calc__result--due {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.zakat-calc__use {
  width: 100%;
  margin-top: var(--space-4);
}
.zakat-calc__use[hidden] { display: none; }

.zakat-calc__notes {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
}
.zakat-calc__note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.zakat-calc__note + .zakat-calc__note { margin-top: var(--space-2); }

/* ──────────────────────────────────────────────────────────
   DONATION CARD
   ────────────────────────────────────────────────────────── */
.donation-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.donation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  text-decoration: none;
}
a.donation-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
a.donation-card .donation-card__title { color: var(--color-text); }
a.donation-card:hover .donation-card__title { color: var(--color-primary); }

.donation-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.donation-card__bismillah {
  display: flex;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
/* The only thing a context legitimately overrides: a card is not a page
   header, so the ornament is smaller. Everything else comes from the base
   rule above. */
.donation-card__bismillah .bismillah-svg {
  width: 140px;
}

.donation-card__title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.donation-card__desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--space-2) 0;
  flex: 1;
}

.donation-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.donation-card__price-amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
}
/* The unit qualifier ("per tray") shares the amount's baseline and must read
   as secondary to it. */
.donation-card__price-note {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────────────────
   ACCORDION
   ────────────────────────────────────────────────────────── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.accordion__item:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }

.accordion__heading { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.accordion__trigger:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); color: var(--color-primary); }
.accordion__trigger[aria-expanded="true"] { color: var(--color-primary); }

.accordion__question { flex: 1; }

.accordion__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-border);
}
.accordion__panel[hidden] { display: none; }

.accordion__answer {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 0.98rem;
}

/* ──────────────────────────────────────────────────────────
   THEME TOGGLE
   ────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--color-border); color: var(--color-primary); }
.theme-toggle__icon { display: inline-flex; }
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__icon--sun  { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* ──────────────────────────────────────────────────────────
   BASKET BUTTON
   ────────────────────────────────────────────────────────── */
.basket-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.basket-button:hover {
  background: var(--color-border);
  color: var(--color-primary);
  text-decoration: none;
}
.basket-button__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--color-bg);
}
.basket-button__count.is-empty { display: none; }

/* ──────────────────────────────────────────────────────────
   WHATSAPP FLOAT
   ────────────────────────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--color-whatsapp-dark);
  color: var(--color-on-primary);
  text-decoration: none;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-whatsapp) 35%, transparent);
}
@media (max-width: 767.98px) {
  .whatsapp-float { bottom: 1rem; right: 1rem; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ──────────────────────────────────────────────────────────
   BADGE
   ────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge--warning { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.badge--success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.badge--error   { background: color-mix(in srgb, var(--color-error)   15%, transparent); color: var(--color-error); }

/* ──────────────────────────────────────────────────────────
   FORM FIELDS
   ────────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-field__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.form-field__required { color: var(--color-primary); margin-left: 2px; }
.form-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.form-field__input::placeholder { color: var(--color-text-muted); }
.form-field__input--textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-body);
  line-height: 1.5;
}
.form-field__hint {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.form-field__optional {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.form-field__error {
  margin: var(--space-1) 0 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-error);
}
.form-field--has-error .form-field__input {
  border-color: var(--color-error);
}
.form-field--has-error .form-field__input:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 18%, transparent);
}

/* ──────────────────────────────────────────────────────────
   COUNTRY SELECT (mobile alternative to .countries-grid)
   ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   QUANTITY STEPPER
   ────────────────────────────────────────────────────────── */
.quantity-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  width: fit-content;
}
.quantity-stepper__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.quantity-stepper__btn:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}
.quantity-stepper__btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.quantity-stepper__display {
  min-width: 56px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 0 var(--space-3);
  line-height: 44px;
}

.quantity-fixed-note {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-surface-cool);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ──────────────────────────────────────────────────────────
   INFO BOX (dynamic country-group features)
   ────────────────────────────────────────────────────────── */
.info-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
  background: var(--color-surface-cool);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
}
.info-box__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
}
.info-box__intro {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.info-box__list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}
.info-box__list li { margin: 2px 0; }

/* ──────────────────────────────────────────────────────────
   DONATION DESCRIPTION BLOCK — orphaned; its partial went with the strip
   ────────────────────────────────────────────────────────── */
.donation-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.donation-description__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.donation-description__item--highlight {
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-gold) 40%, var(--color-border));
}
.donation-description__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}
.donation-description__item--highlight .donation-description__icon {
  background: color-mix(in srgb, var(--color-gold) 20%, transparent);
  color: var(--color-accent);
}
.donation-description__text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  max-width: calc(100vw - var(--space-8));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 260px;
  max-width: 380px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.95rem;
  line-height: 1.5;
  transform: translateX(calc(100% + var(--space-5)));
  opacity: 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(calc(100% + var(--space-5))); opacity: 0; }
.toast--success { border-left-color: var(--color-success); }
.toast--error   { border-left-color: var(--color-error); }
.toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-success);
}
.toast--error .toast__icon { color: var(--color-error); }
.toast__message { flex: 1; margin: 0; }
@media (max-width: 639.98px) {
  .toast-container {
    top: auto;
    bottom: var(--space-5);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
  }
  .toast { max-width: none; width: 100%; }
}
.badge--muted   { background: var(--color-border); color: var(--color-text-muted); }

/* ──────────────────────────────────────────────────────────
   INTENTION REMINDER (checkout — niyyah block)
   ────────────────────────────────────────────────────────── */
.intention-reminder {
  display: block;
  padding: var(--space-5);
  margin: var(--space-6) 0;
  background: var(--color-surface-cool);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.intention-reminder__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.intention-reminder__body {
  margin: 0 0 var(--space-4);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text);
}
.intention-reminder__quote {
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-gold);
}

/* ==================== MAIN SITE — Page Components (Prompt #8) ==================== */

/* ──────────────────────────────────────────────────────────
   SECTION WARM — utility background modifier
   ────────────────────────────────────────────────────────── */
.section--warm {
  background: var(--color-surface-cool);
}

/* ──────────────────────────────────────────────────────────
   PAGE HERO — compact hero for inner pages
   ────────────────────────────────────────────────────────── */
/* No `color` here since #3.7a. It was never the hero's own text colour — the
   title and subtitle have always set their own, and the 404's only other
   child is a .btn--primary which sets its own too. Its one job was tinting
   the bismillah by inheritance, and the ornament now carries that itself, so
   keeping it would leave two declarations of one fact that could be changed
   apart: edit this one and the ornament would no longer follow. Enumerated
   across all seven .page-hero views — about, activities, contact, gallery,
   404, terms, privacy — before removing it. */
.page-hero {
  background: var(--color-surface-cool);
  padding: var(--space-16) 0 var(--space-12);
}
.page-hero__inner {
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-6) 0 0;
  text-align: center;
}
.page-hero__subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: var(--space-3) auto 0;
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 1024px) {
  .page-hero {
    padding: var(--space-20) 0 var(--space-16);
  }
}

/* ──────────────────────────────────────────────────────────
   CONTENT SECTION — 2-col text + image layout
   ────────────────────────────────────────────────────────── */
.content-section {
  padding: var(--space-12) 0;
}
.content-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
.content-section__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* The /about photograph is the Manila building, six storeys of it. The 4:3
   box above would crop it to a band across the middle floors. This modifier
   is for a picture whose subject is taller than it is wide; it is not a
   general escape hatch. */
.content-section__media--portrait img {
  aspect-ratio: 3 / 4;
}
.content-section__text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.content-section__text p {
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.content-section__text p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .content-section {
    padding: var(--space-16) 0;
  }
  .content-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .content-section--image-left .content-section__media {
    order: -1;
  }
}

/* ──────────────────────────────────────────────────────────
   INFO BOX GRID — grid wrapper for public-site info cards.
   Overrides the existing .info-box base (donation item detail)
   when used inside .info-box-grid context.
   ────────────────────────────────────────────────────────── */
.info-box-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.info-box-grid .info-box {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.info-box-grid .info-box__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.info-box__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}
.info-box__body + .info-box__body {
  margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .info-box-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .info-box-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .info-box-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .info-box-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ──────────────────────────────────────────────────────────
   SECTION HEADER — centered heading for grid sections
   ────────────────────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.section-header__intro {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 720px;
  margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────
   SECTION CTA STRIP — full-width primary-colored CTA
   ────────────────────────────────────────────────────────── */
/* --color-primary-soft and --color-text both flip with the theme, so this
   band stays legible in both. It must NOT go back to
   --color-primary + --color-on-primary: --color-primary becomes a light tint
   in dark mode, and white on it measures 2.28:1. The soft pairing measures
   12.23:1 light and 11.27:1 dark, and leaves a teal .btn--primary as the
   clear focal point. */
.section-cta-strip {
  background: var(--color-primary-soft);
  color: var(--color-text);
  padding: var(--space-16) 0;
}
.section-cta-strip__inner {
  display: flex;
  gap: var(--space-10);
  align-items: center;
  justify-content: space-between;
}
.section-cta-strip h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.section-cta-strip p {
  opacity: 0.9;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}
.section-cta-strip .btn--primary {
  background: var(--color-on-accent);
  color: var(--color-accent);
  border: 2px solid var(--color-on-accent);
  white-space: nowrap;
}
/* This hover was written when the strip behind it was --color-primary, where
   dropping to a transparent fill left --color-on-accent on navy. The strip
   moved to --color-primary-soft (see above) and this rule did not: the label
   then sat on the pale band at 1.20:1 light and 1.39:1 dark, and the border
   it does not re-declare stayed --color-on-accent, so the whole button
   disappeared into the strip on hover.
   Now it inverts the other way — into the accent fill every other primary
   button hovers to — which is the one pair in the palette that flips its
   on-colour correctly. 7.35:1 light, 10.27:1 dark. The border follows the
   background; leaving it behind is what made this invisible the first time. */
.section-cta-strip .btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  border-color: var(--color-accent-hover);
}
@media (max-width: 767.98px) {
  .section-cta-strip {
    padding: var(--space-16) 0;
  }
  .section-cta-strip__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-6);
  }
  .section-cta-strip .btn--primary {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────
   CENTERED TEXT BLOCK — single-column centered text section
   ────────────────────────────────────────────────────────── */
.centered-text-block {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.centered-text-block h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.centered-text-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────
   PAGE HERO ACTIONS — CTA buttons inside page hero
   ────────────────────────────────────────────────────────── */
.page-hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ──────────────────────────────────────────────────────────
   QUICK FACTS GRID — 4-column stat strip
   ────────────────────────────────────────────────────────── */
.quick-facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.quick-facts-grid__item {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-gold);
}
.quick-facts-grid__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.quick-facts-grid__value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.quick-facts-grid__sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}
@media (min-width: 768px) {
  .quick-facts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .quick-facts-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ──────────────────────────────────────────────────────────
   BRANCHES GRID — pill-shaped state badges
   ────────────────────────────────────────────────────────── */
.branches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}
.branches-grid__badge {
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-gold);
  border-radius: 9999px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  min-width: 100px;
  text-align: center;
  transition: background-color var(--transition-fast);
}
.branches-grid__badge:hover {
  background: var(--color-surface-cool);
}

/* ──────────────────────────────────────────────────────────
   TIMELINE — vertical numbered steps
   ────────────────────────────────────────────────────────── */
.timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-left: var(--space-12);
}
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) + 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.timeline__step {
  position: relative;
  padding-bottom: var(--space-10);
}
.timeline__step:last-child {
  padding-bottom: 0;
}
.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-12) + 2px);
  top: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}
.timeline__date {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  letter-spacing: 0.02em;
}
.timeline__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
@media (max-width: 767.98px) {
  .timeline {
    padding-left: var(--space-10);
  }
  .timeline::before {
    left: calc(var(--space-3) + 1px);
  }
  .timeline__marker {
    left: calc(-1 * var(--space-10) + 2px);
    width: var(--space-6);
    height: var(--space-6);
    font-size: 0.8rem;
  }
}

/* ──────────────────────────────────────────────────────────
   CHECK LIST — 2-column checklist with icons
   ────────────────────────────────────────────────────────── */
.check-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-8);
  max-width: 720px;
  margin: 0 auto;
}
.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.check-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  margin-top: 2px;
}
.check-list__label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
@media (min-width: 768px) {
  .check-list { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────
   FEES GRID — large 2-column fee cards
   ────────────────────────────────────────────────────────── */
.fees-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 720px;
  margin: 0 auto;
}
.fees-grid__item {
  padding: var(--space-10);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
  text-align: center;
}
.fees-grid__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.fees-grid__value {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  margin: 0;
}
.fees-grid__caption {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}
@media (min-width: 768px) {
  .fees-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== MAIN SITE — Quran Registration CTA (Prompt 13B) ==================== */

/* ──────────────────────────────────────────────────────────
   QURAN REGISTRATION CTA — two-layer shared partial.
   Layer 1: orange header strip (mirrors .section-cta-strip visual DNA).
   Layer 2: surface-colored form card centered below the strip.
   ────────────────────────────────────────────────────────── */

/* Flash alerts inside the form card */
.quran-form__alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: 0.95rem;
  line-height: 1.5;
}
.quran-form__alert--success {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.quran-form__alert--error {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}

/* Form internals */
.quran-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-6);
}
.quran-form__field {
  display: flex;
  flex-direction: column;
}
.quran-form__field--full {
  grid-column: 1 / -1;
}
.quran-form__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: block;
}
.quran-form__label .required {
  color: var(--color-error);
  margin-left: var(--space-1);
}
.quran-form__label-optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.875rem;
  margin-left: var(--space-1);
}
.quran-form__input,
.quran-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.quran-form__input:focus,
.quran-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.quran-form__input::placeholder,
.quran-form__textarea::placeholder {
  color: var(--color-text-muted);
}
.quran-form__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.quran-form__field--error .quran-form__input,
.quran-form__field--error .quran-form__textarea {
  border-color: var(--color-error);
}
.quran-form__field--error .quran-form__input:focus,
.quran-form__field--error .quran-form__textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 18%, transparent);
}
.quran-form__error {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  color: var(--color-error);
  line-height: 1.4;
}
.quran-form__radio-group,
.quran-form__checkbox-group {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}
.quran-form__radio,
.quran-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
}
.quran-form__radio input,
.quran-form__checkbox input {
  flex-shrink: 0;
  cursor: pointer;
}
.quran-form__submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}
.quran-form__privacy-note {
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.quran-form__privacy-note a {
  color: var(--color-primary);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .quran-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767.98px) {
  .quran-form__submit-row {
    justify-content: stretch;
  }
  .quran-form__submit-row .btn {
    width: 100%;
  }
  .quran-form__radio-group,
  .quran-form__checkbox-group {
    gap: var(--space-4);
  }
}

/* ==================== MAIN SITE — Layout Compaction (Prompt #9.1) ==================== */

/* ──────────────────────────────────────────────────────────
   TWO-COL SECTION — side-by-side column pairs
   ────────────────────────────────────────────────────────── */
.two-col-section {
  padding: var(--space-16) 0;
}
.two-col-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
.two-col-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.two-col-section__intro {
  line-height: 1.7;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  .two-col-section__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ──────────────────────────────────────────────────────────
   COMPACT LIST — vertical list with gold bullets
   ────────────────────────────────────────────────────────── */
.compact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compact-list li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.65;
  color: var(--color-text);
}
.compact-list li::before {
  content: "\2022";
  position: absolute;
  left: var(--space-2);
  top: 0;
  color: var(--color-accent);
  font-weight: 600;
}
.compact-list--check li::before {
  content: "\2713";
  color: var(--color-primary);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────
   COMPACT EDUCATION LIST — duration-labeled items
   ────────────────────────────────────────────────────────── */
.compact-education-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compact-education-list li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.65;
  color: var(--color-text);
}
.compact-education-list li::before {
  content: "\2022";
  position: absolute;
  left: var(--space-2);
  top: 0;
  color: var(--color-accent);
  font-weight: 600;
}
.compact-education-list strong {
  color: var(--color-primary);
  font-weight: 600;
}
.compact-education-list span {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ──────────────────────────────────────────────────────────
   BUTTON OUTLINE — visible on any background (warm/base)
   ────────────────────────────────────────────────────────── */
/* Secondary action. Resting state is transparent so it inherits whatever
   surface it sits on and can never be pinned to one theme's colour —
   --color-on-primary is white in BOTH themes by design, so using it as a
   fill here gave a white pill with a pale label in dark mode (2.28:1).
   Hover routes through the accent pair, the only pair in the palette that
   correctly flips its on-colour, which also matches "teal is action". */
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-grid--2x2 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .gallery-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .gallery-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery-grid__item {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.gallery-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.gallery-grid__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.gallery-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 300ms ease;
}
.gallery-grid__item:hover .gallery-grid__img {
  transform: scale(1.05);
}

/* Each picture is a figure: the button above, a caption below (#3.1). */
.gallery-grid__figure {
  margin: 0;
  min-width: 0;
}
.gallery-grid__caption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
/* A picture wider than 2:1 gets the whole row; a 4:3 box would show its
   middle third. The box is 2:1, so a 1.95:1 picture loses almost nothing. */
.gallery-grid__figure--wide {
  grid-column: 1 / -1;
}
.gallery-grid__figure--wide .gallery-grid__item {
  aspect-ratio: 2 / 1;
}

/* ──────────────────────────────────────────────────────────
   GALLERY LIGHTBOX — fullscreen image viewer (Prompt #10)
   Appended to <body> by JS when a thumbnail is clicked; removed on close.
   Backdrop tone is theme-agnostic (always near-black) per lightbox convention.
   ────────────────────────────────────────────────────────── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-lightbox-backdrop);
  animation: gallery-lightbox-fade 180ms ease;
}
@keyframes gallery-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gallery-lightbox__image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next {
  position: absolute;
  appearance: none;
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-primary) 25%, transparent);
  color: var(--color-on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  font-size: 1.75rem;
  line-height: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.gallery-lightbox__close:hover,
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover {
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__prev:focus-visible,
.gallery-lightbox__next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.gallery-lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
}
.gallery-lightbox__prev {
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
.gallery-lightbox__next {
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
/* Hover keeps the vertical centering on prev/next (compose translateY). */
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover {
  transform: translateY(-50%) scale(1.05);
}
.gallery-lightbox__close:hover {
  transform: scale(1.05);
}

.gallery-lightbox__counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--color-bg) 50%, transparent);
  padding: var(--space-2) var(--space-4);
  border-radius: 9999px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

body.has-lightbox-open {
  overflow: hidden;
}

@media (max-width: 639px) {
  .gallery-lightbox__prev,
  .gallery-lightbox__next {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
  .gallery-lightbox__close {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}