/* ==========================================================================
   assets/pages/contact.css = the page <style> of pages/contact.html (copied verbatim): page "Contact"
   (template page-contact.php; prefix pg-contact-).
   Content: content/pages/brand/contact.json (RO). The one public channel is contact@doinavin.md
   (contact.email_general); phones, messengers and reply hours wait for CONTACT_CHANNELS and stay
   one quiet line; no form (FORM_ENDPOINT). Head: the address beside a courtyard photo; five
   subjects (mailto rows, the subject line filled in); the two addresses; the company details;
   a visit strip. Photos: the brand library (img/contact/). Layout only: kit tokens.
   ========================================================================== */
.pg-contact-sec { padding-block: var(--section); }
.pg-contact-sechead { display: grid; gap: var(--sp-3); max-width: 46rem; margin-bottom: var(--sp-7); }
.pg-contact-sechead h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }

/* head: the claim and the one public address beside the courtyard photo */
.pg-contact-head { padding-block: var(--sp-6) var(--sp-7); }
.pg-contact-head__grid { display: grid; gap: var(--sp-7); }
.pg-contact-head__text h1 { margin-top: var(--sp-2); }
.pg-contact-head__text .dvh-lead { margin-top: var(--sp-4); }
.pg-contact-mail { display: grid; gap: var(--sp-2); max-width: 34rem; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--ink); }
.pg-contact-mail__addr { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pg-contact-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.pg-contact-frame { margin: 0; overflow: clip; aspect-ratio: 3 / 2; border-radius: var(--radius-media); background: var(--band); }
.pg-contact-frame > img { width: 100%; height: 100%; object-fit: cover; }

/* the five subjects: what each one covers, the subject line its letter opens with, its mailto button */
.pg-contact-topics { border-top: 1px solid var(--line); }
.pg-contact-topic { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.pg-contact-topic h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pg-contact-topic p { max-width: var(--text-measure); text-wrap: pretty; }
.pg-contact-topic__text > * + * { margin-top: var(--sp-1); }
.pg-contact-topic .dvh-btn { justify-self: start; margin-top: var(--sp-2); }

/* the two addresses */
.pg-contact-places { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.pg-contact-place { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-5); background: var(--surface); border-radius: var(--radius-media); }
.pg-contact-place address { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-quote); font-style: normal; text-wrap: pretty; }
/* the map link may wrap (the kit's buttons never do): at 320 px (400 % zoom) its one line would push the card past
   the screen. Text flow instead of the kit's flex row, so the icon trails the last word; one line keeps the 44 px box. */
.pg-contact-place .dvh-btn--tertiary { display: block; max-width: 100%; margin-top: auto; padding-block: calc((var(--tap) - 1.2em) / 2); white-space: normal; text-align: start; }
.pg-contact-place .dvh-btn--tertiary .dvh-icon { display: inline-block; margin-inline-start: var(--sp-2); vertical-align: -0.125em; }

/* company details: the head beside the table */
.pg-contact-legal { display: grid; gap: var(--sp-6); }
.pg-contact-legal .pg-contact-sechead { margin-bottom: 0; }

@media (min-width: 600px) {
  .pg-contact-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
}
@media (min-width: 900px) {
  .pg-contact-head { padding-block: var(--sp-7) var(--sp-8); }
  .pg-contact-head__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center; }
  .pg-contact-frame { aspect-ratio: 4 / 3; }
  .pg-contact-topic { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); align-items: baseline; gap: var(--sp-2) var(--col-gap); padding-block: var(--sp-6); }
  .pg-contact-topic .dvh-btn { justify-self: end; margin-top: 0; }
  .pg-contact-place { padding: var(--sp-6); }
  .pg-contact-legal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
}