/* The goals stripe (renderers/targets.php; Figma 38-19 frames 19-21, item 223): picture cards in a row, the row's
   end card (home-rows.css) and the catalogue's arrows. a -- dark between the colour burst the stripe has always had
   (images/goals-top.svg and goals-bottom.svg with their fades, kept as they were drawn); b -- light with soft discs,
   rings and dots, or dark and plain. The card is also the stripe page's "all goals" (single-stripe.php), so its own
   rules stand outside the stripe. Logical properties, brand tokens. */

.cil-goals { --cil-goals-ink: var(--cil-black); --cil-goals-link: var(--cil-blue-dark-1); }
.cil-goals--dark { --cil-goals-ink: var(--cil-white); --cil-goals-link: var(--cil-blue); }
.cil-goals .cil-goals__band { position: relative; overflow: hidden; padding: 40px; border-radius: 16px; background-color: var(--cil-white); }
/* Dark, the stripe runs edge to edge (stripes.css, item 224) and the band draws no box. */
.cil-goals--dark .cil-goals__band { border-radius: 0; background-color: transparent; }
.cil-goals .cil-l-stripe__head, .cil-goals .cil-l-stripe__carousel { position: relative; z-index: 1; }
.cil-goals .cil-l-stripe__head { align-items: center; }
.cil-goals .cil-l-stripe__title { color: var(--cil-goals-ink); font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-weight: 400; }
.cil-goals .cil-l-stripe__all { padding-block-start: 0; font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif; font-weight: 400; }
.cil-goals .cil-l-stripe__all, .cil-goals .cil-l-stripe__all:is(:hover, :focus-visible) { color: var(--cil-goals-link); }
.cil-goals .cil-ctl-forward, .cil-goal .cil-ctl-forward { display: flex; }
.lang-to-css-ltr :is(.cil-goals, .cil-goal) .cil-ctl-forward { transform: scaleX(-1); }

/* ---- a: the colour burst above and below across the stripe's whole width, each under its fade into the band
   (the old gradient1/2.svg, drawn here in the band's own colour) ---- */
.cil-goals--a .cil-goals__band { padding: 80px 40px 150px; }
.cil-goals.cil-goals--a {
    --cil-goals-fade: linear-gradient(to bottom, var(--cil-black-dark-3), color-mix(in srgb, var(--cil-black-dark-3) 27%, transparent));
    background-image: var(--cil-goals-fade), url(../../../images/goals-top.svg), var(--cil-goals-fade), url(../../../images/goals-bottom.svg);
    background-position: top center, top center, bottom center, bottom center;
    background-size: 1415px 106px, auto, 1415px 106px, auto;
    background-repeat: no-repeat;
}

/* ---- b light: the celebration's discs, rings and dots, behind everything (frame 19) ---- */
.cil-goals__art { position: absolute; inset: 0; pointer-events: none; }
.cil-goals__art i { position: absolute; box-sizing: border-box; border-radius: 50%; }
.cil-goals__art i:nth-child(-n + 2) { background: color-mix(in srgb, var(--cil-black-light-2) 50%, var(--cil-white)); }
.cil-goals__art i:nth-child(n + 3):nth-child(-n + 6) { border: 8px solid var(--cil-black-light-3); }
.cil-goals__art i:nth-child(4), .cil-goals__art i:nth-child(6) { border-width: 4px; }
.cil-goals__art i:nth-child(n + 7) { background: var(--cil-blue); }
.cil-goals__art i:nth-child(1)  { left: -6.34%; top: 11.74%; width: 260px; height: 260px; }
.cil-goals__art i:nth-child(2)  { left: 81.69%; top: 68.12%; width: 320px; height: 320px; }
.cil-goals__art i:nth-child(3)  { left: 36.62%; top: 2.35%;  width: 56px; height: 56px; }
.cil-goals__art i:nth-child(4)  { left: 61.97%; top: 10.74%; width: 24px; height: 24px; }
.cil-goals__art i:nth-child(5)  { left: 13.38%; top: 88.93%; width: 72px; height: 72px; }
.cil-goals__art i:nth-child(6)  { left: 71.13%; top: 92.62%; width: 24px; height: 24px; }
.cil-goals__art i:nth-child(7)  { left: 45.07%; top: 5.03%;  width: 16px; height: 16px; }
.cil-goals__art i:nth-child(8)  { left: 50.70%; top: 12.75%; width: 12px; height: 12px; }
.cil-goals__art i:nth-child(9)  { left: 97.61%; top: 25.17%; width: 34px; height: 34px; }
.cil-goals__art i:nth-child(10) { left: 10.56%; top: 83.22%; width: 20px; height: 20px; }
.cil-goals__art i:nth-child(11) { left: 83.10%; top: 88.26%; width: 40px; height: 40px; }

/* ---- The row: four cards across, 24 apart ---- */
.cil-goals .cil-goals__track { grid-auto-columns: calc((100% - 3 * 24px) / 4); }
.cil-goals__item { height: 400px; }
.cil-goals .cil-row__end { height: 100%; }
.cil-goals--dark .cil-row__end { background: var(--cil-black-dark-1); }
.cil-goals--dark .cil-row__disc { background: var(--cil-black-dark-3); color: var(--cil-blue); }
.cil-goals--dark .cil-row__endTitle { color: var(--cil-blue); }
.cil-goals--dark .cil-row__endNote { color: var(--cil-black-light-6); }
.cil-goals--dark .cil-row__end:is(:hover, :focus-visible) { border-color: var(--cil-blue); box-shadow: inset 0 0 0 1px var(--cil-blue); }
.cil-goals--dark .cil-row__end:is(:hover, :focus-visible) .cil-row__disc { border-color: var(--cil-blue); }
.cil-goals--dark .cil-row__end:focus-visible { outline-color: var(--cil-white); }
.cil-goals--dark .cil-ctl-arrow { color: var(--cil-white); }
.cil-goals--dark .cil-ctl-arrow:hover { background: var(--cil-black-dark-1); }
.cil-goals--dark .cil-ctl-arrow:disabled { color: var(--cil-black-regular-5); background: none; }

/* ---- One goal: its picture under a scrim that deepens toward the words, the title, and the button that is the
   card's one link ---- */
.cil-goal {
    --cil-goal-scrim: var(--cil-black-dark-5);
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
    height: 100%; min-height: 300px; box-sizing: border-box; padding: 16px; overflow: hidden; border-radius: 12px;
    background: var(--cil-black-dark-1);
    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);
    outline: 2px solid transparent; outline-offset: -2px; transition: box-shadow .25s ease, outline-color .2s ease;
}
.cil-goal__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* On the stripe's page, how many courses lead to it, at the card's top end (Figma 38-20 frame 05). */
.cil-goal__count {
    position: absolute; inset-block-start: 12px; inset-inline-end: 12px; padding: 4px 10px; border-radius: 6px;
    background: color-mix(in srgb, var(--cil-black-dark-5) 85%, transparent); color: var(--cil-white);
    font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-size: 14px; line-height: 1.2;
}
.cil-goal::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background-color: transparent; transition: background-color .25s ease;
    background-image: linear-gradient(to top,
        color-mix(in srgb, var(--cil-goal-scrim) 72%, transparent) 0%, color-mix(in srgb, var(--cil-goal-scrim) 59%, transparent) 44%,
        color-mix(in srgb, var(--cil-goal-scrim) 43%, transparent) 53%, color-mix(in srgb, var(--cil-goal-scrim) 25%, transparent) 64%,
        color-mix(in srgb, var(--cil-goal-scrim) 10%, transparent) 76%);
}
.cil-goal__title {
    margin: 0; color: var(--cil-white); font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cil-goal .cil-goal__go {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px;
    background: var(--cil-green); color: var(--cil-black); text-decoration: none;
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2;
    transition: background-color .2s ease, color .2s ease;
}
.cil-goal__go span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cil-goal__go svg { display: block; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
/* The one link's target covers the card. */
.cil-goal__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cil-goal .cil-goal__go:focus-visible { outline: none; }
/* Pointed at or focused (frames 19-21 e): a Campus Blue edge, a deeper shadow, the picture dims, the button deepens
   and its caret steps on. */
.cil-goal:is(:hover, :focus-within) {
    outline-color: var(--cil-blue);
    box-shadow: 0 12px 32px -4px color-mix(in srgb, var(--cil-black) 20%, transparent), 0 2px 6px color-mix(in srgb, var(--cil-black) 10%, transparent);
}
.cil-goal:is(:hover, :focus-within)::before { background-color: color-mix(in srgb, var(--cil-goal-scrim) 40%, transparent); }
.cil-goal:is(:hover, :focus-within) .cil-goal__go { background: var(--cil-green-dark-1); color: var(--cil-white); }
.cil-goal:is(:hover, :focus-within) .cil-goal__go svg { transform: translateX(-4px); }
.cil-goal:has(.cil-goal__go:focus-visible) { outline: 3px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-goals--dark .cil-goal:has(.cil-goal__go:focus-visible) { outline-color: var(--cil-white); }

/* ---- Narrower screens: three across, then the phone's row that a finger moves ---- */
@media (max-width: 1079px) {
    .cil-goals .cil-goals__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 767px) {
    .cil-goals .cil-goals__band { margin-inline: -16px; padding: 24px 16px; border-radius: 0; }
    .cil-goals--a .cil-goals__band { padding: 72px 16px 110px; }
    .cil-goals.cil-goals--a { background-size: 534px 40px, auto 40px, 534px 40px, auto 40px; }
    .cil-goals .cil-l-stripe__all { padding-block-start: 0; }
    .cil-goals .cil-goals__track { grid-auto-columns: 240px; gap: 12px; }
    .cil-goals__item { height: 300px; }
    .cil-goal__title { font-size: 18px; }
    /* The celebration on a phone (frame 19 b): a disc, two rings and three dots, all low but one. */
    .cil-goals__art i:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(9), :nth-child(10)) { display: none; }
    .cil-goals__art i:nth-child(1)  { left: -23.08%; top: 64.71%; width: 220px; height: 220px; }
    .cil-goals__art i:nth-child(5)  { left: 69.23%; top: 83.53%; }
    .cil-goals__art i:nth-child(6)  { left: 10.26%; top: 90.59%; }
    .cil-goals__art i:nth-child(11) { left: 84.62%; top: 74.12%; }
    .cil-goals__art i:nth-child(7)  { left: 46.15%; top: 85.88%; }
    .cil-goals__art i:nth-child(8)  { left: 30.77%; top: 5.65%; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-goal, .cil-goal::before, .cil-goal__go, .cil-goal__go svg { transition: none; }
    .cil-goal:is(:hover, :focus-within) .cil-goal__go svg { transform: none; }
}