/* PlayCompete public sub-sites — the default look for a league or tournament.
 *
 * These pages had the platform's admin styling pointed at the public: stacked
 * grey cards, a flat hero, and a definition list of dates squeezed into a third
 * of the width. Correct, and plain enough that an organizer would not send
 * anybody to it.
 *
 * Loaded ONLY by layouts/league and layouts/tournament, so nothing here can
 * reach the admin or the marketing site. Every colour comes from a custom
 * property the page sets from the organizer's own brand colours, so a league
 * that has chosen purple gets a purple site rather than a teal one.
 */

:root {
    --pcs-brand:  #023F50;
    --pcs-accent: #028F97;
    --pcs-ink:    #16232b;
    --pcs-muted:  #64757f;
    --pcs-line:   #e4e9ec;
    --pcs-soft:   #f5f8f9;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.pcs-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
    background: linear-gradient(135deg, var(--pcs-brand) 0%, var(--pcs-accent) 100%);
    color: #fff;
    isolation: isolate;
}

/* The photograph, and a scrim dark enough to read white type on any of them.
   A hero image is whatever the organizer uploaded — a bright midday field, a
   pale sky — so the text cannot depend on the picture being dark. */
.pcs-hero-photo {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
}
.pcs-hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    /* Dark where the words are, then out of the way.
       The type all sits in the left third, so the scrim only has to earn its
       keep there; carrying .30 all the way across muted the photograph across
       the half of the hero that has nothing on it. It now clears to almost
       nothing by the right edge, so the picture actually reads.
       105deg, not 90: the headline's baseline is low in the box, so the dark
       corner needs to lean that way rather than run straight down. */
    background: linear-gradient(105deg,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.66) 26%,
        rgba(0,0,0,.42) 50%,
        rgba(0,0,0,.16) 76%,
        rgba(0,0,0,.04) 100%);
}

/* On a phone the hero is full-bleed and the type runs most of its width, so
   there is no empty right side to clear. Clearing it anyway would put a
   headline over whatever the photograph happens to be — fine on this dirt
   infield, not on somebody's bright sky. Falls back to a gentle top-to-bottom
   wash, which is dark where the words are at any width. */
@media (max-width: 767px) {
    .pcs-hero-scrim {
        background: linear-gradient(180deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.52) 55%,
            rgba(0,0,0,.44) 100%);
    }
}

.pcs-hero-inner {
    padding: 44px 40px;
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}

/* A white tile behind the logo: club badges are usually dark artwork on
   transparency and disappear into a dark hero. */
.pcs-hero-logo {
    background: #fff; border-radius: 16px; padding: 12px;
    width: 104px; height: 104px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.pcs-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pcs-hero-text { flex: 1 1 320px; min-width: 0; }

.pcs-hero h1 {
    color: #fff; font-weight: 800; letter-spacing: -.015em; line-height: 1.08;
    font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0 0 10px;
    text-wrap: balance; overflow-wrap: break-word;
}
.pcs-hero-tagline {
    color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.6vw, 1.2rem);
    margin: 0 0 16px; max-width: 60ch;
}

.pcs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pcs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 999px; padding: 5px 13px;
    font-size: .84rem; font-weight: 600; backdrop-filter: blur(2px);
}
.pcs-chip-live { background: #16a34a; border-color: #16a34a; }
.pcs-chip-open { background: #fff; color: var(--pcs-brand); border-color: #fff; }

.pcs-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pcs-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 1rem;
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.pcs-btn-primary { background: #fff; color: var(--pcs-brand); }
.pcs-btn-primary:hover { background: #f1f5f6; color: var(--pcs-brand); }
.pcs-btn-ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.pcs-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── The facts strip ──────────────────────────────────────────────────────── */

/* Dates, registration, teams — the four things somebody landing here wants,
   across the full width instead of a definition list in a narrow column. */
.pcs-facts {
    display: grid; gap: 1px; background: var(--pcs-line);
    border: 1px solid var(--pcs-line); border-radius: 14px; overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 28px;
}
.pcs-fact { background: #fff; padding: 18px 20px; }
.pcs-fact-label {
    color: var(--pcs-muted); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px;
}
.pcs-fact-value { color: var(--pcs-ink); font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.pcs-fact-note  { color: var(--pcs-muted); font-size: .82rem; margin-top: 2px; }
.pcs-fact-value .pcs-yes { color: #15803d; }
.pcs-fact-value .pcs-no  { color: #9aa5ac; }

/* ── Section headings ─────────────────────────────────────────────────────── */

.pcs-section { margin: 34px 0 16px; display: flex; align-items: baseline; gap: 12px; }
/* The 34px is space BETWEEN sections. On the first one in a column it is space
   above nothing, and it pushed the left column's first heading 34px below the
   sidebar card beside it — which is why Quick Links never lined up with the
   content it sits next to. */
.pcs-section:first-child { margin-top: 0; }
.pcs-section h2 {
    font-size: 1.35rem; font-weight: 800; color: var(--pcs-ink);
    margin: 0; letter-spacing: -.01em;
}
.pcs-section .pcs-section-rule { flex: 1; height: 1px; background: var(--pcs-line); }
.pcs-section a { font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--pcs-accent); }

/* ── Fixtures ─────────────────────────────────────────────────────────────── */

/* A game is a date, two teams and a place. As a table row it read like a
   spreadsheet; this is the shape people expect from a fixture list. */
.pcs-fixtures { border: 1px solid var(--pcs-line); border-radius: 14px; overflow: hidden; background: #fff; }
.pcs-fixture {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 18px; border-bottom: 1px solid var(--pcs-line);
}
.pcs-fixture:last-child { border-bottom: none; }

.pcs-date {
    flex: 0 0 auto; width: 58px; text-align: center;
    border-radius: 10px; background: var(--pcs-soft); padding: 7px 4px;
}
.pcs-date-mon {
    font-size: .68rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--pcs-accent);
}
.pcs-date-day { font-size: 1.35rem; font-weight: 800; color: var(--pcs-ink); line-height: 1.1; }

.pcs-fixture-main { flex: 1 1 auto; min-width: 0; }
.pcs-fixture-teams { font-weight: 700; color: var(--pcs-ink); }
.pcs-fixture-meta  { color: var(--pcs-muted); font-size: .87rem; margin-top: 2px; }
.pcs-fixture-score {
    flex: 0 0 auto; font-weight: 800; font-size: 1.05rem; color: var(--pcs-ink);
    background: var(--pcs-soft); border-radius: 8px; padding: 5px 12px;
}

/* ── Standings ────────────────────────────────────────────────────────────── */

.pcs-table { width: 100%; border-collapse: collapse; background: #fff;
             border: 1px solid var(--pcs-line); border-radius: 14px; overflow: hidden; }
.pcs-table th {
    text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pcs-muted); font-weight: 700; padding: 12px 16px;
    background: var(--pcs-soft); border-bottom: 1px solid var(--pcs-line);
}
.pcs-table td { padding: 12px 16px; border-bottom: 1px solid var(--pcs-line); color: var(--pcs-ink); }
.pcs-table tr:last-child td { border-bottom: none; }
.pcs-table td.pcs-num, .pcs-table th.pcs-num { text-align: right; white-space: nowrap; }

.pcs-pos {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; font-weight: 800; font-size: .82rem;
    background: var(--pcs-soft); color: var(--pcs-muted);
}
/* Only the top three are coloured: a league table where every row is decorated
   tells you nothing at a glance. */
.pcs-pos-1 { background: #fef3c7; color: #92400e; }
.pcs-pos-2 { background: #e5e7eb; color: #374151; }
.pcs-pos-3 { background: #fde4d3; color: #9a3412; }

/* ── Sponsors ─────────────────────────────────────────────────────────────── */

.pcs-sponsors { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pcs-sponsor {
    background: #fff; border: 1px solid var(--pcs-line); border-radius: 12px;
    padding: 14px 18px; display: flex; align-items: center; justify-content: center;
    min-width: 140px; min-height: 74px;
}
.pcs-sponsor img { max-height: 46px; max-width: 160px; object-fit: contain; }
.pcs-sponsor-name { font-weight: 700; color: var(--pcs-ink); }

/* ── Empty states ─────────────────────────────────────────────────────────── */

/* A new league has no games, no standings and no teams. Left as blank space it
   reads as broken; said plainly it reads as "not yet". */
.pcs-empty {
    border: 1px dashed var(--pcs-line); border-radius: 14px; background: #fff;
    padding: 30px 20px; text-align: center; color: var(--pcs-muted);
}

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .pcs-hero-inner { padding: 30px 22px; gap: 18px; }
    .pcs-hero-logo { width: 74px; height: 74px; padding: 9px; }
    .pcs-fixture { gap: 12px; padding: 12px 14px; }
    .pcs-btn { width: 100%; justify-content: center; }
    .pcs-cta { width: 100%; }

    /* Two up rather than one: auto-fit's 170px minimum stacks all four into a
       column on a phone, which pushes the fixtures below a screen and a half
       of dates. */
    .pcs-facts { grid-template-columns: 1fr 1fr; }
    .pcs-fact { padding: 14px 16px; }
    .pcs-fact-value { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Home-page layout: hero detail, fact icons, and the two-column body.

   These bring the default league and tournament home pages up to the same
   shape: a hero that says what and when, a strip of facts with icons, then a
   main column with the season's own content and a sidebar that keeps the one
   action most visitors came to take on screen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero detail ──────────────────────────────────────────────────────────── */

/* The season above the name. It is the thing that changes year to year, so it
   reads as a kicker rather than competing with the league's own title. */
.pcs-hero-eyebrow {
    color: var(--pcs-accent); font-weight: 800; font-size: 1.05rem;
    letter-spacing: .01em; margin: 0 0 2px;
    /* The accent is chosen to sit on white, and some are too dark to read on a
       photograph — this lifts it without changing the organizer's colour. */
    filter: brightness(1.55) saturate(.9);
}
.pcs-hero-sub {
    color: rgba(255,255,255,.9); font-size: 1.02rem; font-weight: 500;
    margin: 0 0 12px;
}

/* Registration state, as a dot and a word rather than a pill — on a photograph
   a row of filled pills gets noisy, and this is the one that matters. */
.pcs-status {
    display: inline-flex; align-items: center; gap: 9px;
    color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 18px;
}
.pcs-status::before {
    content: ''; width: 11px; height: 11px; border-radius: 50%;
    background: #9aa5ac; flex: 0 0 auto;
}
.pcs-status-open::before   { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.pcs-status-closed::before { background: #f87171; }
.pcs-status-soon::before   { background: #fbbf24; }

/* ── Fact icons ───────────────────────────────────────────────────────────── */

.pcs-fact { display: flex; align-items: flex-start; gap: 13px; }
.pcs-fact-icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--pcs-accent) 14%, #fff);
    color: var(--pcs-brand); font-size: 1.05rem; line-height: 1;
}
.pcs-fact-body { min-width: 0; }

/* ── Two-column body ──────────────────────────────────────────────────────── */

.pcs-layout {
    display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
    .pcs-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.pcs-panel {
    background: #fff; border: 1px solid var(--pcs-line);
    border-radius: 14px; padding: 22px 24px; margin-bottom: 20px;
}
.pcs-panel > h2 {
    font-size: 1.3rem; font-weight: 800; color: var(--pcs-ink);
    margin: 0 0 12px; letter-spacing: -.01em;
}
.pcs-panel p { color: var(--pcs-muted); line-height: 1.7; margin: 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

/* The one action most people came for, in the colour the hero uses, so it stays
   findable after they have scrolled past the hero button. */
.pcs-join {
    background: linear-gradient(135deg, var(--pcs-brand) 0%, var(--pcs-accent) 130%);
    color: #fff; border-radius: 14px; padding: 24px; margin-bottom: 20px;
}
.pcs-join-icon {
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 14px;
    background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.pcs-join h3 {
    font-size: 1.05rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; margin: 0 0 8px; color: #fff;
}
.pcs-join p { color: rgba(255,255,255,.88); margin: 0 0 16px; line-height: 1.6; }
.pcs-join .pcs-btn { width: 100%; justify-content: center; }
.pcs-join-note { color: rgba(255,255,255,.7); font-size: .82rem; text-align: center; margin: 10px 0 0; }

.pcs-links {
    background: #fff; border: 1px solid var(--pcs-line);
    border-radius: 14px; overflow: hidden;
}
.pcs-links h3 {
    font-size: 1.05rem; font-weight: 800; color: var(--pcs-ink);
    margin: 0; padding: 18px 20px 12px;
}
.pcs-links a {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 20px; border-top: 1px solid var(--pcs-line);
    color: var(--pcs-ink); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.pcs-links a:hover { background: #f6f9fa; color: var(--pcs-brand); }
.pcs-links a .pcs-links-arrow { margin-left: auto; color: var(--pcs-muted); font-weight: 400; }

/* ══════════════════════════════════════════════════════════════════════════
   Polish pass: generated hero artwork, depth, and a proper type scale.

   What made these pages read as unfinished was not the layout — it was that a
   league without an uploaded photograph got a flat two-colour fill with words
   on it, and every panel below sat at the same visual depth as every other.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Generated hero artwork ───────────────────────────────────────────────── */

.pcs-hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pcs-hero-art svg { width: 100%; height: 100%; display: block; }

/* Depth under the artwork: a flat linear gradient is what read as cheap, so the
   hero gets two soft light sources and a darker corner behind the headline. */
.pcs-hero {
    background:
        radial-gradient(90% 130% at 88% 8%,  color-mix(in srgb, var(--pcs-accent) 78%, #fff) 0%, transparent 60%),
        radial-gradient(70% 110% at 4% 96%,  color-mix(in srgb, var(--pcs-brand) 92%, #000) 0%, transparent 62%),
        linear-gradient(118deg, var(--pcs-brand) 0%, var(--pcs-accent) 100%);
    box-shadow: 0 18px 44px -22px rgba(2, 63, 80, .55);
}

/* Keeps the headline legible over the artwork on narrow screens, where the
   art's own fade no longer clears the text. */
.pcs-hero-inner { position: relative; z-index: 1; padding: 52px 44px; }
@media (max-width: 767px) {
    .pcs-hero-inner { padding: 34px 24px; }
    .pcs-hero-art   { opacity: .55; }
}

.pcs-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.025em; }
.pcs-hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }

/* ── Depth ────────────────────────────────────────────────────────────────── */

/* Content sits above the page, rather than being outlined on it. Hairline
   borders alone made every panel look like a form field. */
.pcs-facts,
.pcs-fixtures,
.pcs-panel,
.pcs-links {
    border-color: color-mix(in srgb, var(--pcs-line) 70%, #fff);
    box-shadow: 0 1px 2px rgba(16, 42, 51, .04), 0 8px 24px -16px rgba(16, 42, 51, .28);
}
.pcs-panel { border-radius: 16px; }

.pcs-join {
    box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--pcs-brand) 70%, transparent);
}

/* The fixture rows earn a hover state — they are links to a game. */
.pcs-fixture { transition: background .12s ease; }
.pcs-fixture:hover { background: #fbfdfd; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.pcs-fact-value { font-size: 1.18rem; letter-spacing: -.01em; }
.pcs-panel > h2 { font-size: 1.45rem; }
.pcs-section h2 { font-size: 1.45rem; }

/* ── Designed empty states ────────────────────────────────────────────────── */

/* "Check back soon" as a bare sentence looked like a page that had failed to
   load. Given a mark and some room, it reads as a section that is waiting. */
.pcs-empty {
    text-align: center; color: var(--pcs-muted);
    padding: 34px 24px; background: #fff;
    border: 1px dashed color-mix(in srgb, var(--pcs-line) 88%, var(--pcs-accent));
    border-radius: 14px;
}
.pcs-empty-mark {
    display: block; font-size: 1.9rem; margin-bottom: 8px; opacity: .5;
}