/* ==========================================================================
   Contact page — scoped under .page-contact
   ========================================================================== */

/* ---------- Contact cards ---------- */
.page-contact .contact-cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
/* Five cards: 2 columns on tablet (last card spans the row), then 3 + 2 on wide screens. */
@media (min-width: 640px) {
  .page-contact .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-contact .contact-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .page-contact .contact-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-contact .contact-card { grid-column: span 2; }
  .page-contact .contact-card:nth-child(n + 4) { grid-column: span 3; }
}
.page-contact .contact-card { padding: var(--space-5); }
.page-contact .contact-card h3 { font-size: var(--fs-lg); }
.page-contact .contact-card address { font-style: normal; color: var(--ink-700); margin-bottom: var(--space-3); }
.page-contact .contact-card__meta { font-size: var(--fs-sm); color: var(--color-muted); }
.page-contact .contact-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.page-contact .contact-card__list a { font-weight: 800; font-size: var(--fs-lg); text-decoration: none; }
.page-contact .contact-card__list a:hover { text-decoration: underline; }
.page-contact .contact-card__label {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted);
}
/* The link text carries a <wbr> after the @, so it only ever wraps there. */
.page-contact .contact-card__email { font-weight: 800; overflow-wrap: normal; word-break: normal; }
.page-contact .card__icon--whatsapp { background: var(--green-100); color: var(--green-600); }

/* ---------- How to find us + map ---------- */
.page-contact .contact-find {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .page-contact .contact-find { grid-template-columns: 1fr 1.15fr; }
}
.page-contact .contact-find .check-list { margin-block: var(--space-5) var(--space-6); }

.page-contact .contact-find__photo { margin: var(--space-6) 0 0; }
.page-contact .contact-find__photo picture { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.page-contact .contact-find__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.page-contact .contact-find__photo figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }
.page-contact .contact-map__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-lg);
  background:
    repeating-linear-gradient(135deg, var(--green-50) 0 14px, var(--cream-100) 14px 28px);
}
.page-contact .contact-map__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  .page-contact .contact-map__frame { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
}
.page-contact .contact-map__fallback { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-muted); text-align: center; }

/* ---------- Form ---------- */
.page-contact .contact-form-wrap {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 960px) {
  .page-contact .contact-form-wrap { grid-template-columns: 0.85fr 1.15fr; }
}
.page-contact .contact-form {
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.page-contact .contact-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Social ---------- */
.page-contact .contact-social__title { font-size: var(--fs-lg); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.page-contact .contact-social { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.page-contact .contact-social a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-800);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--dur), color var(--dur);
}
.page-contact .contact-social a:hover { background: var(--green-700); color: var(--white); }

/* ---------- FAQ ---------- */
.page-contact .accordion details > div p:last-child { margin-bottom: 0; }