/* ==========================================================================
   Corporate Projukti — Redesign :: Contact
   Page-specific layout only. Form components live in system.css.
   ========================================================================== */

/* ---- Contact detail rows ----------------------------------------------- */

.rd-contact-rows { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }

.rd-contact-row { display: flex; gap: var(--sp-4); align-items: flex-start; }

.rd-contact-icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--tile-bg);
    color: var(--accent-ink);
}

.rd-contact-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--tx-3);
}

.rd-contact-value {
    display: block;
    margin-top: var(--sp-2);
    color: var(--tx-1);
    font-style: normal;
    line-height: 1.55;
}

.rd-contact-value a { transition: color var(--t); }
.rd-contact-value a:hover { color: var(--accent-ink); }

/* ---- Photo cluster ----------------------------------------------------- */

.rd-contact-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    overflow: hidden;
}

.rd-contact-shot {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}

.rd-contact-shot img { width: 100%; height: 100%; object-fit: cover; }

/* The counter cell reuses the slab cell language rather than a card. */
.rd-contact-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    min-height: 190px;
    overflow: hidden;
    box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}

.rd-contact-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 10%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 60%),
        radial-gradient(circle at 86% 90%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 60%);
    pointer-events: none;
}

.rd-contact-stat > * { position: relative; }

@media (max-width: 520px) {
    .rd-contact-shot, .rd-contact-stat { min-height: 160px; }
}

/* ---- Form panel -------------------------------------------------------- */

.rd-form-panel {
    position: relative;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: var(--sp-12) var(--sp-10);
    overflow: hidden;
}

.rd-form-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 52%),
        radial-gradient(circle at 88% 100%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 52%);
    pointer-events: none;
}

.rd-form-panel > * { position: relative; }

@media (max-width: 620px) {
    .rd-form-panel { padding: var(--sp-10) var(--sp-6); }
}

/* ---- Map ---------------------------------------------------------------
   The embed arrives from settings with its own width/height attributes,
   so they are overridden here and the frame constrains it.
   ------------------------------------------------------------------------ */

.rd-map {
    border: 1px solid var(--border);
    overflow: hidden;
    line-height: 0;
}

/* The embed carries its own inline width/height from the CMS setting, so
   these need !important to win — the markup is not ours to edit. */
.rd-map iframe,
.rd-map embed,
.rd-map object {
    width: 100% !important;
    height: 420px !important;
    border: 0;
    display: block;
    filter: grayscale(1) contrast(.9);
    transition: filter var(--t);
}

.rd-map:hover iframe { filter: grayscale(0) contrast(1); }

:root[data-theme="dark"] .rd-map iframe {
    filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.85);
}

:root[data-theme="dark"] .rd-map:hover iframe {
    filter: grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9);
}

@media (max-width: 620px) {
    .rd-map iframe { height: 320px !important; }
}