/* ==========================================================================
   Krishen Khanna — /contact/ (with shop.css: the form fields, notices and the offices' type)
   The hero (partials/page-hero.html split, main.css .page-hero): the portrait whole beside the title, with the email
   address and the telephone. Then the form in the hero's text column and the two offices in the picture's column,
   so both rows share one pair of columns. On a phone: picture, title and the two ways in, the form, then the offices.
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* the two direct ways in: a label column (the offices' eyebrow type) and the address or number */
.contact-ways { margin: 0; display: grid; row-gap: 12px; }
.contact-ways__row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.contact-ways dt { margin: 0; line-height: inherit; }
.contact-ways dd { margin: 0; font-size: 1.65rem; line-height: 3.1rem; overflow-wrap: anywhere; }
.contact-ways a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-ways a:hover { color: var(--grey-1); text-decoration: underline; } }   /* a tapped link would keep it */
.contact-ways a:focus-visible { text-decoration: underline; }
/* touch: the rows 44px apart, so each link's invisible 44px pad (main.css, touch tap targets) has a row of its own */
@media (max-width: 768px), (pointer: coarse) { .contact-ways { row-gap: 14px; } }
.contact-hero--plain { margin-bottom: 0; }

/* the form row under the hero. shop.css places .contact__links and .contact__body for the old photograph-beside-form
   layout (rows 1–2); here each takes row 1 of its own column, and the offices stack in theirs */
.contact-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y) var(--gap-x); margin-top: var(--section-y); }
.contact-main .contact__links { margin-top: 0; }
.contact__form-title { margin-bottom: 1.2em; line-height: inherit; }
/* the address and number in the "form not working" notice (contact.js) and the no-script #not-sent never break */
.contact__body .notice a, .contact__body a[href^="tel:"] { white-space: nowrap; }   /* a number never breaks inside */
@media (min-width: 1024px) {
  .contact-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .contact-main .contact__body { grid-column: 2; grid-row: 1; padding-left: 50px; }   /* = .page-hero__body */
  .contact-main .contact__links { grid-column: 1; grid-row: 1; align-self: start; margin-top: 0; padding-top: 0;
    border-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

/* phone and tablet: a shorter picture, so the title, the two ways in and the top of the form come sooner */
@media (max-width: 1023px) {
  .contact-hero { row-gap: 30px; }
  .contact-hero .page-hero__media img { max-height: min(36svh, 420px); }
  .contact-main { row-gap: var(--section-y); margin-top: 40px; }
}
@media (max-width: 460px) {
  .contact-ways__row { grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 12px; }
  .contact-ways dd { font-size: 1.55rem; }
}

/* the portrait holds its place before it arrives (960 × 800, drawn whole, at the split hero's limits): no jump in the page */
.contact-hero .page-hero__pic { aspect-ratio: 960 / 800; width: min(100%, calc(min(36svh, 420px) * 960 / 800)); }
.contact-hero .page-hero__pic img { width: 100%; height: auto; max-height: none; }
@media (min-width: 1024px) {
  .contact-hero .page-hero__pic { width: min(100%, 38vw, calc(min(calc(100svh - var(--header-h) - 170px), 720px) * 960 / 800)); }
}