/* The catalogue's home and its two lists (Figma 38-24, frames 01, 02, 05): the four ways in, popular
   categories as photo tiles or picture cards, recommended learning, the subject tabs, the partners,
   every category, and every subject A–Z. */

/* ---- The four ways in ---- */
.cil-ctl-tiles ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.cil-ctl-tile {
    display: flex; align-items: center; gap: 16px; height: 103px; padding: 20px;
    border-radius: 16px; color: var(--cil-black);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cil-ctl-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgb(31 32 32 / .25); color: var(--cil-black); }
.cil-ctl-tile--green { background: var(--cil-green-light-1); }
.cil-ctl-tile--blue  { background: var(--cil-blue-light-1); }
.cil-ctl-tile--black { background: var(--cil-black-light-2); }
.cil-ctl-tile--red   { background: var(--cil-red-light-1); }
.cil-ctl-tile__mark { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--cil-white); }
.cil-ctl-tile--green .cil-ctl-tile__mark { color: var(--cil-green-dark-1); }
.cil-ctl-tile--blue  .cil-ctl-tile__mark { color: var(--cil-blue-dark-1); }
.cil-ctl-tile--black .cil-ctl-tile__mark { color: var(--cil-black); }
.cil-ctl-tile--red   .cil-ctl-tile__mark { color: var(--cil-red-dark-1); }
.cil-ctl-tile__words { display: flex; flex-direction: column; gap: 4px; }
.cil-ctl-tile__name { font-size: 18px; font-weight: 700; }
.cil-ctl-tile__count { font-size: 14px; }

/* ---- Popular categories: seven photo tiles, one of them large ---- */
.cil-ctl-mosaic {
    display: grid; grid-template-columns: 460fr repeat(3, 296fr); grid-template-rows: 200px 200px; gap: 24px;
    margin: 0; padding: 0; list-style: none;
}
.cil-ctl-mosaic__item--lead { grid-row: span 2; }
/* A category's photo in its tile, card or block: fills the box, cut around its middle. */
.cil-ctl-tilePhoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.cil-ctl-mosaic__tile {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end; height: 100%; padding: 16px;
    border-radius: 16px; background: var(--cil-black-light-3);
    outline: 2px solid transparent; outline-offset: 0;
    transition: outline-color .2s ease, outline-offset .2s ease;
}
/* Pointed at, a category's outline draws in around it and its chevron wakes (.cil-ctl-go, below). */
.cil-ctl-mosaic__tile:hover { outline-color: var(--cil-blue-dark-1); outline-offset: 3px; }

/* The chevron of a category's tile or card: with its card, a disc of the house blue grows behind it,
   the chevron turns white and steps forward. The disc is drawn outside the chevron's box, so waking
   moves nothing around it. */
.cil-ctl-go { position: relative; display: inline-grid; place-items: center; transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s ease; }
.cil-ctl-go::before {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    background: var(--cil-blue-dark-1); transform: scale(0);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.cil-ctl-go > * { position: relative; }
a:hover .cil-ctl-go, a:focus-visible .cil-ctl-go { color: var(--cil-white); transform: translateX(-3px); }
.lang-to-css-ltr a:hover .cil-ctl-go, .lang-to-css-ltr a:focus-visible .cil-ctl-go { transform: translateX(3px); }
a:hover .cil-ctl-go::before, a:focus-visible .cil-ctl-go::before { transform: scale(1); }
.cil-ctl-mosaic__label {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
    border: 1px solid var(--cil-black-regular-5); border-radius: 20px;
    background: var(--cil-white); color: var(--cil-black); font-size: 16px;
    transition: gap .3s cubic-bezier(.2, .8, .2, 1), padding .3s cubic-bezier(.2, .8, .2, 1);
}
/* With its tile pointed at, the badge widens so the woken chevron stands clear of the name. */
.cil-ctl-mosaic__tile:hover .cil-ctl-mosaic__label,
.cil-ctl-mosaic__tile:focus-visible .cil-ctl-mosaic__label { gap: 14px; padding-inline-end: 20px; }

/* ---- Picture cards: the other layout, and "other categories" ---- */
.cil-ctl-catCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-catCards--row { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cil-ctl-catCard {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: 168px auto; align-items: center;
    height: 100%; overflow: hidden;
    border: 1px solid var(--cil-black-light-5); border-radius: 16px;
    background: var(--cil-white); color: var(--cil-black);
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Pointed at, the card's own outline turns the house blue, and its chevron wakes. */
.cil-ctl-catCard:hover { border-color: var(--cil-blue-dark-1); box-shadow: 0 0 0 1px var(--cil-blue-dark-1); color: var(--cil-black); }
.cil-ctl-catCards--row .cil-ctl-catCard { grid-template-rows: 120px auto; }
.cil-ctl-catCard__photo { position: relative; overflow: hidden; grid-column: 1 / -1; align-self: stretch; background: var(--cil-black-light-3); }
.cil-ctl-catCard__name { padding: 16px 20px; padding-inline-end: 4px; font-size: 18px; font-weight: 700; line-height: 1.2; }
.cil-ctl-catCard__go { display: flex; padding-inline-end: 20px; }
.cil-ctl-catCard--all { grid-template-rows: 1fr; min-height: 224px; background: var(--cil-blue-light-1); border-color: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
.cil-ctl-catCard--all:hover { color: var(--cil-blue-dark-1); }
.cil-ctl-catCard--all .cil-ctl-catCard__name { padding-inline-start: 24px; }

/* ---- Recommended learning: a row that scrolls, arrows under it ---- */
.cil-ctl-carousel { display: flex; flex-direction: column; gap: 16px; }
.cil-ctl-carousel__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 75px) / 4); gap: 25px;
    overflow-x: auto; scroll-snap-type: inline mandatory; scroll-behavior: smooth;
    padding-block: 8px 16px; scrollbar-width: none;
}
.cil-ctl-carousel__track::-webkit-scrollbar { display: none; }
.cil-ctl-carousel__track > .cil-card { scroll-snap-align: start; width: auto; margin: 0; }
/* A row a mouse can drag (lobby.js): it lets go of its snapping while held, and takes it up again. */
@media (hover: hover) { [data-ctl-track] { cursor: grab; } }
[data-ctl-track].is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
/* The arrows at the row's far end, and a turning row's pause button: row-arrows.css (row-controls.php). */

/* ---- Every subject, by category ---- */
.cil-ctl-tabs { position: relative; display: flex; gap: 36px; overflow-x: auto; border-bottom: 1px solid var(--cil-black-light-5); scrollbar-width: none; }
.cil-ctl-tabs__tab {
    display: inline-grid; flex: none; margin-bottom: -1px; padding: 22px 0 19px; border: 0; border-bottom: 3px solid transparent;
    background: none; color: var(--cil-black); font: inherit; font-size: 16px; line-height: 1.2; white-space: nowrap; cursor: pointer;
    transition: color .2s ease;
}
/* The theme paints every button green on hover; a tab is no such button. */
.cil-ctl-tabs__tab:hover, .cil-ctl-tabs__tab:focus-visible { background: none; color: var(--cil-blue-dark-1); }
/* The bold name's width is kept from the start, so choosing a tab moves no other tab. */
.cil-ctl-tabs__tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.cil-ctl-tabs__tab[aria-selected="true"] { color: var(--cil-blue-dark-1); font-weight: 700; }
/* Without the script the chosen tab carries its own line; with it, one line slides between tabs. */
.cil-ctl-subjects:not(.has-ink) .cil-ctl-tabs__tab[aria-selected="true"] { border-bottom-color: var(--cil-blue); }
.cil-ctl-tabs__ink {
    position: absolute; bottom: 0; left: 0; width: var(--ink-w, 0); height: 3px; border-radius: 2px;
    background: var(--cil-blue); transform: translateX(var(--ink-x, 0)); pointer-events: none;
}
.cil-ctl-tabs__ink.is-moving { transition: transform .32s cubic-bezier(.2, .8, .2, 1), width .32s cubic-bezier(.2, .8, .2, 1); }
/* The chosen category's subjects arrive: a short fade and rise, each time a tab is chosen. */
.cil-ctl-subjects.is-tabbed .cil-ctl-tabs__panel:not([hidden]) { animation: cil-ctl-panel-in .28s ease-out; }
@keyframes cil-ctl-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cil-ctl-tabs__heading { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.cil-ctl-subjects.is-tabbed .cil-ctl-tabs__heading { display: none; }
.cil-ctl-subjects.is-tabbed .cil-ctl-tabs__panel[hidden] { display: none; }
.cil-ctl-subjects:not(.is-tabbed) .cil-ctl-tabs__panel + .cil-ctl-tabs__panel { margin-top: 24px; }
.cil-ctl-topics { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-topic {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
    border: 1px solid var(--cil-black-regular-5); border-radius: 20px; color: var(--cil-black); font-size: 16px;
}
.cil-ctl-topic { transition: border-color .2s ease, color .2s ease; }
.cil-ctl-topic:hover, .cil-ctl-topic:focus-visible { border-color: var(--cil-blue-dark-1); color: var(--cil-blue-dark-1); }
.cil-ctl-topic--all { border-color: transparent; color: var(--cil-blue-dark-1); font-weight: 600; }

/* ---- The partners: eight in view, the rest scroll in ---- */
.cil-ctl-partners {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 16px) / 8); gap: 16px; align-items: center;
    margin: 0; padding: 24px 0; list-style: none;
    overflow-x: auto; scroll-snap-type: inline mandatory; scroll-behavior: smooth; scrollbar-width: none;
    border-block: 1px solid var(--cil-black-light-3);
}
.cil-ctl-partners::-webkit-scrollbar { display: none; }
.cil-ctl-partners li { min-width: 0; scroll-snap-align: start; }
/* Each logo is the shared tile (entity-cards/assets/logo-tile.css). */

/* ---- Every category ---- */
.cil-ctl-catBlocks { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-catBlock { display: flex; gap: 32px; padding: 24px; border: 1px solid var(--cil-black-light-5); border-radius: 16px; }
.cil-ctl-catBlock__photo { position: relative; overflow: hidden; flex: none; width: 360px; height: 220px; border-radius: 12px; background: var(--cil-black-light-3); }
.cil-ctl-catBlock__body { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.cil-ctl-catBlock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cil-ctl-catBlock__title { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.2; }
.cil-ctl-catBlock__title a { color: var(--cil-black); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.cil-ctl-catBlock__title a:hover, .cil-ctl-catBlock__title a:focus-visible { color: var(--cil-black); text-decoration-color: currentColor; }
.cil-ctl-catBlock__facts { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; }

/* ---- Every subject, A–Z ---- */
.cil-ctl-letters ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-letter { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
    background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); font-weight: 700;
    box-shadow: inset 0 0 0 1px transparent;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; }
/* Pointed at, a letter lifts a little inside an outline of the house blue; its colour holds (the
   theme's `a:hover` would turn it green). */
.cil-ctl-letter:hover, .cil-ctl-letter:focus-visible { color: var(--cil-blue-dark-1); box-shadow: inset 0 0 0 1px var(--cil-blue-dark-1); transform: translateY(-2px); }
.cil-ctl-letter--none:hover { transform: none; box-shadow: none; }
.cil-ctl-letter--none { background: var(--cil-black-light-1); color: var(--cil-black-regular-7); font-weight: 400; }
.cil-ctl-letterGroup { margin-top: 40px; scroll-margin-top: calc(var(--cil-hdr-height, 64px) + 16px); }
.cil-ctl-letterGroup__head { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-size: 40px; font-weight: 700; }
.cil-ctl-letterGroup__head::after { content: ''; flex: 1; height: 1px; background: var(--cil-black-light-5); }
.cil-ctl-subjectTiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-subjectTile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px;
    border: 1px solid var(--cil-black-light-5); border-radius: 12px; color: var(--cil-black); }
.cil-ctl-subjectTile:hover { border-color: var(--cil-blue-dark-1); color: var(--cil-black); }
.cil-ctl-subjectTile__words { display: flex; flex-direction: column; gap: 2px; }
.cil-ctl-subjectTile__name { font-size: 16px; font-weight: 700; }
.cil-ctl-subjectTile__parent { color: var(--cil-black-regular-7); font-size: 14px; }

@media (max-width: 1079px) {
    .cil-ctl-tiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cil-ctl-tile { height: auto; min-height: 80px; padding: 16px; gap: 12px; }
    .cil-ctl-tile__mark { width: 40px; height: 40px; }
    .cil-ctl-tile__name, .cil-ctl-tile__count { font-size: 14px; }
    .cil-ctl-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 180px; grid-auto-rows: 120px; gap: 12px; }
    .cil-ctl-mosaic__item--lead { grid-column: 1 / -1; grid-row: auto; }
    .cil-ctl-mosaic__tile { border-radius: 12px; padding: 10px; }
    /* One line, as the design draws even the longest name on a phone. */
    .cil-ctl-mosaic__label { max-width: 100%; gap: 4px; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
    .cil-ctl-mosaic__tile:hover .cil-ctl-mosaic__label,
    .cil-ctl-mosaic__tile:focus-visible .cil-ctl-mosaic__label { gap: 10px; padding-inline-end: 14px; }
    .cil-ctl-catCards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cil-ctl-catCard { grid-template-rows: 96px auto; }
    .cil-ctl-catCard__name { padding: 12px; font-size: 16px; }
    .cil-ctl-catCard--all { min-height: 150px; }
    .cil-ctl-carousel__track { grid-auto-columns: 300px; gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .cil-ctl-tabs { gap: 24px; margin-inline: -16px; padding-inline: 16px; }
    .cil-ctl-topic { font-size: 14px; padding: 8px 12px; }
    /* Three across and two down, as the design's phone draws them; the rest scroll in by hand. */
    .cil-ctl-partners { grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; padding-block: 16px; }
    .cil-ctl-catBlock { flex-direction: column; gap: 16px; padding: 16px; }
    .cil-ctl-catBlock__photo { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .cil-ctl-catBlock__title { font-size: 24px; }
    .cil-ctl-letters { margin-inline: -16px; }
    .cil-ctl-letters ul { flex-wrap: nowrap; overflow-x: auto; padding-inline: 16px; scrollbar-width: none; }
    .cil-ctl-letter { flex: none; }
    .cil-ctl-subjectTiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cil-ctl-letterGroup__head { font-size: 28px; }
}
@media (max-width: 1079px) and (min-width: 641px) {
    .cil-ctl-subjectTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A tablet keeps four whole cards, as every width from 768 does on the home page's rows: no cut fourth and no start of a
   fifth (item 530); the arrows under it turn the row (row-arrows.css). */
@media (max-width: 1079px) and (min-width: 768px) {
    .cil-ctl-carousel__track { grid-auto-columns: calc((100% - 3 * 12px) / 4); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
/* On a phone the other categories wrap as chips (Figma 2256-25, mobile). */
@media (max-width: 640px) {
    .cil-ctl-catCards--row { display: flex; flex-wrap: wrap; gap: 8px; }
    .cil-ctl-catCards--row .cil-ctl-catCard { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 8px 12px;
        border-color: var(--cil-black-regular-5); border-radius: 20px; }
    .cil-ctl-catCards--row .cil-ctl-catCard:hover { box-shadow: none; border-color: var(--cil-blue-dark-1); }
    .cil-ctl-catCards--row .cil-ctl-catCard__photo { display: none; }
    .cil-ctl-catCards--row .cil-ctl-catCard__name { padding: 0; font-size: 14px; font-weight: 400; }
    .cil-ctl-catCards--row .cil-ctl-catCard__go { padding: 0; }
    .cil-ctl-catCards--row .cil-ctl-catCard__go svg { width: 12px; height: 12px; }
}