/* WEPLAYED MOMENTS -- shared layout section (FED-22832)
   Linked from generic/inc-head, inside the weplayed_addon_code gate that
   also loads the vendor widget script -- so it is render-blocking and lands
   before /theme.css, which the specificity note below depends on.

   WHY THIS FILE EXISTS AT ALL. Themes style their section titles with
   .section .component-title, and some of them set a colour that assumes a
   coloured band behind it. centenary-premium/theme.css is the case that
   surfaced this:

       .section .component-title { ...; color: var(--bs-white); }

   Every other centenary section that uses .component-title sits on a
   bg-primary or bg-secondary container, so white reads fine there. The
   WePlayed band has no such background, so the title rendered white on
   white and was invisible. The rules below give the band a background of
   its own and restore a readable title colour.

   SPECIFICITY, NOT !important. The theme rule is (0,2,0). Chaining
   .sec-weplayed-moments.section-weplayed-moments makes the title rule
   (0,3,0), so it wins on specificity alone. That matters because inc-head links the generic
   stylesheets BEFORE the decorator emits theme.css -- at equal specificity
   the theme would win on source order. Do not "simplify" these selectors
   back to a single class; the extra class is doing the work. And do not
   reach for !important: the authoring standard reserves it for overriding
   third-party CSS we do not control, which this is not.

   The band is full-bleed by construction rather than by a rule here. Each
   <section class="section sec-*"> is a block child of the layout's
   container-fluid p-0 wrapper, so it already spans edge to edge; the
   containerClass param keeps the CONTENT constrained inside it. That is the
   same contained-content-on-a-full-width-band shape the neighbouring
   sections use.

   Both values are overridable per theme without touching this file -- set
   --cg-weplayed-bg or --cg-weplayed-title-color on the section (or anything
   above it) in that theme's theme.css. A dark theme that wants its own
   treatment should do that rather than adding a competing rule here.
*/



/* The hook is the sec-weplayed-moments + section-weplayed-moments pair, which
   generic/weplayed-moments emits on EVERY chrome variant. Chaining two
   always-present classes reaches (0,3,0) for the title rule without depending
   on the theme's structural class -- that is "section" on most themes but
   "section-wrapper" on others, so a .section-prefixed selector would silently
   miss the wrapper family. */
.sec-weplayed-moments.section-weplayed-moments {
    background-color: var(--cg-weplayed-bg, #f5f5f5);
}

/* Padding lives here rather than in a per-call Bootstrap utility: the band
   needs consistent breathing room across 170+ layouts whose spacing
   conventions do not agree, and a call-site utility would have to be guessed
   per theme. A layout that needs different spacing still overrides it by
   passing class=py-0 (or any py-* utility), which wins on specificity. */
.sec-weplayed-moments.section-weplayed-moments {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* The site's default text colour -- the same value article and release
   titles inherit, since nothing in generic or the themes overrides it. */
.sec-weplayed-moments.section-weplayed-moments .component-title {
    color: var(--cg-weplayed-title-color, var(--bs-body-color));
}