/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.85em 1.6em;
  border-radius:var(--radius-pill);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.btn-primary{
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow:0 10px 24px -12px rgba(var(--shadow-color), .55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(var(--shadow-color), .6); }
.btn-ghost{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-strong); }
[data-theme="dark"] .btn-ghost:hover{ color:var(--accent); }
.btn-sm{ padding:.6em 1.2em; font-size:.82rem; }
.btn-block{ width:100%; justify-content:center; }
.btn svg{ width:1em; height:1em; transition:transform var(--dur-fast) var(--ease-out); }
.btn-primary:hover svg{ transform:translateX(3px); }

/* ---------- Official seal / stamp badge (signature element) ---------- */
.seal{
  --seal-size: 168px;
  width:var(--seal-size); height:var(--seal-size);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.seal__ring{
  position:absolute; inset:0;
  animation:seal-spin 26s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .seal__ring{ animation:none; } }
.seal__ring text{
  font-family:var(--font-mono);
  font-size:7.6px;
  letter-spacing:3px;
  fill:var(--accent-strong);
  text-transform:uppercase;
}
[data-theme="dark"] .seal__ring text{ fill:var(--accent); }
.seal__core{
  position:absolute; inset:22%;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -12px rgba(var(--shadow-color),.5) inset;
}
.seal__core svg{ width:46%; height:46%; color:var(--accent-strong); }
[data-theme="dark"] .seal__core svg{ color:var(--accent); }
@keyframes seal-spin{ to{ transform:rotate(360deg); } }

/* ---------- Docket meta strip (file-number line) ---------- */
.docket{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--muted);
  padding:.5em 1em;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-pill);
}
.docket .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ---------- Stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--space-m);
}
.stat{
  border-left:1px solid var(--line-strong);
  padding-left:var(--space-s);
}
.stat b{
  display:block;
  font-family:var(--font-display);
  font-size:var(--step-3);
  color:var(--ink);
  line-height:1;
}
.stat span{
  font-size:var(--step--1); color:var(--muted);
}
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-l) var(--space-m); } }

/* ---------- Generic surface card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -28px rgba(var(--shadow-color),.55);
  border-color:var(--line-strong);
}

/* ---------- Program card ---------- */
.program-card{ padding:var(--space-l); display:flex; flex-direction:column; gap:var(--space-s); height:100%; }
.program-card .tag{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-strong);
  padding:.3em .8em; border:1px solid currentColor; border-radius:var(--radius-pill);
}
[data-theme="dark"] .program-card .tag{ color:var(--accent); }
.program-card h3{ font-size:var(--step-2); }
.program-card p{ color:var(--ink-soft); }
.program-card .more{
  margin-top:auto; display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; color:var(--accent-strong);
}
[data-theme="dark"] .program-card .more{ color:var(--accent); }
.program-card .more svg{ width:1em; height:1em; transition:transform var(--dur-fast); }
.program-card:hover .more svg{ transform:translateX(4px); }

/* ---------- Faculty / people card ---------- */
.people-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-l);
}
.people-card{ overflow:hidden; }
.people-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.people-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.people-card:hover .people-card__media img{ transform:scale(1.06); }
.people-card__body{ padding:var(--space-m); }
.people-card__body .role{ color:var(--accent-strong); font-size:var(--step--1); font-weight:600; }
[data-theme="dark"] .people-card__body .role{ color:var(--accent); }

/* ---------- Campus gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m);
}
.gallery figure{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius-m);
  aspect-ratio:4/5;
}
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.gallery figure:hover img{ transform:scale(1.08); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--space-m) var(--space-s) var(--space-s);
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:#fff; font-size:var(--step--1); font-weight:500;
}
@media (max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- Testimonial ---------- */
.quote-card{ padding:var(--space-l); display:flex; flex-direction:column; gap:var(--space-m); }
.quote-card__mark{ font-family:var(--font-display); font-size:2.4rem; color:var(--accent); line-height:.6; }
.quote-card p{ color:var(--ink-soft); flex:1; }
.quote-card__who{ display:flex; align-items:center; gap:.75rem; }
.quote-card__who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.quote-card__who .avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--surface-2); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
}
[data-theme="dark"] .quote-card__who .avatar{ color:var(--accent); }
.quote-card__who b{ display:block; font-size:var(--step--1); }
.quote-card__who span{ display:block; font-size:.78rem; color:var(--muted); }

/* ---------- Blog card ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-l); }
.blog-card{ overflow:hidden; display:flex; flex-direction:column; }
.blog-card__media{ aspect-ratio:16/10; overflow:hidden; }
.blog-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.blog-card:hover .blog-card__media img{ transform:scale(1.07); }
.blog-card__body{ padding:var(--space-m); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.blog-card__date{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.blog-card__body h3{ font-size:var(--step-1); }
.blog-card__body p{ color:var(--ink-soft); font-size:var(--step--1); flex:1; }
.blog-card__body .more{ font-weight:600; color:var(--accent-strong); display:inline-flex; align-items:center; gap:.4em; }
[data-theme="dark"] .blog-card__body .more{ color:var(--accent); }
@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.form-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:clamp(1.5rem, 1rem + 3vw, 3.25rem);
}
.field{ margin-bottom:var(--space-m); }
.field label{
  display:block; margin-bottom:.5em;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft);
}
.field .req{ color:var(--accent-strong); }
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea{
  width:100%;
  padding:.85em 1em;
  background:var(--bg-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(169,120,46,.18);
}
.field-file{
  position:relative;
  border:1.5px dashed var(--line-strong);
  border-radius:var(--radius-s);
  padding:1.4em 1em;
  text-align:center;
  cursor:pointer;
  background:var(--bg-raised);
  transition:border-color var(--dur-fast);
}
.field-file:hover{ border-color:var(--accent); }
.field-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.field-file .fname{ font-size:.82rem; color:var(--muted); margin-top:.4em; display:block; }

.form-grid{ display:grid; grid-template-columns:repeat(12,1fr); row-gap:var(--space-m); column-gap:var(--space-s); }
.col-12{ grid-column:span 12; }
.col-6{ grid-column:span 6; }
.col-4{ grid-column:span 4; }
.col-3{ grid-column:span 3; }
.col-8{ grid-column:span 8; }
.col-12,.col-6,.col-4,.col-3,.col-8{ min-width:0; }
@media (max-width:720px){
  .col-6,.col-4,.col-3,.col-8{ grid-column:span 12; }
}

.form-divider{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:1em;
  margin:.5em 0 .25em;
}
.form-divider .num{
  font-family:var(--font-mono); color:var(--accent-contrast); background:var(--accent);
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0;
}
.form-divider h4{ font-size:var(--step-0); white-space:nowrap; }
.form-divider hr{ flex:1; border:0; border-top:1px solid var(--line); }

.doc-checklist{ columns:2; column-gap:var(--space-l); }
.doc-checklist li{
  break-inside:avoid;
  position:relative; padding-left:1.6em; margin-bottom:.7em;
  font-size:var(--step--1); color:var(--ink-soft);
}
.doc-checklist li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:.85em; height:.85em; border-radius:3px;
  border:1.5px solid var(--accent-strong);
}
[data-theme="dark"] .doc-checklist li::before{ border-color:var(--accent); }
@media (max-width:640px){ .doc-checklist{ columns:1; } }

/* ---------- Lock / gated content panel ---------- */
.gate-icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--surface-2); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
  margin-inline:auto; margin-bottom:var(--space-s);
}
[data-theme="dark"] .gate-icon{ color:var(--accent); }
.gate-icon svg{ width:26px; height:26px; }

/* ---------- Map frame ---------- */
.map-frame{
  border-radius:var(--radius-l); overflow:hidden;
  border:1px solid var(--line);
  filter:grayscale(.15);
}
[data-theme="dark"] .map-frame{ filter:grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ---------- Social icon (contact page) ---------- */
.social-row{ display:flex; gap:.6rem; justify-content:center; }
.social-row a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.social-row a:hover{ border-color:var(--accent); color:var(--accent-strong); transform:translateY(-3px); }
[data-theme="dark"] .social-row a:hover{ color:var(--accent); }

/* ---------- Back-to link ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--step--1); font-weight:600; color:var(--ink-soft);
  margin-bottom:var(--space-m);
}
.back-link:hover{ color:var(--accent-strong); }
.back-link svg{ width:1em; height:1em; }

/* ---------- Generic data table (attendance records etc.) ---------- */
.table-wrap{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.table-wrap table{ width:100%; border-collapse:collapse; }
.table-wrap thead{ background:var(--surface-2); }
.table-wrap th{
  text-align:left; padding:.9em 1.2em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.table-wrap td{
  padding:.9em 1.2em; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:var(--step--1);
}
.table-wrap tbody tr:hover{ background:var(--bg-raised); }
.filter-bar{ display:flex; gap:.75rem; margin-bottom:var(--space-l); flex-wrap:wrap; }
.filter-bar input[type=month]{
  padding:.8em 1em; border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink);
}