/* L26 listing detail 2026 - body sheet. Owner: body agent. Scope every rule under .l26; tokens only (see l26-base.css).
   Sections: About this lease, Field rep notes, The property, Walk this land 3D, From the field, Hunter reviews,
   Trail cam footage (+ the AJAX-loaded camera grid). Legacy classes (lease-about-*, field-rep-*, animals/land-types/
   amenities/animal/land-type/amenity, trail-cam-block, cam-trail-subscribe-button, blur-grayscale, hunter-name,
   hunter-review-date, weather-splitter) are neutralised here, never removed - listingDetails.js and the legacy
   Index.css still key off them. */

/* ---------- About this lease (F29) ---------- */

.l26 .l26-body__about-empty {
    margin-top: 4px;
}

.l26 .lease-about-content-wrapper.l26-body__about-wrapper {
    position: relative;
    max-height: 168px;
    overflow: hidden;
    transition: max-height var(--l26-ease);
    color: var(--l26-text);
    max-width: none;
}

.l26 .lease-about-content-wrapper.l26-body__about-wrapper.expanded {
    max-height: none;
    overflow: visible;
}

.l26 .lease-about-content.l26-body__about-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--l26-text);
    max-width: 68ch;
}

.l26 .lease-about-fade.l26-body__about-fade {
    height: 64px;
    /* H5: the section sits on the page background, not a white card - fade to that, not white. */
    background: linear-gradient(to top, var(--l26-page), transparent);
}

.l26 .lease-about-read-more.l26-body__about-more {
    display: inline-block;
    margin-top: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    height: 44px;
    color: var(--l26-green-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Field rep notes (F35) ---------- */

.l26 .field-rep-notes-container.l26-rep {
    max-width: none;
    margin-bottom: 40px;
}

.l26 .l26-rep__head {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--l26-divider);
}

.l26 .field-rep-notes-label.l26-h2 {
    margin: 0;
}

.l26 .field-rep-notes-FAQ.l26-rep__ask a {
    color: var(--l26-green-text);
}

.l26 .field-rep-note.l26-rep__row {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 0;
}

.l26 .field-rep-info.l26-rep__person {
    flex-basis: auto;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--l26-divider);
}

.l26 .field-rep-visit-info.l26-rep__visit {
    flex-basis: auto;
    width: 100%;
}

.l26 .l26-rep__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.l26 .l26-rep__avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

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

/* H6: initials always render first; the photo layers on top and removes itself on error
   (onerror="this.remove()" in the markup), so a broken/missing photo reveals the initials. */
.l26 .l26-rep__avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l26 .field-rep-user-name.l26-rep__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--l26-text);
}

.l26 .l26-rep__meta {
    margin-top: 2px;
}

.l26 .l26-rep__video-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.l26 .field-rep-visit-photos.l26-rep__video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 24px;
}

.l26 .l26-rep__video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: var(--l26-radius-sm);
    overflow: hidden;
    background: var(--l26-green-deep);
    cursor: pointer;
    text-decoration: none;
}

.l26 .l26-rep__video:hover {
    box-shadow: var(--l26-shadow-hover);
}

.l26 .l26-rep__video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.l26 .l26-rep__video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(38, 56, 9, 0) 40%, var(--l26-overlay) 100%);
}

.l26 .l26-rep__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--l26-green-dark);
    font-size: 14px;
}

.l26 .l26-rep__video-kind {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--l26-surface);
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 8px;
    border-radius: var(--l26-radius-pill);
}

.l26 .l26-rep__video--embed {
    background: #000;
}

.l26 .l26-rep__video--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.l26 .l26-rep__notes-label {
    margin: 0 0 8px;
}

.l26 .field-rep-visit-notes.l26-rep__notes {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--l26-text);
    max-width: 68ch;
    white-space: normal;
}

.l26 .l26-rep__notes-p {
    margin: 0 0 12px;
}

.l26 .l26-rep__notes-rest {
    white-space: pre-line;
    margin: 0 0 12px;
}

.l26 .l26-rep__toggle {
    display: inline-block;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--l26-green-text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 759px) {
    .l26 .field-rep-visit-photos.l26-rep__video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* M6: the eyebrow+H2 and "Ask a field rep a question" link each wrap to two lines side by side
       at this width - stack them instead. */
    .l26 .l26-rep__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---------- The property (F30-F33) ---------- */

.l26 .l26-body__property {
    max-width: none;
}

.l26 .l26-body__property .l26-h2 {
    margin-bottom: 16px;
}

.l26 .l26-prop__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
    margin-bottom: 24px;
}

.l26 .animals.l26-prop__pills,
.l26 .land-types.l26-prop__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* #13134: species beyond the first ten fold into a native <details>; 44px touch target. */
.l26 .l26-prop__more { margin-top: 8px; }
.l26 .l26-prop__more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}
.l26 .l26-prop__more[open] > summary { margin-bottom: 8px; }

.l26 .animal.l26-pill,
.l26 .land-type.l26-pill {
    border-radius: var(--l26-radius-pill);
    background: var(--l26-tint);
    color: var(--l26-green-dark);
    min-height: 32px;
    font-size: 14px;
}

.l26 .l26-prop__list-label {
    margin: 8px 0 4px;
}

.l26 .amenities.l26-prop__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
}

.l26 .amenity.l26-prop__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: auto;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--l26-divider);
    padding: 12px 0;
    font-size: 16px;
    color: var(--l26-text);
}

.l26 .l26-prop__item-icon {
    color: var(--l26-green-text);
    font-size: 14px;
    flex-shrink: 0;
}

/* #13438: an amenity's own glyph (Images/icons/svg), tinted with the icon green via a mask. */
.l26 .l26-prop__item-icon--amenity {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* Sits on the label's first line, so a two-line item (the Borders Public Land note) keeps it by the label. */
    align-self: flex-start;
    margin-top: 2px;
    background-color: var(--l26-green-text);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.l26 .l26-prop__item-note {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--l26-text-2); /* #666 = 5.7:1 on white; --l26-text-3 fails AA for text */
}

.l26 .amenity.l26-prop__item--rule .l26-prop__item-icon {
    color: var(--l26-text-3);
    font-size: 6px;
}

@media (max-width: 759px) {
    .l26 .l26-prop__grid,
    .l26 .amenities.l26-prop__list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Walk this land 3D ---------- */

.l26 .l26-body__walk3d {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    text-decoration: none;
    color: var(--l26-text);
    padding: 16px 20px;
}

.l26 .l26-body__walk3d:hover {
    box-shadow: var(--l26-shadow-hover);
    color: var(--l26-text);
    text-decoration: none;
}

.l26 .l26-body__walk3d-icon {
    color: var(--l26-green-text);
    font-size: 18px;
    flex-shrink: 0;
}

.l26 .l26-body__walk3d-label {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.l26 .l26-body__walk3d-arrow {
    color: var(--l26-green-text);
    font-size: 14px;
    flex-shrink: 0;
}

/* The card with the world's still: the image on top, the label row under it */
.l26 .l26-body__walk3d--hero {
    flex-wrap: wrap;
    padding: 0 20px 16px;
    overflow: hidden;
}

.l26 .l26-body__walk3d-hero {
    display: block;
    flex: 0 0 calc(100% + 40px);
    width: calc(100% + 40px);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 -20px 4px;
}

/* The viewer's deep links under the 3D card */
.l26 .l26-body__walk3d-more {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--l26-text-muted, #666);
}

.l26 .l26-body__walk3d-more a {
    color: var(--l26-green-text);
    font-weight: 600;
    text-decoration: none;
}

.l26 .l26-body__walk3d-more a:hover {
    text-decoration: underline;
}

/* ---------- From the field (F41) - token alignment only, partial owns its own markup/script ---------- */

.l26 .l26-body__ftf .ftf-container {
    border: 1px solid var(--l26-border);
    padding: 32px;
}

.l26 .l26-body__ftf .ftf-header {
    color: var(--l26-text);
}

.l26 .l26-body__ftf .ftf-subtitle,
.l26 .l26-body__ftf .ftf-rating-count,
.l26 .l26-body__ftf .ftf-rating-bar-label,
.l26 .l26-body__ftf .ftf-report-date {
    color: var(--l26-text-2);
}

.l26 .l26-body__ftf .ftf-rating-value,
.l26 .l26-body__ftf .ftf-report-hunter {
    color: var(--l26-text);
}

.l26 .l26-body__ftf .ftf-star.filled,
.l26 .l26-body__ftf .ftf-featured-badge {
    color: var(--l26-orange);
}

.l26 .l26-body__ftf .ftf-featured-badge {
    background: var(--l26-orange);
    color: var(--l26-surface);
}

.l26 .l26-body__ftf .ftf-rating-bar-fill,
.l26 .l26-body__ftf .ftf-recommend,
.l26 .l26-body__ftf .ftf-avatar,
.l26 .l26-body__ftf .ftf-species-pill,
.l26 .l26-body__ftf .ftf-load-more {
    background: var(--l26-green);
    color: var(--l26-surface);
}

.l26 .l26-body__ftf .ftf-recommend {
    background: transparent;
    color: var(--l26-green-text);
}

.l26 .l26-body__ftf .ftf-species-pill {
    background: var(--l26-tint);
    color: var(--l26-green-dark);
}

.l26 .l26-body__ftf .ftf-load-more {
    background: transparent;
    border-color: var(--l26-green);
    color: var(--l26-green-text);
}

.l26 .l26-body__ftf .ftf-read-more {
    color: var(--l26-green-text);
}

@media (max-width: 759px) {
    .l26 .l26-body__ftf .ftf-container {
        padding: 20px 16px;
    }
}

/* ---------- Hunter reviews (F42) ---------- */

.l26 .l26-body__review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.l26 .l26-body__review {
    max-width: none;
}

.l26 .hunter-name.l26-rep__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--l26-text);
}

.l26 .hunter-review-date.l26-meta {
    margin-top: 2px;
}

.l26 .weather-splitter.l26-divider {
    margin: 16px 0;
}

.l26 .l26-body__review-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--l26-text);
    white-space: pre-line;
}

/* ---------- Trail cam footage (F34) ---------- */

.l26 .trail-cam-block.l26-cam {
    border-radius: var(--l26-radius);
}

.l26 .l26-cam__head {
    align-items: flex-end;
}

/* No ::after arrow here (unlike .l26-link-arrow) - Scripts/web/listing.js overwrites this link's
   innerHTML with its own "See All &rarr;" / "See Less &rarr;" text, which already carries one. */
.l26 .l26-cam__see-all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    color: var(--l26-green-text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.l26 .l26-cam__see-all:hover {
    color: var(--l26-green-hover);
}

/* First child inside #trailCameraContainer (see _TrailCameraViewer.cshtml) - the header in
   _TrailCams.cshtml stays static/DB-free (code review ME-006), so this line renders with the
   camera grid instead of next to the H2. */
.l26 .l26-cam__summary {
    margin: 0 0 20px;
}

.l26 .l26-cam__loader {
    color: var(--l26-text-2);
}

.l26 .l26-cam__list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.l26 .l26-cam__camera-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.l26 .l26-cam__camera-id {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.l26 .l26-cam__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--l26-text-3);
    flex-shrink: 0;
}

.l26 .l26-cam__dot--active {
    background: var(--l26-success);
}

.l26 .l26-cam__name {
    margin: 0;
}

.l26 .l26-cam__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.l26 .l26-cam__shot,
.l26 .l26-cam__more {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--l26-radius-sm);
    overflow: hidden;
    text-decoration: none;
}

.l26 .l26-cam__shot {
    background: #2e3526;
}

.l26 .l26-cam__shot:hover {
    box-shadow: var(--l26-shadow-hover);
}

.l26 .l26-cam__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.l26 .l26-cam__stamp {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    padding: 3px 8px;
    background: var(--l26-stamp);
    color: var(--l26-surface);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.l26 .l26-cam__stamp-short {
    display: none;
}

.l26 .l26-cam__more {
    background: var(--l26-green-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--l26-surface);
}

.l26 .l26-cam__more:hover {
    background: var(--l26-green-deep);
    color: var(--l26-surface);
}

.l26 .l26-cam__more-count {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.l26 .l26-cam__more-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}

.l26 .l26-cam__empty {
    margin-top: 4px;
}

/* Locked (non-entitled) trail cam demo */

.l26 .l26-cam__locked-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.l26 .l26-cam__locked-shot {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--l26-radius-sm);
    display: block;
}

.l26 .l26-cam__locked-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: var(--l26-surface);
    border-radius: var(--l26-radius);
    padding: 24px 32px;
    box-shadow: var(--l26-shadow-hover);
    width: min(90%, 360px);
}

.l26 .l26-cam__locked-cta i {
    color: var(--l26-text-2);
    font-size: 20px;
}

.l26 .l26-cam__locked-cta p {
    margin: 8px 0 16px;
    color: var(--l26-text-2);
}

.l26 .cam-trail-subscribe-button.l26-btn {
    display: inline-flex;
}

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

    .l26 .l26-cam__stamp-full {
        display: none;
    }

    .l26 .l26-cam__stamp-short {
        display: inline;
    }

    .l26 .l26-cam__locked-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}