/* ============================================================================
   components.css — Vidaara shared design system (Phase 2)
   Brand-aligned reusable components: hubs, hero, cards, breadcrumbs, badges,
   chips, buttons, callouts, tables, CTAs. Uses the tokens from main.css
   (--saffron / --deep / --cream / --border / Fraunces + DM Sans).
   Namespaced with `vd-` so it never collides with page-specific styles.
   ============================================================================ */

:root{
  --vd-shadow:0 10px 30px rgba(10,22,40,.10);
  --vd-shadow-sm:0 4px 14px rgba(10,22,40,.07);
  --vd-radius:16px;
  --vd-radius-sm:12px;
}

/* Layout ------------------------------------------------------------------- */
.vd-wrap{max-width:1080px;margin:0 auto;padding:28px 20px 80px}
.vd-wrap--narrow{max-width:880px}

/* Breadcrumb --------------------------------------------------------------- */
.vd-breadcrumb{font-size:.82rem;color:var(--deep-mid);opacity:.8;margin:0 0 18px;font-family:var(--font-sans)}
.vd-breadcrumb a{color:inherit;text-decoration:none}
.vd-breadcrumb a:hover{color:var(--saffron);opacity:1}
.vd-breadcrumb .sep{margin:0 7px;opacity:.5}

/* Hero --------------------------------------------------------------------- */
.vd-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--deep),var(--deep-mid));color:#fff;border-radius:var(--vd-radius);padding:34px 32px}
.vd-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(255,107,0,.35),transparent 70%);pointer-events:none}
.vd-eyebrow{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-mid)}
.vd-hero h1,.vd-h1{font-family:var(--font-serif);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:700;line-height:1.12;margin:8px 0 10px}
.vd-hero p{font-size:1rem;line-height:1.6;max-width:680px;opacity:.92;margin:0}
.vd-hero .vd-meta{font-size:.82rem;opacity:.8;margin-top:12px}
.vd-hero .vd-meta a{color:#fff;font-weight:600}

/* Section headings --------------------------------------------------------- */
.vd-section-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--deep);margin:38px 0 6px}
.vd-section-sub{font-size:.95rem;color:var(--deep-mid);opacity:.85;max-width:680px;margin:0 0 18px;line-height:1.55}
.vd-kicker{font-family:var(--font-sans);font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--saffron);margin:34px 0 12px}

/* Card grid ---------------------------------------------------------------- */
.vd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.vd-grid--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.vd-card{display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--border);border-radius:var(--vd-radius);padding:20px 22px;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .12s,border-color .2s}
a.vd-card:hover{box-shadow:var(--vd-shadow);transform:translateY(-3px);border-color:var(--saffron-mid)}
.vd-card__icon{width:42px;height:42px;border-radius:11px;background:var(--saffron-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:12px}
.vd-card__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--saffron)}
.vd-card__title{font-family:var(--font-serif);font-size:1.22rem;font-weight:700;color:var(--deep);margin:3px 0 6px;line-height:1.2}
.vd-card__desc{font-size:.88rem;color:var(--deep-mid);opacity:.9;line-height:1.55;margin:0 0 14px;flex:1}
.vd-card__meta{font-size:.78rem;color:var(--deep-mid);opacity:.75;margin-bottom:12px}
.vd-card__foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.vd-card__go{font-size:.85rem;font-weight:700;color:var(--saffron);margin-top:auto}

/* Badges & chips ----------------------------------------------------------- */
.vd-badge{display:inline-block;font-size:.68rem;font-weight:700;color:#fff;background:var(--saffron);border-radius:50px;padding:3px 10px;letter-spacing:.02em}
.vd-badge--soft{color:var(--saffron);background:var(--saffron-light);border:1px solid var(--saffron-mid)}
.vd-chips{display:flex;flex-wrap:wrap;gap:8px}
.vd-chip{font-size:.78rem;font-weight:600;color:var(--deep);background:var(--cream,#FBF6EC);border:1px solid var(--border);border-radius:50px;padding:5px 12px}
.vd-hero .vd-chip{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}

/* Buttons ------------------------------------------------------------------ */
.vd-btn{display:inline-block;font-family:var(--font-sans);font-size:.86rem;font-weight:700;border-radius:9px;padding:9px 16px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
.vd-btn--primary{background:var(--saffron);color:#fff}
.vd-btn--primary:hover{background:var(--saffron-d)}
.vd-btn--ghost{background:transparent;color:var(--deep);border-color:var(--border-dark)}
.vd-btn--ghost:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.vd-btn--soon{background:var(--saffron-light);color:var(--saffron-d);pointer-events:none}

.vd-soon{display:inline-block;font-size:.68rem;font-weight:700;color:var(--saffron-d);background:var(--saffron-light);border:1px solid var(--saffron-mid);border-radius:50px;padding:4px 11px}

/* Callout ------------------------------------------------------------------ */
.vd-callout{display:flex;gap:14px;background:var(--saffron-light);border:1px solid var(--saffron-mid);border-left:4px solid var(--saffron);border-radius:var(--vd-radius-sm);padding:16px 18px;margin:22px 0}
.vd-callout .ico{font-size:1.3rem;line-height:1}
.vd-callout h3{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:var(--saffron-d);margin:0 0 4px}
.vd-callout p{font-size:.9rem;line-height:1.6;color:var(--deep-mid);margin:0}

/* Spec / format table ------------------------------------------------------ */
.vd-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--vd-radius-sm);background:var(--white,#fff)}
.vd-tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.vd-tbl th,.vd-tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.vd-tbl tr:last-child td{border-bottom:none}
.vd-tbl th{width:190px;color:var(--deep);font-weight:700;background:var(--saffron-light)}

/* Domain / syllabus card --------------------------------------------------- */
.vd-dom{background:var(--white,#fff);border:1px solid var(--border);border-radius:var(--vd-radius);padding:18px 20px}
.vd-dom__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.vd-dom__nm{font-family:var(--font-serif);font-size:1.08rem;font-weight:700;color:var(--deep)}
.vd-dom .blurb{font-size:.84rem;color:var(--deep-mid);opacity:.8;margin:0 0 10px}
.vd-dom ul{margin:0;padding-left:18px}
.vd-dom li{font-size:.88rem;line-height:1.55;color:var(--deep-mid);margin:5px 0}

/* CTA grid (study/practice/mock) ------------------------------------------- */
.vd-cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}

.vd-back{display:inline-block;margin-top:30px;font-size:.9rem;color:var(--saffron);font-weight:700;text-decoration:none}
.vd-back:hover{text-decoration:underline}

@media(max-width:540px){.vd-hero{padding:26px 20px}.vd-wrap{padding:20px 16px 64px}}