/**
 * Location "Photo" template.
 *
 * Loaded by inc/location-variant.php only where single-location-photo.php renders.
 *
 * Part 1 re-scopes the A-2 layout rules (style.css, search
 * `.location-template-single-location-a2`) onto this template's body class. They are
 * copies on purpose: style.css carries the rules for the live Default vs A-2 test, and
 * editing selectors there to add a third template would put this branch in the way of
 * that test. Keep the two in step if the A-2 spacing is retuned.
 *
 * Part 2 is the on-page gallery grid (blocks/location-photo-gallery.php): a label column
 * beside a uniform three-up grid of rounded tiles. It deliberately does not follow the
 * overlay grid in style.css (`.gallery-overlay .gallery-grid`), and uses its own `.lpg-*`
 * names so the overlay keeps its styling.
 */

/* ---------------------------------------------------------------------------
   1. Section layout, copied from the A-2 rules
   --------------------------------------------------------------------------- */

/* From the A-2 rules in style.css: tighten the gap between the sticky nav and first section heading */
.location-template-single-location-photo .wp-block-group.page-nav-wrapper > .wp-block-group__inner-container > .page-nav:not([hidden]) {
    margin-bottom: 0;
}

.location-template-single-location-photo .wp-block-group.page-nav-wrapper > .wp-block-group__inner-container > .page-scroller-wrapper:not([hidden]) {
    margin-top: 0;
}

.location-template-single-location-photo .page-scroller-wrapper .page-section:first-child {
    padding-top: 40px;
}

/* The extra "Photos" link makes the nav row long enough to wrap, and the buttons drop
   to a second line. `.flex-wrap`'s `justify-content: space-between` leaves a lone item
   on that line at the start, so the pair reads as left-aligned; `margin-left: auto`
   holds them against the right edge whether or not the row wraps. */
.location-template-single-location-photo .page-nav .nav-btns {
    margin-left: auto;
}

@media only screen and (min-width: 981px) {
    .location-template-single-location-photo .page-scroller-wrapper {
        --photo-section-gap: 64px;
    }

    .location-template-single-location-photo .site-inner .content .page-scroller-wrapper > .page-section.wp-block-group:not(:first-child) {
        padding-top: var(--photo-section-gap);
    }

    .location-template-single-location-photo #amenities .section-heading,
    .location-template-single-location-photo #features .section-heading {
        margin-bottom: 32px;
    }

    .location-template-single-location-photo #amenities .section-content,
    .location-template-single-location-photo #features .section-content {
        margin-top: 0;
    }

    .location-template-single-location-photo #amenities .icon-list .card-entry,
    .location-template-single-location-photo #features .icon-list .card-entry {
        gap: 24px;
    }

    .location-template-single-location-photo #amenities .icon-item .item-inner,
    .location-template-single-location-photo #features .icon-item .item-inner {
        gap: 12px;
    }

    .location-template-single-location-photo #amenities .icon-item .icon-wrapper,
    .location-template-single-location-photo #features .icon-item .icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .location-template-single-location-photo #amenities .icon-item .icon-wrapper svg,
    .location-template-single-location-photo #features .icon-item .icon-wrapper svg {
        max-width: 28px;
        max-height: 28px;
    }

    .location-template-single-location-photo #offerings .section-heading {
        margin-bottom: 40px;
    }

    .location-template-single-location-photo #offerings .section-content {
        margin-top: 40px;
    }

    .location-template-single-location-photo #offerings .tc-desktop-nav {
        margin-bottom: 20px;
    }

    .location-template-single-location-photo #offerings .wide-ver .tc-image-wrapper {
        aspect-ratio: 505 / 420;
    }

    .location-template-single-location-photo #offerings .wide-ver .service-card-block .wp-block-column + .wp-block-column {
        gap: 16px;
    }

    .location-template-single-location-photo #offerings .owl-nav {
        margin-top: 12px;
    }
}

/* Map links: smaller and tighter to the neighborhood map. */
.location-template-single-location-photo .map-links,
.location-template-single-location-photo .map-links > div{
    gap: 8px;
}

.location-template-single-location-photo .map-links{
    padding-top: 36px;
    font-size: clamp(0.889rem, 1.35vw, 1.111rem);
    line-height: 1.4;
}

.location-template-single-location-photo .map-links svg{
    width: 16px;
    height: 16px;
}

.location-template-single-location-photo .map-links > * > *{
    margin: 0 8px;
}

.location-template-single-location-photo .map-links > * > *:not(:first-child):before{
    left: -13.5px;
}

@media only screen and (max-width: 880px) {
    .location-template-single-location-photo .map-links{
        padding-top: 28px;
    }
}

/* ---------------------------------------------------------------------------
   2. On-page photo gallery
   --------------------------------------------------------------------------- */

.location-template-single-location-photo #gallery .section-content {
    margin-top: 40px;
}

/*
 * Each group is a label column (heading + copy) beside a uniform three-up grid, rather
 * than the overlay's full-width-then-pair rhythm. Groups are separated by space alone;
 * the rule that used to sit between them competed with the grid's own edges.
 */
.lpg-group {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.lpg-group + .lpg-group {
    margin-top: 56px;
}

.lpg-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sans, close to the body copy in size: the label reads as a caption for the grid, not as
   another heading competing with the section's own serif H2. */
.lpg-title {
    margin: 0;
    font-family: var(--font-sans-serif);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
}

.lpg-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.lpg-sub > *:last-child {
    margin-bottom: 0;
}

.lpg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lpg-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
}

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

.lpg-item:hover img,
.lpg-item:focus-visible img {
    transform: scale(1.03);
}

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

/* Below the tablet breakpoint the label column would squeeze the tiles, so it moves above
   the grid and the grid drops to two across. */
@media only screen and (max-width: 980px) {
    .lpg-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

@media only screen and (max-width: 770px) {
    .lpg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lpg-group + .lpg-group {
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lpg-item img {
        transition: none;
    }

    .lpg-item:hover img,
    .lpg-item:focus-visible img {
        transform: none;
    }
}