/* The institutions stripe (renderers/institutions.php; Figma 38-19 frames 10-12, item 218): D a trust bar, in full
   colour (a) or greyscale until pointed at (b); F a stat-led panel with the logos in a grid (c) or one line (d).
   Every logo holds the same area: its box is the base times the square root of its proportion wide and the base over
   it high (--cil-inst-r, set per logo), the picture contained, unaltered. Logical properties, brand tokens. */

.cil-inst { --cil-inst-base: 60px; padding: 40px 24px; }
.cil-inst .cil-l-stripe__panel { max-width: 1420px; margin-inline: auto; }

/* ---- One logo: its box, the Light 1 plate when pointed at, and the tooltip naming it ---- */
.cil-inst__logos { margin: 0; padding: 0; list-style: none; }
.cil-inst__item { position: relative; display: flex; align-items: center; justify-content: center; }
.cil-inst__logo {
    display: flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 8px;
    transition: background-color .2s ease;
}
.cil-inst__logo img {
    display: block; width: calc(var(--cil-inst-base) * var(--cil-inst-r, 1)); height: calc(var(--cil-inst-base) / var(--cil-inst-r, 1));
    object-fit: contain; transition: filter .25s ease;
}
.cil-inst__logo:is(:hover, :focus-visible) { background: var(--cil-black-light-1); }
.cil-inst__logo:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-inst__tip {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 50%; z-index: 2; translate: 50% 0;
    padding: 6px 10px; border-radius: 6px; background: var(--cil-black-dark-5); color: var(--cil-white);
    font-size: 14px; line-height: 1.2; white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s .15s;
}
.lang-to-css-ltr .cil-inst__tip { translate: -50% 0; }
.cil-inst__item:has(.cil-inst__logo:is(:hover, :focus-visible)) .cil-inst__tip { opacity: 1; visibility: visible; transition: opacity .15s ease .1s; }

/* ---- D · Trust bar (frames 10-11): one row of eight between two hairlines ---- */
.cil-inst .cil-l-stripe__title::before { border-radius: 2px; }
.cil-inst__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px;
    border-block: 1px solid var(--cil-black-light-3);
}
/* Greyscale until pointed at or focused (frame 11): the files stay as they are, a filter only. */
.cil-inst--b .cil-inst__logo img { filter: grayscale(1); }
.cil-inst--b .cil-inst__logo:is(:hover, :focus-visible) img { filter: none; }

/* ---- F · Stat-led panel (frame 12) ---- */
.cil-inst--c .cil-l-stripe__panel, .cil-inst--d .cil-l-stripe__panel {
    display: grid; align-items: center; gap: 48px; padding-block: 40px; padding-inline: 48px 40px;
    border-radius: 16px; background: var(--cil-blue-light-1);
}
.cil-inst--c .cil-l-stripe__panel { grid-template-columns: 420px minmax(0, 1fr); }
.cil-inst__statement { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cil-inst .cil-inst__title {
    display: flex; align-items: center; gap: 12px; margin: 0; color: var(--cil-black);
    font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-size: 32px; font-weight: 400; line-height: 1.2;
}
.cil-inst__title::before { content: ""; flex: none; width: 4px; height: 32px; border-radius: 2px; background: var(--cil-yellow); }
.cil-inst__stats { display: flex; gap: 40px; margin: 0; }
.cil-inst__stat { display: flex; flex-direction: column-reverse; }
.cil-inst__stat dt { color: var(--cil-black-regular-7); font-size: 14px; line-height: 1.2; }
.cil-inst__stat dd { margin: 0; color: var(--cil-blue-dark-1); font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif; font-size: 40px; line-height: 1.2; }
.cil-inst__line { margin: 0; color: var(--cil-black-regular-7); font-size: 16px; line-height: 1.2; }
.cil-inst .cil-inst__all {
    display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 8px;
    background: var(--cil-blue-dark-1); color: var(--cil-white); text-decoration: none;
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif; font-size: 14px; line-height: 1.2;
}
.cil-inst__all svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.cil-inst .cil-inst__all:is(:hover, :focus-visible) { color: var(--cil-white); background: var(--cil-blue-dark-1); }
.cil-inst .cil-inst__all:is(:hover, :focus-visible) svg { transform: translateX(-4px); }
.cil-inst .cil-inst__all:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-inst__panel { --cil-inst-base: 56px; padding: 28px 32px; border-radius: 12px; background: var(--cil-white); }
.cil-inst--c .cil-inst__panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
/* One logo line (frame 12 c): the title and line, then the counts and the button, in one row; the logos under it. */
.cil-inst--d .cil-l-stripe__panel { gap: 28px; }
.cil-inst--d .cil-inst__statement {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title stats all" "line stats all";
    align-items: center; column-gap: 48px; row-gap: 12px;
}
.cil-inst--d .cil-inst__title { grid-area: title; }
.cil-inst--d .cil-inst__line { grid-area: line; }
.cil-inst--d .cil-inst__stats { grid-area: stats; }
.cil-inst--d .cil-inst__all { grid-area: all; }
.cil-inst--d .cil-inst__panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 32px; }

/* ---- Phones ---- */
@media (max-width: 767px) {
    .cil-inst { --cil-inst-base: 44px; padding: 24px 16px; }
    /* D: two rows of three, the first six (frame 10 b). */
    .cil-inst__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 16px 0; }
    .cil-inst__bar .cil-inst__item:nth-child(n + 7) { display: none; }
    .cil-inst__tip { display: none; }
    /* F: the title, the counts, the logos, then the button across (frame 12 b, d): the statement's parts take their
       places in the panel's own column. */
    .cil-inst--c .cil-l-stripe__panel, .cil-inst--d .cil-l-stripe__panel { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 16px; }
    .cil-inst__statement, .cil-inst--d .cil-inst__statement { display: contents; }
    .cil-inst__title { order: 1; }
    .cil-inst__stats { order: 2; }
    .cil-inst__panel { order: 3; }
    .cil-inst .cil-inst__all { order: 4; justify-content: center; height: 40px; }
    .cil-inst .cil-inst__title { font-size: 24px; }
    .cil-inst__title::before { height: 24px; }
    .cil-inst__stats { gap: 28px; }
    .cil-inst__stat dd { font-size: 28px; }
    .cil-inst__line { display: none; }
    .cil-inst__panel { --cil-inst-base: 40px; padding: 16px; }
    .cil-inst--c .cil-inst__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cil-inst--c .cil-inst__panel .cil-inst__item:nth-child(n + 7) { display: none; }
    /* One line that a finger moves, the next logo peeking at the edge -- nothing turns by itself. */
    .cil-inst--d .cil-inst__panel { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cil-inst--d .cil-inst__item { flex: none; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-inst__logo, .cil-inst__logo img, .cil-inst__tip, .cil-inst__all svg { transition: none; }
    .cil-inst .cil-inst__all:is(:hover, :focus-visible) svg { transform: none; }
}