/* Contact page (contact.php): form card beside contact cards, the visit /
   collect card and the FAQ teaser. Form fields are styled by site.css. */

.contact-pill { text-decoration: none; min-height: 32px; transition: border-color var(--t), color var(--t); }
.contact-pill:hover { border-color: var(--line-2); color: var(--ink); }

/* ---------- Hero ---------- */
.contact-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
}
@media (max-width: 960px) { .contact-hero__grid { grid-template-columns: minmax(0, 1fr); } }

.contact-checklist { box-shadow: var(--shadow); }
.contact-checklist__title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}
.contact-checklist__title .icon { width: 16px; height: 16px; }
.contact-checklist__list { list-style: none; margin: 0; padding: 0; counter-reset: ck; display: grid; gap: .85rem; }
.contact-checklist__list li { counter-increment: ck; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .8rem; align-items: start; }
.contact-checklist__list li::before {
  content: counter(ck); grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--ink); color: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
}
.contact-checklist__list strong { color: var(--ink); font-size: .96rem; line-height: 1.35; }
.contact-checklist__list span { color: var(--ink-3); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- Two columns ---------- */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Form ---------- */
.contact-form-card { padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 16px); }
.contact-form-card .form-card__head { margin-bottom: .6rem; }
.contact-form-card .form-card__head h2 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); }
.contact-form-card__lead { margin: 0 0 1.4rem; color: var(--ink-3); }
.contact-form-card .field textarea { min-height: 170px; }
.contact-form-card__foot { margin: 0; }
.contact-form-card__foot .icon { color: var(--ink-3); vertical-align: -3px; margin-right: .2rem; }

.contact-sent { text-align: center; padding: clamp(16px, 4vw, 40px) 0; }
.contact-sent__icon {
  width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok-soft); color: var(--ok);
}
.contact-sent__icon .icon { width: 32px; height: 32px; }
.contact-sent h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: .35em; }
.contact-sent p { color: var(--ink-2); margin: 0 auto 1.5rem; max-width: 42ch; }
.contact-sent__next { justify-content: center; }

/* ---------- Contact cards ---------- */
.contact-aside { display: grid; gap: .9rem; }
.contact-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: .9rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  color: inherit; text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.contact-card:hover { color: inherit; border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.contact-card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.contact-card__icon .icon { width: 20px; height: 20px; }
.contact-card__text { min-width: 0; }
.contact-card__k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.contact-card__v { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.contact-card__note { display: block; margin-top: .1rem; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.contact-card__go { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t), color var(--t); }
.contact-card:hover .contact-card__go { transform: translateX(2px); color: var(--accent-ink); }

/* Visit / collect */
.contact-visit { padding: 1.1rem 1.1rem 1.2rem; }
.contact-visit__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .9rem; align-items: center; margin-bottom: .9rem; }
.contact-visit__addr { font-style: normal; color: var(--ink-2); line-height: 1.6; margin: 0 0 .9rem; }
.contact-hours { margin: 0; display: grid; gap: .3rem; font-size: .9rem; }
.contact-hours > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--line); }
.contact-hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-hours dt { color: var(--ink-3); }
.contact-hours dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-visit__note { margin: 1rem 0; font-size: .9rem; }

/* ---------- FAQ teaser ---------- */
.contact-teaser__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-weight: 650; font-size: .92rem; text-decoration: none; }
.contact-teaser__more .icon { width: 16px; height: 16px; }
.contact-teaser__more:hover { text-decoration: underline; }