.studio-location {
    position: relative;
    overflow: hidden;
    /* background: var(--color-bg); */
    /* No section vertical padding on desktop — the left content column owns the
       top/bottom padding so the map panel can run full-height. */
    padding: 0;
}

/* Full-width flex: the map panel is a normal in-flow column that reaches the
   true right edge, and the left content is padded in to stay aligned with the
   centered site container. No absolute positioning, so the panel's min-height
   drives the section height instead of the short text column. */
.studio-location__inner {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: stretch;
}

/* ── Map media — right half, rendered after the content in the DOM ── */
.studio-location__media {
    position: static;
    flex: 0 0 50%;
    min-height: 564px;
}

.studio-location__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.studio-location__media--embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Left half — its only job is the gutter padding-left that pushes the content
   in to align with the centered site container. Keeping it here (not on
   __content) means __content's max-width stays a clean container/2. */
.studio-location__left {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding-left: max(var(--pad-x), calc((100vw - var(--site-max-w)) / 2));
}

.studio-location__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
    max-width: calc(var(--site-max-w) / 2);
    padding-top: var(--pad-y-alt);
    padding-bottom: var(--pad-y-alt);
    padding-right: 48px;
}

.studio-location__eyebrow {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-accent);
}

.studio-location__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 48px;
    line-height: 54px;
    color: var(--color-dark);
    max-width: 400px;
}

.studio-location__heading em {
    font-style: italic;
    color: var(--color-accent);
}

.studio-location__address {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #6B4F47; /* Figma one-off tint, not in the shared palette */
}

.studio-location__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.studio-location__detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-location__detail-icon {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 19px;
    color: #6B4F47; /* Figma one-off tint, matches detail text colour */
}

.studio-location__detail-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: #6B4F47; /* Figma one-off tint, not in the shared palette */
}

.studio-location__divider {
    display: block;
    width: 100%;
    max-width: 510px;
    height: auto;
    color: var(--color-espresso);
}

.studio-location__cta {
    padding: 13px 32px;
}

/* Duplicate CTA after the map — desktop shows the inline one in the content,
   tablet/mobile show this one instead (toggled in the media queries below). */
.studio-location__cta--after {
    display: none;
}

@media (max-width: 1366px) {
    .studio-location__heading {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 1024px) {
    .studio-location {
        padding: var(--pad-y-alt) var(--pad-x);
    }

    .studio-location__inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .studio-location__media {
        position: static;
        flex: none;
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .studio-location__left {
        flex: none;
        padding-left: 0;
    }

    .studio-location__content {
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
    }

    .studio-location__heading {
        max-width: 100%;
    }

    /* Full-width divider on tablet/mobile */
    .studio-location__divider {
        max-width: none;
    }

    /* Swap the inline CTA for the one rendered after the map */
    .studio-location__content .studio-location__cta {
        display: none;
    }

    .studio-location__cta--after {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .studio-location {
        overflow: hidden;
    }

    .studio-location__inner {
        gap: 20px;
    }

    .studio-location__media {
        aspect-ratio: 3 / 3.3;
    }

    .studio-location__heading {
        font-size: 36px;
        line-height: 42px;
    }
}