/* ============================================================
   SV INSTITUTE – COMPONENTS EXTENDED
   Module 1 Patch: Page Banner · Breadcrumb · Contact Info ·
                   Office Hours · Form Check · Form Message
   ============================================================
   Append this content to assets/css/components.css
   or include as a separate <link> after components.css
   ============================================================ */

/* ── PAGE BANNER ─────────────────────────────────────────── */
.svi-page-banner {
  background:    var(--svi-gradient-dark);
  padding:       4rem 0 3rem;
  position:      relative;
  overflow:      hidden;
}
.svi-page-banner::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 70% 50%, rgba(30,136,229,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.svi-page-banner__title {
  font-size:   clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color:       var(--svi-white);
  margin:      0.5rem 0 0.75rem;
  line-height: 1.2;
}
.svi-page-banner__subtitle {
  color:     rgba(255,255,255,0.72);
  font-size: var(--svi-text-lg);
  margin:    0;
  max-width: 520px;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.svi-breadcrumb {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.35rem;
  align-items: center;
  list-style:  none;
  padding:     0;
  margin:      0 0 0.75rem;
  font-size:   var(--svi-text-xs);
}
.svi-breadcrumb li {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  color:       rgba(255,255,255,0.55);
}
.svi-breadcrumb li + li::before {
  content: '/';
  opacity: 0.5;
}
.svi-breadcrumb li a {
  color:           rgba(255,255,255,0.72);
  text-decoration: none;
  transition:      color 0.2s;
}
.svi-breadcrumb li a:hover { color: var(--svi-white); }

/* ── CONTACT INFO LIST ───────────────────────────────────── */
.svi-contact-info { display: flex; flex-direction: column; gap: 1.35rem; }

.svi-contact-info__item {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}
.svi-contact-info__icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   var(--svi-radius-md);
  background:      var(--svi-blue-light);
  color:           var(--svi-blue-dark);
  font-size:       1.2rem;
  flex-shrink:     0;
  transition:      var(--svi-transition);
}
.svi-contact-info__item:hover .svi-contact-info__icon-wrap {
  background: var(--svi-gradient);
  color:      var(--svi-white);
}
.svi-contact-info__label {
  display:       block;
  font-size:     var(--svi-text-xs);
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:         var(--svi-text-muted);
  margin-bottom: 0.2rem;
}
.svi-contact-info__value {
  display:         block;
  font-size:       var(--svi-text-base);
  font-weight:     600;
  color:           var(--svi-navy);
  text-decoration: none;
  transition:      color 0.2s;
  line-height:     1.4;
}
a.svi-contact-info__value:hover { color: var(--svi-blue); }

/* ── OFFICE HOURS ────────────────────────────────────────── */
.svi-office-hours {
  background:    var(--svi-bg);
  border-radius: var(--svi-radius-md);
  padding:       1.25rem 1.5rem;
  border:        1px solid var(--svi-border);
}
.svi-office-hours__title {
  font-size:     var(--svi-text-sm);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: 0.85rem;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}
.svi-office-hours__title i { color: var(--svi-blue); }
.svi-office-hours__list { display: flex; flex-direction: column; gap: 0.5rem; }
.svi-office-hours__list li {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       var(--svi-text-sm);
  color:           var(--svi-text);
  padding-bottom:  0.5rem;
  border-bottom:   1px solid var(--svi-border);
}
.svi-office-hours__list li:last-child { border-bottom: none; padding-bottom: 0; }
.svi-office-hours__list li span:first-child { color: var(--svi-text-muted); }
.svi-office-hours__list li span:last-child  { font-weight: 600; color: var(--svi-navy); }

/* ── FORM CARD EXTENDED ──────────────────────────────────── */
.svi-form-card__title {
  font-family:   var(--svi-font-heading);
  font-size:     var(--svi-text-2xl);
  font-weight:   800;
  color:         var(--svi-navy);
  margin-bottom: 0.35rem;
}
.svi-form-card__subtitle {
  font-size:     var(--svi-text-sm);
  color:         var(--svi-text-muted);
  margin-bottom: var(--svi-space-lg);
  line-height:   1.7;
}

/* ── FORM CHECKBOX ───────────────────────────────────────── */
.svi-form-group--check { margin-bottom: var(--svi-space-md); }
.svi-form-check-label {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text-muted);
  cursor:      pointer;
  line-height: 1.6;
}
.svi-form-check-input {
  width:         18px;
  height:        18px;
  flex-shrink:   0;
  accent-color:  var(--svi-blue);
  margin-top:    0.15rem;
  cursor:        pointer;
  border-radius: 3px;
}
.svi-form-check-label a {
  color:     var(--svi-blue);
  font-weight: 600;
}
.svi-form-check-label a:hover { color: var(--svi-blue-dark); }

/* ── FORM MESSAGE (success / error alert) ────────────────── */
.svi-form-message {
  padding:       1rem 1.25rem;
  border-radius: var(--svi-radius-sm);
  font-size:     var(--svi-text-sm);
  font-weight:   500;
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
}
.svi-form-message--success {
  background:   #DCFCE7;
  color:        #166534;
  border:       1px solid #BBF7D0;
}
.svi-form-message--error {
  background:   #FEE2E2;
  color:        #991B1B;
  border:       1px solid #FECACA;
}