/* The help center's video guides (templates/guides.php; Figma 13519-2 "Video guides"): the shelf, the
   library with its filters and "more", the guide cards, the player in place with its chapters and its
   error, the guides' row first among the topics and each topic's link to its guides. Brand tokens only. */

.cil-guides { display: flex; flex-direction: column; gap: 20px; min-width: 0; scroll-margin-top: 100px; }
.cil-guides[hidden] { display: none; }
.cil-guides ul, .cil-guides ol { margin: 0; padding: 0; list-style: none; }
.cil-guides__head { display: flex; flex-direction: column; gap: 6px; }
.cil-guides__headRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cil-guides .cil-guides__title { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--cil-black); font-size: 24px; font-weight: 700; line-height: 1.2; }
.cil-guides__title:focus { outline: none; }
.cil-guides__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cil-blue-light-1); }
.cil-guides .cil-guides__all { color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; text-decoration: none; }
.cil-guides .cil-guides__all:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); text-decoration: underline; text-underline-offset: 3px; }
.cil-guides__intro { margin: -14px 0 0; color: var(--cil-black-regular-7); font-size: 16px; line-height: 1.2; }
.cil-guides__stage:empty { display: none; }

.cil-guides__row, .cil-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* The leaving guides' copies stand where they were while the others move in (guides.js, regroup). */
.cil-guides__grid { position: relative; }

/* ---- A guide's card ---- */
.cil-guide { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--cil-white);
    box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--cil-black) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--cil-black) 8%, transparent);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1); }
.cil-guide[hidden] { display: none; }
.cil-guide:hover { transform: translateY(-3px); }
.cil-guide.is-current { box-shadow: 0 0 0 2px var(--cil-blue-dark-1), 0 8px 24px -4px color-mix(in srgb, var(--cil-black) 16%, transparent); }
/* The player, opened under the row of the guide chosen: a row of its own across the grid. */
.cil-guides__playing { grid-column: 1 / -1; min-width: 0; }
.cil-guide.is-entering { animation: cil-guide-in .4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes cil-guide-in { from { opacity: 0; transform: translateY(10px); } }
.cil-help .cil-guide__thumb {
    position: relative; display: block; width: 100%; height: 178px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0;
    background: var(--cil-black-light-3); cursor: pointer;
}
.cil-help .cil-guide__thumb:focus-visible { outline: 3px solid var(--cil-blue-dark-1); outline-offset: -3px; }
.cil-guide__picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.cil-guide:hover .cil-guide__picture { transform: scale(1.04); }
/* Loading (frame "Loading"): the picture's place shimmers until it is there. */
.cil-guide__thumb.is-loading { background: linear-gradient(90deg, var(--cil-black-light-3) 0%, var(--cil-black-light-1) 50%, var(--cil-black-light-3) 100%) 0 0 / 200% 100%; animation: cil-guide-shimmer 1.2s linear infinite; }
.cil-guide__thumb.is-loading .cil-guide__picture { opacity: 0; }
@keyframes cil-guide-shimmer { to { background-position: -200% 0; } }
.cil-guide__marks { position: absolute; top: 12px; inset-inline: 12px; display: flex; gap: 8px; }
.cil-guide__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--cil-black-dark-5) 85%, transparent); color: var(--cil-white); font-size: 14px; font-weight: 700; line-height: 1.2; }
.cil-guide__yt { display: grid; place-items: center; padding: 4px 8px; border-radius: 6px; background: var(--cil-red); }
.cil-guide__length { position: absolute; bottom: 12px; inset-inline-end: 12px; }
.cil-guide__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--cil-white); transform: translate(-50%, -50%); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.cil-guide__thumb:is(:hover, :focus-visible) .cil-guide__play { transform: translate(-50%, -50%) scale(1.08); }
.cil-guide__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
/* A title runs right to left when it holds any Hebrew (items 277, 281) -- a Hebrew title shown on the English page reads right to
   left -- but its lines start at the page's own edge, with the words under it (design-system/text-direction.php).
   Here, the library's rows and the player (guide-player.css). */
.cil-guides .cil-guide__title { margin: 0; color: var(--cil-black); font-size: 18px; font-weight: 700; line-height: 1.2; }
.cil-guide__topic { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; line-height: 1.2; }
.cil-guide__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.cil-help .cil-guide__watch { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none;
    color: var(--cil-blue-dark-1); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.cil-help .cil-guide__watch:is(:hover, :focus-visible) { background: none; color: var(--cil-blue-dark-1); text-decoration: underline; text-underline-offset: 3px; }
.cil-help .cil-guide__yt-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cil-black-regular-7); font-size: 14px; text-decoration: none; }
.cil-help .cil-guide__yt-link:is(:hover, :focus-visible) { color: var(--cil-black); text-decoration: underline; text-underline-offset: 3px; }

/* ---- The library's filters and "more" ---- */
.cil-guides__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cil-help .cil-guides__filter { margin: 0; padding: 7px 14px; border: 1px solid var(--cil-black-light-3); border-radius: 20px; background: var(--cil-white);
    color: var(--cil-black); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cil-help .cil-guides__filter:is(:hover, :focus-visible) { border-color: var(--cil-blue-dark-1); background: var(--cil-white); color: var(--cil-blue-dark-1); }
.cil-help .cil-guides__filter.is-on { border-color: var(--cil-blue-dark-1); background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
.cil-guides__loadMore { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.cil-guides__loadMore[hidden] { display: none; }
.cil-guides__status { margin: 0; color: var(--cil-black-regular-7); font-size: 16px; }
/* The design's secondary button (Figma 13519-2 "Load more"), as the podcasts' and stories' "more":
   the label centred in the pill; pointed at, a ring draws round it, the colours pinned against the
   theme's green; pressed, it gives a little. */
.cil-help .cil-guides__moreButton { display: inline-flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0 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; cursor: pointer; transition: box-shadow .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1); }
.cil-help .cil-guides__moreButton:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-black); box-shadow: 0 0 0 3px var(--cil-blue-light-5); outline: none; }
.cil-help .cil-guides__moreButton:active { transform: scale(.98); }
.cil-guides__moreButton[hidden] { display: none; }

/* ---- The guides first among the topics, a rule under them; each topic's link to its guides ---- */
.cil-help__guidesItem { padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--cil-black-light-3); }
.cil-help .cil-help__guidesLink { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; text-decoration: none; }
.cil-help .cil-help__guidesLink:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); text-decoration: underline; text-underline-offset: 3px; }
/* While searching, the guides found stand first on their own; the topics' links to theirs step aside (as the design's search). */
.cil-help.is-searching .cil-help__guidesLink { display: none; }

/* ---- The guides a search finds (templates/guide-results.php; Figma 13519-2 "Search results"):
   "מדריכי וידאו · N", then a row per guide -- its words beside its picture, the matching words marked
   as the questions' are. Phones: a smaller picture and smaller words. ---- */
.cil-guides-found { display: flex; flex-direction: column; gap: 12px; }
.cil-guides-found[hidden] { display: none; }
.cil-guides-found ul { margin: 0; padding: 0; list-style: none; }
.cil-help .cil-guides-found__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cil-black); font-size: 18px; font-weight: 700; line-height: 1.2; }
.cil-guides-found__list { display: flex; flex-direction: column; gap: 12px; }
.cil-guideRow { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--cil-black-light-3); border-radius: 16px; background: var(--cil-white);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1); }
.cil-guideRow[hidden] { display: none; }
.cil-guideRow.is-current { box-shadow: 0 0 0 1px var(--cil-blue-dark-1); }
.cil-guideRow__text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cil-guideRow__meta { margin: 0; color: var(--cil-black-regular-7); font-size: 16px; line-height: 1.2; }
.cil-help .cil-guideRow__title { margin: 0; color: var(--cil-black); font-size: 18px; font-weight: 700; line-height: 1.2; }
.cil-help .cil-guideRow__watch { margin: 0; padding: 0; border: 0; background: none; color: var(--cil-blue-dark-1); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.cil-help .cil-guideRow__watch:is(:hover, :focus-visible) { background: none; color: var(--cil-blue-dark-1); text-decoration-color: currentColor; }
.cil-help .cil-guideRow__thumb { position: relative; flex: none; width: 176px; height: 99px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: var(--cil-black-light-3); cursor: pointer; }
.cil-guideRow__picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.cil-guideRow__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cil-white);
    transform: translate(-50%, -50%); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.cil-guideRow__thumb:hover .cil-guideRow__play, .cil-guideRow:has(.cil-guideRow__watch:hover) .cil-guideRow__play { transform: translate(-50%, -50%) scale(1.1); }
@media (max-width: 640px) {
    .cil-guides-found { gap: 10px; }
    .cil-help .cil-guides-found__title { font-size: 16px; }
    .cil-guides-found__title img { width: 18px; height: 18px; }
    .cil-guideRow { gap: 12px; padding: 10px; border-radius: 14px; }
    .cil-guideRow__meta { font-size: 12px; }
    .cil-help .cil-guideRow__title { font-size: 14px; }
    .cil-help .cil-guideRow__thumb { width: 120px; height: 68px; border-radius: 8px; }
    .cil-guideRow__play { width: 32px; height: 32px; }
    .cil-guideRow__play img { width: 14px; height: 14px; }
}