/* Contacts page (pages/contact.html). Every rule is scoped to [data-page="contact"].
   Cards follow the Details contact pattern: who on the left, copy rows on the right from 1024px;
   stacked on phones and tablets. Tokens only; flat controls; no gradients here. */

[data-page="contact"] .contact-dir{grid-template-columns:minmax(0,1fr)}
[data-page="contact"] .contact-dir__who{display:grid;gap:4px;align-content:start}
/* The need is the card's H2: keep it a gold label, also when Meritta fails to load */
[data-page="contact"] h2.contact-card__role{text-transform:uppercase;text-wrap:pretty}
[data-page="contact"] .contact-dir__note{margin-top:8px;font:400 15px/22px var(--f-body);color:var(--text-2);max-width:30rem}
[data-page="contact"] .contact-dir__rows{margin-top:12px}
[data-page="contact"] .contact-dir__rows .copy-row:first-of-type{margin-top:0}
[data-page="contact"] .contact-dir__rows .copy-row:last-of-type{border-bottom:1px solid var(--line)}
[data-page="contact"] .contact-dir__card .copy-row__actions .btn{min-width:96px}
[data-page="contact"] .contact-dir__more{margin-top:4px}

/* The event facts line and the link to Details */
[data-page="contact"] .contact-event{display:grid;gap:8px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
[data-page="contact"] .contact-event__text{display:grid;gap:4px}
[data-page="contact"] .contact-event__line{font:500 20px/28px var(--f-serif);color:var(--ivory);text-wrap:pretty}

@media (max-width:767px){
  [data-page="contact"] .contact-dir__note{font-size:17px;line-height:26px}
}
@media (min-width:768px){
  /* A utility page: bring the first card up near the header instead of the full section gap */
  [data-page="contact"] .contact-main{padding-top:64px}
  [data-page="contact"] .contact-event{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
}
@media (min-width:1024px){
  [data-page="contact"] .contact-dir{gap:16px}
  [data-page="contact"] .contact-dir__card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;padding:32px}
  [data-page="contact"] .contact-dir__rows{margin-top:0}
  [data-page="contact"] .contact-event{margin-top:64px;padding-top:32px}
  [data-page="contact"] .contact-event__line{font-size:24px;line-height:32px}
}