/* ==========================================================================
   Clubs · Club profile · Stadiums · Referees · Crowds — the modern skin (Oct 2026)
   --------------------------------------------------------------------------
   Linked by clubs.php, club.php, stadiums.php, referees.php and crowds.php (and by their
   heroes, includes/clubs_pages_ui.php wcHeroHtml()). The pages carry
   .benfica-layout.mb-modern.wc-modern and ALSO link mybenfica-modern.css: My Benfica is
   the owner's standard (5 Oct 2026), so its cards, rows, switch, chips, pills and tokens
   (--mb-*) are used as they are. This file adds only what these pages need on top, with
   My Benfica's values: crest grids, ground photo cards, record bars, charts, pickers.

   Rules kept here: crests and competition logos are bare with a light drop shadow — never
   on a disc or plate; faces round; colours are theme tokens (neutral black/white alphas
   only); no box-shadow on buttons; 1rem between sections; no wrapper card round a section.

   Layers: A. hero  B. sidebar (My Benfica's #mbAside look)  C. head controls
           D. shared bits (crests, bars, record card, rows)  E. clubs grid
           F. club profile  G. stadiums  H. referees  I. crowds  J. phones  K. motion
   ========================================================================== */

/* ==========================================================================
   A. The page hero: sizes come from style.css's shared page-hero block (.hero-pv2--page).
      Only the badge content and an opponent's colours are this file's.
   ========================================================================== */
.hero-pv2--wc .pv2-photo.wc-hb-crest {
    background: none !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 0 !important; display: flex !important; align-items: center; justify-content: center; overflow: visible;
}
.hero-pv2--wc .pv2-photo.wc-hb-crest img,
.hero-pv2--wc .pv2-photo.wc-hb-crest .wc-crest {
    width: 100% !important; height: 100% !important; max-height: 100%; object-fit: contain !important; object-position: center !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.hero-pv2--wc .pv2-photo.wc-hb-crest .wc-crest-none { display: grid; place-items: center; color: var(--theme-accent-on-primary, #fff); font-size: 1.7rem; }
.hero-pv2--wc .pv2-photo.wc-hb-photo { padding: 0 !important; overflow: hidden; }
.hero-pv2--wc .pv2-photo.wc-hb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-pv2--wc .pv2-photo.wc-hb-face { padding: 0 !important; overflow: hidden; border-radius: 50% !important; }
.hero-pv2--wc .pv2-photo.wc-hb-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.hero-pv2--wc .pv2-position img { vertical-align: -.1em; }
.hero-pv2--wc .pv2-position .flag-container { margin-right: .35rem; }
/* An opponent in its own colours (bnClubColourHexes -> bnClubShade, deepened so white text
   reads); the club pages wore them since 28 Sep 2026. Our own club keeps the skin. */
html .hero-header.hero-pv2--wc.wc-themed {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
        linear-gradient(118deg, var(--wc-c1) 0%, color-mix(in srgb, var(--wc-c1) 55%, var(--wc-c2)) 50%, var(--wc-c2) 100%) !important;
}

/* ==========================================================================
   B. Sidebar: My Benfica's #mbAside look (tiles, side links, rows, bars)
   ========================================================================== */
.benfica-layout.wc-modern .bn-aside .bn-panel { padding-bottom: .75rem; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
    margin: 0 0 .6rem; padding: 0; list-style: none;
}
.benfica-layout.wc-modern .bn-aside .mb-side-tiles:last-child { margin-bottom: 0; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles li {
    display: flex; flex-direction: column; gap: .1rem; min-width: 0;
    padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft);
}
.benfica-layout.wc-modern .bn-aside .mb-side-tiles span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles b small { color: var(--mb-muted); font-size: .68em; font-weight: 800; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles b.is-text { font-size: .78rem; line-height: 1.5; }
.benfica-layout.wc-modern .bn-aside .mb-side-tiles b .flag-container { margin-right: .3rem; }
.benfica-layout.wc-modern .bn-aside .mb-side-links { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .7rem; padding-top: .5rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); }
.benfica-layout.wc-modern .bn-aside .mb-side-links a { color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; }
.benfica-layout.wc-modern .bn-aside .mb-side-links a:hover { text-decoration: underline; }
.benfica-layout.wc-modern .bn-aside .mb-side-note { margin: 0; color: var(--mb-muted); font-size: .78rem; line-height: 1.4; }
.benfica-layout.wc-modern .bn-aside .wc-side-rows .mb-row { padding-left: 0; padding-right: 0; }
.benfica-layout.wc-modern .bn-aside .wc-side-n { font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.benfica-layout.wc-modern .bn-aside .bn-cta .bn-cta-links a { box-shadow: none; }

/* Labelled bars (By Country, By Team Type...) */
.benfica-layout.wc-modern .wc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.benfica-layout.wc-modern .wc-bars li { display: grid; gap: .22rem; min-width: 0; }
.benfica-layout.wc-modern .wc-bars-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; font-size: .78rem; font-weight: 700; }
.benfica-layout.wc-modern .wc-bars-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-bars-lbl a { color: inherit; text-decoration: none; }
.benfica-layout.wc-modern .wc-bars-lbl a:hover { color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-bars-lbl i { color: var(--mb-primary-ink); margin-right: .35rem; font-size: .85em; }
.benfica-layout.wc-modern .wc-bars-lbl .flag-container { margin-right: .35rem; }
.benfica-layout.wc-modern .wc-bars-top b { flex: 0 0 auto; font-size: .76rem; font-weight: 900; color: var(--mb-ink); font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .wc-bars-track { display: block; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.benfica-layout.wc-modern .wc-bars-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); transition: width .9s var(--mb-ease); }

/* Letters (clubs.php) */
.benfica-layout.wc-modern .wc-letters { display: flex; flex-wrap: wrap; gap: .3rem; }
.benfica-layout.wc-modern .wc-letters .cl-letter {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; height: 1.85rem; padding: 0 .45rem;
    border: 1px solid var(--mb-line); border-radius: 999px; background: var(--mb-soft); color: var(--mb-ink);
    font-size: .74rem; font-weight: 800; text-decoration: none; box-shadow: none;
}
.benfica-layout.wc-modern .wc-letters .cl-letter:hover { background: var(--mb-soft-2); }
.benfica-layout.wc-modern .wc-letters .cl-letter.is-on { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }

/* ==========================================================================
   C. Head controls: the search pill and the rounded pickers (the season picker's look)
   ========================================================================== */
.benfica-layout.wc-modern .bn-section-head { position: relative; }
.benfica-layout.wc-modern .bn-section-head .bn-head-actions { overflow: visible; gap: .35rem; }
.benfica-layout.wc-modern .wc-search {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; margin: 0;
    min-height: 1.9rem; padding: .1rem .7rem; border-radius: 999px;
    background: var(--mb-soft); border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent);
}
.benfica-layout.wc-modern .wc-search > i { color: var(--mb-muted); font-size: .72rem; }
.benfica-layout.wc-modern .wc-search input {
    width: 10rem; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
    color: var(--mb-ink); font-size: .76rem; font-weight: 700; line-height: 1.3;
}
.benfica-layout.wc-modern .wc-search input::placeholder { color: var(--mb-muted); font-weight: 600; }
.benfica-layout.wc-modern .wc-search:focus-within { border-color: var(--mb-primary); }
.benfica-layout.wc-modern .wc-pick { position: relative; margin: 0; }
.benfica-layout.wc-modern .wc-pick-btn {
    display: inline-flex; align-items: center; gap: .4rem; max-width: 11rem;
    padding: .22rem .7rem; min-height: 1.9rem; border-radius: 999px; cursor: pointer; list-style: none;
    font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap; color: var(--mb-ink);
    background: var(--mb-soft); border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent);
}
.benfica-layout.wc-modern .wc-pick-btn::-webkit-details-marker { display: none; }
.benfica-layout.wc-modern .wc-pick-btn::marker { content: ""; }
.benfica-layout.wc-modern .wc-pick-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.benfica-layout.wc-modern .wc-pick-ic { color: var(--mb-primary-ink); font-size: .8em; }
.benfica-layout.wc-modern .wc-pick-chev { font-size: .6rem; color: var(--mb-muted); transition: transform .2s; }
.benfica-layout.wc-modern .wc-pick[open] .wc-pick-chev { transform: rotate(180deg); }
.benfica-layout.wc-modern .wc-pick-btn:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 1px; }
.benfica-layout.wc-modern .wc-pick.is-set .wc-pick-btn { background: rgba(var(--mb-primary-rgb), .1); border-color: rgba(var(--mb-primary-rgb), .35); }
.benfica-layout.wc-modern .wc-pick-menu {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; min-width: 12rem; max-height: min(60vh, 22rem); overflow-y: auto;
    display: flex; flex-direction: column; padding: .3rem;
    background: var(--mb-card-bg); border: 1px solid var(--mb-ring); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow);
}
.benfica-layout.wc-modern .wc-pick-menu a {
    display: flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: .7rem;
    font-size: .8rem; font-weight: 700; color: var(--mb-ink); text-decoration: none; white-space: nowrap;
}
.benfica-layout.wc-modern .wc-pick-menu a > i { width: 1rem; text-align: center; color: var(--mb-primary-ink); font-size: .8em; }
.benfica-layout.wc-modern .wc-pick-menu a:hover { background: var(--mb-soft); color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-pick-menu a.is-on { background: var(--mb-primary); color: var(--mb-on); }
.benfica-layout.wc-modern .wc-pick-menu a.is-on > i { color: var(--mb-on); }
.benfica-layout.wc-modern a.mb-seg-btn { text-decoration: none; }
.benfica-layout.wc-modern .bn-head-actions a.mb-head-link { white-space: nowrap; }
.benfica-layout.wc-modern .wc-manage { display: inline-flex; align-items: center; gap: .3rem; }
/* The Follow star (club.php): competitions.php's .cp-follow-btn, value for value (comps-modern.css),
   icon only — the follower count stays hidden as before, the word is for screen readers. */
.benfica-layout.wc-modern .bn-section-head > .club-follow-action { order: 11; flex: 0 0 auto; display: inline-flex; }
.benfica-layout.wc-modern .wc-follow-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; flex: 0 0 auto;
    min-width: 1.9rem; height: 1.7rem; padding: 0 .55rem;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .72rem; font-weight: 800; line-height: 1; box-shadow: none; cursor: pointer;
    transition: background-color .2s ease;
}
.benfica-layout.wc-modern .wc-follow-btn:hover { background: var(--mb-soft-2); }
.benfica-layout.wc-modern .wc-follow-btn:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 1px; }
.benfica-layout.wc-modern .wc-follow-btn:disabled { opacity: .6; cursor: default; }
.benfica-layout.wc-modern .bn-section-head .wc-follow-btn i { color: var(--mb-accent-ink) !important; font-size: .85rem !important; width: auto !important; margin: 0 !important; }
.benfica-layout.wc-modern .wc-follow-btn[data-following="1"] { background: rgba(var(--mb-accent-rgb), .18); border-color: transparent; }
.benfica-layout.wc-modern .wc-follow-btn .follow-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.benfica-layout.wc-modern .wc-follow-btn .follow-count { display: none !important; }

/* ==========================================================================
   D. Shared bits
   ========================================================================== */
/* Crests and competition logos: bare, a light drop shadow, never a disc. */
.benfica-layout.wc-modern .wc-crest { object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); }
.benfica-layout.wc-modern .wc-crest-none { display: inline-grid; place-items: center; color: var(--mb-muted); filter: none; }
.benfica-layout.wc-modern .wc-crest-none i { font-size: 1em; }
.benfica-layout.wc-modern .wc-comp-logo { width: 14px; height: 14px; object-fit: contain; vertical-align: -.2em; margin-right: .3rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.benfica-layout.wc-modern .wc-comp-none { width: auto; height: auto; color: var(--mb-muted); font-size: .85em; filter: none; }
.benfica-layout.wc-modern .mb-row-meta .flag-container { margin-right: .3rem; }
.benfica-layout.wc-modern .wc-flag { display: inline-block; width: 14px; height: 10px; object-fit: cover; border-radius: 2px; margin-right: .3rem; vertical-align: -.02em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

/* Won / drawn / lost to scale (parts grow from nothing via bn-motion data-bn-fill). */
.benfica-layout.wc-modern .wc-wdl { display: flex; width: 100%; height: .4rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.benfica-layout.wc-modern .wc-wdl > span { display: block; height: 100%; transition: width .9s var(--mb-ease); }
.benfica-layout.wc-modern .wc-wdl-w { background: var(--mb-ok); }
.benfica-layout.wc-modern .wc-wdl-d { background: color-mix(in oklab, var(--mb-muted) 55%, var(--mb-soft-2)); }
.benfica-layout.wc-modern .wc-wdl-l { background: var(--mb-bad); }
.benfica-layout.wc-modern .wc-wdl--lg { height: .6rem; margin: .6rem 0 .2rem; }
.benfica-layout.wc-modern .wc-wdl--sm { width: 6rem; height: .35rem; }

/* The record card: three tiles + goals, the bar, the venue split rows. */
.benfica-layout.wc-modern .wc-record { padding: .7rem .8rem .35rem; }
.benfica-layout.wc-modern .wc-rec-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: .45rem; }
.benfica-layout.wc-modern .wc-rec-n { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .45rem .6rem; border-radius: .6rem; background: var(--mb-soft); }
.benfica-layout.wc-modern .wc-rec-n b { font-size: 1.35rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.benfica-layout.wc-modern .wc-rec-n b i { font-style: normal; color: var(--mb-muted); padding: 0 .15rem; font-weight: 700; }
.benfica-layout.wc-modern .wc-rec-n small { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.wc-modern .wc-rec-n.is-w b { color: var(--mb-ok-ink); }
.benfica-layout.wc-modern .wc-rec-n.is-l b { color: var(--mb-bad-ink); }
.benfica-layout.wc-modern .wc-rec-n.is-d b { color: var(--mb-muted); }
.benfica-layout.wc-modern .wc-rec-splits { margin-top: .35rem; }
.benfica-layout.wc-modern .wc-venue {
    display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: .4rem;
    font-size: .68rem; font-weight: 900; line-height: 1; border: 1.5px solid var(--mb-ink); color: var(--mb-ink);
}
.benfica-layout.wc-modern .wc-venue--home { background: var(--mb-ink); color: var(--mb-card-bg); }
.benfica-layout.wc-modern .wc-venue--neutral { border-style: dashed; border-color: var(--mb-muted); color: var(--mb-muted); }

/* A meeting row: crest pair | title over meta | the score pill. */
.benfica-layout.wc-modern .mb-row.wc-mrow { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .7rem; }
.benfica-layout.wc-modern .wc-pair { display: inline-flex; align-items: center; gap: .2rem; justify-content: flex-start; }
.benfica-layout.wc-modern .wc-crest--row { width: 1.5rem !important; height: 1.5rem !important; }
.benfica-layout.wc-modern .mb-row-side .mb-chip { font-size: .66rem; }
.benfica-layout.wc-modern .wc-booking-set { display: inline-flex; align-items: center; gap: .45rem; }
.benfica-layout.wc-modern .wc-booking { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-booking i { font-size: .95rem; }
.benfica-layout.wc-modern .wc-att { display: inline-flex; align-items: center; gap: .35rem; color: var(--mb-muted); font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.benfica-layout.wc-modern .wc-att-meter { display: block; width: 3rem; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.benfica-layout.wc-modern .wc-att-meter > span { display: block; height: 100%; background: var(--mb-accent); }

/* Box head line (a caption inside a card) and the dashed foot. */
.benfica-layout.wc-modern .mb-box .mb-cap:first-child { margin-top: .45rem; }
.benfica-layout.wc-modern .wc-note { display: flex; gap: .5rem; align-items: flex-start; margin: .1rem 0 .35rem; padding-top: .45rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); color: var(--mb-muted); font-size: .7rem; line-height: 1.5; }
.benfica-layout.wc-modern .wc-note > i { margin-top: .2rem; opacity: .8; }
.benfica-layout.wc-modern .wc-note b { color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-note a { color: var(--mb-primary-ink); font-weight: 800; }

/* Boxes side by side (two or three), stacking under the column's width. */
.benfica-layout.wc-modern .wc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; align-items: start; }
.benfica-layout.wc-modern .wc-box-head { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .15rem; color: var(--mb-ink); font-size: .8rem; font-weight: 900; }
.benfica-layout.wc-modern .wc-box-head i { color: var(--mb-primary-ink); font-size: .85em; }
.benfica-layout.wc-modern .wc-box-head small { margin-left: auto; color: var(--mb-muted); font-size: .66rem; font-weight: 800; }
.benfica-layout.wc-modern .mb-box > .wc-tablewrap { margin: 0 -.7rem; }
.benfica-layout.wc-modern .wc-tablebox { padding: 0; }
.benfica-layout.wc-modern .wc-tablebox .table { margin: 0; }
.benfica-layout.wc-modern .wc-tablebox .table-responsive { border-radius: var(--mb-radius); }

/* A tile: My Benfica's .mb-tile frame — visual | title over one or two lines. */
.benfica-layout.wc-modern .wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .6rem; }
.benfica-layout.wc-modern .wc-tile {
    position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; column-gap: .65rem; min-width: 0;
    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); text-decoration: none;
    transition: transform .2s var(--mb-ease), border-color .2s ease;
}
.benfica-layout.wc-modern .wc-tile[hidden] { display: none; }
.benfica-layout.wc-modern a.wc-tile:hover { color: var(--mb-ink); transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); }
.benfica-layout.wc-modern .wc-tile-vis { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.benfica-layout.wc-modern .wc-tile-vis .wc-crest { width: 2.5rem; height: 2.5rem; }
.benfica-layout.wc-modern .wc-tile-vis .wc-crest-none { font-size: 1.35rem; }
.benfica-layout.wc-modern .wc-tile-main { display: flex; flex-direction: column; min-width: 0; }
.benfica-layout.wc-modern .wc-tile-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 900; line-height: 1.25; }
.benfica-layout.wc-modern .wc-tile-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; line-height: 1.35; }
.benfica-layout.wc-modern .wc-tile-main small .flag-container { margin-right: .3rem; }
.benfica-layout.wc-modern .wc-tile-sub { display: flex !important; align-items: center; gap: .25rem; margin-top: .15rem; overflow: hidden; }
.benfica-layout.wc-modern .wc-tile-mgr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.wc-modern .wc-tile-mgr i { color: var(--mb-primary-ink); margin-right: .25rem; font-size: .85em; }
.benfica-layout.wc-modern .wc-tt {
    flex: 0 0 auto; padding: 0 .38rem; border-radius: 999px; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink);
    font-size: .56rem; font-weight: 900; line-height: 1.4rem; letter-spacing: .03em; text-transform: uppercase;
}
.benfica-layout.wc-modern .wc-tile-mgr + .wc-tt { margin-left: auto; }
.benfica-layout.wc-modern .wc-tbar {
    position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: .18rem; border-radius: 999px; opacity: .85;
    background: linear-gradient(90deg, var(--mb-ok) 0 var(--w), color-mix(in oklab, var(--mb-muted) 55%, var(--mb-soft-2)) var(--w) var(--d), var(--mb-bad) var(--d) 100%);
}
.benfica-layout.wc-modern .wc-more { margin-top: 1rem; }
.benfica-layout.wc-modern .wc-grid-empty[hidden], .benfica-layout.wc-modern .wc-more[hidden] { display: none; }

/* ==========================================================================
   F. Club profile
   ========================================================================== */
/* Fact cards in a flowing grid: the .mb-tile frame, icon beside the title. */
/* Wrapping rows that always fill the width (no empty slot at the end of the last row). */
.benfica-layout.wc-modern .wc-facts { display: flex; flex-wrap: wrap; gap: .6rem; }
.benfica-layout.wc-modern .wc-facts > .wc-fact { flex: 1 1 13.5rem; }
.benfica-layout.wc-modern .wc-fact {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .6rem; align-items: center; min-width: 0;
    padding: .55rem .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);
}
.benfica-layout.wc-modern .wc-facts > .wc-fact--wide { flex: 2 1 20rem; }
.benfica-layout.wc-modern .wc-fact .mb-ico, .benfica-layout.wc-modern .wc-fact-img { grid-row: 1 / span 3; align-self: center; }
.benfica-layout.wc-modern .wc-fact-img { width: 2rem; height: 2rem; border-radius: .6rem; object-fit: cover; background: var(--mb-soft); }
.benfica-layout.wc-modern .wc-fact-img.is-face { border-radius: 50%; object-position: center 25%; }
.benfica-layout.wc-modern .wc-data-note { display: flex; align-items: center; gap: .4rem; margin: .55rem 0 0; color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.benfica-layout.wc-modern .wc-data-note.is-ok i { color: var(--mb-ok-ink); }
.benfica-layout.wc-modern .wc-data-note.is-warn i { color: var(--mb-accent-ink); }
/* club.php's older phone rule tightened this head to .75rem; the standard is 1rem. */
.benfica-layout.wc-modern #club-info .bn-section-head { margin-bottom: 1rem; }
.benfica-layout.wc-modern .wc-about { margin-top: 1rem; padding: .3rem .85rem .75rem; font-size: .86rem; line-height: 1.6; }
.benfica-layout.wc-modern .wc-fact-label { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.benfica-layout.wc-modern .wc-fact-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 800; line-height: 1.3; }
.benfica-layout.wc-modern .wc-fact-value a { color: inherit; text-decoration: none; }
.benfica-layout.wc-modern .wc-fact-value a:hover { color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-fact-sub { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; }
.benfica-layout.wc-modern .wc-fact-sub .flag-container { margin-right: .3rem; }
.benfica-layout.wc-modern .wc-fact .cl-tts { display: flex; flex-wrap: wrap; gap: .3rem; white-space: normal; }
.benfica-layout.wc-modern .wc-fact .club-tt { margin: 0; padding: .2rem .5rem; font-size: .62rem; }
.benfica-layout.wc-modern .wc-fact .bn-club-swatches { display: inline-flex; gap: .25rem; margin-left: .35rem; vertical-align: -.15em; }
.benfica-layout.wc-modern .wc-fact .bn-club-swatch { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--mb-line); }
.benfica-layout.wc-modern .wc-fact-kit { position: relative; padding-right: 3.4rem; }
.benfica-layout.wc-modern .wc-fact-kit .cl-kit { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); line-height: 0; }
.benfica-layout.wc-modern .wc-fact-kit .cl-kit svg { width: 2.2rem; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
/* The two picture cards: the ground (photo) and the manager (round face). */
.benfica-layout.wc-modern .wc-pic { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); align-items: center; column-gap: .75rem; min-width: 0; padding: .6rem .75rem; color: var(--mb-ink); text-decoration: none; }
.benfica-layout.wc-modern a.wc-pic:hover { color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-pic-img { width: 4.4rem; height: 3rem; border-radius: .6rem; object-fit: cover; background: var(--mb-soft); display: grid; place-items: center; color: var(--mb-muted); }
.benfica-layout.wc-modern .wc-pic-img.is-face { width: 3rem; height: 3rem; border-radius: 50%; object-position: center 25%; margin: 0 auto; }
.benfica-layout.wc-modern .wc-pic-main { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.benfica-layout.wc-modern .wc-pic-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 900; }
.benfica-layout.wc-modern .wc-pic-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; }
.benfica-layout.wc-modern .wc-pic-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.benfica-layout.wc-modern .wc-pic-chips .mb-chip { font-size: .64rem; padding: .08rem .45rem; }
.benfica-layout.wc-modern .wc-about p:last-child { margin-bottom: 0; }
.benfica-layout.wc-modern .wc-people .mb-row-vis .wc-face { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; object-position: center 25%; background: var(--mb-soft); }
.benfica-layout.wc-modern .wc-num { font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); white-space: nowrap; }
.benfica-layout.wc-modern .wc-num small { color: var(--mb-muted); font-size: .66rem; font-weight: 800; margin-left: .15rem; }
.benfica-layout.wc-modern .wc-players { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem 0; }
.benfica-layout.wc-modern .wc-players a.mb-chip { text-decoration: none; }
.benfica-layout.wc-modern .wc-players a.mb-chip:hover { background: var(--mb-soft-2); color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-rows-more[hidden] { display: none; }

/* ==========================================================================
   G. Stadiums: photo cards
   ========================================================================== */
.benfica-layout.wc-modern .wc-grounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.benfica-layout.wc-modern .wc-ground {
    display: flex; flex-direction: column; min-width: 0;
    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); text-decoration: none; overflow: hidden;
    transition: transform .2s var(--mb-ease), border-color .2s ease;
}
.benfica-layout.wc-modern .wc-ground:hover { transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); color: var(--mb-ink); }
.benfica-layout.wc-modern a.mb-chip { text-decoration: none; }
.benfica-layout.wc-modern a.mb-chip:hover { background: var(--mb-soft-2); color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .bn-aside .mb-row-vis .wc-fact-img { width: 2rem; height: 1.6rem; border-radius: .4rem; }
.benfica-layout.wc-modern .wc-ground-pic { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--mb-soft); overflow: hidden; }
.benfica-layout.wc-modern .wc-ground-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--mb-ease); }
.benfica-layout.wc-modern .wc-ground:hover .wc-ground-pic img { transform: scale(1.04); }
.benfica-layout.wc-modern .wc-ground-pic.is-blank { display: grid; place-items: center; color: var(--mb-muted); font-size: 2rem; }
.benfica-layout.wc-modern .wc-ground-pic.is-blank .fa-stadium-mask { width: 2.4rem; height: 2.4rem; opacity: .5; }
.benfica-layout.wc-modern .wc-ground-rank {
    position: absolute; left: .55rem; top: .55rem; min-width: 1.6rem; padding: 0 .4rem; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; font-weight: 900; line-height: 1.6rem; text-align: center;
}
.benfica-layout.wc-modern .wc-ground-home { position: absolute; right: .55rem; top: .55rem; padding: 0 .5rem; border-radius: 999px; background: var(--mb-primary); color: var(--mb-on); font-size: .64rem; font-weight: 900; line-height: 1.5rem; }
.benfica-layout.wc-modern .wc-ground-body { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .75rem .65rem; min-width: 0; }
.benfica-layout.wc-modern .wc-ground-name { color: inherit; text-decoration: none; min-width: 0; display: block; overflow: hidden; }
.benfica-layout.wc-modern .wc-ground-name:hover { color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-ground-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 900; line-height: 1.25; }
.benfica-layout.wc-modern .wc-ground-body > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; }
.benfica-layout.wc-modern .wc-ground-body > small .flag-container { margin-right: .3rem; }
.benfica-layout.wc-modern .wc-ground-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.benfica-layout.wc-modern .wc-ground-chips .mb-chip { font-size: .64rem; padding: .08rem .45rem; }
.benfica-layout.wc-modern .wc-ground-foot { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; }
.benfica-layout.wc-modern .wc-ground-foot .wc-wdl { flex: 1 1 auto; }
.benfica-layout.wc-modern .wc-ground-foot small { flex: 0 0 auto; color: var(--mb-muted); font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .wc-ground[hidden] { display: none; }
/* The profile: the photo as a wide card with the facts under it. */
.benfica-layout.wc-modern .wc-ground-hero { padding: 0; overflow: hidden; }
.benfica-layout.wc-modern .wc-ground-hero .wc-ground-pic { aspect-ratio: 21 / 9; }
.benfica-layout.wc-modern .wc-ground-hero .wc-ground-body { padding: .7rem .85rem .75rem; }
.benfica-layout.wc-modern .wc-ground-hero .wc-desc { margin: .2rem 0 0; color: var(--mb-ink); font-size: .84rem; line-height: 1.6; }
.benfica-layout.wc-modern .wc-maplink { display: inline-flex; align-items: center; gap: .35rem; }
/* The ground's map: first sidebar panel, full panel width, rounded, the same 190px as before. */
.benfica-layout.wc-modern .wc-map { position: relative; height: 190px; width: 100%; border-radius: var(--mb-radius-sm, .7rem); overflow: hidden; z-index: 0; background: var(--mb-soft); }
.benfica-layout.wc-modern .wc-map .leaflet-control-attribution { font-size: .6rem; }
.benfica-layout.wc-modern .wc-map .leaflet-popup-content { font-size: .78rem; line-height: 1.35; margin: .55rem .75rem; }
[data-bs-theme="dark"] .benfica-layout.wc-modern .wc-map .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .benfica-layout.wc-modern .wc-map .leaflet-popup-tip { background: var(--mb-card-bg); color: var(--mb-ink); }
/* The consent card (global-utils.js slbMapTiles) made to fit the 190px box: the buttons stay in view. */
.benfica-layout.wc-modern .wc-map .slb-map-consent { padding: .5rem; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-card { max-width: none; width: 100%; padding: .55rem .65rem; border-radius: var(--mb-radius-sm, .7rem); box-shadow: none; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-card > i { display: inline-block; font-size: 1rem; margin: 0 .35rem 0 0; vertical-align: -.1em; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-card strong { font-size: .78rem; line-height: 1.3; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-card p { margin: .3rem 0 .45rem; font-size: .68rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.benfica-layout.wc-modern .wc-map .slb-map-consent-actions .btn { padding: .2rem .6rem; font-size: .7rem; box-shadow: none; }
.benfica-layout.wc-modern .wc-map-place { display: flex; align-items: center; gap: .35rem; margin: .55rem 0 0; color: var(--mb-ink); font-size: .8rem; font-weight: 700; }
.benfica-layout.wc-modern .wc-map-place > i { color: var(--mb-primary-ink); font-size: .85em; }
.benfica-layout.wc-modern .wc-map-panel .mb-side-links { justify-content: space-between; align-items: center; margin-top: .55rem; }
/* Home Grounds timeline sits in a card now. */
.benfica-layout.wc-modern .wc-hg { padding: .9rem .8rem .7rem; }

/* Home Grounds timeline (renderHomeGroundTimeline(), moved here from stadiums.php's inline style unchanged) */
/* ---- Home grounds timeline --------------------------------------- */
/* The same rail-and-entry timeline as before, finished more carefully: a rail
   that fades with age, a marker that says which ground is still ours, and one
   lead figure per era instead of a row of equals. */
.benfica-layout .hg-wrap{position:relative;padding-left:0.25rem}
.benfica-layout .hg-era{display:flex;gap:0.9rem;padding:0 0 1.25rem 0;position:relative}
.benfica-layout .hg-era:last-child{padding-bottom:0.25rem}
/* The rail runs between markers. It lightens down the page, so the further back
   the era the fainter its thread — the record genuinely is thinner back there. */
.benfica-layout .hg-era::before{content:'';position:absolute;left:3.55rem;top:1.45rem;bottom:0;
  width:2px;background:linear-gradient(180deg,var(--theme-border,#e0e3e7),transparent)}
.benfica-layout .hg-era:last-child::before{display:none}

.benfica-layout .hg-span{flex:0 0 auto;width:4.6rem;text-align:right;position:relative}
.benfica-layout .hg-years{font-size:0.75rem;font-weight:800;line-height:1.25;
  font-variant-numeric:tabular-nums;color:var(--theme-ink-muted,#6b7280);display:inline-block;
  padding-right:0.65rem}
.benfica-layout .hg-now{color:var(--slb-red)}
/* The marker. The current ground gets a filled dot with a halo; the rest are hollow. */
.benfica-layout .hg-span::after{content:'';position:absolute;right:-0.36rem;top:0.3rem;
  width:0.75rem;height:0.75rem;border-radius:50%;background:var(--theme-surface,#fff);
  border:2px solid var(--theme-border,#e0e3e7);transition:box-shadow .18s ease}
.benfica-layout .hg-era.is-current .hg-span::after{background:var(--slb-red);
  border-color:var(--slb-red);box-shadow:0 0 0 4px rgba(var(--slb-red-rgb),.16)}

.benfica-layout .hg-body{flex:1 1 auto;min-width:0;padding-left:0.6rem}
.benfica-layout .hg-name{font-size:1rem;font-weight:800;margin:0 0 0.15rem;line-height:1.25;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.45rem}
.benfica-layout .hg-name a{color:inherit;text-decoration:none}
.benfica-layout .hg-name a:hover{color:var(--slb-red)}
.benfica-layout .hg-city{font-size:0.72rem;font-weight:600;opacity:0.6}
.benfica-layout .hg-len{font-size:0.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.04em;padding:0.05rem 0.4rem;border-radius:999px;
  background:var(--theme-surface-3,#eff0f2);color:var(--theme-ink-muted,#6b7280)}
.benfica-layout .hg-era.is-current .hg-len{background:rgba(var(--slb-red-rgb),.1);color:var(--slb-red)}
.benfica-layout .hg-dates{font-size:0.74rem;color:var(--theme-ink-muted,#6b7280);margin-bottom:0.4rem}

.benfica-layout .hg-stats{display:flex;flex-wrap:wrap;gap:0.3rem;align-items:center}
.benfica-layout .hg-stat{font-size:0.72rem;padding:0.14rem 0.5rem;border-radius:999px;
  background:var(--theme-surface-3,#eff0f2);color:var(--theme-ink-muted,#6b7280);white-space:nowrap}
.benfica-layout .hg-stat b{color:var(--theme-ink,#1b1d21);font-variant-numeric:tabular-nums}
/* The lead figure carries the club colour; the rest stay quiet behind it. */
.benfica-layout .hg-stat.is-lead{background:rgba(var(--slb-red-rgb),.09);color:var(--slb-red)}
.benfica-layout .hg-stat.is-lead b{color:var(--slb-red);font-size:0.86rem;font-weight:800}
.benfica-layout .hg-stat.hg-dim{background:transparent;border:1px dashed var(--theme-border,#e0e3e7)}

/* Won, drawn, lost to scale, directly under the counts. */
.benfica-layout .hg-res{display:flex;height:5px;border-radius:3px;overflow:hidden;
  background:var(--theme-surface-3,#eff0f2);margin-top:0.45rem;max-width:22rem}
.benfica-layout .hg-res span{display:block;height:100%}
.benfica-layout .hg-res-w{background:var(--theme-success,#198754)}
.benfica-layout .hg-res-d{background:var(--theme-ink-faint,#adb5bd)}
.benfica-layout .hg-res-l{background:var(--theme-danger,#dc3545)}

.benfica-layout .hg-gap{font-size:0.7rem;color:var(--theme-ink-muted,#6b7280);margin-top:0.4rem}
.benfica-layout .hg-gap i,.benfica-layout .hg-basis i{margin-right:0.3rem;opacity:0.7}
.benfica-layout .hg-other{font-size:0.74rem;color:var(--theme-ink-muted,#6b7280);
  margin-top:0.9rem;padding-top:0.7rem;border-top:1px solid var(--theme-border,#e0e3e7);line-height:1.6}
.benfica-layout .hg-other b{color:var(--theme-ink,#1b1d21)}
.benfica-layout .hg-other a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.benfica-layout .hg-other a:hover{color:var(--slb-red)}
.benfica-layout .hg-dim{opacity:0.65}
.benfica-layout .hg-basis{font-size:0.7rem;color:var(--theme-ink-muted,#6b7280);
  margin-top:0.7rem;line-height:1.55;opacity:0.85}
@media (prefers-reduced-motion:reduce){.benfica-layout .hg-span::after{transition:none}}
@media (max-width:575.98px){
  .benfica-layout .hg-era::before{left:2.95rem}
  .benfica-layout .hg-span{width:4rem}
  .benfica-layout .hg-years{font-size:0.7rem}
  .benfica-layout .hg-name{font-size:0.92rem}
  .benfica-layout .hg-res{max-width:none}
}

.benfica-layout.wc-modern .wc-ground[hidden] { display: none; }
.benfica-layout.wc-modern [data-wc-expand][hidden] { display: none; }

/* ==========================================================================
   H. Referees
   ========================================================================== */
.benfica-layout.wc-modern .mb-row.wc-ref { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.benfica-layout.wc-modern .wc-rank { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--mb-soft-2); color: var(--mb-muted); font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .wc-rank.is-1 { background: rgba(var(--mb-accent-rgb), .25); color: var(--mb-accent-ink); }
.benfica-layout.wc-modern .wc-rank.is-2 { background: color-mix(in oklab, var(--mb-muted) 22%, transparent); color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-rank.is-3 { background: rgba(var(--mb-primary-rgb), .12); color: var(--mb-primary-ink); }
.benfica-layout.wc-modern .wc-rec-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.benfica-layout.wc-modern .wc-rec-side small { color: var(--mb-muted); font-size: .64rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .wc-ref-n { min-width: 2rem; text-align: right; font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .mb-row[hidden] { display: none; }
.benfica-layout.wc-modern .wc-chip-fifa { background: color-mix(in oklab, var(--mb-info) 16%, transparent); }
.benfica-layout.wc-modern .wc-chip-fifa i { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }

/* ==========================================================================
   I. Crowds: charts, record cards
   ========================================================================== */
.benfica-layout.wc-modern .wc-chart { position: relative; height: 15rem; margin: .45rem 0 .35rem; }
.benfica-layout.wc-modern .wc-chart--sm { height: 11rem; }
.benfica-layout.wc-modern .wc-chart canvas { display: block; }
.benfica-layout.wc-modern .wc-chart-fallback { display: none; }
.benfica-layout.wc-modern .wc-chart:not(.is-drawn) .wc-chart-fallback { display: block; }
.benfica-layout.wc-modern .wc-chart:not(.is-drawn) canvas { display: none; }
.benfica-layout.wc-modern .wc-chart:not(.is-drawn) { height: auto; }
.benfica-layout.wc-modern .wc-cov { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .1rem .45rem; color: var(--mb-muted); font-size: .76rem; line-height: 1.5; }
.benfica-layout.wc-modern .wc-cov > i { color: var(--mb-primary-ink); margin-top: .2rem; }
.benfica-layout.wc-modern .wc-cov b { color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; }
.benfica-layout.wc-modern .wc-feat {
    position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .7rem .8rem .65rem;
    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); text-decoration: none; overflow: hidden;
}
.benfica-layout.wc-modern a.wc-feat:hover { color: var(--mb-ink); border-color: rgba(var(--mb-primary-rgb), .3); }
.benfica-layout.wc-modern .wc-feat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mb-primary); }
.benfica-layout.wc-modern .wc-feat.is-gold::before { background: var(--mb-accent); }
.benfica-layout.wc-modern .wc-feat-lbl { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.benfica-layout.wc-modern .wc-feat-lbl i { color: var(--mb-primary-ink); margin-right: .3rem; }
.benfica-layout.wc-modern .wc-feat-num { font-size: 1.55rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.benfica-layout.wc-modern .wc-feat-who { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .8rem; font-weight: 800; }
.benfica-layout.wc-modern .wc-feat-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.wc-modern .wc-feat-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; }
.benfica-layout.wc-modern .wc-there { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.benfica-layout.wc-modern .wc-there i { color: var(--mb-ok-ink); }
.benfica-layout.wc-modern .wc-fill { display: inline-flex; align-items: center; gap: .35rem; }
.benfica-layout.wc-modern .wc-fill .wc-att-meter { width: 4rem; }
.benfica-layout.wc-modern .wc-fill .wc-att-meter > span { background: var(--mb-ok); }
.benfica-layout.wc-modern .wc-fill b { font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); min-width: 2.6rem; text-align: right; }

.benfica-layout.wc-modern .wc-feats--head { margin-top: 1rem; }
.benfica-layout.wc-modern .wc-comp-logo--row { width: 26px; height: 26px; margin: 0; vertical-align: middle; }
.benfica-layout.wc-modern .mb-row-vis .wc-fact-img { width: 2rem; height: 1.6rem; border-radius: .4rem; }
.benfica-layout.wc-modern .wc-gate-n { min-width: 3.6rem; text-align: right; font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.benfica-layout.wc-modern .wc-duo--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.benfica-layout.wc-modern .wc-fill .wc-att-meter--avg > span, .benfica-layout.wc-modern .wc-att-meter--avg > span { background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); }
/* The no-script fallback under each chart (the old crowds bars, kept compact). */
.benfica-layout.wc-modern .cr-bars { display: grid; gap: .3rem; padding: .4rem 0; }
.benfica-layout.wc-modern .cr-bar { display: grid; grid-template-columns: minmax(5rem, 8rem) 1fr auto; gap: .6rem; align-items: center; }
.benfica-layout.wc-modern .cr-bar-lbl { font-size: .74rem; font-weight: 700; color: var(--mb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.wc-modern .cr-bar-n { font-size: .66rem; color: var(--mb-muted); font-weight: 600; }
.benfica-layout.wc-modern .cr-bar-track { height: .55rem; border-radius: 999px; background: var(--mb-soft-2); overflow: hidden; }
.benfica-layout.wc-modern .cr-bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mb-primary), var(--mb-accent)); transition: width .9s var(--mb-ease); }
.benfica-layout.wc-modern .cr-bar-val { font-size: .72rem; font-weight: 800; color: var(--mb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   J. Phones (My Benfica's breakpoints: 767 / 575 / 439 / 379)
   ========================================================================== */
/* Section heads with controls on phones (owner, 5 Oct 2026): the title NEVER truncates.
   When the controls do not fit beside the whole title, includes/js/clubs-modern.js marks the
   head .wc-head-wrap and the controls take their own full-width row under it: the switch
   stretched with equal buttons, a picker / search / link as a compact pill at the right end.
   style.css forces one row on phones (!important), so these rules are scoped to win. */
@media (max-width: 767.98px) {
    body .benfica-layout.wc-modern .bn-section-head:has(> .bn-head-actions) > h2 { flex: 0 0 auto !important; min-width: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }
    body .benfica-layout.wc-modern .bn-section-head > .bn-head-actions { flex: 0 0 auto !important; }
    body .benfica-layout.wc-modern .bn-section-head > .bn-head-actions > .mb-seg { overflow: visible !important; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap { flex-wrap: wrap !important; row-gap: .55rem !important; column-gap: .6rem !important; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > h2 { flex: 0 1 auto !important; white-space: normal !important; }
    /* The colour line becomes the row break. */
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap::after { display: block !important; flex: 1 0 100% !important; height: 0 !important; min-width: 0 !important; margin: 0 !important; order: 9 !important; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > .bn-head-actions {
        flex: 1 1 auto !important; order: 10 !important; margin-left: 0 !important; max-width: none !important;
        justify-content: flex-end !important; flex-wrap: wrap; row-gap: .45rem;
    }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > .bn-head-actions > .mb-seg { flex: 1 1 auto !important; display: flex !important; width: auto !important; max-width: none !important; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > .bn-head-actions > .mb-seg > .mb-seg-btn { flex: 1 1 0 !important; justify-content: center; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > .bn-head-actions > .wc-search:not(:focus-within):not(.has-q) { margin-right: auto; }
    body .benfica-layout.wc-modern .bn-section-head.wc-head-wrap > .club-follow-action { order: 11 !important; }
}
@media (max-width: 767.98px) {
    /* Pickers keep their icon; the name goes (it stays as the tooltip). */
    .benfica-layout.wc-modern .wc-pick-btn { padding: .22rem .55rem; gap: .3rem; }
    .benfica-layout.wc-modern .wc-pick-txt { display: none; }
    .benfica-layout.wc-modern .wc-pick-btn .flag-container { margin: 0; }
    .benfica-layout.wc-modern .wc-manage-txt { display: none; }
    /* The search is an icon until it is used, then it opens over the head's row. */
    .benfica-layout.wc-modern .wc-search { padding: .1rem .55rem; cursor: text; }
    .benfica-layout.wc-modern .wc-search input { width: 0; }
    .benfica-layout.wc-modern .wc-search:focus-within,
    .benfica-layout.wc-modern .wc-search.has-q {
        position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 5;
        background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
    }
    .benfica-layout.wc-modern .wc-search:focus-within input,
    .benfica-layout.wc-modern .wc-search.has-q input { width: 100%; }
    .benfica-layout.wc-modern .wc-rec-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .benfica-layout.wc-modern .wc-rec-n.is-g { grid-column: 1 / -1; }
    /* A switch of short text labels (the club's sides) keeps its text: it has no icons. */
    .benfica-layout.wc-modern .wc-seg--text .mb-seg-txt { display: inline; }
    .benfica-layout.wc-modern .wc-ground-hero .wc-ground-pic { aspect-ratio: 16 / 9; }
    /* A row's extra (attendance, bookings) drops under its text, like My Benfica's times. */
    .benfica-layout.wc-modern .mb-row.wc-mrow:has(.wc-att, .wc-booking) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .benfica-layout.wc-modern .mb-row.wc-mrow .wc-att, .benfica-layout.wc-modern .mb-row.wc-mrow .wc-booking-set { display: none; }
}
@media (max-width: 575.98px) {
    .benfica-layout.wc-modern .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .benfica-layout.wc-modern .wc-tile { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .5rem; padding: .5rem .6rem .55rem; }
    .benfica-layout.wc-modern .wc-tile-vis, .benfica-layout.wc-modern .wc-tile-vis .wc-crest { width: 2rem; height: 2rem; }
    .benfica-layout.wc-modern .wc-tile-main b { font-size: .78rem; }
    .benfica-layout.wc-modern .wc-tile-main small { font-size: .64rem; }
    .benfica-layout.wc-modern .wc-tile-sub .wc-tt { display: none; }
    .benfica-layout.wc-modern .wc-tbar { left: .6rem; right: .6rem; bottom: .25rem; }
    .benfica-layout.wc-modern .wc-facts { gap: .45rem; }
    .benfica-layout.wc-modern .wc-facts > .wc-fact { flex: 1 1 calc(50% - .25rem); }
    .benfica-layout.wc-modern .wc-fact { grid-template-columns: 1.7rem minmax(0, 1fr); column-gap: .45rem; padding: .5rem .55rem; }
    .benfica-layout.wc-modern .wc-fact .mb-ico { width: 1.7rem; height: 1.7rem; font-size: .75rem; }
    .benfica-layout.wc-modern .wc-fact-value { font-size: .8rem; }
    .benfica-layout.wc-modern .wc-facts > :is(.wc-fact--wide, .wc-fact-kit) { flex-basis: 100%; }
    .benfica-layout.wc-modern .wc-grounds { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .benfica-layout.wc-modern .wc-rec-n { padding: .4rem .45rem; }
    .benfica-layout.wc-modern .wc-rec-n b { font-size: 1.15rem; }
    .benfica-layout.wc-modern .wc-chart { height: 12.5rem; }
    .benfica-layout.wc-modern .wc-wdl--sm { width: 3.6rem; }
    .benfica-layout.wc-modern .wc-ref .wc-rec-side small { display: none; }
}
@media (max-width: 379.98px) {
    .benfica-layout.wc-modern .wc-grid { grid-template-columns: minmax(0, 1fr); }
    .benfica-layout.wc-modern .wc-pick-btn { padding: .22rem .45rem; }
    .benfica-layout.wc-modern .wc-pick-chev { display: none; }
    .benfica-layout.wc-modern .wc-wdl--sm { width: 2.6rem; }
}

/* ==========================================================================
   K. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .benfica-layout.wc-modern .wc-tile, .benfica-layout.wc-modern .wc-ground, .benfica-layout.wc-modern .wc-ground-pic img,
    .benfica-layout.wc-modern .wc-wdl > span, .benfica-layout.wc-modern .wc-bars-track > span { transition: none !important; }
    .benfica-layout.wc-modern a.wc-tile:hover, .benfica-layout.wc-modern .wc-ground:hover { transform: none; }
    .benfica-layout.wc-modern .wc-ground:hover .wc-ground-pic img { transform: none; }
}

/* Phones (owner, 7 Oct 2026): head controls stay on the right of the title row. The club's
   sides switch becomes a compact picker (the active side + chevron), and a "Club - Section"
   title drops the club prefix (clubs-modern.js wraps it in .wc-h-pre). */
.benfica-layout.wc-modern .wc-side-pick { display: none; }
@media (max-width: 767.98px) {
    .benfica-layout.wc-modern .bn-head-actions:has(> .wc-side-pick) > .wc-seg--text { display: none !important; }
    .benfica-layout.wc-modern .wc-side-pick { display: inline-flex; }
    .benfica-layout.wc-modern .wc-side-pick .wc-pick-txt { display: inline; }
    .benfica-layout.wc-modern .wc-side-pick .wc-pick-menu { right: 0; left: auto; }
    .benfica-layout.wc-modern .bn-section-head > h2 .wc-h-pre { display: none; }
}
@media (max-width: 767.98px) {
    .benfica-layout.wc-modern .bn-section-head .mb-head-link.wc-link-ico { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 999px; background: var(--mb-soft); font-size: 0 !important; line-height: 1 !important; overflow: hidden; }
    .benfica-layout.wc-modern .bn-section-head .mb-head-link.wc-link-ico::before { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .78rem !important; color: var(--mb-primary-ink, var(--mb-primary)); }
}
/* Phones: tighter gaps in a head with controls, so title + line + control share one row (the
   forum heads' fix). */
@media (max-width: 767.98px) {
    body .benfica-layout.wc-modern .bn-section-head:has(> .bn-head-actions):not(.wc-head-wrap) { column-gap: .5rem !important; }
}