/* <toe-horz-list>: see toe-horz-list.js. Uses the site's colours and fonts from app.css. */

toe-horz-list {
    /* Space between tiles, across and down. */
    --toe-horz-list-gap: 16px;
    /* Tiles of products the visitor may not use are shown in shades of this colour. */
    --toe-horz-list-mono: var(--primary-light, #264655);
    /* Room above and below the tiles for their shadows, which the scrolling list would otherwise cut off. Taken from
       the space around the list, so it sits where it would without it; the top stays inside the header's margin, so
       the list never covers its buttons. */
    --toe-horz-list-bleed-top: 8px;
    --toe-horz-list-bleed-bottom: 20px;

    display: block;
    width: 100%;
    min-width: 0;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* The <template> elements a list may hold are never shown. */
toe-horz-list > template {
    display: none;
}

.thl-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.thl-header[hidden],
.thl-title[hidden],
.thl-filters[hidden],
.thl-frame[hidden] {
    display: none;
}

.thl-title {
    font-size: 1.5rem;
}

/* Elements given to the list with data-header, e.g. the search page's search box: a third of the list's width, or
   all of it on narrow lists. */
.thl-header > [data-header] {
    flex: 0 1 33.333%;
    min-width: min(100%, 15rem);
    max-width: none;
}

.thl-header:has(> [data-header]) {
    align-items: center;
}

/* Pushed right even without a title: the tag picker and chosen tags, the type buttons, then the filter icon. */
.thl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

.thl-tag-filters,
.thl-type-filters {
    display: contents;
}

.thl-type-filters[hidden] {
    display: none;
}

.thl-filter-icon {
    position: relative;
    display: inline-flex;
    margin-left: 2px;
    color: var(--muted);
}

.thl-filter-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* A tag chosen as a filter, in the tag's colour, with a cross that removes it. Sized like the filter buttons. */
.thl-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 4px 5px 10px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tag-text, #fff);
    background: var(--tag-colour, var(--ocean));
    border: 1px solid var(--tag-colour, var(--ocean));
    border-radius: var(--button-radius, 4px);
}

.thl-tag-link {
    color: inherit;
    text-decoration: none;
}

.thl-tag-link:hover {
    color: inherit;
    text-decoration: underline;
}

.thl-tag:has(.thl-tag-link:hover) {
    filter: brightness(1.1);
}

.thl-tag-remove {
    display: inline-flex;
    padding: 1px;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 2px;
    opacity: 0.8;
    cursor: pointer;
}

.thl-tag-remove:hover,
.thl-tag-remove:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.thl-tag-remove svg {
    display: block;
    width: 14px;
    height: 14px;
}

.thl-filter {
    /* Holds its tooltip (data-tooltip in app.css). */
    position: relative;
    padding: 5px 14px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--button-radius, 4px);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.thl-filter:hover {
    border-color: var(--ocean);
}

.thl-filter[aria-pressed="true"] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.thl-filter[aria-pressed="true"]:hover {
    background: var(--primary-light);
}

.thl-frame {
    position: relative;
}

.thl-viewport {
    margin: calc(-1 * var(--toe-horz-list-bleed-top)) 0 calc(-1 * var(--toe-horz-list-bleed-bottom));
    padding: var(--toe-horz-list-bleed-top) 0 var(--toe-horz-list-bleed-bottom);
    overflow-x: auto;
    overflow-y: hidden;
    /* A sideways swipe or trackpad scroll that reaches the end doesn't go on to page back or forward. */
    overscroll-behavior-x: contain;
    /* No scroll bar; the arrows, touch, trackpads and keyboard still scroll it. */
    scrollbar-width: none;
}

.thl-viewport::-webkit-scrollbar {
    display: none;
}

.thl-track {
    position: relative;
    height: 100%;
}

.thl-cell {
    position: absolute;
}

.thl-tile {
    display: block;
    position: relative;
    /* Keeps the monochrome overlay's blending to the tile. */
    isolation: isolate;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.thl-tile:hover {
    color: var(--ink);
    border-color: var(--ocean);
    box-shadow: 0 4px 14px rgba(25, 49, 62, 0.16);
}

.thl-tile:focus-visible {
    outline-offset: -2px;
}

/* Faded, and shown in the interface's colour keeping each part's lightness, so what the visitor may use stands out. */
.thl-no-access {
    opacity: 0.5;
}

.thl-no-access::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--toe-horz-list-mono);
    mix-blend-mode: color;
    pointer-events: none;
}

.thl-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--foam) 0%, var(--surface) 50%, var(--foam) 100%) 0 0 / 200% 100%;
    animation: thl-shimmer 1.4s ease-in-out infinite;
}

@keyframes thl-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* Takes the height left in its tile, and is cut to the whole lines that fit there (see fitText). */
.thl-tile [data-fit] {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.thl-tile [data-fit][hidden] {
    display: none;
}

/* Scroll arrows: filled circles over the ends of the list, shown only while there is more that way. */

.thl-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(22, 32, 43, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity 0.2s, visibility 0.2s, background-color 0.15s;
    z-index: 1;
}

.thl-arrow svg {
    width: 18px;
    height: 18px;
}

.thl-arrow-back {
    left: 8px;
}

.thl-arrow-forward {
    right: 8px;
}

.thl-arrow-shown {
    opacity: 0.92;
    visibility: visible;
}

.thl-arrow:hover {
    opacity: 1;
    background: var(--primary-light);
}

.thl-counter {
    margin: 8px 0 0;
    font-family: var(--sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #66737b;
    font-variant-numeric: tabular-nums;
}

.thl-counter[hidden] {
    display: none;
}

.thl-message:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .thl-placeholder {
        animation: none;
    }

    .thl-arrow {
        transition: none;
    }
}

/* The filter icon is at the right of the page, so its tooltip opens to the left. */
@media (hover: hover) {
    .thl-filter-icon[data-tooltip]::after {
        right: 0;
        left: auto;
        transform: none;
    }
}

/* whole-tiles: scrolling stops with a tile at the left edge, so a list a whole number of tiles wide shows only whole
   tiles. */
toe-horz-list[whole-tiles] .thl-viewport {
    scroll-snap-type: x mandatory;
}

toe-horz-list[whole-tiles] .thl-cell {
    scroll-snap-align: start;
}

/* Spotlight: while the pointer is over a tile, the others in the list fall back, so the one it is over stands out. */
.thl-tile {
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s, opacity 0.2s, filter 0.2s;
}

.thl-track:has(.thl-tile:hover) .thl-tile:not(:hover) {
    opacity: 0.45;
    filter: saturate(0.5);
}

/* The default tile (defaultTemplate), for every type: a pale card with the 16:9 thumbnail across its top, the tier
   needed for it top right. Then a small line of its type and date, its name in the serif, as much description as
   fits, and "Read More" (or "View Video") under a fine rule, centred between the rule and the card's foot. */

/* A faint shadow lifts it off light pages, a little more under the pointer. */
.thl-tile-card {
    background: #f7fafb;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(25, 49, 62, 0.1), 0 2px 6px rgba(25, 49, 62, 0.08);
}

.thl-tile-card:hover {
    background: #fff;
    border: 0;
    box-shadow: 0 1px 3px rgba(25, 49, 62, 0.12), 0 4px 10px rgba(25, 49, 62, 0.12);
}

.thl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.thl-card-thumbnail {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #22404f;
}

.thl-card-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thl-tile-card:hover .thl-card-thumbnail img {
    transform: scale(1.03);
}

/* Flush with the thumbnail's top right corner, rounded bottom left. */
.thl-card-tier {
    position: absolute;
    /* Above the shading of a product the visitor may not use, so everyone sees it in its colour. */
    z-index: 1;
    top: 0;
    right: 0;
    min-width: 28px;
    padding: 3px 9px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--tier-text, #fff);
    background: var(--tier-colour, var(--primary));
    border-radius: 0 0 0 6px;
}

/* A video's length, a few pixels in from the thumbnail's bottom right corner. */
.thl-card-length {
    position: absolute;
    /* Above the shading of a product the visitor may not use, like the tier. */
    z-index: 1;
    right: 6px;
    bottom: 6px;
    padding: 1px 5px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(14, 31, 41, 0.78);
    border-radius: 3px;
}

.thl-card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 0;
}

/* Above the name, though it follows it in the page. */
.thl-card-details {
    order: -1;
    flex: none;
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: pre;
    color: var(--ocean);
}

/* Qualified by the tile so a page's own heading styles (e.g. .splash h3) don't reach it. */
.thl-tile .thl-card-name {
    flex: none;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    transition: color 0.15s;
}

.thl-tile-card:hover .thl-card-name {
    color: var(--ocean);
}

/* Takes the room left above "Read More", cut to whole lines (data-fit), and keeps a little clear of its rule. */
.thl-card-description {
    flex: 1;
    min-height: 0;
    margin: 0 0 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: var(--sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4f5e67;
}

/* Kept to the card's foot, whatever the description leaves, with its words centred between the rule and the foot. As
   the pointer comes over the card, they darken and the arrow steps forward; over the words, they are underlined. */
.thl-card-read {
    flex: none;
    /* One line as tall as the row less its rule, so the words sit centred. */
    height: 44px;
    margin-top: auto;
    line-height: 43px;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ocean);
    border-top: 1px solid rgba(25, 49, 62, 0.12);
    transition: color 0.15s;
}

.thl-card-read-text {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.15s;
}

.thl-card-read::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s;
}

.thl-tile-card:hover .thl-card-read {
    color: var(--ocean-dark);
}

/* Underlined only while the pointer is over the words themselves. */
.thl-card-read-text:hover {
    text-decoration-color: currentColor;
}

.thl-tile-card:hover .thl-card-read::after {
    transform: translateX(4px);
}

/* What the visitor may not use: a greyer card, the thumbnail in greys behind a padlock, and the words in greys, still
   dark enough to read. The tier on the thumbnail stays in its colour, saying what would open it. */
.thl-tile-card.thl-no-access {
    opacity: 1;
    background: #d9e0e4;
}

.thl-tile-card.thl-no-access::after {
    display: none;
}

.thl-tile-card.thl-no-access .thl-card-thumbnail img {
    filter: grayscale(1) brightness(0.75);
}

.thl-tile-card.thl-no-access .thl-card-thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 31, 41, 0.35);
    pointer-events: none;
}

.thl-tile-card.thl-no-access .thl-card-thumbnail::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    background: rgba(14, 31, 41, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='white'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z'/%3E%3C/svg%3E") center / 24px no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.thl-tile-card.thl-no-access .thl-card-name {
    color: #3b4954;
}

.thl-tile-card.thl-no-access .thl-card-details,
.thl-tile-card.thl-no-access .thl-card-description,
.thl-tile-card.thl-no-access .thl-card-read {
    color: #56656e;
}

.thl-tile-card.thl-no-access .thl-card-read {
    border-top-color: rgba(25, 49, 62, 0.18);
}