.ba-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ba-tabs button{min-height:44px;padding:8px 18px;border-radius:99px;border:2px solid var(--green);background:#fff;color:var(--green);font:inherit;font-weight:600;cursor:pointer}
.ba-tabs button[aria-pressed=true]{background:var(--green);color:#fff}
.ba{--pos:50%;position:relative;aspect-ratio:4/3;max-width:900px;border-radius:24px;overflow:hidden;background:#ddd;user-select:none;box-shadow:0 20px 50px rgba(31,77,58,.18)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.ba-line i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.ba-line i:before,.ba-line i:after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.ba-line i:before{left:6px;border-right-color:var(--green);border-left:0}
.ba-line i:after{right:6px;border-left-color:var(--green);border-right:0}
.ba-label{position:absolute;top:16px;padding:6px 14px;border-radius:99px;background:rgba(22,58,43,.85);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.ba-label.l{left:16px}.ba-label.r{right:16px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:focus-within{outline:3px solid var(--green);outline-offset:3px}
.g-item{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#ddd;aspect-ratio:1;display:block}
.g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.g-item:hover img{transform:scale(1.04)}
.g-item span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;background:linear-gradient(transparent,rgba(22,58,43,.85));color:#fff;font-size:.85rem;text-align:left}
.preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:40px 0 24px}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.g-sec{padding:40px 0 8px}.g-sec h2{margin-bottom:.2em}
.gnav{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.gnav a{padding:10px 18px;border-radius:99px;background:var(--pink);color:var(--green);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.page-hero{background:linear-gradient(135deg,#fff 40%,var(--pink));padding:56px 0 40px}
#lightbox{max-width:900px;padding:16px}
#lightbox img{width:100%;max-height:70vh;object-fit:contain;border-radius:12px;background:#111}
#lightbox p{margin:12px 0 0;font-weight:600;color:var(--green)}

/* Alignment + softer palette overrides */
.ba{max-width:none;width:100%;aspect-ratio:16/9}
.preview{grid-template-columns:repeat(3,1fr);gap:16px}
.preview .g-item{aspect-ratio:4/3}
.g-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.g-item{aspect-ratio:4/3}
.ba-tabs button{border:1.5px solid #d6d8d7;color:var(--ink)}
.ba-tabs button:hover{background:var(--pink)}
.ba-tabs button[aria-pressed=true]{background:var(--pink);border-color:var(--pink-d);color:var(--ink)}
.gnav a{background:#fff;border:1.5px solid #d6d8d7;color:var(--ink)}
.gnav a:hover{background:var(--pink)}
.ba-label{background:rgba(43,45,47,.8)}
@media(max-width:760px){.preview{grid-template-columns:repeat(2,1fr)}.ba{aspect-ratio:4/3}}