/* ==========================================================================
   The club pages — club/about.php, club/history.php, club/stadiums.php,
   club/contact.php (Oct 2026)
   --------------------------------------------------------------------------
   THE STANDARD is My Benfica (owner, 5 Oct 2026). The pages carry
   .benfica-layout.mb-modern.cm-page.cb-page and link mybenfica-modern.css and
   content-modern.css first, so the top bar (.mb-topbar), heads, switch (.mb-seg),
   card frame (.mb-box), rows (.mb-row), pills (.mb-pill), chips, icon tiles,
   sidebar tiles (.cm-side-tiles), the green call to action (.cm-pill-go), the
   notices and the phone head rules ARE those files' own rules. This file only
   adds what the four pages own, with the same --mb-* tokens and measures:
   1rem between sections and stacked cards, .6rem inside a card grid.

   Layers: A. page rhythm + icons  B. value cards + welcome  C. count tiles
           D. honours + team rows  E. ground cards  F. the history rail
           G. the contact form  H. sidebar (FAQ, link rows)  I. phones
           J. motion
   Colours are theme tokens; literals only as var() fallbacks and neutral
   black/white alphas, so light, dark and every skin follow. Crests and trophy
   art stand bare with a light drop shadow (never a disc or plate); faces and
   avatars stay round; photos are rounded rectangles.
   ========================================================================== */

/* ==========================================================================
   A. Page rhythm + icons
   ========================================================================== */
.benfica-layout.cb-page .bn-main > .bn-section:first-child { margin-top: 0; }
/* Icons take the site gold (owner, 6-7 Oct 2026), on a light gold wash. */
.cb-page .cb-ico { background: rgba(var(--mb-accent-rgb), .16); color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-ico i { color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cb-page .cb-chips .mb-chip i { color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-crest,
.cb-page .cb-moment-art,
.cb-page .cb-era-crest,
.cb-page .cb-welcome-crest { object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
.cb-page .cb-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-page .cb-side-n { color: var(--mb-primary-ink); font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cb-page .cb-stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   B. Value / mission cards and the welcome card
   ========================================================================== */
.cb-page .cb-welcome {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .85rem;
    padding: .8rem .9rem .75rem;
}
.cb-page .cb-welcome-crest { width: 3.5rem; height: 3.5rem; }
.cb-page .cb-welcome-title { margin: 0 0 .3rem; color: var(--mb-ink); font-size: .95rem; font-weight: 900; line-height: 1.25; }
.cb-page .cb-welcome p { margin: 0; color: var(--mb-ink); font-size: .84rem; line-height: 1.55; }
.cb-page .cb-welcome .cb-sign { margin-top: .45rem; color: var(--mb-muted); font-size: .78rem; font-style: italic; }
.cb-page .cb-welcome .cb-sign strong { color: var(--mb-primary-ink); font-style: normal; }
.cb-page .cb-welcome + .cb-values { margin-top: 1rem; }

.cb-page .cb-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: .6rem; }
.cb-page .cb-values--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-page .cb-value {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; column-gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
}
.cb-page .cb-value-main { min-width: 0; }
.cb-page .cb-value-title { margin: .1rem 0 .2rem; color: var(--mb-ink); font-size: .86rem; font-weight: 900; line-height: 1.25; }
.cb-page .cb-value-text { margin: 0; color: var(--mb-muted); font-size: .76rem; line-height: 1.5; }
.cb-page .cb-value-text strong { color: var(--mb-ink); }

/* ==========================================================================
   C. Count-up tiles (the site's own figures)
   ========================================================================== */
.cb-page .cb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cb-page .cb-num {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
}
.cb-page .cb-num-ico {
    grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .6rem;
    background: rgba(var(--mb-accent-rgb), .16); color: var(--theme-accent, var(--mb-accent)); font-size: .85rem;
}
.cb-page .cb-num-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cb-page .cb-num-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }

/* ==========================================================================
   D. Honours rows (tier filter) and the team's face rows
   ========================================================================== */
.cb-page .cb-honour .mb-row-vis .hm-art { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.cb-page .cb-honour .mb-row-vis .hm-art--icon { display: inline-grid; place-items: center; color: var(--theme-accent, var(--mb-accent)); font-size: 1rem; }
.cb-page .cb-tier { display: inline-flex; align-items: center; padding: 0 .4rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.cb-page .cb-tier--danger { background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); }
.cb-page .cb-tier--success { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.cb-page .cb-tier--warning { background: rgba(var(--mb-accent-rgb), .18); color: var(--mb-ink); }
.cb-page .mb-rows > .mb-row[hidden] { display: none; }
/* A filtered list: the rows still reach the card's edges and the last visible row has no line
   (club-info.js marks the first / last visible rows). */
.cb-page .mb-box > .mb-rows.is-filtered > .mb-row { margin-top: 0; margin-bottom: 0; padding-top: .45rem; padding-bottom: .45rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.cb-page .mb-box > .mb-rows.is-filtered > .mb-row.cb-first { margin-top: -.3rem; padding-top: calc(.45rem + .3rem); }
.cb-page .mb-box > .mb-rows.is-filtered > .mb-row.cb-last { margin-bottom: -.3rem; padding-bottom: calc(.45rem + .3rem); border-bottom: 0; }
.cb-page .cb-nomatch[hidden] { display: none; }

.cb-page .cb-face { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.cb-page .cb-face.is-initial { background: rgba(var(--mb-primary-rgb), .12); color: var(--mb-primary-ink); font-size: .8rem; font-weight: 900; line-height: 1; }

/* ==========================================================================
   E. Ground cards: a photo edge to edge, the text, fact tiles, highlights
   ========================================================================== */
.cb-page .mb-box.cb-ground { padding: 0; }
.cb-page .cb-ground-pic { position: relative; aspect-ratio: 21 / 8; max-height: 15rem; width: 100%; overflow: hidden; background: var(--mb-soft); }
.cb-page .cb-more { margin-top: 1rem; }
.cb-page .cb-more[hidden], .cb-page .cb-more.is-off { display: none; }
.cb-page .cb-ground-pic img { transition: transform .6s var(--mb-ease); }
.cb-page .cb-ground:hover .cb-ground-pic img { transform: scale(1.02); }
.cb-page .cb-ground-pic .cb-ground-tag {
    position: absolute; left: .7rem; bottom: .6rem;
    display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; font-weight: 800; line-height: 1.3;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cb-page .cb-ground-pic .cb-ground-tag i { color: var(--theme-accent-on-primary, var(--theme-accent, #F4B223)); }
/* A small picture (the old Luz is a postcard) sits beside the text instead of across it. */
.cb-page .cb-ground.is-thumb { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); }
.cb-page .cb-ground.is-thumb .cb-ground-pic { aspect-ratio: auto; min-height: 100%; }
.cb-page .cb-ground.is-thumb > .cb-ground-pic { grid-row: 1 / span 2; }
.cb-page .cb-ground-body { padding: .7rem .85rem .75rem; min-width: 0; }
.cb-page .cb-ground-body > * + * { margin-top: .55rem; }
.cb-page .cb-ground-body p { margin: 0; color: var(--mb-ink); font-size: .84rem; line-height: 1.55; }
.cb-page .cb-ground-body p strong { font-weight: 800; }
.cb-page .cb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.cb-page .cb-facts li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
.cb-page .cb-facts span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.cb-page .cb-facts b { color: var(--mb-ink); font-size: .8rem; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
/* Highlights: an icon and a sentence; full width lines with hairlines, edge to edge. */
.cb-page .cb-bullets { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.cb-page .cb-bullets li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; column-gap: .6rem; padding: .45rem .85rem; color: var(--mb-ink); font-size: .8rem; line-height: 1.4; }
.cb-page .cb-bullets li + li { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.cb-page .cb-bullets li strong { font-weight: 800; }
.cb-page .cb-ground.is-thumb .cb-bullets { grid-column: 2; }
.cb-page .cb-ground-rows { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.cb-page .mb-box.cb-ground > .mb-rows > .mb-row { margin: 0; padding-left: .85rem; padding-right: .85rem; }
.cb-page .mb-box.cb-ground > .mb-rows:last-child > .mb-row:last-child { margin-bottom: 0; padding-bottom: .5rem; }
.cb-page .cb-thumb-row { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
.cb-page .cb-thumb { display: block; width: 3.4rem; height: 2.3rem; border-radius: .45rem; object-fit: cover; background: var(--mb-soft); }
.cb-page .cb-thumb.is-blank { display: inline-grid; place-items: center; color: var(--theme-accent, var(--mb-accent)); }

/* ==========================================================================
   F. The history rail: eras, then each moment as a card on the rail
      (the timeline page's rail values: line at .9rem, cards from 2.2rem)
   ========================================================================== */
.cb-page .cb-era[hidden] { display: none; }
.cb-page .cb-era + .cb-era { margin-top: 1rem; }
.cb-page .cb-era-cap { display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0 0 .6rem; }
.cb-page .cb-era-crest { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; transform: scale(var(--cb-zoom, 1)); }
.cb-page .cb-era-name { min-width: 0; color: var(--mb-ink); font-size: .9rem; font-weight: 900; line-height: 1.2; }
.cb-page .cb-era-cap .mb-chip { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cb-page .cb-era-n { margin-left: auto; flex: 0 0 auto; color: var(--mb-muted); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.cb-page .cb-rail { position: relative; margin: 0; padding: 0 0 0 2.2rem; list-style: none; }
.cb-page .cb-rail::before {
    content: ""; position: absolute; left: .9rem; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--mb-primary) 55%, transparent), color-mix(in oklab, var(--mb-line) 85%, transparent) 30%, color-mix(in oklab, var(--mb-line) 85%, transparent) 80%, transparent);
}
.cb-page .cb-moment { position: relative; }
.cb-page .cb-moment + .cb-moment { margin-top: 1rem; }
.cb-page .cb-moment::before {
    content: ""; position: absolute; z-index: 1; top: 1.05rem; width: .7rem; height: .7rem;
    left: calc(-2.2rem + .9rem + 1px - .35rem);
    border-radius: 50%; background: var(--mb-primary); box-shadow: 0 0 0 3px var(--bs-body-bg);
}
.cb-page .cb-moment.is-gold::before { background: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-moment-box {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; column-gap: .8rem;
    padding: .7rem .85rem .75rem;
}
.cb-page .cb-moment.has-photo .cb-moment-box { grid-template-columns: 6.4rem minmax(0, 1fr); }
.cb-page .cb-moment-vis { display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; }
.cb-page .cb-moment-art { width: 100%; height: 100%; transform: scale(var(--cb-zoom, 1)); }
.cb-page .cb-moment.has-photo .cb-moment-vis { width: 6.4rem; height: 4.2rem; border-radius: .6rem; background: var(--mb-soft); }
.cb-page .cb-moment-main { min-width: 0; }
.cb-page .cb-moment-top { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
.cb-page .cb-year {
    display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px;
    background: var(--mb-primary); color: var(--mb-on);
    font-size: .72rem; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.cb-page .cb-moment.is-gold .cb-year { background: var(--theme-accent, var(--mb-accent)); color: #1c1606; }
.cb-page .cb-moment-top .mb-chip i { color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-moment-title { margin: 0 0 .2rem; color: var(--mb-ink); font-size: .92rem; font-weight: 900; line-height: 1.3; }
.cb-page .cb-moment-text { margin: 0; color: var(--mb-muted); font-size: .8rem; line-height: 1.55; }
.cb-page .cb-moment-text strong { color: var(--mb-ink); font-weight: 800; }

/* ==========================================================================
   G. The contact form: topic pills, fields with live counters, the checks
   ========================================================================== */
.cb-page .cb-form { padding: .85rem .9rem .8rem; }
.cb-page .cb-form .cb-field + .cb-field { margin-top: .8rem; }
.cb-page .cb-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-page .cb-form .form-label, .cb-page .cb-form legend {
    display: flex; align-items: center; gap: .3rem; float: none; width: auto;
    margin: 0 0 .3rem; padding: 0;
    color: var(--mb-muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
}
.cb-page .cb-form .form-label i, .cb-page .cb-form legend i { color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-topics { display: flex; flex-wrap: wrap; gap: .35rem; }
.cb-page .cb-topic { position: relative; margin: 0; cursor: pointer; }
.cb-page .cb-topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cb-page .cb-topic span {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .8rem; border: 1px solid var(--mb-line); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .76rem; font-weight: 800; line-height: 1.25; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cb-page .cb-topic span i { color: var(--theme-accent, var(--mb-accent)); font-size: .85em; }
.cb-page .cb-topic:hover span { background: var(--mb-soft-2); }
.cb-page .cb-topic input:checked + span { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
.cb-page .cb-topic input:checked + span i { color: var(--theme-accent-on-primary, var(--mb-on)); }
.cb-page .cb-topic input:focus-visible + span { outline: 2px solid var(--mb-primary); outline-offset: 2px; }
.cb-page .cb-form .form-control { border-color: color-mix(in oklab, var(--mb-line) 80%, transparent); border-radius: .7rem; background-color: var(--mb-soft); color: var(--mb-ink); font-size: .86rem; }
.cb-page .cb-form .form-control:focus { border-color: var(--mb-primary); box-shadow: 0 0 0 3px rgba(var(--mb-primary-rgb), .15); background-color: var(--mb-card-bg); }
.cb-page .cb-form textarea.form-control { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.cb-page .cb-form .form-control.is-invalid { border-color: var(--mb-bad); background-image: none; }
.cb-page .cb-form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--mb-bad-rgb), .15); }
.cb-page .cb-help { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-top: .25rem; color: var(--mb-muted); font-size: .7rem; line-height: 1.35; }
.cb-page .cb-err { color: var(--mb-bad-ink); font-weight: 700; }
.cb-page .cb-err:empty { display: none; }
.cb-page .cb-err:not(:empty) + .cb-hint { display: none; }
.cb-page .cb-count { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-page .cb-count.is-near { color: var(--mb-accent-ink); font-weight: 800; }
.cb-page .cb-count.is-bad { color: var(--mb-bad-ink); font-weight: 800; }
.cb-page .cb-form .cm-form-foot { margin-top: .85rem; }
.cb-page .cb-form .cm-form-foot small i { color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-form .cm-pill-go { padding: .36rem 1rem; font-size: .8rem; }
.cb-page .cb-form .cm-pill-go[disabled] { opacity: .7; cursor: progress; }
.cb-page .cb-signin { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; column-gap: .8rem; padding: .85rem .9rem; }
.cb-page .cb-signin .mb-ico { width: 2.6rem; height: 2.6rem; border-radius: .75rem; font-size: 1.05rem; }
.cb-page .cb-signin p { margin: 0; color: var(--mb-ink); font-size: .84rem; line-height: 1.5; }
.cb-page .cb-signin .cb-btns { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cb-page .cb-signin .mb-pill { padding: .34rem .95rem; }
.cb-page .cb-status { font-size: .66rem; }
.cb-page .cb-status.is-done { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }

/* ==========================================================================
   H. Sidebar: link rows and the FAQ (an accordion of <details>, edge to edge)
   ========================================================================== */
.benfica-layout.cb-page .bn-aside .bn-panel .mb-rows .mb-row-title { font-size: .8rem; }
.cb-page .cb-side-text { margin: .55rem 0 0; color: var(--mb-muted); font-size: .74rem; line-height: 1.45; }
.cb-page .mb-box.cb-faq-box { padding: 0; }
.cb-page .cb-faq { margin: 0; }
.cb-page .cb-faq details { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.cb-page .cb-faq details:first-child { border-top: 0; }
.cb-page .cb-faq summary {
    display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem;
    color: var(--mb-ink); font-size: .84rem; font-weight: 800; line-height: 1.3;
    list-style: none; cursor: pointer; transition: background-color .18s ease;
}
.cb-page .cb-faq summary::-webkit-details-marker { display: none; }
.cb-page .cb-faq summary:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }
.cb-page .cb-faq summary:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: -2px; }
.cb-page .cb-faq summary > i { flex: 0 0 auto; color: var(--theme-accent, var(--mb-accent)); }
.cb-page .cb-faq summary > span { flex: 1 1 auto; min-width: 0; }
.cb-page .cb-faq summary .cb-chev { color: var(--mb-muted); font-size: .7rem; transition: transform .25s var(--mb-ease); }
.cb-page .cb-faq details[open] summary .cb-chev { transform: rotate(180deg); }
.cb-page .cb-faq .cb-faq-a { margin: 0; padding: 0 .85rem .7rem 2.3rem; color: var(--mb-muted); font-size: .76rem; line-height: 1.5; }
.cb-page .cb-faq .cb-faq-a a { color: var(--mb-primary-ink); font-weight: 800; text-decoration: none; }
.cb-page .cb-faq .cb-faq-a a:hover { text-decoration: underline; }
.cb-page .cb-faq details[open] .cb-faq-a { animation: mbIn .25s var(--mb-ease) both; }


/* ==========================================================================
   I. Phones (My Benfica's 991 / 767 / 575 / 439 / 379 steps)
   ========================================================================== */
@media (max-width: 991.98px) {
    .cb-page .cb-values--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
}
@media (max-width: 767.98px) {
    .cb-page .cb-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cb-page .cb-ground-pic { aspect-ratio: 16 / 8; max-height: 12rem; }
}
@media (max-width: 575.98px) {
    .cb-page .cb-values, .cb-page .cb-values--3 { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
    .cb-page .cb-value { padding: .6rem .7rem; }
    .cb-page .cb-welcome { padding: .7rem .75rem; column-gap: .7rem; }
    .cb-page .cb-welcome-crest { width: 2.6rem; height: 2.6rem; }
    .cb-page .cb-welcome p { font-size: .8rem; }
    .cb-page .cb-nums { gap: .45rem; }
    .cb-page .cb-num { padding: .5rem .6rem; column-gap: .5rem; }
    .cb-page .cb-num-v { font-size: 1.08rem; }
    .cb-page .cb-ground.is-thumb { grid-template-columns: 6rem minmax(0, 1fr); }
    .cb-page .cb-ground-body { padding: .6rem .7rem .65rem; }
    .cb-page .cb-ground-body p { font-size: .8rem; }
    .cb-page .cb-facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.4rem), 1fr)); }
    .cb-page .cb-bullets li { padding: .42rem .7rem; font-size: .76rem; }
    .cb-page .mb-box.cb-ground > .mb-rows > .mb-row { padding-left: .7rem; padding-right: .7rem; }
    .cb-page .cb-rail { padding-left: 1.6rem; }
    .cb-page .cb-rail::before { left: .6rem; }
    .cb-page .cb-moment::before { left: calc(-1.6rem + .6rem + 1px - .32rem); width: .64rem; height: .64rem; top: .95rem; }
    .cb-page .cb-moment-box { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .6rem; padding: .6rem .7rem .65rem; }
    .cb-page .cb-moment-vis { width: 2.4rem; height: 2.4rem; }
    .cb-page .cb-moment.has-photo .cb-moment-box { grid-template-columns: 4.6rem minmax(0, 1fr); }
    .cb-page .cb-moment.has-photo .cb-moment-vis { width: 4.6rem; height: 3.2rem; }
    .cb-page .cb-moment-title { font-size: .86rem; }
    .cb-page .cb-moment-text { font-size: .76rem; }
    /* The story text takes the card's full width under the picture and the title. */
    .cb-page .cb-moment-main { display: contents; }
    .cb-page .cb-moment-vis { grid-row: 1 / span 2; }
    .cb-page .cb-moment-top, .cb-page .cb-moment-title { grid-column: 2; }
    .cb-page .cb-moment-title { margin-bottom: 0; }
    .cb-page .cb-moment-text { grid-column: 1 / -1; margin-top: .45rem; }
    .cb-page .cb-form { padding: .7rem .7rem .7rem; }
    .cb-page .cb-signin { grid-template-columns: 2.2rem minmax(0, 1fr); padding: .7rem .75rem; }
    .cb-page .cb-signin .mb-ico { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 439.98px) {
    .cb-page .cb-era-n { display: none; }
    .cb-page .cb-ground.is-thumb { grid-template-columns: minmax(0, 1fr); }
    .cb-page .cb-ground.is-thumb .cb-ground-pic { grid-row: auto; aspect-ratio: 16 / 7; min-height: 0; }
    .cb-page .cb-ground.is-thumb .cb-bullets { grid-column: auto; }
    .cb-page .cb-form .cm-form-foot { flex-wrap: wrap; }
    .cb-page .cb-form .cm-form-foot .cm-pill-go { margin-left: auto; }
}
@media (max-width: 379.98px) {
    .cb-page .cb-num { grid-template-columns: minmax(0, 1fr); }
    .cb-page .cb-num-ico { display: none; }
    .cb-page .cb-topic span { padding: .28rem .65rem; font-size: .72rem; }
    .cb-page .cb-moment.has-photo .cb-moment-box { grid-template-columns: 3.6rem minmax(0, 1fr); }
    .cb-page .cb-moment.has-photo .cb-moment-vis { width: 3.6rem; height: 2.6rem; }
}

/* ==========================================================================
   J. Motion: hovers only (rise-ins and count-ups come from bn-motion.js, which
      does nothing under reduced motion)
   ========================================================================== */
.cb-page .cb-value, .cb-page .cb-num { transition: transform .2s var(--mb-ease), border-color .2s ease; }
@media (hover: hover) {
    .cb-page .cb-value:hover, .cb-page .cb-num:hover { transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .25); }
}
@media (prefers-reduced-motion: reduce) {
    .cb-page .cb-value, .cb-page .cb-num, .cb-page .cb-ground-pic img, .cb-page .cb-topic span, .cb-page .cb-faq summary .cb-chev { transition: none !important; }
    .cb-page .cb-value:hover, .cb-page .cb-num:hover, .cb-page .cb-ground:hover .cb-ground-pic img { transform: none; }
    .cb-page .cb-faq details[open] .cb-faq-a { animation: none; }
}
.cb-page .cb-ext { color: var(--mb-muted); font-size: .68rem; }

/* Phones: a head whose only control is a text link ("Profile", "All Homes") keeps the link on
   the right of the title; when both do not fit, the TITLE wraps to a second line instead of being
   cut (owner rule: titles never truncate). style.css pins every head title to one line with
   !important, so this is scoped higher. */
@media (max-width: 575.98px) {
    body .benfica-layout.mb-modern.cb-page .bn-section > .bn-section-head:has(> .bn-head-actions > .mb-head-link:only-child) > h2 {
        flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2;
    }
    body .benfica-layout.mb-modern.cb-page .bn-section > .bn-section-head:has(> .bn-head-actions > .mb-head-link:only-child)::after { min-width: .5rem !important; flex: 0 1 1.5rem !important; }
    body .benfica-layout.mb-modern.cb-page .bn-section > .bn-section-head > .bn-head-actions > .mb-head-link:only-child { white-space: nowrap; }
}
.cb-page .cb-facts li:only-child { grid-column: 1 / -1; }

/* Timeline art (trophies, crests) is shown whole inside its square: the trophy SVGs are tall
   and size themselves at 100%, which Safari cropped (owner, 7 Oct 2026). */
.cb-page .cb-moment-art,
.cb-page .cb-era-crest { object-fit: contain; object-position: center; }

/* Fact tiles share the whole row instead of leaving an empty track (owner, 7 Oct 2026). */
.cb-page .cb-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.4rem), 1fr)); }