/* ==========================================================================
   Enigma — Kontakt: day arc, contact cards, click-to-load map
   ========================================================================== */

.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-l); padding: var(--space-m) var(--gutter) var(--space-xl); }

/* ---------- Day arc: where "now" sits inside opening hours ---------- */
.dayarc { position: relative; align-self: start; display: grid; justify-items: center; }
.dayarc__svg { width: 100%; max-width: 520px; overflow: visible; }
.dayarc__track { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.dayarc__open { fill: none; stroke: var(--fuchsia); stroke-width: 2.5; stroke-linecap: round; }
.dayarc__tick { stroke: var(--line-strong); stroke-width: 1; }
.dayarc__label { fill: var(--muted); font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.dayarc__sun { fill: #F7A35C; filter: drop-shadow(0 0 10px rgba(247, 163, 92, 0.75)); transition: fill 600ms; }
.dayarc.is-closed .dayarc__sun { fill: var(--pearl-2); stroke: var(--line-strong); filter: none; }
.dayarc__read { position: absolute; left: 0; right: 0; bottom: 4%; display: grid; justify-items: center; gap: 0.15rem; text-align: center; }
.dayarc__time { font-family: var(--f-serif); font-size: clamp(3.2rem, 2rem + 4vw, 6rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.dayarc__where { font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--muted); }
.dayarc__status { margin-top: 0.6rem; font-size: 0.9rem; }

/* ---------- Cards ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ccard { display: grid; align-content: start; justify-items: start; gap: 0.6rem; padding: clamp(1.25rem, 2.4vw, 2.25rem); background: var(--pearl); }
.ccard p:not(.label) { color: var(--muted); }
.ccard__big { font-family: var(--f-serif); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.05; color: var(--cocoa); }
a.ccard__big:hover { color: var(--fuchsia); }
.ccard__ig { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; }
.ccard__ig:hover { color: var(--fuchsia); }
.hours { display: grid; width: 100%; gap: 0.15rem; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; }
.hours__row dd { font-variant-numeric: tabular-nums; }
.hours__row.is-today { font-weight: 600; color: var(--fuchsia); }

/* ---------- Map ---------- */
.contact__map {
  grid-column: 1 / -1; position: relative; overflow: hidden; aspect-ratio: 2.6 / 1; border-radius: var(--r-pill);
  background: radial-gradient(circle at 30% 40%, rgba(192, 24, 92, 0.08), transparent 45%), var(--pearl-2) var(--grain);
}
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) sepia(0.15); }
.contact__map-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.contact__map-title { font-family: var(--f-serif); font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height: 1; }
.contact__map.is-loaded .contact__map-cover { display: none; }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; }
  .contact__map { aspect-ratio: 1.2 / 1; border-radius: var(--r-card); }
}
@media (max-width: 560px) { .contact__grid { grid-template-columns: 1fr; } }