/* The home page's rows as Figma 38-19 draws them (row-parts.php): "my courses" (frames 01-02, my-courses-row/)
   and the common stripe of courses and programmes (frames 03-04, renderers/courses.php). Each is one of the
   landing rows (landing-page/assets/stripes.css: the head, the track) turned by the catalogue's arrows
   (catalogue-pages/assets/row-arrows.css). What they share is here: the head's sizes, a track of exactly four whole
   cards 25 apart -- 320 wide at most, narrower where the row is, never a cut fourth or the start of a fifth (item
   530) -- the card at the row's end, and the placeholders' grey. Each row's own sheet keeps what is its own.
   Logical properties, brand tokens. */
.cil-row .cil-l-stripe__panel { gap: 21px; }   /* 25 to the cards: the track holds 4px above them for their shadow */
.cil-row .cil-l-stripe__head { align-items: center; }
.cil-row .cil-l-stripe__title::before { height: 35px; border-radius: 0; }
.cil-row .cil-l-stripe__all { padding: 4px; font-size: 16px; }
.cil-row .cil-ctl-forward { display: inline-flex; }
.lang-to-css-ltr .cil-row .cil-ctl-forward { transform: scaleX(-1); }
.lang-to-css-ltr .cil-row .cil-l-stripe__all:is(:hover, :focus-visible) svg { transform: translateX(-3px); }
.cil-row .cil-l-stripe__carousel { gap: 21px; }

/* ---- The track ----
   Four columns that share the row's width, so the fourth ends where the row does at any width; the row itself is
   no wider than four cards of 320, centred, so the space beside it is the page's, never a window onto the fifth.
   4px of padding either side keeps the cards' shadow; the next card starts 25px on, outside it. */
.cil-row .cil-row__track {
    grid-auto-columns: calc((100% - 3 * 25px) / 4); column-gap: 25px;
    box-sizing: border-box; max-inline-size: calc(4 * 320px + 3 * 25px + 2 * 4px);
    margin-inline: auto; padding-inline: 4px; scroll-padding-inline: 4px;
}
.cil-row__item { width: auto; min-width: 0; }
.cil-row__item > .cil-card { width: 100%; height: 100%; margin: 0; }

/* ---- The card at the row's end: "all …", which opens the whole list; a row's own states take its shape ---- */
.cil-row__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; box-sizing: border-box;
    padding: 24px; border: 1.5px dashed var(--cil-blue); border-radius: 10px; background: var(--cil-blue-light-1); text-align: center;
}
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end {
    height: 100%; color: var(--cil-blue-dark-1); text-decoration: none;
    transition: border-color .2s ease, box-shadow .25s cubic-bezier(.2, .8, .2, 1);
}
.cil-row__disc {
    display: grid; place-items: center; width: 56px; height: 56px; box-sizing: border-box; flex: none;
    border: 1px solid var(--cil-blue-light-7); border-radius: 50%; background: var(--cil-white); color: var(--cil-blue-dark-1);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
/* The design's SemiBold is its own face (declared by the header, site-header.css): asked for at its own weight,
   never a Regular thickened by the browser (item 207). */
.cil-row__endTitle { margin: 0; color: var(--cil-blue-dark-1); font-size: 18px; font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif; font-weight: 400; line-height: 1.2; }
.cil-row__endNote { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; line-height: 1.2; }
/* As the catalogue's tiles answer a pointer (item 204): the card's edge draws in -- the dashed line turns solid in
   the deep blue with a hairline inside it -- the disc rises a little and takes the same edge, and its caret steps
   on toward the end of the row. The background never changes. A press settles the disc back. */
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:is(:hover, :focus-visible) {
    color: var(--cil-blue-dark-1); border-style: solid; border-color: var(--cil-blue-dark-1); box-shadow: inset 0 0 0 1px var(--cil-blue-dark-1);
}
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end .cil-row__disc { transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .25s ease; }
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end .cil-row__disc svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:is(:hover, :focus-visible) .cil-row__disc {
    transform: translateY(-2px) scale(1.08); border-color: var(--cil-blue-dark-1); box-shadow: 0 6px 14px color-mix(in srgb, var(--cil-blue-dark-1) 16%, transparent);
}
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:active .cil-row__disc { transform: scale(1.02); transition-duration: .1s; }
:is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:is(:hover, :focus-visible) .cil-row__disc svg { transform: translateX(-4px); }

/* ---- Placeholders: the row's layout in grey, breathing ---- */
.cil-row-skel { --cil-row-sk: var(--cil-black-light-2); animation: cil-row-pulse 1.6s ease-in-out infinite; }
@keyframes cil-row-pulse { 50% { opacity: .62; } }
.cil-row-skel i { display: block; flex: none; border-radius: 999px; background: var(--cil-row-sk); }
/* The title's words under a bar of their own length, beside the grey mark (4px and its 10px gap at the start). */
.cil-row-skel .cil-l-stripe__title {
    width: fit-content; color: transparent;
    background: linear-gradient(var(--cil-row-sk), var(--cil-row-sk)) no-repeat left center / calc(100% - 14px) 25px;
}
.lang-to-css-ltr .cil-row-skel .cil-l-stripe__title { background-position: right center; }
.cil-row .cil-row-skel .cil-l-stripe__title::before { background: var(--cil-row-sk); }
.cil-row-skel__link { display: flex; align-items: center; gap: 10px; padding: 4px; }
.cil-row-skel__link i:first-child { width: 123px; height: 10px; }
.cil-row-skel__link i:last-child { width: 14px; height: 12px; border-radius: 4px; }
.cil-row-skel .cil-card__image { height: 184px; background: var(--cil-row-sk); }
.cil-row-skel__org { display: flex; align-items: center; gap: 8px; width: 100%; height: 22px; }
.cil-row-skel__org i:first-child { width: 22px; height: 22px; }
.cil-row-skel__org i:last-child { width: 114px; height: 9px; }
.cil-row-skel__title { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; height: 48px; padding-block-start: 5px; box-sizing: border-box; }
.cil-row-skel__title i:nth-child(1) { width: calc(100% - 32px); height: 11px; }
.cil-row-skel__title i:nth-child(2) { width: 149px; height: 11px; }
.cil-row-skel__title i:nth-child(3) { position: absolute; inset-block-start: 4px; inset-inline-end: 10px; width: 4px; height: 16px; }
.cil-row-skel__arrow { width: 20px !important; height: 20px; margin: 6px; }

/* ---- The common stripe (frames 03-04, renderers/courses.php): the blue mark, the stripe's line on a line of its
   own 25px under the head -- in from the mark, as the title's words are -- and the catalogue's card with the
   design's shadow. The link stays level with the title, whatever the line under it. ---- */
.cil-row--courses .cil-l-stripe__head { align-items: flex-start; }
.cil-row--courses .cil-l-stripe__words { gap: 25px; }
.cil-row--courses .cil-l-stripe__title::before { background: var(--cil-blue); }
.cil-row--courses .cil-l-stripe__text { padding-inline-start: 14px; color: var(--cil-black); font-size: 14px; }
.cil-row--courses .cil-l-stripe__all { margin-block-start: 10px; }
.cil-row--courses .cil-row__item > .cil-card {
    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);
}
.cil-row--courses .cil-row-skel .cil-l-stripe__title { background: none; }
.cil-row-skel__titleBar { width: 262px; height: 25px; }
.cil-row-skel__line { width: 160px; height: 8px; margin-inline-start: 14px; }
.cil-row-skel__facts { display: flex; align-items: center; gap: 8px; height: 17px; }
.cil-row-skel__facts i:nth-child(odd) { width: 12px; height: 12px; }
.cil-row-skel__facts i:nth-child(even) { width: 34px; height: 7px; margin-inline-end: 8px; }

/* A stripe with nothing to show yet, on the stripes screen's preview (preview-page.php). */
.cil-stripe-preview__empty { max-width: 560px; margin: 80px auto; padding-inline: 16px; color: var(--cil-black-regular-7); font-size: 18px; text-align: center; }
/* Below the site's header, which is fixed over the page's top at every width (header-component/assets/
   site-header.css, mobile-header.css), so the stripe is seen whole from its first line (item 217). */
.cil-stripe-preview { padding-block-start: var(--cil-hdr-height, 64px); }

/* ---- Phones ---- */
@media (max-width: 767px) {
    .cil-row--courses .cil-l-stripe__words { gap: 16px; }
    .cil-row--courses .cil-l-stripe__all { margin-block-start: 6px; }
    .cil-row-skel__titleBar { width: 160px; height: 15px; }
    .cil-row .cil-l-stripe__panel { gap: 16px; }
    .cil-row .cil-l-stripe__title::before { height: 24px; }
    .cil-row .cil-l-stripe__all { padding: 0; font-size: 14px; }
    .cil-row .cil-l-stripe__carousel { gap: 0; }
    /* A phone swipes the row: one card of 320 and the start of the next, which says there is more. */
    .cil-row .cil-row__track { grid-auto-columns: 320px; max-inline-size: none; column-gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .cil-row-skel .cil-l-stripe__title { background-size: calc(100% - 14px) 15px; }
    .cil-row-skel__link { padding: 0; }
    .cil-row-skel__link i:first-child { width: 53px; height: 17px; border-radius: 6px; }
    .cil-row-skel__link i:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-row-skel { animation: none; }
    .cil-row .cil-row__disc, .cil-row .cil-row__disc svg, :is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end { transition: none !important; }
    :is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:is(:hover, :focus-visible) .cil-row__disc,
    :is(.cil-row, .cil-goals, .cil-sst, .cil-pst, .cil-yt, .cil-soon) .cil-row__end:is(:hover, :focus-visible) .cil-row__disc svg { transform: none; }
}