/**
 * Locali Pools Landing Page - overrides on top of backyard.css.
 * Body class: .lc-pools-page (combined with .lc-by-page for shared chrome).
 * Goal: keep brand parity (deep-green + warm-gold + cream, Playfair Display + Plus Jakarta Sans),
 * lean slightly cooler/aquatic (water blue accents on hover states + section dividers)
 * to evoke pool aesthetic without breaking the brand.
 */

/* ------------------------------------------------------------------ Hero */
.lc-pools-page .lc-by-hero__bg {
    /* Pool/water imagery wants slightly more contrast so the water reads true */
    filter: brightness(0.78) saturate(1.12);
}

/* Gold accent on hero edge — stronger to hint at sunlight on water */
.lc-pools-page .lc-by-hero::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(26, 60, 42, 0.45) 100%);
}

/* ------------------------------------------------------------------ Pain section: warmer-cooler hybrid */
.lc-pools-page .lc-by-transform .lc-by-transform__card {
    background: #FAF7F1;
    border-left: 3px solid var(--lc-gold, #C8A96E);
}

.lc-pools-page .lc-by-transform .lc-by-transform__card-number {
    color: var(--lc-gold, #C8A96E);
}

/* ------------------------------------------------------------------ Services grid (10 items, 5-col on wide screens) */
@media (min-width: 1280px) {
    .lc-pools-page .lc-by-services__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ------------------------------------------------------------------ Stats - aquatic accent on rule lines */
.lc-pools-page .lc-by-stats {
    border-top-color: rgba(74, 155, 102, 0.18);
    border-bottom-color: rgba(74, 155, 102, 0.18);
}

/* ------------------------------------------------------------------ Process section - 5 steps not 4 */
@media (min-width: 1200px) {
    .lc-pools-page .lc-by-process__cards {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ------------------------------------------------------------------ Final CTA - cool-tinted overlay to read as twilight pool scene */
.lc-pools-page .lc-by-cta::before {
    background: linear-gradient(180deg, rgba(20, 50, 70, 0.45) 0%, rgba(26, 60, 42, 0.85) 100%);
}

/* ------------------------------------------------------------------ Mobile bar */
.lc-pools-page .lc-by-mobile-bar {
    grid-template-columns: 1fr 1fr;
}

/* ==================================================================
   LOCALI_REMODEL bargershon8 2026-05-17
   Pool renovation track styles: secondary hero CTA, remodel services,
   before/after showcase, "pool ready" checklist.
   ================================================================== */

/* ---- Hero secondary "see it renovated" CTA -------------------- */
.lc-pools-page .lc-by-hero__ai-btn--secondary {
    margin-top: 10px;
    background: transparent;
    border: 1.5px solid rgba(250, 250, 247, 0.55);
    color: #FAFAF7;
}
.lc-pools-page .lc-by-hero__ai-btn--secondary:hover {
    border-color: var(--lc-gold, #C8A96E);
    color: var(--lc-gold, #C8A96E);
    background: rgba(0,0,0,0.15);
}

/* ---- Pool remodel services section ----------------------------- */
.lc-pool-remodel {
    background: linear-gradient(180deg, #FAFAF7 0%, #f4f1ea 100%);
    padding-top: 90px;
}
.lc-pool-remodel__intro {
    max-width: 760px;
    margin: 12px auto 0;
    color: #6b6860;
    font-size: 1.05em;
    line-height: 1.55;
}
.lc-pool-remodel__cta {
    text-align: center;
    margin-top: 38px;
}

/* ---- Before/After showcase ------------------------------------- */
.lc-pool-ba {
    background: #1A3C2A;
    color: #FAFAF7;
    padding: 90px 0;
}
.lc-pool-ba .lc-by-section-tag { color: var(--lc-gold, #C8A96E); }
.lc-pool-ba h2 { color: #FAFAF7; }
.lc-pool-ba .lc-pool-remodel__intro { color: #cfd1c8; }

.lc-pool-ba__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 44px;
}
.lc-pool-ba__pair {
    background: #122a1f;
    border: 1px solid rgba(200, 169, 110, 0.18);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lc-pool-ba__slider {
    --lc-ba: 50%;
    position: relative;
    width: 100%;
    /* Universal 1:1 aspect ratio using padding-top hack (bulletproof on every
       mobile browser including older iOS Safari). aspect-ratio kept as a hint
       for modern engines but padding-top is the source of truth. */
    padding-top: 100%;
    aspect-ratio: 1 / 1;
    height: 0;            /* let padding-top drive the height */
    flex: 0 0 auto;        /* don't let the column flex parent stretch us */
    align-self: stretch;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    background: #0f2318;
    display: block;
}
.lc-pool-ba__after,
.lc-pool-ba__before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    display: block;
}
.lc-pool-ba__before {
    clip-path: inset(0 calc(100% - var(--lc-ba)) 0 0);
}
.lc-pool-ba__tag {
    position: absolute;
    top: 12px;
    background: rgba(0,0,0,0.72);
    color: #FAFAF7;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    pointer-events: none;
    font-weight: 600;
}
.lc-pool-ba__tag--before { left: 12px; }
.lc-pool-ba__tag--after  { right: 12px; background: rgba(200, 169, 110, 0.92); color: #1A3C2A; }
.lc-pool-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--lc-ba);
    transform: translateX(-50%);
    width: 4px;
    background: #FAFAF7;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
}
.lc-pool-ba__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FAFAF7;
    color: #1A3C2A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.lc-pool-ba__caption {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lc-pool-ba__caption strong {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15em;
    color: #FAFAF7;
}
.lc-pool-ba__caption span { color: #d9d4c5; font-size: 0.95em; line-height: 1.45; }
.lc-pool-ba__caption em {
    color: var(--lc-gold, #C8A96E);
    font-style: italic;
    font-size: 0.9em;
    margin-top: 4px;
}

/* ---- "Is your pool ready?" checklist -------------------------- */
.lc-pool-checklist {
    background: #FAFAF7;
    padding: 90px 0;
}
.lc-pool-checklist__grid {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.lc-pool-checklist__item {
    background: #fff;
    border: 1px solid #efe9d8;
    border-radius: 6px;
    transition: border-color 0.2s, background 0.2s;
}
.lc-pool-checklist__item label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 0.98em;
    line-height: 1.4;
    color: #2a2a28;
}
.lc-pool-checklist__cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lc-pool-checklist__mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f4f1ea;
    color: #6b6860;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.lc-pool-checklist__item:has(.lc-pool-checklist__cb:checked) {
    border-color: var(--lc-gold, #C8A96E);
    background: #fcf8ef;
}
.lc-pool-checklist__item:has(.lc-pool-checklist__cb:checked) .lc-pool-checklist__mark {
    background: var(--lc-gold, #C8A96E);
    color: #1A3C2A;
}
.lc-pool-checklist__result {
    text-align: center;
    margin-top: 32px;
    padding: 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #efe9d8;
    transition: border-color 0.3s, background 0.3s;
}
.lc-pool-checklist__result--hot {
    border-color: var(--lc-gold, #C8A96E);
    background: linear-gradient(180deg, #fcf8ef 0%, #FAFAF7 100%);
}
.lc-pool-checklist__count {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25em;
    color: #1A3C2A;
    margin: 0 0 6px;
}
.lc-pool-checklist__cta {
    color: #6b6860;
    margin: 0 0 16px;
}
.lc-pool-checklist__result--hot .lc-pool-checklist__cta { color: #2a2a28; font-weight: 600; }
.lc-pool-checklist__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 640px) {
    .lc-pool-ba { padding: 60px 0; }
    .lc-pool-checklist { padding: 60px 0; }
    .lc-pool-remodel { padding-top: 60px; }
    .lc-pool-ba__knob { width: 34px; height: 34px; }
}

/* ==================================================================
   LOCALI_GATE_DESKTOP bargershon8 2026-05-17
   The AI gate's lock card was getting squeezed between the BEFORE photo
   (left 50%) and the blurred placeholder (right 50%). On desktop give
   the result container + the card more room, dim the surrounding halves
   so the card reads as the focal point.
   ================================================================== */
@media (min-width: 900px) {
    .lc-pools-page .lai-result__render { max-width: 920px; }
    .lc-pools-page .lai-gate          { min-height: 560px; }
    .lc-pools-page .lai-gate__card    {
        max-width: 480px;
        padding: 36px 40px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    }
    /* Pull the BEFORE photo + blurred AFTER inward so the card has clear margins */
    .lc-pools-page .lai-gate__before     { width: 36%; }
    .lc-pools-page .lai-gate__after-blur { width: 36%; }
    /* Dim the halves so the focal point is unambiguously the white card */
    .lc-pools-page .lai-gate__before::after,
    .lc-pools-page .lai-gate__after-blur::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
        pointer-events: none;
    }
    .lc-pools-page .lai-gate__before  { box-shadow: inset -40px 0 60px -20px rgba(0,0,0,0.55); }
    .lc-pools-page .lai-gate__after-blur { box-shadow: inset 40px 0 60px -20px rgba(0,0,0,0.55); }
}
@media (min-width: 1200px) {
    .lc-pools-page .lai-result__render { max-width: 1040px; }
    .lc-pools-page .lai-gate__card     { max-width: 520px; padding: 40px 44px; }
}