/* gallery */
@media only screen and (min-width:0rem){#gallery{padding:var(--sectionPadding);padding-top:var(--interiorPadding)}#gallery .cs-container{width:100%;max-width:34.375rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,6vw,4rem)}#gallery .cs-content{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}#gallery .gallery-group{width:100%;display:flex;flex-direction:column;gap:clamp(1rem,1.5vw,1.25rem)}#gallery .cs-gallery{width:100%;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(1rem,1.5vw,1.25rem)}#gallery .cs-image{width:47%;display:block;border-radius:1rem;position:relative;overflow:hidden;aspect-ratio:1}#gallery .cs-image img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}}@media only screen and (min-width:48rem){#gallery .cs-container{max-width:80rem}#gallery .cs-image{width:31.8%;max-width:18.75rem;aspect-ratio:1}}@media only screen and (min-width:81.25rem){#gallery .cs-gallery{justify-content:center;align-items:stretch}#gallery .cs-image{width:39.375rem;max-width:100%;height:25rem}#gallery .cs-image:nth-of-type(2),#gallery .cs-image:nth-of-type(3),#gallery .cs-image:nth-of-type(4),#gallery .cs-image:nth-of-type(5){width:19.0625rem}}@media only screen and (min-width:0rem){body.dark-mode #gallery .cs-topper{color:var(--bodyTextColorWhite)}body.dark-mode #gallery .cs-title,body.dark-mode #gallery .cs-text{color:var(--bodyTextColorWhite)}body.dark-mode #gallery .cs-text{opacity:0.8}}

/*-- -------------------------- -->
<---       Before & After       -->
<--- -------------------------- -*/

/* Gallery page. Ported from the Wholesale Windows & Doors before/after component (ww-ba-*).
   Same markup and behavior, scoped to this section. Two presentations:
   .ww-ba           drag-to-reveal slider, only for pairs shot from the same spot
                    (needs /assets/js/before-after.js)
   .ww-ba--split    side-by-side pair, for photos shot from different angles
   .ww-ba--tall     portrait halves, so tall walls keep their height
   The {% image %} shortcode puts .ww-ba-img on the <picture>, so the picture
   fills the frame and its <img> covers it. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #before-after {
    padding: var(--sectionPadding);
  }
  #before-after .ww-ba-head {
    text-align: center;
    max-width: 46rem;
    /* 40px - 56px */
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  }
  #before-after .ww-ba-head .cs-title {
    margin: 0 auto;
  }
  #before-after .ww-ba-head .cs-text {
    margin: 1rem auto 0;
  }
  #before-after .ww-ba-grid {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    /* 32px - 48px */
    gap: clamp(2rem, 4vw, 3rem);
  }
  #before-after .ww-ba-grid--narrow {
    /* two sliders: keeps each close to the original 25rem slider width */
    max-width: 54rem;
  }
  #before-after .ww-ba-subhead {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    text-align: center;
    /* 48px - 80px above */
    margin: clamp(3rem, 7vw, 5rem) auto clamp(1.5rem, 3vw, 2rem);
    color: var(--headerColor);
  }
  #before-after .ww-ba-source {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-style: italic;
    text-align: center;
    margin: 2rem auto 0;
    color: var(--bodyTextColor);
  }
  #before-after .ww-ba-foot {
    /* 40px - 56px */
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: flex;
    justify-content: center;
  }
  #before-after .ww-ba {
    --ww-ba-pos: 50%;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  #before-after .ww-ba-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0.5rem;
    background: var(--lightGrey);
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }
  #before-after .ww-ba-img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    /* phone snaps off a job site: a hair of extra saturation keeps them lively */
    filter: saturate(1.03);
  }
  #before-after .ww-ba-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #before-after .ww-ba-img--before {
    /* the "before" sits on the "after" and is clipped back to the divider, so
       both photos stay the same size and always register with each other */
    clip-path: inset(0 calc(100% - var(--ww-ba-pos)) 0 0);
    z-index: 1;
  }
  #before-after .ww-ba-badge {
    font-family: var(--headerFont);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    color: #fff;
    position: absolute;
    top: 0.75rem;
    z-index: 3;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: opacity 0.25s ease;
  }
  #before-after .ww-ba-badge--before {
    background: rgba(4, 36, 100, 0.85);
    left: 0.75rem;
  }
  #before-after .ww-ba-badge--after {
    background: var(--primary);
    right: 0.75rem;
  }
  /* once the divider is pushed to one side, fade the label with no photo under it */
  #before-after .ww-ba[data-ww-ba-edge="start"] .ww-ba-badge--before,
  #before-after .ww-ba[data-ww-ba-edge="end"] .ww-ba-badge--after {
    opacity: 0;
  }
  #before-after .ww-ba-divider {
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(4, 36, 100, 0.25);
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ww-ba-pos);
    z-index: 2;
    pointer-events: none;
  }
  #before-after .ww-ba-grip {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.125rem 0.625rem rgba(4, 36, 100, 0.35);
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: scale 0.15s ease;
  }
  #before-after .ww-ba-grip:before,
  #before-after .ww-ba-grip:after {
    /* two outward chevrons drawn from borders, tinted with the brand */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border: solid var(--primary);
    border-width: 2px 2px 0 0;
    position: absolute;
  }
  #before-after .ww-ba-grip:before {
    margin-right: 0.875rem;
    rotate: -135deg;
  }
  #before-after .ww-ba-grip:after {
    margin-left: 0.875rem;
    rotate: 45deg;
  }
  #before-after .ww-ba-range {
    /* the real control: a hairline, invisible range thumb, so the visible grip
       can sit exactly under the pointer at every position */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: ew-resize;
    appearance: none;
    -webkit-appearance: none;
    touch-action: pan-y;
  }
  #before-after .ww-ba-range::-webkit-slider-thumb {
    width: 2px;
    height: 100%;
    background: transparent;
    border: none;
    cursor: ew-resize;
    appearance: none;
    -webkit-appearance: none;
  }
  #before-after .ww-ba-range::-moz-range-thumb {
    width: 2px;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: ew-resize;
  }
  #before-after .ww-ba-range::-moz-range-track {
    background: transparent;
    border: none;
  }
  #before-after .ww-ba-range:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
  /* before-after.js adds .ww-ba--drag and drives the range from pointer events
     on the whole frame; the range stays focusable for keyboard and AT */
  #before-after .ww-ba--drag .ww-ba-frame {
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  #before-after .ww-ba--drag .ww-ba-range {
    pointer-events: none;
  }
  #before-after .ww-ba-frame:hover .ww-ba-grip,
  #before-after .ww-ba-range:focus-visible ~ .ww-ba-divider .ww-ba-grip {
    scale: 1.08;
  }
  #before-after .ww-ba-caption {
    margin-top: 1rem;
  }
  #before-after .ww-ba-place {
    font-family: var(--headerFont);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--primary);
    display: block;
  }
  #before-after .ww-ba-name {
    font-family: var(--headerFont);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    display: block;
  }
  #before-after .ww-ba-desc {
    font-size: 0.9375rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  /* split: the two photos side by side. Landscape halves stack on mobile
     (changes at tablet); tall halves always sit side by side */
  #before-after .ww-ba--split .ww-ba-frame {
    aspect-ratio: auto;
    background: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    overflow: visible;
  }
  #before-after .ww-ba--split .ww-ba-half {
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    background: var(--lightGrey);
    position: relative;
    overflow: hidden;
  }
  #before-after .ww-ba--split .ww-ba-img {
    clip-path: none;
  }
  #before-after .ww-ba--split.ww-ba--tall .ww-ba-frame {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  #before-after .ww-ba--split.ww-ba--tall .ww-ba-half {
    aspect-ratio: 3 / 4;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #before-after .ww-ba-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  #before-after .ww-ba--split .ww-ba-frame {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  /* a landscape split pair is a wide, full-row item wherever it lands */
  #before-after .ww-ba-grid .ww-ba--split:not(.ww-ba--tall) {
    grid-column: 1 / -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #before-after .ww-ba-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #before-after .ww-ba-frame,
  body.dark-mode #before-after .ww-ba--split .ww-ba-half {
    background: var(--medium);
  }
  body.dark-mode #before-after .ww-ba--split .ww-ba-frame {
    background: none;
  }
  body.dark-mode #before-after .cs-title,
  body.dark-mode #before-after .ww-ba-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #before-after .cs-text,
  body.dark-mode #before-after .ww-ba-desc {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #before-after .ww-ba-subhead {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #before-after .ww-ba-source {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #before-after .ww-ba-place {
    color: var(--primaryOnDark);
  }
  body.dark-mode #before-after .ww-ba-grip:before,
  body.dark-mode #before-after .ww-ba-grip:after {
    border-color: var(--dark);
  }
}
@media (prefers-reduced-motion: reduce) {
  #before-after .ww-ba-grip,
  #before-after .ww-ba-badge {
    transition: none;
  }
}

/* intro-text links */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery .cs-text a {
    color: var(--primary);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery .cs-text a {
    /* default link blue is unreadable on --dark */
    color: var(--primaryOnDark);
  }
}