/**
 * Urban Collections - Shared Stylesheet
 *
 * Shared typography for all collection landing pages (font-token migration,
 * Wave A). Enqueued automatically by collections.php for any matched
 * collection URL.
 *
 * The --text-* tokens ship in urban-style-2025.css (S3). Every rule carries
 * a legacy px fallback, so pages render exactly as before until that deploy
 * lands. RULES FOR THIS FILE: no raw px font-sizes (always var(--text-*, NNpx)),
 * unitless line-height only, no apostrophes in comments (snippets get copied
 * into PHP single-quoted strings).
 */

/* Hero heading - was 38px/42px with NO responsive step in 8 of 9 collection
   files: the documented word-per-line wrap over hero photos at 320px.
   --text-3xl: 26px at 320, 43px at 1440 (legacy desktop), caps 46px. */
.collections_hero_content { --fs-h2: var(--text-3xl); }
.collections_hero_content h2 {
    font-size: var(--text-3xl, 38px);
    line-height: var(--leading-heading, 1.15);
    overflow-wrap: break-word;
}

/* Sample product-name overlays - were 28px with line-height 1em, absolutely
   positioned over sample imagery, never reduced in 7 collection files.
   --text-2xl: 21px at 320, 28px at 1440, caps 31px. */
.samples_text p {
    font-size: var(--text-2xl, 28px);
    line-height: var(--leading-heading, 1.15);
    overflow-wrap: break-word;
}

/* Feature section headings - 43px desktop in every collection file, but the
   mobile step diverged per file (25px in some, 35px in others, both in one).
   One fluid token replaces every fork. */
.collections_feature_section h3 {
    font-size: var(--text-3xl, 43px);
    line-height: var(--leading-heading, 1.15);
    overflow-wrap: break-word;
}

/* ============================================================= *
 * ROOM SCENE CAROUSEL — one copy for every collection page
 * (markup: templates/room-scene-carousel.php, behavior:
 * urban-collections.js). Canonical variant: Sound-Tec.
 * ============================================================= */
.collections_carousel {
    position: relative;
    width: 100%;
}

.collections_carousel_track {
    position: relative;
    width: 100%;
    height: clamp(320px, 60vh, 690px);
}

.collections_carousel_slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.collections_carousel_slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.collections_carousel_content_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Slides with an art-directed phone crop wrap the img in <picture>, which is
   inline by default -- without this the img's height: 100% has no block box to
   resolve against and the photo collapses to its intrinsic height. */
.collections_carousel_content_picture {
    display: block;
    width: 100%;
    height: 100%;
}

.collections_carousel_signature_bar {
    position: absolute;
    left: var(--grid-gap, 16px);
    bottom: var(--grid-gap, 16px);
    display: flex;
    align-items: baseline;
    gap: 10px;
    z-index: 2;
    color: #fff;
}

.collections_carousel_signature_logo {
    width: auto;
    height: 54px;
    display: block;
    margin-right: var(--grid-gap);
}

.collections_carousel_signature_name,
.collections_carousel_signature_sku {
    margin: 0;
    color: var(--urban-static-white) !important;
    line-height: var(--leading-heading, 1.15);
    display: inline;
}

/* Pinned size - the shared feature-heading rule above (43px) would
   otherwise catch this h3 inside collections_feature_section wrappers. */
h3.collections_carousel_signature_name {
    font-size: var(--text-2xl, 28px);
    font-weight: 400;
}

p.collections_carousel_signature_sku {
    font-size: var(--text-lg, 22px);
    overflow-wrap: anywhere;
}

.collections_carousel_dots {
    position: absolute;
    left: 50%;
    bottom: 71px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: #fff;
    padding: 10px 19px;
    height: 39px;
    border-radius: var(--border-radius-small);
}

.collections_carousel_dots::before,
.collections_carousel_dots::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .35s ease;
    pointer-events: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.collections_carousel_dots::before {
    left: -45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 L5 8 L10 13' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.collections_carousel_dots::after {
    right: -45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 3 L11 8 L6 13' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hover affordance for chevrons */
.collections_carousel_dots.hover-left::before,
.collections_carousel_dots.hover-right::after {
    box-shadow: rgba(41, 57, 72, 0.45) 0px 4px 10.2px 2px;
}

.collections_carousel_dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #000;
    cursor: pointer;
}

.collections_carousel_dot.is-active {
    background: #000;
    cursor: default;
}
/* Expand icon - top right corner (matches product grid quickview button) */
.collections_carousel_expand {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    transition: all .35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collections_carousel_expand:hover {
    box-shadow: rgba(41, 57, 72, 0.45) 0px 4px 10.2px 2px;
}

.collections_carousel_expand svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #000;
}
/* Lightbox overlay */
.collections_carousel_lightbox {
    display: none;
    position: fixed;
    top: 80px; /* Account for nav */
    left: 0;
    width: 100%;
    height: calc(100% - 80px); /* Subtract nav height */
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.collections_carousel_lightbox.is-open {
    display: flex;
    opacity: 1;
}

.collections_carousel_lightbox_content {
    position: relative;
    max-width: 90vw;
    max-height: calc(90vh - 80px); /* Subtract nav height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.collections_carousel_lightbox_image {
    max-width: 100%;
    max-height: calc(90vh - 80px); /* Subtract nav height */
    object-fit: contain;
    display: block;
}

.collections_carousel_lightbox_close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.collections_carousel_lightbox_close:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

.collections_carousel_lightbox_close::before,
.collections_carousel_lightbox_close::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: white;
}

.collections_carousel_lightbox_close::before {
    transform: rotate(45deg);
}

.collections_carousel_lightbox_close::after {
    transform: rotate(-45deg);
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 1380px) {
    .collections_carousel_signature_bar {
        flex-direction: column;
        align-items: flex-start;
        bottom: var(--grid-gap);
    }

    .collections_carousel_signature_logo {
        height: 46px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .collections_carousel_dots {
        bottom: var(--grid-gap);
    }
}

@media (min-width: 992px) {
    .collections_carousel_track {
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    .collections_carousel_signature_bar {
        bottom: revert;
        left: revert;
        bottom: 90px;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: var(--inner-grid-gap);
        background-color: rgba(0, 0, 0, .2);
    }
    .collections_carousel_signature_logo {
        height: 60px;
    }
}

@media (max-width: 600px) {
    .collections_carousel_expand {
        top: 16px;
        right: 16px;
    }

    /* The overlaid selector covers most of the small photo - drop it below
       the carousel instead. position: relative keeps the chevron
       pseudo-elements anchored to the pill. */
    .collections_carousel_dots {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: max-content;
        margin: var(--inner-grid-gap) auto 0;
    }

    /* The 90px offset only existed to clear the overlaid dots - with the
       controls outside, the caption band sits at the photo bottom. */
    .collections_carousel_signature_bar {
        bottom: var(--grid-gap);
    }

    /* Keep the rounded photo corners: small-screen rules square the image
       itself, so round and clip at the track level instead. */
    .collections_carousel_track {
        border-radius: var(--border-radius-large);
        overflow: hidden;
    }
}

/* ============================================================= *
 * VIEW-BY-FORMAT FILTER — one copy for the Signature + East Coast
 * grids (markup: templates/format-filter.php, behavior:
 * urban-collections.js). Card proportion is per page:
 * set --collections-format-card-ratio on an ancestor.
 * ============================================================= */
.collections_format_filter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inner-grid-gap);
}

.collections_format_card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--collections-format-card-ratio, 1.84 / 1);
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.35s ease, transform 0.35s ease;
    /* A click with slight mouse movement must toggle the filter, not start
       a native image/text drag (draggable="false" covers Firefox). */
    -webkit-user-select: none;
    user-select: none;
}

.collections_format_card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    -webkit-user-drag: none;
}

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

.collections_format_card:focus-visible {
    outline: 3px solid var(--urban-action-green, #2e7d32);
    outline-offset: 2px;
}

.collections_format_label {
    position: absolute;
    top: calc(var(--grid-gap) / 2);
    left: calc(var(--grid-gap) / 2);
    z-index: 1;
    color: var(--static-urban-white);
    font-size: var(--text-sm, 16px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    text-align: left;
}

/* Selected format cards are highlighted, deselected cards dim. No cards
   start selected (nothing highlighted, the full collection showing);
   selecting none also shows the full collection. */
.collections_format_card.active::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Flips with the scheme: black selection ring in light mode, white in
       dark (a static white ring was invisible-on-white in light mode). */
    border: 3px solid var(--urban-black);
    border-radius: var(--border-radius-large);
    pointer-events: none;
}

/* Deselected cards shrink ~10% (and dim), so selected cards read about
   10% larger. Scaling selected cards UP instead could overlap neighbors
   (transforms do not reflow the grid), so deselected cards scale down. */
.collections_format_card:not(.active):not(.collections_format_card_empty) {
    opacity: 0.55;
    transform: scale(0.9);
}

.collections_format_card_empty {
    opacity: 0.35;
    cursor: default;
}

/* Shared style for the View by Format heading and the selection-following
   grid heading (page markup applies the class). */
.collections_format_heading {
    --fs-h2: var(--text-xl);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--grid-gap);
}

/* Format toggle hiding — must also beat .upg_item.visible display:block. */
.upg_item.collections_format_hidden {
    display: none !important;
}

@media (max-width: 600px) {
    .collections_format_filter {
        grid-template-columns: 1fr;
        gap: var(--grid-gap);
    }
    /* Stacked single column: short banner strips (a third of the row-card
       height), label vertically centered in the strip. */
    .collections_format_card {
        aspect-ratio: 6 / 1;
    }
    .collections_format_label {
        top: 50%;
        transform: translateY(-50%);
    }
}