/* ==========================================================================
   Contact page (templates/pages/contact.html).
   Every class is prefixed contact-. Motion: transform/opacity only (the map pin's pulse rings scale + fade on the
   compositor and pause off-screen; the map fades in once loaded).
   ========================================================================== */

/* ---- channels ---- */
.contact-cards { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.contact-card { position: relative; display: grid; align-content: start; justify-items: center; gap: .55rem; padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem) clamp(1.25rem, 1rem + 1vw, 2rem); text-align: center; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.contact-card .icon-badge { margin-bottom: .45rem; }
.contact-card--feature { border-color: transparent; background: var(--navy-900); box-shadow: var(--shadow-2); }
.contact-card--feature .icon-badge { background: rgba(26, 143, 76, .16); color: #5fd38f; }
.contact-card__label { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.contact-card__value { font-family: var(--font-latin); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums; }
.contact-card--feature .contact-card__value { color: var(--white); }
.contact-card__value--email { font-family: var(--font-sans); font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); font-weight: 600; white-space: normal; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
@media (hover: hover) { .contact-card__value:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--gold-500); } }
.contact-card__note { color: var(--muted); font-size: var(--fs-small); }
.contact-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: .8rem; }
.contact-card__actions .btn-icon { color: var(--gold-700); }

/* ---- visit ---- */
.contact-visit__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .contact-visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; } }
.contact-visit__info .section-head { margin-bottom: var(--space-l); }
.contact-address { display: flex; align-items: flex-start; gap: 1rem; font-style: normal; font-size: var(--fs-lead); line-height: 1.75; color: var(--ink); }
.contact-address .icon-badge { margin-top: .25rem; }
.contact-address__lines { display: grid; }
.contact-address__meta { margin-top: .35rem; font-size: var(--fs-small); color: var(--muted); }
.contact-address__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: var(--space-m); }
.contact-directions { display: grid; gap: .85rem; margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--line); }
.contact-directions__item { display: flex; align-items: flex-start; gap: .85rem; color: var(--ink-soft); line-height: 1.7; }
.contact-directions__item .icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2em; color: var(--gold-600); }
.contact-hours { margin-top: var(--space-xl); padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.contact-hours__title { margin-bottom: .4rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--accent-ink); }
.contact-hours__list { margin: 0; }
.contact-hours__list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-small); }
.contact-hours__list > div:last-child { border-bottom: 0; }
.contact-hours__list dt { color: var(--muted); }
.contact-hours__list dd { margin: 0; font-weight: 600; color: var(--ink); }

/* ---- map (poster until the visitor asks for Google Maps) ---- */
.contact-map { position: relative; isolation: isolate; min-width: 0; height: clamp(400px, 100vw, 520px); border-radius: var(--r-xl); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-2); }
@media (min-width: 1000px) { .contact-map { min-height: 560px; height: 100%; } }
.contact-map__poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 2rem 1.5rem; text-align: center; color: var(--on-dark); --pattern-size: 64px; --pattern-opacity: .1; transition: opacity .6s var(--ease-out); }
.contact-map__poster.is-out { opacity: 0; pointer-events: none; }
/* the real facade behind the pin (the map itself loads only on request) */
.contact-map__photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.contact-map__photo picture, .contact-map__photo img { display: block; width: 100%; height: 100%; }
.contact-map__photo img { object-fit: cover; object-position: 50% 12%; }
.contact-map__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7, 21, 46, .55), rgba(7, 21, 46, .82) 55%, rgba(7, 21, 46, .92)); }
/* soft "streets": two long gold hairlines crossing behind the pin */
.contact-map__roads { position: absolute; inset: -20%; z-index: -1; pointer-events: none; background:
  linear-gradient(28deg, transparent calc(50% - 1px), rgba(194, 161, 95, .32) 50%, transparent calc(50% + 1px)),
  linear-gradient(-62deg, transparent calc(50% - 1px), rgba(194, 161, 95, .22) 50%, transparent calc(50% + 1px)),
  radial-gradient(closest-side, rgba(194, 161, 95, .16), transparent 70%); }
.contact-map__pin { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: .4rem; border-radius: 50%; background: var(--gold-500); color: var(--navy-950); box-shadow: 0 0 0 8px rgba(194, 161, 95, .18); }
.contact-map__pin > .icon { width: 34px; height: 34px; --icon-stroke: 1.7; }
.contact-map__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(211, 183, 124, .75); opacity: 0; pointer-events: none; }
html[data-motion="full"] .contact-map__ring { animation: contact-pulse 3.2s var(--ease-out) infinite; }
html[data-motion="full"] .contact-map__ring--late { animation-delay: 1.6s; }
.contact-map.is-paused .contact-map__ring { animation-play-state: paused; }
@keyframes contact-pulse { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 2.4; } }
.contact-map__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--white); line-height: 1.3; }
.contact-map__coords { color: var(--on-dark-soft); font-size: var(--fs-small); }
.contact-map__coords span { font-family: var(--font-latin); font-weight: 600; letter-spacing: .04em; }
.contact-map [data-map-load] { margin-top: .6rem; }
.contact-map__note { max-width: 24rem; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.contact-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .7s var(--ease-out); }
.contact-map__frame.is-loaded { opacity: 1; }

/* ---- careers line ---- */
.contact-careers { padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); border-top: 1px solid var(--line); }
.contact-careers__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; text-align: center; }
.contact-careers__text { font-weight: 600; color: var(--ink); }
.contact-directions__ask .link-arrow { color: var(--whatsapp-ink); }