/* ============================================================
   RAUTSTEIN — Website UI Kit component styles
   Layered on top of ../../colors_and_type.css tokens
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#root { overflow-x: clip; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Icons (lucide) ----------
   Lucide injects a 24×24 inline <svg> on the baseline; force it to fill and
   centre within the sized .ic wrapper so every icon sits true-centre at its
   intended size (fixes baseline offset in buttons, chips, circles, etc.). */
.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: middle; }
.ic > svg { width: 100%; height: 100%; display: block; }
.section { padding-block: var(--section-y); }
.ink-section { background: var(--navy-deep); color: var(--on-dark); }
.ink-section h1, .ink-section h2, .ink-section h3 { color: var(--on-dark); }

/* ---------- Reveal (scroll entrance) ----------
   Base state is VISIBLE. The entrance is played via the Web Animations API
   (see primitives.jsx) and reverts to this base on finish — so content is
   never left stuck hidden if scripts/timers are frozen. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .parallax { transform: none !important; }
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--sans); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
  border-radius: var(--r-sm); padding: 16px 28px; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur); position: relative; overflow: hidden; text-align: center; }
.btn:active { transform: scale(0.98); }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--gold); color: var(--on-accent); box-shadow: var(--sh-gold); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(184,146,78,0.7); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-outline { background: transparent; color: var(--text-hi); border-color: var(--steel); }
.btn-outline:hover { background: var(--text-hi); color: var(--navy-bg); border-color: var(--text-hi); }
.ink-section .btn-outline { color: var(--on-dark); border-color: rgba(241,233,218,0.5); }
.ink-section .btn-outline:hover { background: var(--on-dark); color: var(--navy-bg); }
.btn-ghost { background: transparent; color: var(--gold-deep); padding-inline: 0; letter-spacing: 0.08em; gap: 8px; }
.btn-ghost .arr { transition: transform var(--dur) var(--ease-out); }
.btn-ghost:hover .arr { transform: translateX(6px); }

/* ---------- Eyebrow + rule ---------- */
.eyebrow-rule { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.eyebrow-rule .l { width: 36px; height: 1px; background: var(--gold); }
.eyebrow-rule.center { justify-content: center; }

/* ---------- Pillars ---------- */
.pillars { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.pillar { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ink-section .pillar { color: var(--on-dark); }
.pillar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-grad); flex: none; }

/* ---------- Placeholder frames ---------- */
.ph { border: 1px dashed var(--stone); border-radius: var(--r-md); background: linear-gradient(160deg, var(--paper), var(--cream));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--taupe); text-align: center; padding: 24px; }
.ph .ic { width: 34px; height: 34px; stroke-width: 1.25; color: var(--gold-deep); }
.ph span { font-size: 13px; letter-spacing: 0.04em; }
.ph.on-ink { background: var(--navy-deep); border-color: var(--navy-line); color: var(--on-dark-2); }
.ph.on-ink .ic { color: var(--gold-soft); }

/* ---------- Tags ---------- */
.tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 13px; border-radius: var(--r-pill); background: var(--gold-tint); color: var(--gold-deep); display: inline-block; }

/* ---------- Cards (service / blog) ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); position: relative; overflow: hidden;
  box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.card:hover::before { transform: scaleX(1); }

/* ---------- Inputs ---------- */
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--espresso); margin-bottom: 8px; letter-spacing: 0.01em; }
.field { width: 100%; font-family: var(--sans); font-size: 15px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field::placeholder { color: var(--stone); }
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); outline: none; }
.field.invalid { border-color: var(--danger); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; }
.gold-rule { width: 48px; height: 2px; background: var(--gold-grad); border: 0; margin: 0; }