/* A result page: the toolbar, the count, the cards, "show more", the empty
   state, and a main category's opening with its photo (Figma 38-24 frames 03-04, 2256-25). */

/* ---- A main category's opening ---- */
.cil-ctl-hero { display: flex; align-items: center; gap: 48px; padding-block: 40px 32px; }
.cil-ctl-hero__text { flex: 1; min-width: 0; }
.cil-ctl-hero .cil-ctl-head { padding: 0; }
.cil-ctl-hero__photo { flex: none; width: 520px; height: 292px; border-radius: 16px; object-fit: cover; }

/* ---- Toolbar ---- */
.cil-ctl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cil-ctl-toolbar__find, .cil-ctl-toolbar__order { display: flex; align-items: center; gap: 8px; }
.cil-ctl-field {
    position: relative; display: flex; align-items: center; gap: 8px;
    width: 520px; height: 48px; padding-inline: 14px;
    border: 1px solid var(--cil-black-regular-5); border-radius: 8px;
    background: var(--cil-white-light-2);
}
.cil-ctl-field:focus-within { border-color: var(--cil-blue-dark-1); box-shadow: 0 0 0 1px var(--cil-blue-dark-1); }
.cil-ctl .cil-ctl-field input:focus-visible { outline: none; }   /* the field's own ring is the one */
.cil-ctl-field__mark { color: var(--cil-black-regular-7); }
.cil-ctl-field input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
    color: var(--cil-black); font: inherit; font-size: 16px;
}
.cil-ctl-field input::placeholder { color: var(--cil-black-regular-7); opacity: 1; }
.cil-ctl-filtersBtn { width: 140px; border-radius: 8px; border-color: var(--cil-black-regular-5); font-size: 16px; font-weight: 600; }
.cil-ctl-filtersBtn[aria-disabled="true"] { cursor: default; }

.cil-ctl-sort { position: relative; display: flex; align-items: center; width: 230px; height: 48px;
    border: 1px solid var(--cil-black-regular-5); border-radius: 8px; background: var(--cil-white); }
.cil-ctl-sort__label { padding-inline-start: 14px; font-size: 16px; white-space: nowrap; }
.cil-ctl-sort select {
    flex: 1; min-width: 0; height: 100%; padding-inline: 4px 34px;
    border: 0; background: none; appearance: none; -webkit-appearance: none;
    color: var(--cil-black); font: inherit; font-size: 16px; cursor: pointer;
}
.cil-ctl-sort__caret { position: absolute; inset-inline-end: 12px; pointer-events: none; }

/* The grid / list switch: one highlight that slides to the chosen half. The list is first in the
   markup, so on a Hebrew page it is the right half and the grid the left; English mirrors it. */
.cil-ctl-views { position: relative; display: flex; margin: 0; padding: 0; border: 1px solid var(--cil-black-regular-5); border-radius: 8px; overflow: hidden; }
.cil-ctl-views::before {
    content: ''; position: absolute; inset-block: 0; left: 0; width: 50%;
    background: var(--cil-blue-light-1);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cil-ctl-views:has(input[value="list"]:checked)::before { transform: translateX(100%); }
.lang-to-css-ltr .cil-ctl-views::before { transform: translateX(100%); }
.lang-to-css-ltr .cil-ctl-views:has(input[value="list"]:checked)::before { transform: none; }
.cil-ctl-views__opt { position: relative; display: grid; place-items: center; width: 48px; height: 46px; cursor: pointer; color: var(--cil-black-regular-7); transition: color .25s ease; }
.cil-ctl-views__opt svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.cil-ctl-views__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cil-ctl-views__opt:has(input:checked) { color: var(--cil-blue-dark-1); }
.cil-ctl-views__opt:has(input:checked) svg { transform: scale(1.1); }
.cil-ctl-views__opt:has(input:focus-visible) { outline: 2px solid var(--cil-blue-dark-1); outline-offset: -3px; }

.cil-ctl-toolbar + .cil-ctl-chips { margin-top: 20px; }

/* ---- A correction of the search's words, said aloud (templates/parts/correction.php) ---- */
.cil-ctl-fix {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 40px; padding: 12px 16px;
    border-radius: 12px; background: var(--cil-blue-light-1);
    color: var(--cil-black); font-size: 16px;
}
.cil-ctl-fix strong { font-weight: 700; }
.cil-ctl-fix a { color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cil-ctl .cil-ctl-fix a:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); text-decoration-thickness: 2px; }
@media (max-width: 1079px) { .cil-ctl-fix { margin-bottom: 24px; font-size: 14px; } }

/* ---- The count, the filters in force ---- */
.cil-ctl-results { padding-block: 28px 0; }
.cil-ctl-summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
/* The count at the far end of its line, as the design draws it; a search's words at the start. */
.cil-ctl-count { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: 16px; font-weight: 600; }
.cil-ctl-count__num { margin-inline-start: auto; }
.cil-ctl-count__for { color: var(--cil-black-regular-7); font-weight: 400; }
.cil-ctl-count__for strong { color: var(--cil-black); font-weight: 700; }
.cil-ctl-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-applied__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px 8px;
    border: 1px solid var(--cil-blue-dark-1); border-radius: 16px; color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; }
.cil-ctl-applied__chip:hover { background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
.cil-ctl .cil-ctl-applied__clear:hover { color: var(--cil-blue-dark-1); }
.cil-ctl-applied__clear { color: var(--cil-blue-dark-1); font-size: 14px; text-decoration: underline !important; }

/* ---- The cards ---- */
.cil-ctl-grid { display: grid; gap: 25px 46px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cil-ctl-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cil-ctl-grid > .cil-card { width: auto; margin: 0; }
/* The id stays for the measurement tags; the old catalogue's padding under it does not. */
#catalogSearchResults.cil-ctl-grid { padding: 0; }
.cil-ctl-earlier { margin: 0 0 20px; text-align: center; }
.cil-ctl-earlier a { color: var(--cil-blue-dark-1); font-weight: 600; text-decoration: underline; }

/* While a new list is on its way the region says it is busy; its look is the placeholders' (skeleton.css). */

/* ---- Show more ---- */
/* The row is the house one (design-system/load-more.css, .cil-more): the count beside the button, centred,
   wrapping on a phone (Oren 2026-10-15, item 82); its markup is parts/more-row.php. */
.cil-ctl-more { padding-block: 40px 0; }
.cil-ctl-more__status { margin: 0; font-size: 16px; }
.cil-ctl-more__go { min-width: 120px; }
.cil-ctl-more__go[hidden], .cil-ctl-more__icon { display: none; }
/* Its hover (Oren 2026-10-15, item 82b), the house load-more's motion and the lecturer's "to the courses": the words
   step back and a caret drops in after them with one small bob, and the page's words give way to how many the press
   brings (both in one grid cell, so the button keeps the wider one's width). No colour wash; the words move by
   offset, not transform, so their edges stay sharp while they move (ERRORS-event-editor.md). */
.cil-ctl-more .cil-ctl-more__go { --cil-ctl-more-out: cubic-bezier(.22, 1, .36, 1); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.cil-ctl-more .cil-ctl-more__go:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-black); box-shadow: none; outline: none; text-decoration: none; }
.cil-ctl-more .cil-ctl-more__go:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
.cil-ctl-more .cil-ctl-more__go:active { transform: scale(.98); }
.cil-ctl-more__label { position: relative; display: inline-grid; inset-inline-end: 0; transition: inset-inline-end .35s var(--cil-ctl-more-out); }
.cil-ctl-more__rest, .cil-ctl-more__count { grid-area: 1 / 1; justify-self: center; transition: opacity .2s ease; }
.cil-ctl-more__count { opacity: 0; }
.cil-ctl-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-ctl-more-out), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__label { inset-inline-end: 11px; }
.cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__label::after { opacity: 1; transform: translateY(1px); }
.cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__count:not(:empty) { opacity: 1; }
.cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__rest:has(+ .cil-ctl-more__count:not(:empty)) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .cil-ctl-more__label { transition: none; }
    .cil-ctl-more__label::after { transition: opacity .2s ease; }
    .cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__label { inset-inline-end: 0; }
    .cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__label::after { transform: none; }
    .cil-ctl-more .cil-ctl-more__go:active { transform: none; }
}
/* On a phone a page's cards come six at a time (results.js); the rest wait, folded. */
.cil-ctl .cil-ctl-grid > [hidden] { display: none; }

/* ---- Nothing found ---- */
.cil-ctl-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 56px;
    border-radius: 16px; background: var(--cil-white-light-2); text-align: center; }
.cil-ctl-empty__mark { color: var(--cil-black-regular-7); }
/* A category's own illustration in place of the mark (category-photos.php): 240 x 180, 160 x 120 on a phone. */
.cil-ctl-empty__art { display: block; width: 240px; height: 180px; }
.cil-ctl-empty__title { margin: 0; font-size: 24px; font-weight: 700; }
.cil-ctl-empty__text { margin: 0; color: var(--cil-black-regular-7); font-size: 18px; }
.cil-ctl-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px; }

/* ---- Narrower screens ---- */
@media (max-width: 1360px) {
    .cil-ctl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .cil-ctl-field { width: 400px; }
}
@media (max-width: 1079px) {
    .cil-ctl-hero { flex-direction: column-reverse; align-items: stretch; gap: 16px; padding-block: 16px 20px; }
    .cil-ctl-hero__photo { width: 100%; height: auto; aspect-ratio: 358 / 190; border-radius: 12px; }
    /* The search on its own line; under it the order, the filters and the view, in that order. */
    .cil-ctl-toolbar { flex-wrap: wrap; gap: 10px; }
    .cil-ctl-toolbar__find, .cil-ctl-toolbar__order { display: contents; }
    .cil-ctl-field { order: -1; width: 100%; }
    .cil-ctl-sort { order: 1; flex: 1; min-width: 0; width: auto; height: 44px; }
    .cil-ctl-filtersBtn { order: 2; width: 110px; height: 44px; }
    .cil-ctl-views { order: 3; }
    .cil-ctl-sort__label { display: none; }
    .cil-ctl-sort select { padding-inline-start: 14px; }
    .cil-ctl-views__opt { width: 44px; height: 42px; }
    .cil-ctl-grid, .cil-ctl-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
    .cil-ctl-grid, .cil-ctl-grid--list { grid-template-columns: minmax(0, 1fr); }
    .cil-ctl-more { padding-top: 24px; }
    .cil-ctl-more__status { color: var(--cil-black-regular-7); font-size: 14px; }
    .cil-ctl-more__go { width: 100%; border-radius: 8px; border-color: var(--cil-blue-dark-1); color: var(--cil-blue-dark-1); font-weight: 600; }
    .cil-ctl-more__icon { display: inline-flex; }
    .cil-ctl a.cil-ctl-more__go:hover, .cil-ctl-more .cil-ctl-more__go:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); }
    /* The phone's caret already leads the words: no second one drops in, and the words stay put. */
    .cil-ctl-more__icon + .cil-ctl-more__label::after { display: none; }
    .cil-ctl-more__go:is(:hover, :focus-visible) .cil-ctl-more__icon + .cil-ctl-more__label { inset-inline-end: 0; }
    .cil-ctl-empty { padding: 32px 20px; }
    .cil-ctl-empty__art { width: 160px; height: 120px; }
    .cil-ctl-empty__title { font-size: 20px; }
    .cil-ctl-empty__text { font-size: 16px; }
    .cil-ctl-empty__actions { flex-direction: column; align-self: stretch; }
    .cil-ctl-empty__actions .cil-ctl-btn { width: 100%; }
}