/* The informative stripe's pathways (renderers/informative.php; Figma 38-19 frames 13-18, item 219): A pathway
   cards, B a split list, C colour tiles, each light or dark. Each pathway's colour (blue, green, red) is its
   own --cil-info-deep / --cil-info-soft / --cil-info-pale, and every layout wears it on the whole pathway (item
   514): A and B a tint of it, C the deep colour. One link per pathway, its click target the whole pathway. The
   classic look keeps the theme's own .stripeInfo rules; a mark chosen there sits in the picture's circle.
   Logical properties, brand tokens. */

.cil-info { --cil-info-band: var(--cil-black-light-1); --cil-info-card: var(--cil-white); --cil-info-ink: var(--cil-black); --cil-info-text: var(--cil-black-regular-7); }
.cil-info--dark { --cil-info-band: var(--cil-black-dark-3); --cil-info-card: var(--cil-black-dark-1); --cil-info-ink: var(--cil-white); --cil-info-text: var(--cil-black-light-6); }
.cil-info__path--blue  { --cil-info-deep: var(--cil-blue-dark-1);  --cil-info-pale: var(--cil-blue-light-1);  --cil-info-soft: var(--cil-blue-light-3); }
.cil-info__path--green { --cil-info-deep: var(--cil-green-dark-1); --cil-info-pale: var(--cil-green-light-1); --cil-info-soft: var(--cil-green-light-3); }
.cil-info__path--red   { --cil-info-deep: var(--cil-red-dark-1);   --cil-info-pale: var(--cil-red-light-1);   --cil-info-soft: var(--cil-red-light-3); }

.cil-info .cil-info__band { gap: 28px; padding: 40px; border-radius: 16px; background: var(--cil-info-band); }
.cil-info--b.cil-info--light .cil-info__band, .cil-info--c.cil-info--light .cil-info__band { background: var(--cil-white); }
/* Dark, the stripe runs edge to edge (stripes.css, item 224) and the band draws no box. */
.cil-info--dark .cil-info__band { border-radius: 0; background: none; }
.cil-info .cil-l-stripe__title { color: var(--cil-info-ink); font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-weight: 400; }
.cil-info .cil-l-stripe__text { color: var(--cil-info-text); }
.cil-info__paths { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.cil-info__path { position: relative; flex: 1 1 0; min-width: 0; }
.cil-info__title { margin: 0; color: var(--cil-info-ink); font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; }
.cil-info__desc { margin: 0; color: var(--cil-info-text); font-size: 16px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cil-info__count { color: var(--cil-info-text); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.cil-info__mark { display: grid; place-items: center; color: var(--cil-info-deep); }
.cil-info .cil-info__link { color: inherit; text-decoration: none; }
/* The one link's click target covers its pathway. */
.cil-info__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cil-info__go { display: inline-flex; align-items: center; gap: 6px; font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif; font-size: 16px; line-height: 1.2; }
/* The caret's wrapper (cil_catalogue_icon, mirrored on a left-to-right page) is a box of its own, so the caret sits
   on the label's centre rather than its baseline. */
.cil-info__go .cil-ctl-forward { display: flex; }
.cil-info__go svg { display: block; }
.cil-info__go svg, .cil-info__arrow svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
/* B's arrow points the way the line reads. */
.lang-to-css-ltr .cil-info__arrow svg { transform: scaleX(-1); }

/* ---- A · Pathway cards (frames 13, 16) ---- */
.cil-info--a .cil-info__path {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark mark" "text text" "go count"; align-content: start;
    row-gap: 20px; min-height: 246px; box-sizing: border-box; padding: 28px; border-radius: 16px; background: var(--cil-info-card);
    box-shadow: 0 8px 12px color-mix(in srgb, var(--cil-black) 16%, transparent), 0 1px 1.5px color-mix(in srgb, var(--cil-black) 8%, transparent);
    transition: box-shadow .2s ease, outline-color .2s ease; outline: 1px solid transparent;
}
/* The footer keeps to the card's foot, so a card with no mark still lines up with its neighbours. */
.cil-info--a .cil-info__path { grid-template-rows: auto 1fr auto; }
.cil-info--a .cil-info__path--plain { grid-template-areas: "text text" "go count"; grid-template-rows: 1fr auto; }
/* The card in its pathway's colour (item 514): its Light 3 tint light (Light 1 read as white), the deep colour over the
   dark card dark; the mark's tile white on it. */
.cil-info--a .cil-info__path { --cil-info-card: var(--cil-info-soft); }
/* On a light tint the quieter words step darker, so they keep their contrast on the red one too (6.66:1). */
.cil-info--light:is(.cil-info--a, .cil-info--b) .cil-info__path { --cil-info-text: var(--cil-black-regular-10); }
.cil-info--dark.cil-info--a .cil-info__path { --cil-info-card: color-mix(in srgb, var(--cil-info-deep) 45%, var(--cil-black-dark-1)); }
.cil-info--a .cil-info__mark { grid-area: mark; justify-self: start; width: 56px; height: 56px; border-radius: 12px; background: var(--cil-white); }
.cil-info--dark.cil-info--a .cil-info__mark { background: var(--cil-info-deep); color: var(--cil-info-soft); }
.cil-info--a .cil-info__text { grid-area: text; display: flex; flex-direction: column; gap: 8px; }
.cil-info--a .cil-info__count { grid-area: count; align-self: center; }
.cil-info--a .cil-info__go { grid-area: go; justify-self: start; color: var(--cil-info-deep); }
.cil-info--dark.cil-info--a .cil-info__go { color: var(--cil-info-soft); }
/* Pointed at or focused, the whole card lifts: a stronger shadow and an edge in its own deep colour (frame 13 g). */
.cil-info--a .cil-info__path:is(:hover, :focus-within) {
    outline-color: var(--cil-info-deep);
    box-shadow: 0 14px 24px color-mix(in srgb, var(--cil-black) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--cil-black) 10%, transparent);
}
.cil-info--dark.cil-info--a .cil-info__path:is(:hover, :focus-within) { outline: 2px solid var(--cil-white); }
.cil-info--a .cil-info__path:is(:hover, :focus-within) .cil-info__go svg { transform: translateX(-4px); }

/* ---- B · Split list (frames 14, 17): the head at the start, the rows at the end ---- */
.cil-info--b .cil-info__band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 860px); align-items: start; gap: 48px; padding: 48px; }
.cil-info--b .cil-l-stripe__head { flex-direction: column; }
/* Each row a plate in its pathway's colour (item 514), the plates a step apart. */
.cil-info--b .cil-info__paths { flex-direction: column; gap: 8px; }
.cil-info--b .cil-info__path {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 24px;
    padding: 24px 20px; border-radius: 12px; background: var(--cil-info-soft);
}
.cil-info--dark.cil-info--b .cil-info__path { background: color-mix(in srgb, var(--cil-info-deep) 45%, var(--cil-black-dark-3)); }
.cil-info--b .cil-info__path--plain { grid-template-columns: minmax(0, 1fr) auto auto; }
.cil-info--b .cil-info__mark svg { width: 32px; height: 32px; }
.cil-info--dark.cil-info--b .cil-info__mark { color: var(--cil-info-soft); }
.cil-info--b .cil-info__text { display: flex; flex-direction: column; gap: 6px; }
.cil-info--b .cil-info__desc { -webkit-line-clamp: 1; }
.cil-info--b .cil-info__arrow {
    display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%;
    border: 1px solid var(--cil-info-deep); color: var(--cil-info-deep); transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cil-info--dark.cil-info--b .cil-info__arrow { border-color: var(--cil-info-soft); color: var(--cil-info-soft); }
/* Pointed at or focused: the arrow filled in the row's own colour and nudged along the line (frame 14 g); the plate keeps its colour. */
.cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow { border-color: var(--cil-info-deep); background: var(--cil-info-deep); color: var(--cil-white); }
.cil-info--dark.cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow { border-color: var(--cil-white); background: var(--cil-white); color: var(--cil-info-deep); }
.cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow svg { transform: translateX(-3px); }
.lang-to-css-ltr .cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow svg { transform: scaleX(-1) translateX(-3px); }

/* ---- C · Colour tiles (frames 15, 18): each pathway in its own deep colour, a white button its one link ---- */
.cil-info--c .cil-info__path {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark count" "text text" "go go"; align-content: start;
    row-gap: 24px; min-height: 270px; box-sizing: border-box; padding: 32px; border-radius: 16px; background: var(--cil-info-deep); color: var(--cil-white);
    transition: box-shadow .2s ease;
}
.cil-info--c .cil-info__mark { grid-area: mark; color: var(--cil-white); }
.cil-info--c .cil-info__mark svg { width: 36px; height: 36px; }
.cil-info--c .cil-info__count { grid-area: count; justify-self: end; align-self: center; color: var(--cil-white); }
.cil-info--c .cil-info__text { grid-area: text; display: flex; flex-direction: column; gap: 8px; }
.cil-info--c .cil-info__title, .cil-info--c .cil-info__desc { color: var(--cil-white); }
.cil-info--c .cil-info__go {
    grid-area: go; justify-self: start; height: 44px; padding: 0 20px; border-radius: 8px; background: var(--cil-white); color: var(--cil-info-deep);
    font-size: 16px; transition: background-color .2s ease;
}
.cil-info--c .cil-info__path:is(:hover, :focus-within) { box-shadow: 0 14px 24px color-mix(in srgb, var(--cil-black) 24%, transparent); }
.cil-info--c .cil-info__path:is(:hover, :focus-within) .cil-info__go { background: var(--cil-black-light-1); }
.cil-info--dark.cil-info--c .cil-info__path:is(:hover, :focus-within) { outline: 2px solid var(--cil-white); box-shadow: none; }
.cil-info--c .cil-info__path:is(:hover, :focus-within) .cil-info__go svg { transform: translateX(-4px); }

.cil-info .cil-info__link:focus-visible { outline: none; }
.cil-info__path:has(.cil-info__link:focus-visible) { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-info--dark .cil-info__path:has(.cil-info__link:focus-visible) { outline-color: var(--cil-white); }

/* ---- Phones ---- */
@media (max-width: 767px) {
    .cil-info .cil-info__band { gap: 16px; padding: 24px 16px; }
    .cil-info__paths { flex-direction: column; gap: 12px; }
    .cil-info__path { flex: none; }
    .cil-info__title { font-size: 18px; }
    .cil-info__desc { font-size: 14px; }
    /* A: the mark at the start of the reading line, the words beside it (frame 13 b). */
    .cil-info--a .cil-info__path { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark text text" ". go count"; column-gap: 16px; row-gap: 12px; min-height: 0; padding: 20px; }
    .cil-info--a .cil-info__path, .cil-info--a .cil-info__path--plain { grid-template-rows: auto auto; }
    .cil-info--a .cil-info__path--plain { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "go count"; }
    .cil-info--a .cil-info__mark { width: 48px; height: 48px; }
    .cil-info--a .cil-info__go { font-size: 14px; }
    /* B: the head above the list; a caret at the end of each row. */
    .cil-info--b .cil-info__band { display: flex; flex-direction: column; padding: 24px 16px; }
    .cil-info--b .cil-info__paths { gap: 8px; }
    .cil-info--b .cil-info__path { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark text arrow" "mark count arrow"; column-gap: 12px; row-gap: 4px; padding: 16px; }
    .cil-info--b .cil-info__path--plain { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text arrow" "count arrow"; }
    .cil-info--b .cil-info__mark { grid-area: mark; }
    .cil-info--b .cil-info__text { grid-area: text; }
    .cil-info--b .cil-info__count { grid-area: count; font-size: 12px; }
    .cil-info--b .cil-info__arrow { grid-area: arrow; width: auto; height: auto; border: 0; background: none; }
    /* The bare caret on a phone: pointed at, it only nudges (no disc to fill). */
    .cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow,
    .cil-info--dark.cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow { border: 0; background: none; color: var(--cil-info-deep); }
    .cil-info--dark.cil-info--b .cil-info__path:is(:hover, :focus-within) .cil-info__arrow { color: var(--cil-info-soft); }
    .cil-info--b .cil-info__desc { -webkit-line-clamp: 2; }
    /* C: tiles across, the button spanning the tile (frame 15 b). */
    .cil-info--c .cil-info__path { min-height: 0; padding: 20px; row-gap: 16px; }
    .cil-info--c .cil-info__go { justify-self: stretch; justify-content: center; }
    /* Every tile one height: two lines kept for each description. */
    .cil-info--a .cil-info__desc, .cil-info--c .cil-info__desc { min-height: 2.4em; }
}

/* ---- Classic: a mark chosen in place of the picture (item 514), in the picture's circle, in the circle's colour ---- */
.stripeInfo .stripeInfoItems .image .stripeInfo__mark { display: block; width: 40px; height: 40px; color: var(--cil-green-dark-1); }
.stripeInfo .stripeInfoItems .image .stripeInfo__mark svg { display: block; width: 40px; height: 40px; }
.stripeInfo .stripeInfoItems > div:nth-child(3n+2) .image .stripeInfo__mark { color: var(--cil-yellow-dark-1); }
.stripeInfo .stripeInfoItems > div:nth-child(3n+3) .image .stripeInfo__mark { color: var(--cil-red-dark-1); }
.stripeInfo .stripeInfoItems > div:nth-child(3n+4) .image .stripeInfo__mark { color: var(--cil-blue-dark-1); }

@media (prefers-reduced-motion: reduce) {
    .cil-info__path, .cil-info__go, .cil-info__arrow, .cil-info__go svg, .cil-info__arrow svg { transition: none; }
    .cil-info__path:is(:hover, :focus-within) svg { transform: none !important; }
    /* Still pointing the way a left-to-right line reads. */
    .lang-to-css-ltr .cil-info__path:is(:hover, :focus-within) .cil-info__arrow svg { transform: scaleX(-1) !important; }
}