/* =============================================================
   UTILITIES.CSS
   Shared utilities — .card, .section, .tag, .section-header, .eyebrow, .divider, etc.
   ============================================================= */

/* ── Shared card base ─────────────────────────────────────── */
.card {
  background: var(--surface-bg-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.2s, border-color 0.25s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Section padding ──────────────────────────────────────── */
.section    { padding: 5rem 4rem; }
.section-sm { padding: 3rem 4rem; }
.section-lg { padding: 7rem 4rem; }

/* ── Tag pills ────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 2px;
  background: var(--surface-bg-raised);
  color: var(--surface-text-soft);
}
.tag-accent {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ── Section header ───────────────────────────────────────── */
.section-header { margin-bottom: 3rem; }
.section-header-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: var(--weight-heading);
  color: var(--surface-text);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  margin-bottom: 0.75rem;
}
/* .section-header h2 element selector removed — use class .section-header-h2 on the <h2> element. */
.section-header p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--surface-text-soft);
  line-height: 1.75;
  max-width: 52ch;
}
.section-header-center { text-align: center; }
.section-header-center p { margin: 0 auto; }

/* ── Eyebrow ──────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow-line::after  { content: ''; display: block; width: 40px; height: 2px; background: var(--accent); }
.eyebrow-dot::before  { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── Dividers ─────────────────────────────────────────────── */
.divider        { width: 100%; height: 1px; background: var(--surface-border); margin: 1.5rem 0; }
.divider-accent { width: 64px; height: 3px; background: var(--accent); border-radius: 2px; margin: 1.25rem 0; }

/* ── Stars ────────────────────────────────────────────────── */
.stars { color: var(--accent); font-size: 0.9rem; letter-spacing: 0.1em; }

/* ── Image placeholder ────────────────────────────────────── */
.img-placeholder {
  background: var(--surface-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--surface-text-muted);
  overflow: hidden;
  position: relative;
}
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gradient-a) 0%, var(--gradient-b) 100%);
  opacity: 0.85;
}
.img-placeholder span { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   SHARED BLOCK PRIMITIVES
   Extracted from block CSS — used by 2+ blocks across categories.
   HTML must use these classes alongside block-specific classes.

   PREFIX: bl-*  (block library primitive — distinct from utility classes above)

   RULES
   ─────────────────────────────────────────────────────────────
   • Only add a primitive here if it appears in 2+ block files.
   • Block CSS keeps its own sizing, spacing, and responsive rules.
   • These primitives own structure/type tokens only — no layout
     dimensions that differ per block.
   ══════════════════════════════════════════════════════════════ */

/* ── Block header row ─────────────────────────────────────────
   Flex row with title on left, optional action/badge on right.
   Used by: bgl-header (galleries), bgf-header (galleries),
            btw-header (testimonials)

   Usage: <div class="bl-block-header [block-header-class]">
   Block CSS sets margin-bottom and padding as needed.          */
.bl-block-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── Block section heading ────────────────────────────────────
   Standard h2 type treatment used across block headers.
   Used by: bgf-header h2 (galleries), bgm-header-left h2,
            bshs-header h2 (services), bsa-left h2 (services),
            btw-header h2 (testimonials)

   Usage: add class="bl-block-header-h2" to the h2 element.
   Block CSS may add margin-bottom, max-width, line-height
   overrides as needed.                                         */
.bl-block-header-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: var(--weight-heading);
  color: var(--surface-text);
  line-height: 1.15;
}

/* ── Horizontal scroll track ──────────────────────────────────
   Drag-scrollable flex container with snap, hidden scrollbar,
   grab cursor. Used by: bgf-track (galleries filmstrip),
   bshs-track (services hscroll).

   Usage: <div class="bl-scroll-track [block-track-class]">
   Block CSS sets gap, padding-right, padding-bottom, and
   snap-align on child cards.                                   */
.bl-scroll-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.bl-scroll-track:active { cursor: grabbing; }
.bl-scroll-track::-webkit-scrollbar { display: none; }

/* ── Stat number ──────────────────────────────────────────────
   Display-weight accent number. Font-size set by block.
   Used by: bhs-stat-num (heroes), bsc-num (stats counter),
            bse-num (stats editorial), btb-num (testimonials),
            bgmas-stat-num (galleries), bcu-spots (ctas).

   Usage: add class="bl-stat-num" alongside block-specific class.
   Block CSS sets font-size (each context differs).             */
.bl-stat-num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--accent);
  line-height: 1;
}

/* ── Stat label ───────────────────────────────────────────────
   Small uppercase label beneath a stat number.
   Used by: bhs-stat-label (heroes), bsc-label (stats),
            btb-label (testimonials), bhtw-counter-label (heroes)

   Usage: add class="bl-stat-label" alongside block-specific class. */
.bl-stat-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--surface-text-muted);
  line-height: 1.4;
}

/* ── Accent text link / read-more ─────────────────────────────
   Small uppercase link in accent color with arrow.
   Used by: bgl-header a (galleries), bsg-link (services).

   Usage: <a class="bl-accent-link [block-class]" href="...">
   Block CSS may override gap animation on hover.               */
.bl-accent-link {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.bl-accent-link::after { content: '→'; }