/**
 * Woodinville Home-Base Section
 * ClickUp 86ajz983h  |  J Szabo Collaborative Landscapes
 *
 * Deploy target: child theme
 *   wp-content/themes/intrigue-me-child-j-szabo-collaborative-landscapes/inc/home-base.css
 * Enqueue alongside inc/breadcrumbs.css in functions.php, versioned off
 * wp_get_theme()->get('Version') the same way breadcrumbs.css already is.
 *
 * Everything rides on the theme's own tokens. No hardcoded colors, type sizes
 * or spacing. If the palette moves, this section moves with it. The only
 * exception is the map's desaturation filter, which has no token equivalent.
 *
 * Square edges throughout. The rest of the page has no rounded corners, so
 * --imt--border-radius is deliberately not used here even though it exists.
 */

/* ------------------------------------------------------------------
   Section shell
   ------------------------------------------------------------------ */

.jsz-homebase {
    /* The theme's default section padding is tight for a section that has to
       hold its own between a button and a full-bleed photo CTA. */
    padding: calc(var(--wp--custom--imt--spacer) * 5) calc(var(--wp--custom--imt--spacer) * 2);
}

.jsz-homebase__grid {
    display: grid;
    /* Slightly wider map column. A 50/50 split makes the map read as an
       afterthought sitting next to the copy rather than the point of the row. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: calc(var(--wp--custom--imt--spacer) * 4);
    /* Stretch, not center: the map runs the full height of the copy so the two
       columns square off against each other instead of floating. */
    align-items: stretch;
}

/* ------------------------------------------------------------------
   Copy column
   ------------------------------------------------------------------ */

.jsz-homebase__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jsz-homebase .jsz-homebase__title {
    margin-top: 0;
    /* Keeps "Rooted in Woodinville," and "Building Across the Eastside" from
       breaking into a one-word orphan line. Degrades to a normal wrap. */
    text-wrap: balance;
}

.jsz-homebase .imt-img-container {
    margin: calc(var(--wp--custom--imt--spacer) * .75) 0 calc(var(--wp--custom--imt--spacer) * 1.25);
}

/* ------------------------------------------------------------------
   Address block, under the copy
   ------------------------------------------------------------------ */

.jsz-homebase__nap {
    margin-top: calc(var(--wp--custom--imt--spacer) * 1.5);
    padding-left: calc(var(--wp--custom--imt--spacer) * 1);
    border-left: var(--wp--custom--imt--border-width) solid var(--wp--custom--imt--color--palette--background--primary--active);
}

.jsz-homebase .jsz-homebase__nap-label {
    margin: 0 0 calc(var(--wp--custom--imt--spacer) * .25);
    font-family: var(--font-family--default);
    font-size: var(--wp--custom--imt--h--lead-text--0--font-size);
    font-weight: var(--wp--custom--imt--font-weight-bold);
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wp--custom--imt--color--palette--background--primary--700);
}

.jsz-homebase .jsz-homebase__nap-address,
.jsz-homebase .jsz-homebase__nap-phone {
    margin: 0;
    font-family: var(--font-family--default);
    font-size: var(--wp--custom--imt--font-size);
    line-height: var(--wp--custom--imt--line-height-base);
}

/* The theme gives the last paragraph of any section content a 32px bottom
   margin via `.imt-section .imt-content p:last-of-type`, which outranks a
   two-class selector and leaves the rule above dangling past the phone line.
   Answered at equal-and-then-some specificity rather than with !important. */
.imt-section.jsz-homebase .imt-content .jsz-homebase__nap p:last-of-type {
    margin-bottom: 0;
}

.jsz-homebase .jsz-homebase__cta {
    margin-top: calc(var(--wp--custom--imt--spacer) * 1.75);
}

/* ------------------------------------------------------------------
   Map column
   ------------------------------------------------------------------ */

.jsz-homebase__map {
    position: relative;
    overflow: hidden;
    background-color: var(--wp--custom--imt--color--palette--background--neutral--200);
    /* A hairline in the sage family rather than a grey stroke, so the map is
       framed by the palette instead of sitting on top of it. No shadow: the
       theme sets box-shadow: none on media-row imagery, and this should match. */
    box-shadow: 0 0 0 1px var(--wp--custom--imt--color--palette--background--primary--300);
}

.jsz-homebase__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    border: 0;
    /* Google's embed ships a bright consumer basemap. A touch of desaturation
       settles it into the stone-and-sage palette instead of shouting at it. */
    filter: saturate(.78) contrast(.96);
}

/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media (max-width: 900px) {

    .jsz-homebase {
        padding: calc(var(--wp--custom--imt--spacer) * 3) calc(var(--wp--custom--imt--spacer) * 2);
    }

    .jsz-homebase__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--wp--custom--imt--spacer) * 2.5);
    }

    .jsz-homebase__map iframe {
        min-height: 320px;
    }
}