/* L26 listing detail 2026 - hero sheet. Owner: hero agent. Scope every rule under .l26; tokens only (see l26-base.css). */

/* ---------- breadcrumb + share/save row ---------- */

/* M5 (UI/UX review): nowrap + flex-shrink 0 actions keeps Share/Save on the breadcrumb's row at
   every width - a wrapping row let the actions drop to their own line under a 3-line breadcrumb. */
.l26 .l26-hero__crumbrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}

.l26 .l26-hero__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--l26-text-2);
}

.l26 a.l26-hero__crumb {
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* WCAG 2.5.8 target size */
    color: var(--l26-text-2);
    font-weight: 400;
    text-decoration: none;
}

.l26 a.l26-hero__crumb:hover {
    color: var(--l26-green-dark);
    text-decoration: underline;
}

.l26 .l26-hero__crumb-sep {
    color: var(--l26-text-3);
}

.l26 .l26-hero__crumb--current {
    color: var(--l26-text);
    font-weight: 600;
}

.l26 .l26-hero__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.l26 .l26-hero__action {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
}

.l26 .l26-hero__action svg {
    flex-shrink: 0;
}

@media (max-width: 759px) {
    .l26 .l26-hero__action-label {
        display: none;
    }

    .l26 .l26-hero__action {
        padding: 0;
        width: 44px;
        min-height: 44px; /* M5: was 40px, below the 44px touch-target minimum */
    }
}

/* ---------- gallery ---------- */

.l26 .l26-gal {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-radius: var(--l26-radius);
    overflow: hidden;
    margin-bottom: 32px;
}

.l26 .l26-gal__tile {
    display: block;
    position: relative;
    min-height: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--l26-green-dark);
    transition: opacity var(--l26-ease);
}

.l26 .l26-gal__tile:hover {
    opacity: 0.92;
}

.l26 .l26-gal__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* #13678: video tiles are grid tiles that open the lightbox, not inline players. Only ONE video
   (uploaded file preferred, else the first YouTube/iframe video) is visible, in the last visible
   grid slot; every other video, uploaded or YouTube, is a .l26-gal__tile--hidden tile that stays
   reachable in the lightbox (see ListingGalleryLayout.cs). The uploaded-file tile holds a muted
   first-frame thumbnail <video> (src deferred to l26-hero.js); it is absolutely filled and
   ignores the pointer so the click always reaches the tile's anchor. */
.l26 .l26-gal__tile--video {
    cursor: pointer;
}

/* The iframe fallback (non-YouTube host) fills its grid slot instead of keeping the 300x150 default. */
.l26 .l26-gal__tile--video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.l26 .l26-gal__tile--video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Centered play button: white icon on a semi-transparent dark circle, 64px (>= 44px target). */
.l26 .l26-gal__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--l26-stamp);
    color: var(--l26-surface);
    font-size: 24px;
    pointer-events: none;
    transition: background-color var(--l26-ease);
}

.l26 .l26-gal__video-play i {
    margin-left: 4px; /* optical centering: a play triangle's mass sits left of its box */
}

.l26 .l26-gal__tile--video:hover .l26-gal__video-play,
.l26 .l26-gal__tile--video:focus-visible .l26-gal__video-play {
    background: var(--l26-overlay);
}

.l26 .l26-gal__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l26-green-dark);
    color: var(--l26-surface);
    font-size: 16px;
    font-weight: 600;
}

/* Mobile-first: a single 280px tile regardless of photo count; only the first tile shows
   (the rest stay in the DOM for Fancybox, see the :not(:first-child) rule below). */
.l26 .l26-gal--1 .l26-gal__tile,
.l26 .l26-gal--2 .l26-gal__tile,
.l26 .l26-gal--3 .l26-gal__tile,
.l26 .l26-gal--5 .l26-gal__tile,
.l26 .l26-gal--empty .l26-gal__empty {
    height: 280px;
}

.l26 .l26-gal__tile:not(:first-child) {
    display: none;
}

.l26 .l26-gal__show-all,
.l26 .l26-gal__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    min-height: 44px; /* M5: was 40px, below the 44px touch-target minimum */
    padding: 0 16px;
    border-radius: var(--l26-radius-sm);
    border: 1px solid var(--l26-text);
    background: var(--l26-surface);
    color: var(--l26-text);
    font-family: var(--l26-font);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color var(--l26-ease);
}

.l26 .l26-gal__show-all:hover,
.l26 .l26-gal__counter:hover {
    background: var(--l26-zebra);
}

.l26 .l26-gal__counter {
    display: none;
    padding: 0 12px;
}

@media (max-width: 759px) {
    .l26 .l26-gal__show-all {
        display: none;
    }

    .l26 .l26-gal__counter {
        display: inline-flex;
    }
}

@media (min-width: 760px) {
    .l26 .l26-gal__tile:not(:first-child) {
        display: block;
    }

    .l26 .l26-gal--1 .l26-gal__tile,
    .l26 .l26-gal--empty .l26-gal__empty {
        height: 480px;
    }

    .l26 .l26-gal--2,
    .l26 .l26-gal--3 {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 240px 240px;
    }

    .l26 .l26-gal--2 .l26-gal__tile,
    .l26 .l26-gal--3 .l26-gal__tile {
        height: auto; /* the grid row track sizes it, not the mobile fixed height above */
    }

    .l26 .l26-gal--2 .l26-gal__tile:nth-child(1),
    .l26 .l26-gal--3 .l26-gal__tile:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .l26 .l26-gal--2 .l26-gal__tile:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .l26 .l26-gal--3 .l26-gal__tile:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .l26 .l26-gal--3 .l26-gal__tile:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .l26 .l26-gal--5 {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 240px 240px;
    }

    .l26 .l26-gal--5 .l26-gal__tile {
        height: auto;
    }

    .l26 .l26-gal--5 .l26-gal__tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    .l26 .l26-gal--5 .l26-gal__tile:nth-child(2) { grid-column: 2; grid-row: 1; }
    .l26 .l26-gal--5 .l26-gal__tile:nth-child(3) { grid-column: 2; grid-row: 2; }
    .l26 .l26-gal--5 .l26-gal__tile:nth-child(4) { grid-column: 3; grid-row: 1; }
    .l26 .l26-gal--5 .l26-gal__tile:nth-child(5) { grid-column: 3; grid-row: 2; }
}

/* !important, not just source order: .l26 .l26-gal__tile:not(:first-child) (the desktop reveal
   rule above) carries higher specificity (an extra pseudo-class) than a single modifier class
   would, so a plain override here would lose on desktop and the tiles beyond the bucket's
   visible count would leak into the grid's auto-placement. This must always win regardless of
   breakpoint or bucket. */
.l26 .l26-gal__tile--hidden {
    display: none !important;
}

/* ---------- head: legacy title/address classes, restyled ---------- */

.l26 .listing-details-name {
    font-size: 16px;
    font-weight: 400;
    color: var(--l26-text-2);
    margin: 8px 0 12px; /* L1 (UI/UX review): -4px pulled the quote up into the H1's descenders */
}

.l26 .listing-details-address {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 16px;
    color: var(--l26-text-2);
    margin-bottom: 24px;
}

.l26 .l26-head__location i {
    color: var(--l26-green-text);
}

.l26 .l26-head__location-sep {
    color: var(--l26-text-3);
}

.l26 .l26-head__premium {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

/* ---------- fact strip ---------- */

.l26 .l26-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--l26-border);
    border-bottom: 1px solid var(--l26-border);
    margin-bottom: 32px;
}

.l26 .l26-facts__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* M2 (UI/UX review): "center" put the Land IQ label 13px lower than its siblings */
    gap: 2px;
    width: 100%;
    padding: 16px;
    text-align: left;
    background: none;
    border: 0;
    font-family: var(--l26-font);
}

/* M2: row-wrap so "23 /100 Weak" sits on one line under a full-width label, instead of the
   column layout above (which put the badge on its own line). */
.l26 .l26-facts__item--iq {
    cursor: pointer;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 8px;
}

.l26 .l26-facts__item--iq .l26-label {
    flex-basis: 100%;
}

.l26 .l26-facts__item--iq:hover .l26-facts__value {
    color: var(--l26-green-dark);
}

.l26 .l26-facts__value {
    font-size: 20px;
    font-weight: 600;
    color: var(--l26-text);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.l26 .l26-facts__value--locked {
    font-size: 16px;
    font-weight: 600;
    color: var(--l26-text-2);
    align-items: center;
    gap: 6px;
}

.l26 .l26-facts__unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--l26-text-2);
}

.l26 .l26-facts__badge {
    align-self: center; /* M2: was flex-start, which no longer lines up now the badge sits beside the score */
    margin-top: 0;
}

@media (max-width: 759px) {
    .l26 .l26-facts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Fancybox 5 theme ----------
   Fancybox appends its container to <body>, outside #l26Root, so a CSS custom property set on
   .l26 cannot reach it (no shared ancestor to inherit through). Per TEAM-RULES this is the one
   place unscoped .fancybox__* rules are allowed; the literal colors below mirror the l26-base.css
   token named in each comment because a var() genuinely can't reach here. Overriding Fancybox's
   OWN custom properties (--fancybox-bg, --f-button-*) rather than fighting its rule specificity. */

/* H2 (UI/UX review): `html body` beats Content/vendor/fancybox.css's own `.fancybox__container`
   rule, which is linked AFTER this sheet and would otherwise win the tie on equal specificity.
   --fancybox-opacity:1 is required too - the vendor rule sets the backdrop to var(--fancybox-bg)
   at 50% opacity by default, which let the whole page show through even with --fancybox-bg set. */
html body .fancybox__container {
    --fancybox-bg: rgba(15, 18, 8, 0.94); /* mirrors --l26-scrim */
    --fancybox-opacity: 1;
}

.fancybox__nav {
    --f-button-width: 44px;
    --f-button-height: 44px;
    --f-button-bg: rgba(255, 255, 255, 0.12); /* mirrors --l26-surface at low opacity */
    --f-button-hover-bg: rgba(255, 255, 255, 0.24);
    --f-button-color: #FFFFFF;
}

.fancybox__infobar {
    color: #FFFFFF;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* mirrors --l26-font */
}