/* =============================================================================
   CinemaBox public page
   =============================================================================

   THE SHELL EVERY PUBLIC PAGE WEARS, plus the two pages that were added for
   search: the title page and the two catalogue lists.

       <link rel="stylesheet" href="/css/cinemabox-tokens.css">
       <link rel="stylesheet" href="/css/cinemabox-card.css">
       <link rel="stylesheet" href="/css/cinemabox-page.css">

   Deployed to /var/www/cinemabox/public/css/cinemabox-page.css.
   Source of truth: Modules/CinemaBox/Resources/assets/css/cinemabox-page.css.

   WHY THIS FILE EXISTS
   The landing page carried the top bar, the footer, the door and the owner's
   code prompt in an inline <style>. The title page and the catalogue lists
   wear the same four, so they would each have needed a copy. Four copies of
   one bar is how a site starts to look like two sites. Everything shared moved
   here; the landing keeps only its hero.

   IT NEEDS cinemabox-tokens.css FIRST. Every colour, radius and font comes
   from there, and nothing here repeats a palette value.

   Written right to left first.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. The page
----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; overflow-x: hidden; }

a { color: inherit; }

/* One page gutter, read by the hero, the rows, the panels and the footer. */
.cb-wrap {
    --cb-gutter: clamp(16px, 5vw, 64px);
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--cb-gutter);
}

/* A rail bleeds into the gutter, so the row starts at the page margin and a
   card can still be scrolled clear of the edge. */
.cb-rows { --cb-row-bleed: var(--cb-gutter); }


/* -----------------------------------------------------------------------------
   2. The top bar
----------------------------------------------------------------------------- */

/* Transparent and OVER the picture on the landing page, where a hero fills the
   top of the screen. Every other page has no hero, so it carries
   .cb-topbar--solid and the bar takes its own room. */
.cb-topbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 3;
    padding-block: 18px;
}

.cb-topbar--solid {
    position: relative;
    background: var(--cb-bg);
    border-block-end: 1px solid var(--cb-line);
}

.cb-topbar__inner {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
}

/* --- the wordmark ---------------------------------------------------------- */

/* One file, shared with the Mini App and the admin panel. The SVG carries no
   font, so it cannot go wrong on a slow link. */
.cb-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.cb-brand img {
    display: block;
    width: auto;
    height: 34px;
}

/* --- the links ------------------------------------------------------------- */

.cb-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 34px);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cb-nav::-webkit-scrollbar { display: none; }

.cb-nav a {
    position: relative;
    padding-block: 6px;
    color: var(--cb-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    opacity: .88;
    transition: opacity .16s ease, color .16s ease;
}

.cb-nav a:hover,
.cb-nav a:focus-visible { opacity: 1; color: var(--cb-accent-2); }

/* The current page is marked by FULL OPACITY only. Zoomed four times, the
   owner's bar holds no coral pixel outside the logo. aria-current stays,
   because a screen reader still needs to be told. */
.cb-nav a[aria-current='page'] { opacity: 1; }


/* -----------------------------------------------------------------------------
   3. The way into the bot
----------------------------------------------------------------------------- */

/* CinemaBox has no player and no account, so this is the only door. It must
   stay on the page whatever else changes. */
.cb-door {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-block: 30px 6px;
    padding: 22px clamp(18px, 3vw, 32px);
    background:
        linear-gradient(to left, var(--cb-accent-wash), transparent),
        var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
}

.cb-door__text { min-width: 0; }

.cb-door__text h2 {
    margin: 0 0 2px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.cb-door__text p {
    margin: 0;
    color: var(--cb-text-dim);
    font-size: 14px;
    line-height: 1.8;
}

/* The same rounded rectangle as the hero button. The page must not carry two
   button shapes. */
.cb-door__btn {
    flex: none;
    padding-inline: 28px;
}


/* -----------------------------------------------------------------------------
   4. The foot
----------------------------------------------------------------------------- */

.cb-foot {
    margin-block-start: 40px;
    padding-block: 26px 34px;
    border-block-start: 1px solid var(--cb-line);
    color: var(--cb-text-dim);
    font-size: 13px;
    text-align: center;
}

.cb-foot p { margin: 0 0 6px; }

/* The links a crawler follows out of any page. They are real links a reader
   uses too, so they are drawn, not hidden. */
.cb-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    margin-block-end: 14px;
}

.cb-foot__links a {
    color: var(--cb-text-dim);
    font-weight: 600;
    text-decoration: none;
    transition: color .16s ease;
}

.cb-foot__links a:hover,
.cb-foot__links a:focus-visible { color: var(--cb-text); }

/* The owner's door key: the name in the copyright line. It reads as plain text
   until it is hovered, so no visitor is invited to press it. */
.cb-foot__key {
    appearance: none;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .16s ease;
}
.cb-foot__key:hover { color: var(--cb-text); }
.cb-foot__key--on { color: var(--cb-accent); font-weight: 700; }
.cb-foot__note { color: var(--cb-accent); font-size: 12px; }


/* -----------------------------------------------------------------------------
   5. The owner's door
----------------------------------------------------------------------------- */

/* The code prompt. It covers the screen, it is hidden until it is needed, and
   it belongs to the owner alone; see TvAccess. */
.cb-tv-gate {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.cb-tv-gate[hidden] { display: none; }
.cb-tv-gate__box {
    width: min(360px, 100%);
    padding: 24px;
    background: var(--cb-surface, #17171b);
    border: 1px solid var(--cb-line);
    border-radius: 18px;
    text-align: center;
}
.cb-tv-gate__title { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.cb-tv-gate__hint { margin: 0 0 16px; color: var(--cb-text-dim); font-size: 14px; }
.cb-tv-gate__input {
    width: 100%;
    height: 52px;
    margin-block-end: 12px;
    padding: 0 16px;
    color: var(--cb-text);
    font-size: 22px;
    letter-spacing: .4em;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cb-line);
    border-radius: 12px;
}
.cb-tv-gate__input:focus { outline: none; border-color: var(--cb-accent); }
.cb-tv-gate__err { min-height: 18px; margin: 0 0 12px; color: var(--cb-accent); font-size: 13px; }
.cb-tv-gate__err[hidden] { display: none; }
.cb-tv-gate__row { display: flex; gap: 10px; }
.cb-tv-gate__row .cb-btn { flex: 1; justify-content: center; }


/* -----------------------------------------------------------------------------
   6. A written section
   -------------------------------------------------------------------------

   THE PART OF THE SITE GOOGLE CAN ACTUALLY READ. A page of posters is a page
   of pictures: it says nothing a crawler understands. These are the blocks
   that carry the Persian sentences.
----------------------------------------------------------------------------- */

.cb-panel {
    margin-block: 34px;
    padding: clamp(18px, 3vw, 30px);
    background: var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
}

.cb-panel__title {
    margin: 0 0 14px;
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    line-height: 1.6;
}

/* A run of Persian text. The line height is generous on purpose: Persian
   letters carry marks above and below and a tight line is hard to read. */
.cb-prose {
    color: var(--cb-text-dim);
    font-size: 15px;
    line-height: 2.1;
}

.cb-prose p { margin: 0 0 14px; }
.cb-prose p:last-child { margin-block-end: 0; }
.cb-prose strong { color: var(--cb-text); font-weight: 700; }

.cb-prose a {
    color: var(--cb-accent-2, var(--cb-accent));
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color .16s ease;
}

.cb-prose a:hover,
.cb-prose a:focus-visible { border-block-end-color: currentColor; }

/* The three steps. A numbered list is what a reader scans and what a crawler
   reads as a procedure. */
.cb-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cb-step;
}

@media (min-width: 720px) {
    .cb-steps { grid-template-columns: repeat(3, 1fr); }
}

.cb-steps li {
    position: relative;
    padding: 18px 58px 18px 18px;
    color: var(--cb-text-dim);
    font-size: 14px;
    line-height: 2;
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
}

.cb-steps li::before {
    counter-increment: cb-step;
    content: counter(cb-step, persian);
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--cb-accent);
    font-size: 14px;
    font-weight: 800;
    background: var(--cb-accent-wash);
    border-radius: var(--cb-radius-pill);
}

.cb-steps li b { display: block; color: var(--cb-text); font-weight: 700; }


/* -----------------------------------------------------------------------------
   7. The questions
   -------------------------------------------------------------------------

   <details>, not a script. It opens with no JavaScript at all, a crawler reads
   the answer whether it is open or shut, and a keyboard reaches it for free.
----------------------------------------------------------------------------- */

.cb-faq { display: grid; gap: 10px; }

.cb-faq details {
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
}

.cb-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    color: var(--cb-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
    cursor: pointer;
    list-style: none;
}

.cb-faq summary::-webkit-details-marker { display: none; }

/* The chevron. It is drawn in CSS, so the sprite is not needed on a page that
   may not carry it. */
.cb-faq summary::after {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    margin-inline-start: 4px;
    border-inline-end: 2px solid var(--cb-text-dim);
    border-block-end: 2px solid var(--cb-text-dim);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.cb-faq details[open] summary::after { transform: rotate(-135deg); }

.cb-faq details[open] summary { color: var(--cb-accent); }

.cb-faq__answer {
    padding: 0 18px 16px;
    color: var(--cb-text-dim);
    font-size: 14px;
    line-height: 2.1;
}


/* -----------------------------------------------------------------------------
   8. The crumbs
----------------------------------------------------------------------------- */

.cb-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block: 20px 4px;
    color: var(--cb-text-dim);
    font-size: 13px;
}

.cb-crumbs a { text-decoration: none; transition: color .16s ease; }
.cb-crumbs a:hover { color: var(--cb-text); }

.cb-crumbs__sep { opacity: .5; }

.cb-crumbs__here { color: var(--cb-text); font-weight: 600; }


/* -----------------------------------------------------------------------------
   9. The title page
----------------------------------------------------------------------------- */

/* The backdrop, laid behind the top of the page and faded out into the ground
   colour. It is decoration, so it is a background and never an <img> a screen
   reader would announce. */
.cb-lead {
    position: relative;
    isolation: isolate;
    padding-block: 26px 8px;
}

.cb-lead__art {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: -1;
    height: min(520px, 60vh);
    background-position: center top;
    background-size: cover;
    opacity: .28;
}

.cb-lead__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--cb-bg) 4%, rgba(11, 16, 23, .55) 60%, rgba(11, 16, 23, .75) 100%);
}

.cb-lead__grid {
    display: grid;
    gap: clamp(18px, 3vw, 34px);
}

@media (min-width: 760px) {
    .cb-lead__grid { grid-template-columns: minmax(200px, 260px) 1fr; align-items: start; }
}

.cb-lead__poster {
    width: min(210px, 52vw);
    margin-inline: auto;
    overflow: hidden;
    background: var(--cb-surface-2, var(--cb-surface));
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow);
}

@media (min-width: 760px) {
    .cb-lead__poster { width: 100%; margin-inline: 0; }
}

.cb-lead__poster img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.cb-lead__body { min-width: 0; }

/* The one heading of the page. It holds the phrase the page is meant to win,
   so it is a real heading a reader sees and not a hidden one. */
.cb-lead__h1 {
    margin: 0 0 6px;
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 800;
    line-height: 1.55;
}

/* The English name, under the Persian one. It is LEFT TO RIGHT inside a right
   to left page, so the year does not jump to the wrong end. */
.cb-lead__en {
    direction: ltr;
    unicode-bidi: isolate;
    margin: 0 0 16px;
    color: var(--cb-text-dim);
    font-size: 15px;
    font-weight: 600;
    text-align: end;
}

.cb-lead__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 14px;
}

.cb-lead__plot {
    margin: 16px 0 0;
    color: var(--cb-text-dim);
    font-size: 15px;
    line-height: 2.1;
}

.cb-lead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 22px;
}

.cb-lead__actions .cb-btn { padding-inline: 26px; }

/* --- the quality table ----------------------------------------------------- */

/* A real table. The rows are facts a reader compares, and a crawler reads a
   table as a table. It scrolls inside its own box on a phone rather than
   pushing the page sideways. */
.cb-table__scroll { overflow-x: auto; }

.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cb-table th,
.cb-table td {
    padding: 12px 14px;
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--cb-line);
}

.cb-table th {
    color: var(--cb-text-dim);
    font-weight: 700;
}

.cb-table tbody tr:last-child td { border-block-end: 0; }

.cb-table td:first-child { font-weight: 700; }

/* A value that must be read left to right inside a right to left row. */
.cb-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --- the seasons ----------------------------------------------------------- */

.cb-seasons {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.cb-seasons li {
    padding: 14px 16px;
    color: var(--cb-text-dim);
    font-size: 14px;
    line-height: 1.9;
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
    list-style: none;
}

.cb-seasons b { display: block; color: var(--cb-text); font-size: 15px; font-weight: 700; }

/* --- the people ------------------------------------------------------------ */

.cb-people {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-people li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.cb-people img,
.cb-people span.cb-people__blank {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: cover;
    background: var(--cb-surface-2, var(--cb-bg));
    border-radius: var(--cb-radius-pill);
}

.cb-people span.cb-people__blank {
    display: grid;
    place-items: center;
    color: var(--cb-text-dim);
    font-weight: 700;
}

.cb-people b { display: block; font-weight: 700; }
.cb-people small { color: var(--cb-text-dim); font-size: 12px; }


/* -----------------------------------------------------------------------------
   10. The catalogue lists
----------------------------------------------------------------------------- */

.cb-head {
    padding-block: 26px 8px;
}

.cb-head h1 {
    margin: 0 0 10px;
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 800;
    line-height: 1.6;
}

.cb-head p {
    margin: 0;
    max-width: 76ch;
    color: var(--cb-text-dim);
    font-size: 15px;
    line-height: 2.1;
}

.cb-grid {
    display: grid;
    gap: 14px;
    margin-block: 26px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 768px) {
    .cb-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* The rail sets a fixed card width. In a grid the cell decides instead. */
.cb-grid > .cb-card { width: auto; }

/* --- paging ---------------------------------------------------------------- */

.cb-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block: 30px;
}

.cb-pager a,
.cb-pager span {
    min-width: 42px;
    padding: 10px 14px;
    color: var(--cb-text);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background: var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
    transition: border-color .16s ease, color .16s ease;
}

.cb-pager a:hover,
.cb-pager a:focus-visible { border-color: var(--cb-accent); color: var(--cb-accent); }

.cb-pager .is-here {
    color: var(--cb-accent);
    border-color: var(--cb-accent);
    background: var(--cb-accent-wash);
}

.cb-pager .is-gap {
    min-width: 0;
    padding-inline: 4px;
    color: var(--cb-text-dim);
    background: none;
    border: 0;
}


/* -----------------------------------------------------------------------------
   11. Phones
----------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .cb-nav { gap: 16px; }
    .cb-nav a { font-size: 13px; }

    .cb-door { flex-direction: column; align-items: stretch; }
    .cb-door__btn { width: 100%; }

    .cb-lead__actions .cb-btn { flex: 1 1 100%; justify-content: center; }
}

/*  Below this width the logo and the links cannot share one line.

    THE BAR BECOMES TWO ROWS: the mark, then the links across the whole page
    width. Every link stays whole at a readable 13px and is one tap away. A
    smaller type scale needs about 11px, which is too small to read Persian on
    a phone, and a scroll arrow still hides two links behind a gesture. */
@media (max-width: 520px) {
    .cb-topbar__inner { flex-wrap: wrap; }

    .cb-nav {
        flex-basis: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 2px;
    }
}


/* -----------------------------------------------------------------------------
   12. Motion
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cb-nav a,
    .cb-faq summary::after,
    .cb-pager a { transition: none; }
}


/* -----------------------------------------------------------------------------
   13. «درخواست فیلم یا سریال»
   -------------------------------------------------------------------------

   The box on the front page where a visitor asks for something this site does
   not have yet. It is the only place on the whole site that takes typing, so
   it is also the only place that needs a field.
----------------------------------------------------------------------------- */

.cb-ask {
    background:
        linear-gradient(to left, var(--cb-accent-wash), transparent),
        var(--cb-surface);
}

.cb-ask__head { margin-block-end: 22px; }

.cb-ask__lede {
    margin: 0;
    max-width: 70ch;
    color: var(--cb-text-dim);
    font-size: 15px;
    line-height: 2.1;
}

.cb-ask__form { display: grid; gap: 16px; }

/* The name takes the room; the year takes what it needs. On a phone they
   stack, because a four letter box beside a long one is unreadable there. */
.cb-ask__row { display: grid; gap: 16px; }

@media (min-width: 620px) {
    .cb-ask__row { grid-template-columns: 1fr 140px; }
}

.cb-field { min-width: 0; }

.cb-field__label {
    display: block;
    margin-block-end: 8px;
    font-size: 14px;
    font-weight: 700;
}

.cb-field__input {
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    color: var(--cb-text);
    font-family: inherit;
    font-size: 15px;
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
    transition: border-color .16s ease, background-color .16s ease;
}

.cb-field__input::placeholder { color: var(--cb-text-dim); opacity: .6; }

.cb-field__input:focus {
    outline: none;
    border-color: var(--cb-accent);
    background: rgba(255, 255, 255, .04);
}

/* A field the IMDb id has made pointless. It is DIMMED, not hidden: a box
   that vanishes as you type in another one is a box you cannot find again. */
.cb-field__input:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.cb-field__hint {
    margin: 8px 0 0;
    color: var(--cb-text-dim);
    font-size: 13px;
    line-height: 1.9;
}

/* «یا», with a rule through it. It is what tells a reader that the two halves
   of this form are alternatives and not two questions. */
.cb-ask__or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cb-text-dim);
    font-size: 13px;
}

.cb-ask__or::before,
.cb-ask__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cb-line);
}

.cb-ask__go {
    justify-self: start;
    min-width: 200px;
    justify-content: center;
    padding-inline: 30px;
}

.cb-ask__go[disabled] { cursor: progress; }

@media (max-width: 620px) {
    .cb-ask__go { justify-self: stretch; width: 100%; }
}

/* --- the answer ------------------------------------------------------------ */

.cb-ask__out {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding: 18px;
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
    background: var(--cb-bg);
}

.cb-ask__out[hidden] { display: none; }

.cb-ask__msg {
    margin: 0;
    color: var(--cb-text);
    font-size: 15px;
    line-height: 2;
}

.cb-ask__out.is-ok { border-color: rgba(90, 200, 130, .45); }
.cb-ask__out.is-warn { border-color: rgba(240, 180, 90, .45); }
.cb-ask__out.is-bad { border-color: var(--cb-accent); }

.cb-ask__out.is-bad .cb-ask__msg { color: var(--cb-accent-2, var(--cb-accent)); }

/* THE BUTTON THE WHOLE FEATURE EXISTS FOR: it opens the page of the title on
   this site, and every button on THAT page opens the bot. */
.cb-ask__link {
    padding-inline: 26px;
    text-decoration: none;
}

@media (max-width: 620px) {
    .cb-ask__out { justify-items: stretch; }
    .cb-ask__link { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-field__input { transition: none; }
}


/* -----------------------------------------------------------------------------
   14. The facts strip, and the shelves
   -------------------------------------------------------------------------

   Two blocks that only the front page draws, but both are built out of the
   same tokens as everything else, so they live here rather than in the
   landing's inline sheet.
----------------------------------------------------------------------------- */

/* FOUR TRUE NUMBERS. A stranger's first question is whether there is anything
   here at all, and four counted facts answer it faster than any sentence. */
.cb-facts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin-block: 26px 8px;
}

@media (min-width: 760px) {
    .cb-facts { grid-template-columns: repeat(4, 1fr); }
}

.cb-facts__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
}

.cb-facts__icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--cb-accent);
}

.cb-facts__value {
    font-size: clamp(18px, 2.6vw, 24px);
    font-weight: 800;
    line-height: 1.3;
}

.cb-facts__label {
    color: var(--cb-text-dim);
    font-size: 13px;
    line-height: 1.7;
}

/* --- the shelves ----------------------------------------------------------- */

/* Five real links, drawn large. They are the road a crawler walks and the road
   a reader who does not know what they want walks. */
.cb-shelves {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.cb-shelf {
    display: grid;
    gap: 4px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-sm);
    transition: border-color .16s ease, transform .16s ease;
}

.cb-shelf:hover,
.cb-shelf:focus-visible {
    border-color: var(--cb-accent);
    transform: translateY(-2px);
}

.cb-shelf__icon {
    width: 24px;
    height: 24px;
    margin-block-end: 6px;
    color: var(--cb-accent);
}

.cb-shelf b { font-size: 16px; font-weight: 700; }

.cb-shelf span {
    color: var(--cb-text-dim);
    font-size: 13px;
    line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
    .cb-shelf { transition: none; }
    .cb-shelf:hover { transform: none; }
}