/* "Show more" under a list that pages (design-system/load-more.php): how many show, and the button that adds the
   next few. One piece for the stories, podcasts and events pages (Oren 2026-10-15, item 37); each page's script
   does its own paging. Moved here as the two pages had it (stories-page/assets/stories.css + hovers.css,
   podcasts-page/assets/podcasts.css + hovers.css), unchanged in look and motion.

   Its hover (Oren, 2026-10-09/10: no shared light-blue ring, no colour wash): the words make room and a caret
   pointing down drops in, settling with one small bob -- more is coming below. Pinned colours hold against the
   theme's green button:hover. The keyboard gets the same, with a focus ring. */

.cil-more { --cil-more-out: cubic-bezier(.22, 1, .36, 1); --cil-more-fwd: -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; text-align: center; }
/* Forward is the reading direction: left in Hebrew and Arabic, right in English and Russian. */
.lang-to-css-ltr .cil-more { --cil-more-fwd: 1; }
/* Stacked: the count over the button, the pair at the reading start of its column. */
.cil-more--stacked { flex-direction: column; flex-wrap: nowrap; align-self: flex-start; gap: 16px; }
.cil-more__shown { margin: 0; color: var(--cil-black-regular-6); font-size: 14px; line-height: 1.2; }
.cil-more__shown:empty { display: none; }

.cil-more .cil-more__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-inline: 32px;
    border: 1px solid var(--cil-black); border-radius: 24px; background: var(--cil-white); color: var(--cil-black);
    font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.cil-more .cil-more__btn[hidden] { display: none; }
.cil-more .cil-more__btn:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-black); box-shadow: none; outline: none; }
.cil-more .cil-more__btn:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
.cil-more .cil-more__btn:active { transform: scale(.98); }

/* The words step back by --cil-more-shift (11px centres the words and the caret together; a page may set its own). */
.cil-more__label { position: relative; display: block; transition: transform .3s var(--cil-more-out); }
.cil-more__label::after {
    content: ""; position: absolute; top: 50%; inset-inline-end: -22px; width: 16px; height: 16px; margin-top: -8px; background: currentColor;
    -webkit-mask: url("../../images/podcasts-page/caret-down.svg") center / contain no-repeat; mask: url("../../images/podcasts-page/caret-down.svg") center / contain no-repeat;
    opacity: 0; transform: translateY(-9px); transition: opacity .2s var(--cil-more-out), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cil-more .cil-more__btn:is(:hover, :focus-visible) .cil-more__label { transform: translateX(calc(var(--cil-more-fwd) * var(--cil-more-shift, 11px) * -1)); }
.cil-more .cil-more__btn:is(:hover, :focus-visible) .cil-more__label::after { opacity: 1; transform: translateY(1px); }

@media (max-width: 640px) {
    .cil-more__shown { font-size: 12px; }
    .cil-more .cil-more__btn { height: 44px; padding-inline: 20px; font-size: 14px; }
}

/* Reduced motion: the words stand aside at once and the caret fades in where it rests, with no drop. */
@media (prefers-reduced-motion: reduce) {
    .cil-more__label, .cil-more__label::after { transition: opacity .2s ease; }
    .cil-more .cil-more__btn:is(:hover, :focus-visible) .cil-more__label::after { transform: none; }
}