/*
 * The full-width design for league and tournament public pages.
 *
 * A SKIN, NOT A SECOND RENDERER. Everything hangs off .pcw on the body, so the
 * twenty block types already built restyle themselves and the classic design
 * is untouched. Colours come from custom properties the page sets from the
 * organizer's own palette, so switching design changes the shape and keeps
 * their colours.
 *
 * ON !important. Several rules below carry it, which is normally a smell. The
 * markup is peppered with Bootstrap spacing utilities - py-4, mt-4, mb-4, g-4 -
 * and every spacing utility in Bootstrap is declared !important. Without
 * matching it, the overrides lose and the page keeps a band of white above the
 * hero and a margin down both sides. The alternative was editing those classes
 * out of two renderers that the classic design still depends on.
 */

.pcw {
    background: var(--pcw-bg, #fff);
    color: var(--pcw-text, #374151);
    font-family: var(--pcw-body);
}

/* ---- Nothing is boxed in ---------------------------------------------- */

/* The container stops being a column and becomes the page. What goes back on
   the measure is each thing inside it, a few rules down, so that the hero and
   the full-bleed bands can still reach the glass. Longhand because the bottom
   is the gap above the footer and is not zero. */
.pcw .page-body > .container-xl,
.pcw .page-wrapper > .container-xl {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.pcw .page-body { margin-top: 0 !important; }

/* Tabler puts a 15px margin on <html>, which at full width is a white strip
   down the left of every section. It cannot be reached from a class on the
   body, so :has() does it, which also keeps this file from containing a
   single rule that applies outside the wide design. */
html:has(body.pcw) { margin-left: 0 !important; margin-right: 0 !important; }

.pcw .league-page-blocks,
.pcw .tournament-page-blocks { margin-top: 0 !important; }

/* ---- The content column ------------------------------------------------
 *
 * Bands of colour and photography run edge to edge; the words inside them sit
 * in a column down the middle. An earlier version ran EVERYTHING to the glass,
 * which put paragraphs 1900px wide on a desktop monitor. The band is what
 * wants the width, not the sentence.
 *
 * The centring is done with padding rather than a max-width so that a row with
 * two columns in it still splits the way Bootstrap intends.
 */

/* --pcw-half is half of --bs-gutter-x below. Bootstrap pays for its gutters
   with a negative margin on the row, which at full width hangs off both edges
   of the window and gives the page a horizontal scrollbar. The margin is zeroed
   and the half-gutter taken out of the row's own padding instead, so the
   content still lands exactly on the measure. */
.pcw { --pcw-measure: 1200px; --pcw-gutter: clamp(2rem, 5vw, 3.5rem); --pcw-half: 1rem; --pcw-extra: 0px; }

/* ---- Edge to edge ------------------------------------------------------
 *
 * The organizer has asked for the content to reach the glass, not just the
 * bands behind it. Declared after the line above, which it overrides at the
 * same specificity.
 *
 * A CLASS AND NOT A CUSTOM PROPERTY. The measure and the page gutter would
 * travel fine as properties, but the COLUMN gutter has to go to zero here and
 * nowhere else. Bootstrap insets every column by half the row's gutter, and
 * that padding lives inside the row, so clearing the page gutter alone still
 * left a card 12px short of the edge while the sections beside it reached 0.
 * Forcing it through a var() would have rewritten the gutter of every row in
 * CONTAINED mode too, including the g-2 and g-3 rows the ordinary views use.
 * A class is the only honest way to say "only when this is switched on".
 *
 * The price is that two cards sharing a row now meet. That is the deal this
 * setting asks for, and the reason it is a setting.
 */
.pcw.pcw-edge { --pcw-measure: 100%; --pcw-gutter: 0px; }

.pcw.pcw-edge .league-page-blocks > .row,
.pcw.pcw-edge .tournament-page-blocks > .row,
.pcw.pcw-edge .page-body > .container-xl > .row {
    /* Four class selectors, so it outranks Tabler's own g-4, which is
       important but carries one. */
    --bs-gutter-x: 0 !important;
}

.pcw .league-page-blocks > .row,
.pcw .tournament-page-blocks > .row {
    /* Half of whatever gutter the row actually ended up with. Hard-coding it
       put the page blocks four pixels inside the cards on every other page,
       because the g-4 on these rows is 1.5rem and Tabler marks it important. */
    --pcw-half: calc(var(--bs-gutter-x, 1.5rem) / 2);
    --bs-gutter-y: 0;
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-left: max(calc(var(--pcw-gutter) - var(--pcw-half)), calc((100% - var(--pcw-measure)) / 2 - var(--pcw-half)));
    padding-right: max(calc(var(--pcw-gutter) - var(--pcw-half)), calc((100% - var(--pcw-measure)) / 2 - var(--pcw-half)));
    margin: 0 !important;
}

.pcw .league-page-blocks > .row > [class*="col-"],
.pcw .tournament-page-blocks > .row > [class*="col-"] {
    margin-top: 0 !important;
}

/* A block that is its own full-bleed band - a wide hero, a section with a
   background behind it, a strip of photographs - opts out of the column and
   runs to both edges. Its own inner wrapper puts the words back in the middle,
   so the band is wide and the reading is not. */
.pcw .league-page-blocks > .row:has(> [class*="col-"] > .pcw-hero),
.pcw .league-page-blocks > .row:has(> [class*="col-"] > .pcw-section),
.pcw .league-page-blocks > .row:has(> [class*="col-"] > .pcw-strip),
.pcw .tournament-page-blocks > .row:has(> [class*="col-"] > .pcw-hero),
.pcw .tournament-page-blocks > .row:has(> [class*="col-"] > .pcw-section),
.pcw .tournament-page-blocks > .row:has(> [class*="col-"] > .pcw-strip) {
    --bs-gutter-x: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The first row used to have its top padding removed so that a hero block at
   the top of the page sat flush under the menu. A row holding a full-bleed
   band already has no padding at all, and on every other page the first row
   is ordinary content, which was then jammed against the banner. */

/* Everything else on the page - the standings table, the division filters,
   the about and contact panels - is written by the ordinary views, which have
   no idea this design exists. They are the direct children of the container,
   so they go on the measure here and line up with the page blocks above them.
   The hero and the block wrappers are the exceptions that keep the width. */
.pcw .page-body > .container-xl > *:not(.pcs-hero):not(.league-page-blocks):not(.tournament-page-blocks) {
    /* Narrowed rather than padded. Most of these are cards, and padding would
       have put the gutter INSIDE the white panel: the panel still touching
       both edges of the phone with its own contents sitting in from them. */
    width: min(calc(100% - 2 * var(--pcw-gutter) + var(--pcw-extra)),
               calc(var(--pcw-measure) + var(--pcw-extra)));
    margin-left: auto !important;
    margin-right: auto !important;
}

/* A row among those children pays for its own gutters with padding on its
   columns, so it is allowed that much more width or its contents land half a
   gutter inside everything else on the page. Set as a custom property rather
   than as a width: the rule above carries three :not() clauses and would
   otherwise outrank this one. */
.pcw .page-body > .container-xl > .row {
    --pcw-extra: var(--bs-gutter-x, 1.5rem);
}

/* The layout prints its flash messages above the banner, so on a page with
   one the first thing under the menu is an alert rather than the hero. The
   container has no top padding of its own any more, so it would otherwise be
   touching the menu. */
.pcw .page-body > .container-xl > *:first-child:not(.pcs-hero) {
    margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Air under the banner. The page blocks bring their own, so they are left out
   of this or the two would stack. */
.pcw .page-body > .container-xl > .pcs-hero + *:not(.league-page-blocks):not(.tournament-page-blocks) {
    margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

/* Prose gets a tighter measure than the column it sits in. 68rem here was
   about 150 characters to the line, which is roughly twice what anyone reads
   comfortably; 40rem is nearer 80 and is close to what the site this was
   modelled on sets. */
.pcw .pc-text-block {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Type -------------------------------------------------------------- */

.pcw h1, .pcw h2, .pcw h3,
.pcw h4, .pcw h5, .pcw h6,
.pcw .pcw-title {
    font-family: var(--pcw-display);
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--pcw-heading);
    margin: 0 0 .4em;
}

/* TWO SCALES, NOT ONE. The headline on a band can be enormous because it has
   a band to itself; the same size on the card holding the standings table put
   a 72px heading over a 15px table. So the page scale is ordinary, and the
   display sizes are reserved for the hero and for this design's own sections.
   Everything is clamped rather than fixed: the site this was modelled on sets
   135px, which is a horizontal scrollbar on a phone. */
.pcw h1 { font-size: clamp(2rem, 4vw, 3.4rem);     font-weight: 700; line-height: .95; }
.pcw h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.05; }
.pcw h3 { font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 700; line-height: 1.2; }

/* The page builder lets an organizer set a block title to h4 or h5, and those
   were the only headings on the page still in the body face. */
.pcw h4 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.pcw h5 { font-size: 1rem;    font-weight: 700; line-height: 1.3; letter-spacing: .04em; }
.pcw h6 { font-size: .9rem;   font-weight: 700; line-height: 1.3; letter-spacing: .08em; }

.pcw .pcw-title-xl,
.pcw .pcw-hero h1 { font-size: clamp(2.6rem, 7vw, 7.5rem); line-height: .9; }
.pcw .pcw-section h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: .98; }
.pcw .pcw-section h3 { font-size: clamp(1.25rem, 1.7vw, 1.7rem); }

.pcw p, .pcw li {
    font-family: var(--pcw-body);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Tables are read down a column, not along a line, so they keep their own
   tighter rhythm. 1.7 here turned the standings into a list of paragraphs. */
.pcw td, .pcw th { font-family: var(--pcw-body); line-height: 1.45; }

/* The small spaced capitals above every heading on sites of this kind. */
.pcw .pcw-eyebrow {
    font-family: var(--pcw-display);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .8rem;
    color: var(--pcw-accent);
    display: block;
    margin-bottom: .9rem;
}

.pcw .pcw-eyebrow-muted { color: #9ca3af; }

/* ---- Sections ---------------------------------------------------------- */

.pcw-section       { padding: clamp(3rem, 7vw, 6.5rem) 0; }
.pcw-section-tight { padding: clamp(1.5rem, 3vw, 3rem) 0; }
/* The page ground is already light, so the alternate band is the white one. */
.pcw-section-alt   { background: #fff; }
.pcw-section-dark  { background: var(--pcw-primary); color: #fff; }
.pcw-section-dark h1, .pcw-section-dark h2, .pcw-section-dark h3 { color: #fff; }

/* The band around this is full width; this is the column of content inside
   it, on the same measure as everything else on the page. */
.pcw-inner       { max-width: var(--pcw-measure, 1200px); margin: 0 auto; padding: 0 var(--pcw-gutter, 2rem); }
.pcw-inner-tight { max-width: 820px; }

/* ---- Hero -------------------------------------------------------------- */

.pcw-hero {
    position: relative;
    min-height: clamp(420px, 72vh, 820px);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* The photo is a backdrop, not the content. Without this the headline sits on
   whatever happens to be behind it and is unreadable about half the time. */
.pcw-hero::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(17, 24, 39, var(--pcw-overlay, .5));
}

.pcw-hero > * { position: relative; z-index: 1; }
.pcw-hero h1, .pcw-hero .pcw-title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.pcw-hero p { color: rgba(255,255,255,.9); font-size: 1.1rem; }

/* The angled lower edge. Decoration only, so it is a pseudo-element and stays
   out of the accessibility tree. */
.pcw-hero-angled::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: clamp(40px, 6vw, 110px);
    background: var(--pcw-bg, #fff);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* A hero built with the classic Hero Banner block should fill the width here
   too, rather than sitting in the middle with white either side. */
.pcw .league-page-blocks .pc-hero,
.pcw .tournament-page-blocks .pc-hero {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- The page hero ------------------------------------------------------
 *
 * The banner at the top of every league and tournament page is the shared site
 * hero, not a page block, so the wide design has to square it off itself: the
 * rounded corners and the drop shadow read as a card sitting ON the page,
 * which is the opposite of a design whose whole idea is bands that run to the
 * glass.
 */

.pcw .pcs-hero {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.pcw .pcs-hero-inner {
    max-width: var(--pcw-measure, 1200px);
    margin: 0 auto;
    padding-left: var(--pcw-gutter, 2rem);
    padding-right: var(--pcw-gutter, 2rem);
}

/* Without this the display-size h1 below takes the hero's headline too, at a
   size meant for a hero of its own and in the heading colour rather than
   white: a navy headline, far too big for its box, overlapping the season
   above it and the photograph behind it. */
.pcw .pcs-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 1;
    color: #fff;
    letter-spacing: .01em;
}

/* ---- Split feature ----------------------------------------------------- */

.pcw-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.pcw-split img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcw-split-flip .pcw-split-media { order: 2; }

.pcw-arrow-link {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--pcw-display); text-transform: uppercase; letter-spacing: .12em;
    font-size: 1.05rem; text-decoration: none; color: var(--pcw-heading);
    border-top: 2px solid currentColor; padding-top: .9rem; margin-top: 1.6rem;
}
.pcw-arrow-link:hover { color: var(--pcw-accent); }

/* ---- Card grid --------------------------------------------------------- */

.pcw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.pcw-card { text-decoration: none; color: inherit; display: block; }
.pcw-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid #e5e7eb; }
.pcw-card-label {
    border: 1px solid #e5e7eb; border-top: 0; padding: 1rem;
    font-family: var(--pcw-display); text-transform: uppercase; letter-spacing: .08em;
    font-size: 1.05rem; text-align: center; color: var(--pcw-heading);
}
.pcw-card:hover .pcw-card-label { background: var(--pcw-accent); }

/* ---- Photo strip ------------------------------------------------------- */

/* Deliberately edge to edge with no gutter: the band of photographs is the
   point, and a gap turns it into a gallery. */
.pcw-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pcw-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

@media (max-width: 768px) {
    .pcw-split { grid-template-columns: 1fr; }
    .pcw-split-flip .pcw-split-media { order: 0; }
    .pcw-strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}

/* ---- Nav --------------------------------------------------------------- */

.pcw .league-navbar .nav-link,
.pcw .tournament-navbar .nav-link {
    font-family: var(--pcw-display);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
    .pcw * { transition: none !important; animation: none !important; }
}