/* ============================================================
   Vivek Institutions — EDITORIAL / CLASSIC redesign.
   Maroon (--brand) + gold (--accent) on warm ivory.
   Distinct composition: centered-logo header, split hero,
   serif headlines, framed photography. Loaded after _core app.css.
   ============================================================ */

:root{ --maroon: rgb(var(--brand)); --gold:#caa14e; --ivory:#fbf7f1; --line:#e9ded1; }

body{ background:var(--ivory); color:rgb(var(--ink)); font-family:"Inter",system-ui,sans-serif; }
h1,h2,h3,.vi-serif,.vi-title{ font-family:"Lora",Georgia,serif !important; }

/* ---------- Eyebrow (gold, with maroon tick) ---------- */
.vi-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; color:var(--gold);
  font-family:"Inter",sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }
.vi-eyebrow::before{ content:""; width:26px; height:2px; background:var(--maroon); }
.vi-eyebrow.justify-center::before{ display:none; }

/* ---------- Titles (serif) ---------- */
.vi-title{ font-weight:800; color:rgb(var(--ink)); line-height:1.1; letter-spacing:-.01em; }
.vi-title .accent{ color:var(--maroon); font-style:italic; }
.vi-deep .vi-title{ color:#fff; }
.vi-deep .vi-title .accent{ color:#eecb76; }
.vi-lead{ color:rgb(var(--muted)); font-size:1.1rem; line-height:1.85; }
.vi-deep .vi-lead,.vi-deep p{ color:rgba(255,255,255,.85); }

/* ---------- Ornament divider ---------- */
.vi-orn{ display:flex; align-items:center; justify-content:center; gap:.7rem; color:var(--gold); }
.vi-orn::before,.vi-orn::after{ content:""; height:1px; width:50px; background:var(--gold); opacity:.6; }
.vi-orn i{ width:8px; height:8px; background:var(--gold); transform:rotate(45deg); }

/* ---------- Buttons ---------- */
.vi-btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:"Inter",sans-serif; font-weight:600;
  font-size:.92rem; padding:.85rem 1.7rem; border-radius:2px; transition:.22s ease; border:1.5px solid transparent; }
.vi-btn-gold{ background:var(--maroon); color:#fff; }              /* primary = maroon */
.vi-btn-gold:hover{ background:rgb(var(--brand-dark)); transform:translateY(-2px); }
.vi-btn-teal{ background:var(--gold); color:#3a2410; }             /* secondary = gold */
.vi-btn-teal:hover{ background:#b88f3c; transform:translateY(-2px); }
.vi-btn-outline{ border-color:rgb(var(--brand)/.4); color:var(--maroon); background:transparent; }
.vi-btn-outline:hover{ background:var(--maroon); color:#fff; }
.vi-btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.vi-btn-ghost:hover{ background:#fff; color:var(--maroon); }

/* ---------- Cards (editorial, gold underline on hover) ---------- */
.vi-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:2.2rem 1.9rem; transition:.3s ease; }
.vi-card::after{ content:""; position:absolute; left:1.9rem; right:1.9rem; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:.35s; }
.vi-card:hover{ box-shadow:0 26px 50px -30px rgba(94,19,32,.4); transform:translateY(-4px); }
.vi-card:hover::after{ transform:scaleX(1); }
.vi-ic{ width:60px; height:60px; display:grid; place-items:center; border-radius:9999px;
  background:rgb(var(--brand)/.07); color:var(--maroon); transition:.3s; }
.vi-card:hover .vi-ic{ background:var(--maroon); color:var(--gold); }

/* ---------- Classic framed image ---------- */
.vi-frame{ position:relative; padding:9px; background:#fff; border:1px solid var(--line); }
.vi-frame::after{ content:""; position:absolute; inset:4px; border:1px solid var(--gold); opacity:.55; pointer-events:none; }
.vi-frame img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- Stat ---------- */
.vi-stat .n{ font-family:"Lora",serif; font-weight:800; font-size:2.6rem; line-height:1; color:var(--maroon); }
.vi-stat .l{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--muted)); margin-top:.45rem; }
.vi-deep .vi-stat .n{ color:#eecb76; }
.vi-deep .vi-stat .l{ color:rgba(255,255,255,.78); }

/* ---------- Backgrounds ---------- */
.vi-deep{ position:relative; background:linear-gradient(150deg, rgb(var(--brand-dark)), rgb(var(--brand))); }
.vi-paper{ background:var(--ivory); }
.vi-soft{ background:#f4ece1; }
.vi-grid{ background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 0); background-size:22px 22px; }
.vi-rule{ height:1px; background:var(--line); }
.vi-frieze{ height:0; }

/* ============================================================
   NEW LAYOUT PIECES (editorial)
   ============================================================ */

/* Centered-logo header */
.vi-head{ background:var(--ivory); border-bottom:1px solid var(--line); }
.lnk{ position:relative; font-family:"Inter",sans-serif; font-weight:600; font-size:.86rem;
  letter-spacing:.02em; color:#5b4a3f; padding:.3rem 0; transition:.18s; }
.lnk:hover,.lnk.on{ color:var(--maroon); }
.lnk.on::after{ content:""; position:absolute; left:50%; bottom:-6px; width:5px; height:5px; background:var(--gold); transform:translateX(-50%) rotate(45deg); }
[data-header].is-stuck{ box-shadow:0 8px 26px -16px rgba(94,19,32,.28); }

/* Split-hero pieces */
.vi-hero{ position:relative; background:var(--ivory); overflow:hidden; }
.vi-hero-panel{ position:absolute; top:0; bottom:0; right:0; width:42%; background:linear-gradient(160deg, rgb(var(--brand)), rgb(var(--brand-dark))); }
.vi-hero-panel::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 0); background-size:22px 22px; }
@media(max-width:1023px){ .vi-hero-panel{ display:none; } }
.vi-badge{ background:var(--gold); color:#3a2410; box-shadow:0 18px 40px -18px rgba(94,19,32,.6); }
.vi-badge .n{ font-family:"Lora",serif; font-weight:800; line-height:1; }

/* Highlights bar (overlaps hero bottom) */
.vi-highlights{ background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(94,19,32,.4); }
.vi-highlights .item + .item{ border-left:1px solid var(--line); }
@media(max-width:767px){ .vi-highlights .item + .item{ border-left:none; border-top:1px solid var(--line); } }

/* Course rows (editorial list) */
.vi-course{ display:flex; align-items:center; gap:1.5rem; padding:1.6rem 0; border-top:1px solid var(--line); transition:.25s; }
.vi-course:last-child{ border-bottom:1px solid var(--line); }
.vi-course .code{ font-family:"Lora",serif; font-weight:800; font-size:1.7rem; color:var(--maroon); width:120px; flex-shrink:0; }
.vi-course:hover{ padding-left:.6rem; }
.vi-course:hover .code{ color:var(--gold); }

/* Quote band */
.vi-quote{ font-family:"Lora",serif; font-style:italic; }

/* Drop cap */
.vi-drop::first-letter{ font-family:"Lora",serif; font-weight:800; color:var(--maroon); font-size:3.4rem; line-height:.8; float:left; margin:.35rem .6rem 0 0; }

/* Prose links */
.vi-prose a{ color:var(--maroon); text-decoration:underline; text-underline-offset:3px; }
.vi-prose a:hover{ color:var(--gold); }

/* Ribbon */
.vi-ribbon{ display:inline-block; background:rgb(var(--brand)/.08); color:var(--maroon); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; border-radius:2px; }

/* Footer */
.vi-foot{ background:#2a1418; color:#cdbcbe; }
.vi-foot a:hover{ color:var(--gold); }