/* V3.3.1: archived .ba comparison, scoped to the Regional Turf page. */
.turf-comparison{border-bottom:1px solid var(--line)}
.comparison-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:end;margin-bottom:36px}
.comparison-heading h2{max-width:650px}
.comparison-heading>p{color:var(--muted);max-width:490px;margin:0}
/* Both complete images remain visible before enhancement; reserved geometry avoids a jump. */
.ba__frame{--pos:50%;width:100%;position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2/1;background:var(--paper);isolation:isolate}
.ba__layer{min-width:0;min-height:0}
.ba__layer img{width:100%;height:100%;object-fit:contain}
.ba__badge{position:absolute;top:18px;z-index:3;background:var(--navy);color:var(--white);padding:7px 12px;font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.1em;pointer-events:none}
.ba__badge--before{left:18px}.ba__badge--after{right:18px}
.ba__handle,.ba__range,.ba__help{display:none}
.ba__cap{font-size:13px;line-height:1.65;color:var(--muted);padding-top:16px;max-width:850px}
.ba__cap span{display:block}
.ba.is-live .ba__frame{touch-action:pan-y;user-select:none;cursor:ew-resize}
.ba.is-live .ba__layer{position:absolute;inset:0}
.ba.is-live .ba__layer img{object-fit:cover;object-position:30% 50%}
.ba.is-live .ba__layer--before{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba.is-live .ba__handle{display:block;position:absolute;z-index:4;top:0;bottom:0;left:var(--pos);pointer-events:none}
.ba__line{position:absolute;top:0;bottom:0;width:2px;left:-1px;background:var(--white);box-shadow:0 0 5px #10182766}
.ba__grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--white);box-shadow:0 4px 18px #10182766}
/* Keep the circular affordance inside the frame at either endpoint. */
.ba.is-live .ba__handle:has(.ba__grip){left:clamp(26px,var(--pos),calc(100% - 26px))}
.ba.is-live .ba__frame::after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-1px);background:var(--white);pointer-events:none}
.ba__line{display:none}
.ba__grip::before,.ba__grip::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid var(--navy);border-width:1.5px 1.5px 0 0}
.ba__grip::before{left:15px;transform:translateY(-50%) rotate(-135deg)}.ba__grip::after{right:15px;transform:translateY(-50%) rotate(45deg)}
.ba.is-live .ba__range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba.is-live .ba__frame:has(.ba__range:focus-visible){outline:3px solid var(--navy);outline-offset:5px}
.ba.is-live .ba__frame:has(.ba__range:focus-visible) .ba__grip{box-shadow:0 0 0 3px var(--navy),0 0 0 6px var(--white)}
.ba.is-live .ba__help{display:block;font-size:12px;color:var(--muted);margin:12px 0 0}
@media(max-width:900px){.comparison-heading{gap:32px}.comparison-heading h2{font-size:42px}.comparison-heading>p{font-size:15px}}
@media(max-width:768px){.comparison-heading{display:block;margin-bottom:28px}.comparison-heading>p{margin-top:24px;max-width:540px}.comparison-heading h2{font-size:39px;max-width:600px}.ba__frame{grid-template-columns:1fr;grid-template-rows:1fr 1fr;aspect-ratio:4/5;max-height:600px}.ba:not(.is-live) .ba__badge--after{top:calc(50% + 12px);left:12px;right:auto}.ba__badge{top:12px;padding:6px 9px;font-size:10px}.ba__badge--before{left:12px}.ba__badge--after{right:12px}.ba__cap{font-size:12px}}
@media(max-width:360px){.comparison-heading h2{font-size:35px}}