/* ============================================================================
   kHouse Dossier · Contact box + map tile
   ----------------------------------------------------------------------------
   Two-column contact grid with org details on one side and a square embedded
   map (OpenStreetMap iframe) with a custom red pin overlay, action chips,
   caption, and a dossier-style attribution bar on the other.
   ============================================================================ */

/* ============================== CONTACT BOX ============================= */
.kd-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) { .kd-contact-grid { grid-template-columns: 1fr; } }
.kd-contact-grid__primary,
.kd-contact-grid__secondary {
    padding: var(--kd-s-7);
}
.kd-contact-grid__primary {
    background: var(--kd-bg-alt);
    border-right: 1px solid var(--kd-border);
}
@media (max-width: 880px) {
    .kd-contact-grid__primary { border-right: 0; border-bottom: 1px solid var(--kd-border); }
}
.kd-contact-grid__heading {
    font-size: var(--kd-text-2);
    font-weight: var(--kd-w-semibold);
    margin-bottom: var(--kd-s-3);
    letter-spacing: -0.005em;
}
.kd-contact-grid__line {
    display: flex; align-items: center; gap: var(--kd-s-3);
    padding-block: 8px;
    border-bottom: 1px solid var(--kd-border);
    font-size: var(--kd-text-2);
}
.kd-contact-grid__line:last-child { border-bottom: 0; }
.kd-contact-grid__line a { color: var(--kd-fg); }
.kd-contact-grid__line a:hover { color: var(--kd-accent); }
.kd-contact-grid__line .kd-mono { width: 100px; flex-shrink: 0; }
.kd-contact-grid__line--stack { align-items: flex-start; }
.kd-contact-grid__line--stack .kd-mono { padding-top: 2px; }
.kd-contact-grid__line--stack .kd-soft { display: inline-block; margin-top: 2px; font-size: var(--kd-text-1); color: var(--kd-fg-muted); }

/* ============================== MAP TILE ================================ */
.kd-maptile {
    aspect-ratio: 16 / 9;
    background: var(--kd-bg-sunken);
    border: 1px solid var(--kd-border);
    position: relative;
    overflow: hidden;
}
.kd-maptile iframe {
    /* Soft desaturation — keeps OSM's roads, parks and water as muted color
       cues without blowing past the editorial palette. */
    filter: saturate(0.55) contrast(0.95) brightness(1.02);
    transition: filter var(--kd-dur) var(--kd-ease);
}
[data-theme="dark"] .kd-maptile iframe {
    filter: saturate(0.55) invert(0.92) contrast(0.9) hue-rotate(180deg);
}

.kd-maptile svg { display: block; width: 100%; height: 100%; }
.kd-maptile__pin {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    background: #e11d2a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 3px rgba(225, 29, 42, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.kd-maptile__pin-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kd-fg);
    background: var(--kd-bg);
    padding: 4px 8px;
    border: 1px solid var(--kd-border-strong);
    border-radius: var(--kd-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
@keyframes kd-heart-beat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25%      { transform: translate(-50%, -50%) scale(1.18); }
    40%      { transform: translate(-50%, -50%) scale(1.0); }
    60%      { transform: translate(-50%, -50%) scale(1.12); }
    75%      { transform: translate(-50%, -50%) scale(1.0); }
}
.kd-maptile__pin::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225, 29, 42, 0.55) 0%, transparent 70%);
    animation: kd-pin-glow 2.4s ease-in-out infinite;
}
.kd-maptile__pin::after {
    content: '';
    position: absolute;
    inset: -22px;
    border: 2px solid rgba(225, 29, 42, 0.6);
    border-radius: 50%;
    animation: kd-pin-pulse 2.4s ease-out infinite;
}
@keyframes kd-pin-pulse {
    0%   { transform: scale(0.4); opacity: 1; border-width: 2px; }
    100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}
@keyframes kd-pin-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.15); }
}

/* Always-visible action chips, bottom-right of the map tile */
.kd-maptile__actions {
    position: absolute;
    bottom: 38px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
    justify-content: flex-end;
    max-width: calc(100% - 24px);
}

/* Legacy hover overlay (unused, kept for safety on existing markup) */
.kd-maptile__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: var(--kd-s-4);
    background: rgba(var(--kd-bg-rgb), 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kd-dur) var(--kd-ease);
    text-align: center;
}
.kd-maptile:hover .kd-maptile__hover,
.kd-maptile:focus-within .kd-maptile__hover {
    opacity: 1;
    pointer-events: auto;
}
.kd-maptile__hover-label {
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-maptile__hover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.kd-maptile__action {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 14px;
    background: var(--kd-bg);
    color: var(--kd-fg);
    border: 1px solid var(--kd-border-strong);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--kd-radius);
    transition: background var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease), border-color var(--kd-dur) var(--kd-ease);
}
.kd-maptile__action:hover {
    background: var(--kd-fg);
    color: var(--kd-bg);
    border-color: var(--kd-fg);
}

.kd-maptile__caption {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--kd-font-mono);
    font-size: 10px; letter-spacing: var(--kd-track-mono);
    text-transform: uppercase; color: var(--kd-fg-muted);
    padding: 4px 8px;
    background: rgba(var(--kd-bg-rgb), 0.9);
    border: 1px solid var(--kd-border);
    text-decoration: none;
    z-index: 2;
}

/* Attribution bar covers OSM's footer (which contains the donation link the
   client doesn't want surfaced) while still satisfying OSM's ToS by crediting
   the data source. Pinned to the very bottom of the tile. */
.kd-maptile__attribution {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 12px;
    background: var(--kd-bg);
    border-top: 1px solid var(--kd-border);
    font-family: var(--kd-font-mono);
    font-size: 10px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.kd-maptile__attribution a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--kd-border-strong);
}
.kd-maptile__attribution a:hover {
    color: var(--kd-fg);
}