/* ==========================================================================
   ST. FRANCIS DE SALES PRE-UNIVERSITY COLLEGE
   contact.css — Contact Us page only (loaded alongside sfs.css + about.css).
   Defines no new colours, fonts or type scale of its own — every value comes
   from the shared design tokens already used across the site. Every rule is
   scoped under .sfspuc-contact-page so nothing here can leak into, or be
   overridden by, any other page.
   ========================================================================== */

.sfspuc-contact-page { background: var(--sfs-paper); }

.sfspuc-contact-main { background: var(--sfs-paper); }

.sfspuc-contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.sfspuc-contact-info .sfspuc-contact-intro { margin-top: 18px; }

.sfspuc-contact-cards {
  margin-top: 28px;
  display: grid; gap: 16px;
  list-style: none; padding: 0;
}
.sfspuc-contact-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px; border-radius: 16px;
  border: 1px solid var(--sfs-line); background: var(--sfs-white);
  transition: transform .35s var(--sfs-ease-out), box-shadow .35s var(--sfs-ease), border-color .3s;
}
.sfspuc-contact-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 18px 40px -30px rgba(7, 29, 67, .45);
}
.sfspuc-contact-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(13, 48, 108, .07); color: var(--sfs-blue);
}
.sfspuc-contact-card__icon svg { width: 20px; height: 20px; }
.sfspuc-contact-card__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .825rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sfs-amber-ink);
}
.sfspuc-contact-card__value {
  margin-top: 6px;
  font-family: var(--sfs-display); font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.45; color: var(--sfs-ink);
}
.sfspuc-contact-card__value a { transition: color .25s var(--sfs-ease); }
.sfspuc-contact-card__value a:hover { color: var(--sfs-blue); }

/* -------------------------------------------------------------------- */
/* Enquiry form                                                          */
/* -------------------------------------------------------------------- */
.sfspuc-contact-form-wrap {
  background: var(--sfs-white);
  border: 1px solid var(--sfs-line); border-radius: 20px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 30px 70px -48px rgba(7, 29, 67, .35);
}
.sfspuc-contact-form__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.845rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sfs-amber-ink);
}
.sfspuc-contact-form__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--sfs-amber); flex: none; }
.sfspuc-contact-form__title {
  margin-top: 12px;
  font-family: var(--sfs-display); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; color: var(--sfs-ink);
}

.sfspuc-contact-form { margin-top: 28px; display: grid; gap: 20px; }
.sfspuc-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sfspuc-contact-form-group { display: grid; gap: 8px; }
.sfspuc-contact-form-group label {
  font-family: var(--sfs-body); font-size: 0.905rem; font-weight: 700;
  letter-spacing: .02em; color: var(--sfs-ink-70);
}
.sfspuc-contact-input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--sfs-line); border-radius: 12px;
  background: var(--sfs-paper);
  font-family: var(--sfs-body); font-size: .95rem; color: var(--sfs-ink);
  transition: border-color .25s var(--sfs-ease), box-shadow .25s var(--sfs-ease), background-color .25s var(--sfs-ease);
}
.sfspuc-contact-input::placeholder { color: var(--sfs-ink-30); }
.sfspuc-contact-input:focus {
  outline: none; border-color: var(--sfs-blue); background: var(--sfs-white);
  box-shadow: 0 0 0 4px rgba(13, 48, 108, .12);
}
.sfspuc-contact-input:invalid:not(:placeholder-shown):not(:focus) { border-color: #C2554A; }
.sfspuc-contact-textarea { resize: vertical; min-height: 140px; }

.sfspuc-contact-form__note {
  padding: 14px 16px; border-radius: 10px;
  background: rgba(13, 48, 108, .06); color: var(--sfs-ink-70);
  font-family: var(--sfs-body); font-size: .86rem; line-height: 1.55;
}

.sfspuc-contact-submit { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------- */
/* Map                                                                   */
/* -------------------------------------------------------------------- */
.sfspuc-contact-map-section { background: var(--sfs-white); }
.sfspuc-contact-map {
  margin-top: clamp(28px, 4vw, 40px);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--sfs-line);
  box-shadow: 0 30px 70px -48px rgba(7, 29, 67, .3);
}
.sfspuc-contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 1080px) {
  .sfspuc-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sfspuc-contact-form-row { grid-template-columns: 1fr; }
  .sfspuc-contact-card { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .sfspuc-contact-card__icon { width: 40px; height: 40px; }
  .sfspuc-contact-map iframe { height: 320px; }
}