/* =========================================================================
   urhema_related_studies.css — Related Studies slider (BibleStudy.cshtml)

   Kept as its own small file rather than folded into urhema_biblestudy.css,
   which wasn't available to check against — safer than a blind full-file
   rewrite of something unseen. Leans on .ub-card (already applied in the
   markup: class="ub-card ub-related-study") for base chrome, and on
   .ub-icon-button (urhema_shell.css) for the nav buttons' base look — only
   the slider-specific layout is new here.

   ASSUMPTION FLAGGED: .ub-card is assumed to carry its own padding, same
   as every other place it's used in BibleStudy.cshtml. ub-related-study
   zeroes that out below so the cover image can bleed to the card's edge —
   if .ub-card has no padding of its own, this override is a no-op, not a
   regression.
   ========================================================================= */

.ub-biblestudy__related {
    margin-top: var(--ub-space-8);
}

/* ---- Slider shell ------------------------------------------------------ */

.ub-related-study-slider {
    position: relative;
    margin-top: var(--ub-space-4);
}

.ub-related-study-slider__track {
    display: flex;
    gap: var(--ub-space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the focus ring on a focused card without it getting clipped
       by overflow-x, and to offset the edge-fade width below. */
    padding-block: var(--ub-space-1);
    padding-inline: var(--ub-space-1);
    margin-inline: calc(var(--ub-space-1) * -1);
    /* Scrollbar hidden — the nav buttons + fades are the affordance, a
       visible native scrollbar under a card row reads as an unstyled leftover. */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .ub-related-study-slider__track::-webkit-scrollbar {
        display: none;
    }

    .ub-related-study-slider__track:focus-visible {
        outline: none;
        box-shadow: none; /* individual cards carry their own focus ring, not the track */
    }

/* Edge fades sit on the non-scrolling wrapper, not the track itself — a
   pseudo-element on the track would scroll along with the cards instead of
   staying pinned to the viewport edge. */
.ub-related-study-slider::before,
.ub-related-study-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--ub-duration-fast) var(--ub-ease);
}

.ub-related-study-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--ub-paper), transparent);
}

.ub-related-study-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--ub-paper), transparent);
}

/* Hide the fade at whichever edge there's nothing left to scroll toward —
   toggled by the slider's own JS via updateNavState(). */
.ub-related-study-slider.is-start::before,
.ub-related-study-slider.is-end::after {
    opacity: 0;
}

.ub-related-study-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: var(--ub-paper-raised);
    border: var(--ub-rule-strong);
    box-shadow: var(--ub-shadow-soft);
    transition: opacity var(--ub-duration-fast) var(--ub-ease);
}

    .ub-related-study-slider__nav--prev {
        left: -0.75rem;
    }

    .ub-related-study-slider__nav--next {
        right: -0.75rem;
    }

    /* Disabled state doubles as "nothing further that direction" — matches
       .ub-icon-button's existing hover/focus states, just adds the disabled look. */
    .ub-related-study-slider__nav:disabled {
        opacity: 0;
        pointer-events: none;
    }

@media (max-width: 40rem) {
    /* Touch-scroll only on small screens — same posture .ub-tier already
       takes for hiding chrome that native touch gestures make redundant. */
    .ub-related-study-slider__nav {
        display: none;
    }

    .ub-related-study-slider::before,
    .ub-related-study-slider::after {
        display: none;
    }
}

/* ---- Cards --------------------------------------------------------------
   Fixed flex-basis instead of a grid column — a slider needs a stable
   per-card width to scroll-snap against, where the old grid could let
   columns stretch. */

.ub-related-study {
    display: flex;
    flex-direction: column;
    flex: 0 0 16rem;
    scroll-snap-align: start;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ub-duration-fast) var(--ub-ease),
                border-color var(--ub-duration-fast) var(--ub-ease);
}

    .ub-related-study:hover {
        box-shadow: var(--ub-shadow-soft);
        border-color: var(--ub-line-strong);
    }

.ub-related-study__cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.ub-related-study__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ub-related-study__cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--ub-space-3);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
    text-align: center;
}

.ub-related-study__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-2);
    background: rgba(17, 24, 39, 0.55);
    color: var(--ub-accent-contrast);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
}

    .ub-related-study__lock-overlay svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.ub-related-study__body {
    padding: var(--ub-space-4);
}

.ub-related-study__meta {
    margin: 0 0 var(--ub-space-1);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    letter-spacing: var(--ub-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ub-ink-muted);
}

.ub-related-study__title {
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-snug);
    color: var(--ub-ink);
}

.ub-related-study__days {
    margin-top: var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}