/* Story Carousel — kabdalis2 design system.
   Native horizontal scroll with snap points; the arrow buttons are pure
   progressive enhancement (hidden until view.js adds .is-ready). */
.b-snapc__head{ margin-bottom:18px; }
.b-snapc__title{ margin:6px 0 0; color:var(--ink, #25211b); }

.b-snapc__wrap{ position:relative; }
.b-snapc__viewport{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* breathing room so the first/last card can snap without clipping */
    padding-inline:4px;
    padding-block:4px;
    scrollbar-width:none;
}
.b-snapc__viewport::-webkit-scrollbar{ display:none; }
.b-snapc__viewport:focus-visible{
    outline:2px solid var(--accent, #9c3a52);
    outline-offset:2px;
}
@media (prefers-reduced-motion: no-preference){
    .b-snapc__viewport{ scroll-behavior:smooth; }
}

.b-snapc__track{
    display:flex; gap:16px;
    margin:0; padding:0; list-style:none;
}
.b-snapc__card{
    flex:none;
    width:min(300px, 72vw);
    scroll-snap-align:start;
    background:var(--surface, #fff);
    border:1px solid var(--line, #e4ded2);
    border-radius:var(--radius, 14px);
    overflow:hidden;
}
.b-snapc__fig{ margin:0; }
.b-snapc__fig .photo{
    aspect-ratio:4 / 5;
    background:var(--surface2, #f5f1ea);
}
.b-snapc__fig .photo img{
    width:100%; height:100%;
    object-fit:cover; display:block;
}
.b-snapc__cap{ padding:14px 16px 18px; }
.b-snapc__t{ margin:0 0 6px; font-size:1.05rem; color:var(--ink, #25211b); }
.b-snapc__x{ margin:0; font-size:.92rem; line-height:1.5; color:var(--muted, #8a8070); }

.b-snapc__nav{
    position:absolute;
    /* vertical centre of the 4/5 photo area (card width × 5/4 ÷ 2) + track padding */
    top:calc(min(375px, 90vw) / 2 + 4px);
    transform:translateY(-50%);
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--surface, #fff);
    border:1px solid var(--line, #e4ded2);
    color:var(--ink, #25211b);
    cursor:pointer;
    box-shadow:0 2px 10px rgba(0, 0, 0, .12);
    transition:background 150ms ease, opacity 150ms ease;
}
.b-snapc__nav--prev{ left:10px; }
.b-snapc__nav--next{ right:10px; }
.b-snapc__nav:hover:not(:disabled){ background:var(--surface2, #f5f1ea); }
.b-snapc__nav:disabled{ opacity:.35; cursor:default; }
/* Without JS (or when everything fits) the arrows stay hidden. */
.b-snapc:not(.is-ready) .b-snapc__nav{ display:none; }

@media (prefers-reduced-motion: reduce){
    .b-snapc__viewport{ scroll-behavior:auto; }
    .b-snapc__nav{ transition:none; }
}