/* ==========================================================================
   Contact page — page head with three actions, address card + reach cards,
   compact enquiry (styles in enquiry-form.css), link tiles, student portal
   row. Requires tokens.css + base.css + enquiry-form.css (page head and
   breadcrumb styles come from there). Mobile-first (360).
   ========================================================================== */

.page-contact .page-head { border-bottom: 1px solid var(--c-line); }
.page-contact .page-head__text { max-width: 72ch; }
.page-contact .page-head__text .btn-row { width: 100%; margin-top: var(--s-1); }

/* Three actions: full width on phones, a row from 640 */
@media (min-width: 640px) {
  .contact-actions > .btn { flex: 1 1 auto; white-space: nowrap; }
}
@media (min-width: 960px) {
  .contact-actions > .btn { flex: 0 1 auto; }
}

/* Find us: address card + reach cards ------------------------------------ */
.contact-grid { display: grid; gap: var(--s-3); align-items: stretch; }
.contact-address address { font-style: normal; color: var(--c-text); line-height: var(--lh-body); }
.contact-address__landmark { color: var(--c-text-muted); font-size: var(--fs-sm); }
.contact-address .btn-row { margin-top: var(--s-1); }

.contact-reach { grid-template-columns: 1fr; }
.reach-card__value {
  font-family: var(--ff-display);
  font-size: 1.125rem;
  color: var(--c-slate);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  overflow-wrap: anywhere;
}
.reach-card__value:hover { color: var(--c-charcoal); text-decoration: underline; }
.reach-card__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }

@media (min-width: 640px) {
  .contact-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-4); }
  .contact-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* Quick enquiry: centred compact form ----------------------------------- */
.contact-enq { max-width: 560px; margin-inline: auto; }
.contact-enq__more { margin-top: var(--s-2); text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.contact-enq__more a { color: var(--c-link-text); }

/* Student portal row ------------------------------------------------------- */
.contact-portal { max-width: 760px; margin-inline: auto; gap: var(--s-3); }
.contact-portal__text { display: grid; gap: var(--s-1); }
.contact-portal .btn { width: 100%; }
@media (min-width: 640px) {
  .contact-portal { flex-direction: row; align-items: center; justify-content: space-between; }
  .contact-portal .btn { width: auto; flex: 0 0 auto; }
}