/* ============================================================
   Contact page styles.
   Loaded AFTER main.css + responsive.css so it wins by order.
   Scoped to Contact-page sections only.
   ============================================================ */

/* --- Local tokens --- */
.contact-info,
.enquiry,
.location,
.get-in-touch {
  --ust-hairline: oklch(87% 0.022 62deg);
  --ust-terra-900: #420d08;
  --ust-terra-700: #7f2d1f;
  --ust-blush-100: #ffe4d2;
  --ust-body-muted: oklch(53% 0.032 46deg);
  --ust-body-subtle: oklch(67% 0.034 52deg);
  --ust-paper: #f6ede2;
}

/* ============================================================
   1. SECTION HEADS — left-aligned, single column, hairline rule
      (Contact Information + Location)  [image4 / image17]
   ============================================================ */
.contact-section-head {
  display: block;
  max-width: 100%;            /* full-width hairline between header and cards */
  margin: 0 0 52px 0;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ust-hairline);
  text-align: left;
}
.contact-section-head .ust-eyebrow {
  text-align: left;
  margin-bottom: 14px;
}
.contact-section-head h2 {
  margin: 0 0 14px 0;
}
.contact-section-head p.desc {
  margin: 0;
  max-width: 58ch;           /* text stays constrained; the rule spans full width */
  color: var(--ust-body-muted);
}

/* Header already carries the section spacing — drop the grid's own top gap */
.contact-info .info-card-grid {
  margin-top: 0;
}
.location .contact-map {
  margin-top: 0;
}

/* ============================================================
   2. ENQUIRY — form in a white card + portrait photo beside it
      [image30]
   ============================================================ */
.enquiry .enquiry-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

/* Form now sits inside a white card */
.enquiry .enquiry-form-card {
  background: #fff;
  border: 1px solid var(--ust-hairline);
  border-radius: 14px;
  box-shadow: 0 1px 3px oklch(31% 0.09 32deg / 0.07);
  padding: clamp(32px, 3.4vw, 48px);
}
.enquiry .enquiry-form-card h2 {
  margin: 0 0 8px 0;
}

/* Bordered box inputs (design uses filled boxes, not underlines) */
.enquiry .enquiry-form-fields input,
.enquiry .enquiry-form-fields select,
.enquiry .enquiry-form-fields textarea {
  height: 52px;
  border: 1px solid var(--ust-hairline);
  border-bottom: 1px solid var(--ust-hairline);
  border-radius: 8px;
  background: #fff;
  padding: 0 14px;
  color: oklch(42% 0.03 44deg);
}
.enquiry .enquiry-form-fields select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f2d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.enquiry .enquiry-form-fields textarea {
  height: auto;
  min-height: 120px;
  padding: 14px;
  resize: vertical;
}
.enquiry .enquiry-form-fields input:focus,
.enquiry .enquiry-form-fields select:focus,
.enquiry .enquiry-form-fields textarea:focus {
  border-color: var(--ust-terra-700);
  box-shadow: 0 0 0 3px oklch(76% 0.12 71deg / 0.34);
  outline: none;
}

/* Submit + note on one row */
.enquiry .enquiry-submit-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.enquiry .enquiry-submit-row .form-note {
  margin: 0;
  color: var(--ust-body-subtle);
  font-size: 0.85rem;
}

/* Right column: portrait photo + office-hours card */
.enquiry .enquiry-side {
  display: block;
}
.enquiry .enquiry-photo {
  margin: 0;
  background: var(--ust-paper);
  padding: 15px;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 0 0.5px oklch(31% 0.09 32deg / 0.34))
    drop-shadow(0 2px 3px oklch(31% 0.09 32deg / 0.2))
    drop-shadow(0 10px 18px oklch(31% 0.09 32deg / 0.12));
  -webkit-mask:
    radial-gradient(7px at 50% 0, #0000 97%, #000) 50% 0 / 24px 100% repeat-x,
    radial-gradient(7px at 50% 100%, #0000 97%, #000) 50% 100% / 24px 100% repeat-x,
    radial-gradient(7px at 0 50%, #0000 97%, #000) 0 50% / 100% 24px repeat-y,
    radial-gradient(7px at 100% 50%, #0000 97%, #000) 100% 50% / 100% 24px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(7px at 50% 0, #0000 97%, #000) 50% 0 / 24px 100% repeat-x,
    radial-gradient(7px at 50% 100%, #0000 97%, #000) 50% 100% / 24px 100% repeat-x,
    radial-gradient(7px at 0 50%, #0000 97%, #000) 0 50% / 100% 24px repeat-y,
    radial-gradient(7px at 100% 50%, #0000 97%, #000) 100% 50% / 100% 24px repeat-y;
  mask-composite: intersect;
}
.enquiry .enquiry-photo img {
  display: block;
  width: 100%;
  height: clamp(320px, 34vw, 440px);
  object-fit: cover;
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.1);
}

/* Office hours: white card, sits below the photo */
.enquiry .office-hours-card {
  background: #fff;
  border: 1px solid var(--ust-hairline);
  border-radius: 14px;
  box-shadow: 0 1px 3px oklch(31% 0.09 32deg / 0.07);
  padding: 28px 26px;
  margin-top: 34px;
}
.enquiry .office-hours-card .ust-eyebrow {
  margin-bottom: 14px;
}
.enquiry .office-hours-card p {
  margin: 0;
  color: var(--ust-body-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ============================================================
   3. LOCATION MAP — proper placeholder look  [image17]
   ============================================================ */
.location .contact-map {
  height: clamp(320px, 36vw, 480px);
  background: var(--ust-paper);
  border: 1px dashed var(--ust-hairline);
  color: var(--ust-body-subtle);
  letter-spacing: 0.02em;
}

/* ============================================================
   4. GET IN TOUCH — left header + horizontal compact cards
      [image20]
   ============================================================ */
.get-in-touch .get-in-touch-head {
  display: block;
  max-width: 600px;
  margin: 0 0 44px 0;
  text-align: left;
}
.get-in-touch .get-in-touch-head .ust-eyebrow {
  text-align: left;
  margin-bottom: 14px;
}

.get-in-touch .info-card-grid {
  gap: 22px;
  margin-top: 0;
}

/* Horizontal card: icon left, title + description stacked right */
.get-in-touch .info-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  align-content: center;
  background: #fff;
  border: 0;
  border-radius: 14px;
  padding: 24px 26px;
}
.get-in-touch .info-card .info-card-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin-bottom: 0;
  background: var(--ust-blush-100);
  color: var(--ust-terra-700);
}
.get-in-touch .info-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  color: var(--ust-terra-900);
  font-size: 1.125rem;
  line-height: 1.24;
}
.get-in-touch .info-card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: var(--ust-body-muted);
  font-size: 0.88rem;
}
.get-in-touch .info-card:is(a):hover {
  background: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(31% 0.09 32deg / 0.28);
}

/* ============================================================
   Responsive — keep the desktop grids collapsing as before
   (this file loads after responsive.css, so re-assert here)
   ============================================================ */
@media only screen and (max-width: 1024px) {
  .enquiry .enquiry-layout {
    grid-template-columns: 1fr;
  }
  .enquiry .enquiry-photo {
    transform: none;
  }
}