/**
 * Panoramic hero — Location Default (A-1) template.
 *
 * Loaded by inc/location-variant.php only where single-location.php renders, so A-2, the
 * Photo preview and every non-location page are untouched.
 *
 * The rules are the "1. Panoramic hero" section of css/location-editorial.css on branch
 * location-editorial-template, where this hero was designed, re-scoped from that template's
 * body class to `.location-template-default`. The editorial file's later sections (the
 * .lei-* / .lep-* / .lea-* components, the two-column About, the template-wide eyebrow
 * removal) are NOT here: only the hero came across.
 *
 * Everything hangs off `.lph-*` or `.location-pano-hero` — blocks/location-pano-hero.php owns
 * those names. Nothing here may reach `.location-hero` / `.hero-*`, which style.css still owns
 * for A-2, the landers and the region hero.
 *
 * The two hard-coded white values in here (the dim star track and the review count) are
 * overridden for light-theme visitors in css/theme-light.css §2, which loads after this file.
 *
 * The full gallery is the shared #full-gallery overlay, styled by style.css
 * (`.gallery-overlay`); there is nothing for it here.
 */

/* The group padding is the site-wide 100px / 60px; the top is dropped so the photo sits
   under the breadcrumbs, exactly as .location-hero did. The bottom is trimmed because the
   scrollspy nav below brings its own 64px margin: at the full 100px the filmstrip was left
   floating in empty black. */
.location-template-default .site-inner .content .location-pano-hero {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    color: var(--color-text-primary);
    position: relative;

    /* The photo and the copy occupy the same grid area, so the text sits over the lower
       part of the panorama without either element being positioned absolutely against a
       height this file would have to guess at. The filmstrip takes the row below. */
    display: grid;
    grid-template-areas:
        "stage"
        "strip";
    grid-template-columns: minmax(0, 1fr);
}

.lph-stage {
    grid-area: stage;
    position: relative;
    overflow: hidden;

    /* Full-bleed. `--lucid-scrollbar` is the measured scrollbar width (0 where the
       scrollbar overlays the page, as on macOS and phones), printed by
       inc/location-variant.php; the same measurement the home hero uses. Without it a
       classic scrollbar pushes the photo off-centre by half its width. */
    width: calc(100vw - var(--lucid-scrollbar, 0px));
    margin-left: calc(50% - 50vw + var(--lucid-scrollbar, 0px) / 2);

    /* Panoramic, but never so tall that the page below is off screen on a laptop. */
    aspect-ratio: 21 / 9;
    max-height: 76vh;
    min-height: 420px;
}

.lph-pano {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reading surface for the hero copy. Keyed to the page background, and fully opaque
   before the photo ends, so the panorama resolves into the filmstrip row below it as one
   surface instead of stopping on a visible edge. */
.lph-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--color-bg-primary-rgb), 0) 20%,
        rgba(var(--color-bg-primary-rgb), 0.45) 52%,
        rgba(var(--color-bg-primary-rgb), 0.82) 78%,
        rgba(var(--color-bg-primary-rgb), 1) 94%
    );
    pointer-events: none;
}

/* The site-wide `.fade` separator paints a 690px gradient upward from its own line
   (style.css), to lift the top of the section that follows. Directly under this hero that
   lift lands on the filmstrip row instead, so the hero reads as a lighter panel ending on
   a hard edge at the separator. The scrim above already resolves the photo into the page
   background, so the lift is dropped here and the hero, the filmstrip and the section
   below share one surface. */
.location-template-default .location-pano-hero + hr.wp-block-separator.fade::before {
    content: none;
}

/* Every `.wp-block-group` on the site is pulled out to the viewport and re-constrained by
   its `__inner-container` (style.css, both breakpoints). This hero has no inner container —
   the photo is meant to run the full width — so the text and the filmstrip take the 1280px
   measure and the page gutter here instead, which keeps them in line with the breadcrumbs
   above and the sections below. */
.lph-copy,
.lph-strip-wrap {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.lph-copy {
    grid-area: stage;
    align-self: end;
    position: relative;
    z-index: 2;
    padding-bottom: 48px;
}

.lph-copy-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* The base step between title, address, buttons and rating; the two rules below add to
       it where a pair reads as a bigger break than the line above it. */
    gap: 22px;
    max-width: 720px;
}

.lph-title {
    margin: 0;
    font-size: 3.3em;
    letter-spacing: 0.025em;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0;
}

.lph-address {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
}

.lph-address a {
    color: var(--color-text-accent) !important;
}

.lph-address a:hover {
    box-shadow: inset 0 -1px 0 0 currentColor;
}

.lph-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    /* 32px off the address: the buttons start a new idea, and their own padding makes a
       flat step look tighter than it measures. */
    margin-top: 10px;
}

.lph-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 24px clear of the buttons, so the stars sit with them without touching. */
    margin: 2px 0 0;
    font-size: var(--fs-body-sm);
    letter-spacing: 0.02em;
}

/* The four colour Google mark leads the row. It keeps its own brand fills rather than
   taking the accent, so there is no colour rule here, only a size. */
.lph-google {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Two rows of five, the accent one clipped to the rating so 4.9 shows a part star. */
.lph-stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    line-height: 0;
}

.lph-stars-base,
.lph-stars-fill {
    display: flex;
    gap: 2px;
}

.lph-stars-base {
    color: rgba(255, 255, 255, 0.35);
}

.lph-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--color-text-accent);
}

.lph-star {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.lph-rating-count {
    color: rgba(255, 255, 255, 0.7);
}

a.lph-rating:hover .lph-rating-count {
    color: var(--color-text-primary);
}

/* Filmstrip: more of the space, directly under the panorama. */
.lph-strip-wrap {
    grid-area: strip;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.lph-strip {
    display: flex;
    gap: 12px;
    margin: 0 !important;
    padding: 0;
    list-style: none !important;
    flex: 1 1 auto;
    min-width: 0;
}

.lph-strip li {
    list-style: none !important;
    margin: 0 !important;
    flex: 1 1 0;
    min-width: 0;

    /* Five photos across the 1280px measure come out at ~204px each, so this cap never binds
       on a location with a full filmstrip. It is here for the three that do not have five —
       Addison / North Tollway and Alliance / North Fort Worth have two, Westlake has three —
       where `flex: 1 1 0` alone stretched each tile to ~610x457 and the strip stopped
       reading as a strip. They now sit at thumbnail size and the row runs short, left
       aligned under the copy. */
    max-width: 205px;
}

.lph-strip-item {
    display: block;
    overflow: hidden;
    /* Taller than the 3:2 the strip started at, so the thumbnails read a little larger
       without leaving the 1280px measure the copy above them keeps. */
    aspect-ratio: 4 / 3;
}

.lph-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.lph-strip-item:hover img,
.lph-strip-item:focus-visible img {
    transform: scale(1.04);
}

.lph-strip-item:focus-visible {
    outline: 2px solid var(--color-text-accent);
    outline-offset: 3px;
}

.lph-strip-all {
    flex: 0 0 auto;
    font-size: var(--fs-body-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 0 transparent;
    transition: box-shadow 0.3s ease;
}

.lph-strip-all:hover {
    box-shadow: inset 0 -1px 0 0 currentColor;
}

/* A hero with no photo at all: the copy is the whole section, so it needs the top space
   the panorama would have given it. */
.location-pano-hero.is-textonly .lph-copy {
    padding-top: 24px;
    padding-bottom: 0;
}

@media only screen and (max-width: 880px) {
    /* Over a phone-width crop the panorama has too little room below the horizon to hold
       type, so the copy moves out from under it. */
    .location-template-default .site-inner .content .location-pano-hero {
        grid-template-areas:
            "stage"
            "copy"
            "strip";
        padding-bottom: 32px;
    }

    .lph-stage {
        aspect-ratio: 4 / 3;
        min-height: 0;
        max-height: 58vh;
    }

    .lph-scrim {
        display: none;
    }

    .lph-copy {
        grid-area: copy;
        padding-top: 24px;
        padding-bottom: 0;
    }

    .lph-title {
        font-size: 2.6em;
    }

    .lph-strip-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 20px;
    }

    .lph-strip {
        width: 100%;
        /* Four thumbnails at phone width would be stamps; the row scrolls instead. */
        overflow-x: auto;
        scrollbar-width: none;
    }

    .lph-strip::-webkit-scrollbar {
        display: none;
    }

    .lph-strip li {
        flex: 0 0 45%;
    }

    /* The mobile spacing below the hero — the page-nav-wrapper / page-nav / first-section
       run — is already handled by the `body.single-location` rules at style.css:23606, which
       keep matching: only the one rule in that block keyed to `.location-hero` (the hero's
       own 32px bottom padding) stopped applying, and it is reproduced above. The editorial
       stylesheet carried copies of the rest; they are deliberately not repeated here. */
}