/* ── Directions Card block ──────────────────────────────────────────────────── */

.nyehs-drc {
    display:       flex;
    border-radius: 20px;
    overflow:      hidden;
    min-height:    420px;
}

/* ── Left panel — map background ────────────────────────────────────────────── */

.nyehs-drc__left {
    flex:       0 0 38%;
    position:   relative;
    overflow:   hidden;
    background: #0d1117; /* map-load fallback */
    display:    flex;
    flex-direction: column;
}

/* ── Map canvas (reuses the map-block initialisation hook) ──────────────────── */

.nyehs-drc__left .nyehs-map__canvas-wrap {
    position: absolute;
    inset:    0;
}

.nyehs-drc__left .nyehs-map__canvas {
    width:      100%;
    height:     100%;
    line-height: 0;
    font-size:   0;
    background-color: #0d1117;
}

/* Dark-themed map background so tile gaps match */
.nyehs-drc__left .gm-style {
    background-color: #0d1117;
}

/* Reset box model for Google Maps internals */
.nyehs-drc__left .gm-style *,
.nyehs-drc__left .nyehs-map__canvas * {
    box-sizing: content-box;
}

/* WordPress theme often forces max-width / display on img — undo inside map */
.nyehs-drc__left .gm-style img,
.nyehs-drc__left .nyehs-map__canvas img {
    max-width: none !important;
    display:   block !important;
}

/* Dark overlay on top of the map tiles */
.nyehs-drc__map-overlay {
    position:        absolute;
    inset:           0;
    background-color: rgba(4, 6, 16, var(--nyehs-drc-overlay, 0.55));
    pointer-events:  none;
}

/* ── Left inner content (sits above map + overlay) ──────────────────────────── */

.nyehs-drc__left-inner {
    position:       relative;
    z-index:        2;
    padding:        48px 40px;
    display:        flex;
    flex-direction: column;
    gap:            28px;
    height:         100%;
    pointer-events: none;
}

.nyehs-drc__heading {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1.2;
    color:       #fff;
    margin:      0;
}

/* ── Address row ────────────────────────────────────────────────────────────── */

.nyehs-drc__address {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
}

.nyehs-drc__address-icon {
    flex-shrink:     0;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.08);
    border:          1px solid rgba(255, 255, 255, 0.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255, 255, 255, 0.8);
    margin-top:      2px;
}

.nyehs-drc__address-text {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.nyehs-drc__address-line {
    margin:      0;
    color:       rgba(255, 255, 255, 0.85);
    font-size:   0.9375rem;
    line-height: 1.6;
}

.nyehs-drc__maps-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           #fff;
    font-size:       0.875rem;
    font-weight:     600;
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.10);
    border:          1px solid rgba(255, 255, 255, 0.20);
    border-radius:   999px;
    padding:         7px 14px;
    transition:      background 0.2s ease, border-color 0.2s ease;
    align-self:      flex-start;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events:  auto;
}

.nyehs-drc__maps-link:hover {
    background:   rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.35);
    color:        #fff;
}

.nyehs-drc__maps-link svg {
    flex-shrink: 0;
}

/* ── Right panel — directions ───────────────────────────────────────────────── */

.nyehs-drc__right {
    flex:            1;
    background:      linear-gradient(160deg, #000a73 0%, #0017c7 55%, #0d41ff 100%);
    position:        relative;
    overflow:        hidden;
    padding:         48px 52px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             0;
}

.nyehs-drc__right::before {
    content:         '';
    position:        absolute;
    width:           320px;
    height:          320px;
    border-radius:   50%;
    background:      radial-gradient(circle, rgba(42, 0, 205, 0.38) 0%, transparent 70%);
    top:             -100px;
    right:           -100px;
    pointer-events:  none;
}

.nyehs-drc__right::after {
    content:         '';
    position:        absolute;
    width:           200px;
    height:          200px;
    border-radius:   50%;
    background:      radial-gradient(circle, rgba(13, 98, 255, 0.22) 0%, transparent 70%);
    bottom:          -60px;
    left:            -60px;
    pointer-events:  none;
}

/* ── Individual direction mode ──────────────────────────────────────────────── */

.nyehs-drc__direction {
    padding:  24px 0;
    position: relative;
    z-index:  1;
}

.nyehs-drc__direction:first-child {
    padding-top: 0;
}

.nyehs-drc__direction:last-child {
    padding-bottom: 0;
}

.nyehs-drc__direction + .nyehs-drc__direction {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nyehs-drc__direction-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 10px;
}

.nyehs-drc__direction-icon {
    flex-shrink:     0;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.08);
    border:          1px solid rgba(255, 255, 255, 0.10);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255, 255, 255, 0.6);
}

.nyehs-drc__direction-label {
    margin:      0;
    color:       #fff;
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.3;
}

.nyehs-drc__direction-body {
    padding-left: 46px;
    color:        rgba(255, 255, 255, 0.65);
    font-size:    0.9rem;
    line-height:  1.7;
}

.nyehs-drc__direction-body p {
    margin: 0 0 0.5em;
}

.nyehs-drc__direction-body p:last-child {
    margin-bottom: 0;
}

/* ── Inverted style variation ───────────────────────────────────────────────── */

.nyehs-drc.is-style-inverted .nyehs-drc__map-overlay {
    display: none;
}

.nyehs-drc.is-style-inverted .nyehs-map__canvas {
    background-color: #0d1a8c;
}

.nyehs-drc.is-style-inverted .gm-style {
    background-color: #0d1a8c;
}

.nyehs-drc.is-style-inverted .nyehs-drc__right {
    background: #0a0c10;
}

.nyehs-drc.is-style-inverted .nyehs-drc__right::before,
.nyehs-drc.is-style-inverted .nyehs-drc__right::after {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .nyehs-drc {
        flex-direction: column;
    }

    .nyehs-drc__left {
        flex:       none;
        min-height: 280px;
    }

    .nyehs-drc__left-inner {
        padding: 40px 28px;
    }

    .nyehs-drc__right {
        padding: 40px 28px;
    }
}

@media (max-width: 480px) {
    .nyehs-drc__left {
        min-height: 220px;
    }
    .nyehs-drc__left-inner {
        padding: 24px 16px;
        gap:     20px;
    }
    .nyehs-drc__right {
        padding: 28px 16px;
    }
    .nyehs-drc__heading {
        font-size: 1.5rem;
    }
}