/* ==========================================================================
   Janković — kontakt: the door sign tells the truth (Podgorica time)
   ========================================================================== */

.contact-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-m); }

.sign { justify-self: center; width: min(100%, 420px); touch-action: pan-y; }
.sign__svg { width: 100%; height: auto; overflow: visible; }
.sign__board { transform-origin: 180px 24px; }
.sign__cord { fill: none; stroke: var(--karamel); stroke-width: 2.4; stroke-linecap: round; }
.sign__nail { fill: var(--karamel-hi); stroke: #7A5520; stroke-width: 1.5; }
.sign__plate { fill: var(--cream); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); transition: fill 500ms; }
.sign__inner { fill: none; stroke: var(--malina); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; transition: stroke 500ms; }
.sign__hole { fill: var(--ganache); }
.sign__word { font-family: var(--f-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-weight: 600; font-size: 42px; letter-spacing: 0.03em; fill: var(--malina); transition: fill 500ms; }
.sign__sub { font-family: var(--f-display); font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: 22px; fill: rgba(42, 20, 13, 0.7); transition: fill 500ms; }
[data-sign-face] { transform-box: fill-box; transform-origin: 50% 50%; }
.sign.is-closed .sign__plate { fill: var(--ganache-3); }
.sign.is-closed .sign__inner { stroke: var(--karamel); }
.sign.is-closed .sign__word { fill: var(--cream); }
.sign.is-closed .sign__sub { fill: rgba(247, 235, 221, 0.7); }
.sign.is-closed .sign__hole { fill: var(--ganache-2); }

@media (max-width: 860px) {
  .contact-hero { grid-template-columns: 1fr; }
  .sign { width: min(80%, 340px); }
}

/* ---------- Cards ---------- */
.contact { padding: var(--space-l) 0 var(--space-xl); }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ccard { display: grid; align-content: start; justify-items: start; gap: 0.9rem; padding: clamp(1.4rem, 2.5vw, 2.2rem); border-radius: var(--r-card); background: var(--ganache-3); box-shadow: inset 0 0 0 1px var(--line); }
.ccard--wide { grid-column: 1 / -1; }
.contact__phones { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1.5rem, 4vw, 4rem); }
.contact__phones a {
  font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 300;
  font-size: clamp(2.4rem, 1rem + 5.4vw, 6rem); line-height: 1.02; letter-spacing: -0.03em;
  background: linear-gradient(var(--malina-hi), var(--malina-hi)) 0 94% / 0 3px no-repeat; transition: background-size 800ms var(--ease-out);
}
.contact__phones a:hover { background-size: 100% 3px; }
.ccard__big { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.1; }
.ccard__big .arrow { transition: transform var(--t-med) var(--ease-out); }
.ccard__big:hover .arrow { transform: translateX(5px); }
.ccard__status { font-size: var(--fs-small); color: var(--muted); }
.hours { display: grid; width: 100%; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.hours__row:last-child { color: var(--muted); }
.hours__row.is-today { color: var(--karamel-hi); font-weight: 600; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }