/**
 * Strips layout (Pro): one horizontal row of fixed-width tiles that scrolls
 * sideways, with the text overlaid on the image (Mosaic treatment).
 *
 * Scrolling is native (overflow-x + scroll-snap): the scrollbar can be dragged and
 * touch / trackpad / keyboard scrolling work without JavaScript. strips.js
 * drives the prev/next arrows and the optional autoplay. Uses the --jrp-* tokens from jrprism.css and
 * logical properties so RTL pages mirror correctly. Text sits over the image
 * (.jrp-strips--text-over) or below it (.jrp-strips--text-below). See AgDR-0006.
 */

.mod-jrprism.layout-strips .jrp-strips {
    --jrp-strips-gap: 0.75rem;
    position: relative;
    margin-block-end: 0.25rem;
}

.mod-jrprism.layout-strips .jrp-strips--gap-none   { --jrp-strips-gap: 0; }
.mod-jrprism.layout-strips .jrp-strips--gap-small  { --jrp-strips-gap: 0.75rem; }
.mod-jrprism.layout-strips .jrp-strips--gap-medium { --jrp-strips-gap: 1.5rem; }

/* ── Scroll container ─────────────────────────────────────────────────────── */
/* The sideways scroll stays inside the track, so the page never scrolls sideways. */
.mod-jrprism.layout-strips .jrp-strips-track {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--jrp-accent) var(--jrp-border);
    border-radius: 8px;
    /* Lets tiles size against the visible strip width (cqi), not the list. */
    container-type: inline-size;
}

@media (prefers-reduced-motion: no-preference) {
    .mod-jrprism.layout-strips .jrp-strips-track { scroll-behavior: smooth; }
}

.mod-jrprism.layout-strips .jrp-strips-track:focus-visible {
    outline: 2px solid var(--jrp-accent);
    outline-offset: 2px;
}

/* WebKit/Blink scrollbar: a visible track + draggable thumb (the RokSprocket look). */
.mod-jrprism.layout-strips .jrp-strips-track::-webkit-scrollbar { height: 8px; }
.mod-jrprism.layout-strips .jrp-strips-track::-webkit-scrollbar-track {
    background: var(--jrp-border);
    border-radius: 4px;
}
.mod-jrprism.layout-strips .jrp-strips-track::-webkit-scrollbar-thumb {
    background: var(--jrp-accent);
    border-radius: 4px;
}

/* When strips.js runs it draws its own always-visible bar (.jrp-strips-bar), so the
   native one is hidden. Without JS the native scrollbar above stays as the fallback. */
.mod-jrprism.layout-strips .jrp-strips--js .jrp-strips-track {
    scrollbar-width: none;
    padding-block-end: 0;
}
.mod-jrprism.layout-strips .jrp-strips--js .jrp-strips-track::-webkit-scrollbar { display: none; }

.mod-jrprism.layout-strips .jrp-strips-bar {
    position: relative;
    height: 8px;
    margin-block-start: 0.75rem;
    border-radius: 4px;
    background: var(--jrp-border);
    cursor: pointer;
    touch-action: none;
}

/* The 8px bar is hard to hit: an invisible 24px target around it (WCAG 2.5.8). */
.mod-jrprism.layout-strips .jrp-strips-bar::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block: -8px;
}

.mod-jrprism.layout-strips .jrp-strips-bar[hidden] { display: none; }

.mod-jrprism.layout-strips .jrp-strips-bar-thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    min-width: 2rem;
    border-radius: 4px;
    background: var(--jrp-accent);
    cursor: grab;
}

.mod-jrprism.layout-strips .jrp-strips-bar--dragging .jrp-strips-bar-thumb { cursor: grabbing; }

/* Scrollbar hidden by option: still scrollable by touch, trackpad, keyboard and arrows. */
.mod-jrprism.layout-strips .jrp-strips--no-scrollbar .jrp-strips-track {
    scrollbar-width: none;
    padding-block-end: 0;
}
.mod-jrprism.layout-strips .jrp-strips--no-scrollbar .jrp-strips-track::-webkit-scrollbar { display: none; }

/* ── Row + tiles ──────────────────────────────────────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--jrp-strips-gap);
    /* As wide as its tiles, and never clipping them: some templates set
       overflow:hidden on lists, which would leave the track nothing to scroll. */
    width: max-content;
    min-width: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Frame width is one per-module value. On narrow screens a wide frame shrinks to
   85% of the visible strip (cqi = track width) so the next tile still peeks in. */
.mod-jrprism.layout-strips .jrp-strips-cell {
    flex: 0 0 min(var(--jrp-strips-width, 320px), 85cqi);
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    /* Tiles can query their own width (small-tile rules below, #60). */
    container-type: inline-size;
}

.mod-jrprism.layout-strips .jrp-strips-item {
    position: relative;
    display: block;
    height: 100%;
    color: var(--jrp-text);
    text-decoration: none;
}

/* Inside a scrolling container an outside outline gets clipped, so draw it inside. */
.mod-jrprism.layout-strips .jrp-strips-item:focus-visible {
    outline: 3px solid var(--jrp-accent);
    outline-offset: -3px;
    border-radius: 8px;
}

/* White inner ring drawn ABOVE the image (an inset box-shadow on the link would
   paint under it), so focus stays visible on dark or accent-coloured photos. */
.mod-jrprism.layout-strips .jrp-strips-item:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 8px;
    box-shadow: inset 0 0 0 5px #fff;
    pointer-events: none;
}

/* ── Image box (ratio + fit) ──────────────────────────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--jrp-surface-muted);
}

.mod-jrprism.layout-strips .jrp-strips-media--16x9 { aspect-ratio: 16 / 9; }
.mod-jrprism.layout-strips .jrp-strips-media--4x3  { aspect-ratio: 4 / 3; }
.mod-jrprism.layout-strips .jrp-strips-media--1x1  { aspect-ratio: 1 / 1; }

/* Image plugins (e.g. JR Image Optimizer) can wrap the <img> in a <picture>, which is
   inline by default. Make it fill the box so the image still covers the ratio. */
.mod-jrprism.layout-strips .jrp-strips-media > picture {
    display: block;
    width: 100%;
    height: 100%;
}

.mod-jrprism.layout-strips .jrp-strips-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mod-jrprism.layout-strips .jrp-strips-media--fit-contain .jrp-strips-img { object-fit: contain; }

/* ── Text block: shared ───────────────────────────────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mod-jrprism.layout-strips .jrp-strips-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Keep tiles the same height: long descriptions are cut after 3 lines. */
.mod-jrprism.layout-strips .jrp-strips-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mod-jrprism.layout-strips .jrp-strips-desc p,
.mod-jrprism.layout-strips .jrp-strips-title p { margin: 0; }

.mod-jrprism.layout-strips .jrp-strips-text .jrp-meta { margin: 0; }

.mod-jrprism.layout-strips .jrp-strips-readmore {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Text over the image (default, Mosaic treatment) ──────────────────────── */
.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-text {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1;
    padding: 2.5rem 1rem 1rem;
    border-end-start-radius: 8px;
    border-end-end-radius: 8px;
    /* Darker than Mosaic early on: strip tiles are short and carry a meta row. */
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.85));
    color: #fff;
    /* Never taller than the image. Content flows top-down (title first), so on a
       small tile anything that does not fit is cut at the bottom, never the title (#60). */
    max-height: 100%;
    overflow: hidden;
}

/* Small tiles (phones, landscape phones, the 240px frame): fit title + meta + 2 lines
   over the image. Images-off caption cards keep their normal layout. */
@container (max-width: 340px) {
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-strips-text {
        padding: 1.75rem 0.75rem 0.75rem;
        gap: 0.125rem;
        /* On a small tile the text covers most of the image, so the title sits
           where the default gradient is still near-transparent: start darker. */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.72) 35%, rgba(0, 0, 0, 0.88));
    }

    /* Max 3 title lines, so a very long (e.g. Arabic) title never pushes the cut
       into the middle of the meta line. */
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-strips-title {
        font-size: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-strips-desc { -webkit-line-clamp: 2; }
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-meta {
        --jrp-meta-font-size: 0.75rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
    }

    /* One meta line: a long category name ends in an ellipsis instead of wrapping. */
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-meta > * {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-meta > :first-child { flex-shrink: 0; }

    /* The whole tile is the link; the label only costs space on a small tile. */
    .mod-jrprism.layout-strips .jrp-strips--text-over:not(.jrp-strips--no-images) .jrp-strips-readmore { display: none; }
}

.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-meta {
    --jrp-meta-color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* No image + text over: plain surface tile, body colour, no gradient. The text is
   clipped so a long title + meta + description never spills out of the frame. */
.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-item--no-image .jrp-strips-text {
    inset-block: 0;
    justify-content: flex-end;
    overflow: hidden;
    padding: 1rem;
    background: none;
    color: var(--jrp-text);
}

.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-item--no-image .jrp-strips-title { text-shadow: none; }
.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-item--no-image .jrp-strips-desc { -webkit-line-clamp: 2; }

.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-item--no-image .jrp-meta {
    --jrp-meta-color: var(--jrp-text-muted);
    text-shadow: none;
}

/* ── Text below the image (caption) ───────────────────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips--text-below .jrp-strips-text {
    padding-block-start: 0.6rem;
    color: var(--jrp-text);
}

.mod-jrprism.layout-strips .jrp-strips--text-below .jrp-strips-readmore {
    color: var(--jrp-accent);
    text-decoration: none;
}

.mod-jrprism.layout-strips .jrp-strips--text-below .jrp-strips-item:hover .jrp-strips-readmore,
.mod-jrprism.layout-strips .jrp-strips--text-below .jrp-strips-item:focus-visible .jrp-strips-readmore {
    text-decoration: underline;
}

.mod-jrprism.layout-strips .jrp-strips--text-below .jrp-strips-item:hover .jrp-strips-title {
    color: var(--jrp-accent-emphasis);
}

/* ── Item with no image while images are on: a deliberate placeholder frame ─ */
/* The frame stays so captions line up across the row; a small picture icon
   marks it as "no image" rather than "image failed to load". */
.mod-jrprism.layout-strips .jrp-strips-item--no-image .jrp-strips-media {
    background-color: var(--jrp-surface-muted);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='1.5'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
    border: 1px solid var(--jrp-border);
    box-shadow: none;
}

/* Text over a no-image frame: no icon behind the text. */
.mod-jrprism.layout-strips .jrp-strips--text-over .jrp-strips-item--no-image .jrp-strips-media {
    background-image: none;
}

/* ── Images off for the module: caption-only cards ────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-item {
    padding: 1rem;
    border: 1px solid var(--jrp-border);
    border-radius: 8px;
    background: var(--jrp-surface);
}

.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-text,
.mod-jrprism.layout-strips .jrp-strips--no-images.jrp-strips--text-over .jrp-strips-text {
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    color: var(--jrp-text);
}

.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-title { text-shadow: none; }

.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-meta {
    --jrp-meta-color: var(--jrp-text-muted);
    text-shadow: none;
}

.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-readmore { color: var(--jrp-accent); }

/* Caption-only cards have no image box to centre the arrows on, so the arrows sit
   in a side gutter (arrow width + gap) instead of over the card text. */
.mod-jrprism.layout-strips .jrp-strips--no-images { padding-inline: 2.5rem; }
.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-arrow {
    width: 2rem;
    height: 2rem;
}
.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-arrow--prev { inset-inline-start: 0; }
.mod-jrprism.layout-strips .jrp-strips--no-images .jrp-strips-arrow--next { inset-inline-end: 0; }

/* ── Arrows (shown by strips.js only when the row overflows) ──────────────── */
.mod-jrprism.layout-strips .jrp-strips-arrow {
    position: absolute;
    inset-block-start: var(--jrp-strips-arrow-top, calc(50% - 1.25rem - 0.375rem));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--jrp-border);
    border-radius: 50%;
    background: var(--jrp-surface);
    color: var(--jrp-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.mod-jrprism.layout-strips .jrp-strips-arrow[hidden] { display: none; }
.mod-jrprism.layout-strips .jrp-strips-arrow--prev { inset-inline-start: 0.5rem; }
.mod-jrprism.layout-strips .jrp-strips-arrow--next { inset-inline-end: 0.5rem; }

.mod-jrprism.layout-strips .jrp-strips-arrow:hover:not(:disabled) { color: var(--jrp-accent-emphasis); }

.mod-jrprism.layout-strips .jrp-strips-arrow:focus-visible {
    outline: 2px solid var(--jrp-accent);
    outline-offset: 2px;
}

.mod-jrprism.layout-strips .jrp-strips-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .mod-jrprism.layout-strips .jrp-strips-arrow {
        width: 2rem;
        height: 2rem;
    }
}

/* ── Pause / play (autoplay only) ─────────────────────────────────────────── */
.mod-jrprism.layout-strips .jrp-strips-pause {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--jrp-border);
    border-radius: 50%;
    background: var(--jrp-surface);
    color: var(--jrp-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.mod-jrprism.layout-strips .jrp-strips-pause[hidden] { display: none; }
.mod-jrprism.layout-strips .jrp-strips-pause:focus-visible {
    outline: 2px solid var(--jrp-accent);
    outline-offset: 2px;
}

.mod-jrprism.layout-strips .jrp-strips-pause .jrp-strips-icon-play { display: none; }
.mod-jrprism.layout-strips .jrp-strips-pause[aria-pressed="true"] .jrp-strips-icon-play  { display: block; }
.mod-jrprism.layout-strips .jrp-strips-pause[aria-pressed="true"] .jrp-strips-icon-pause { display: none; }

/* Chevrons point the reading direction. */
[dir="rtl"] .mod-jrprism.layout-strips .jrp-strips-arrow svg,
.mod-jrprism.layout-strips .jrp-strips-arrow:dir(rtl) svg { transform: scaleX(-1); }