/* Public club page (/o/{slug}) — a tabbed club hub. Design-system tokens, flat
   blue --accent (this is a public, supporter-facing page, NOT org-context), our
   fonts (Barlow Condensed display + Hanken body). Adapted from the agreed mockup.

   Status colours (open/live/done) are semantic STATE indicators, not per-type
   identity and not interactive, so they stay as literal values. Everything
   interactive uses --accent. Tab/filter <button>s are scoped under a parent class
   so they beat the global button[type=...] element resets (specificity 0,2,0 > 0,1,1). */

:root {
    --hub-line-2: var(--line-soft);   /* hairline softer than --line, for inner dividers/pills */
    --status-open: var(--status-success);
    /* In-play is the amber status family, never red — red is reserved for the single
       conversion action per page (redesign rule). */
    --status-live: var(--status-inplay);
}

/* Club identity (logo + name) now lives in the navbar as a club-branded masthead —
   see _c-navbar.css (.c-navbar__club*). The old .c-club-hero band was removed so
   identity isn't rendered twice. */

/* The "powered by Bluefundr" co-brand cue is now the shared compact footer
   (public/fragments/footer :: compact), rendered by the layout via footerVariant=compact,
   so this page no longer needs a bespoke .c-club-poweredby line. */

/* ===== HUB SHELL ===== */
.c-club-hub {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 18px;
}

@media (min-width: 760px) {
    .c-club-hub {
        padding: 0 26px;
    }
}

/* ===== TAB NAV — underline tabs (redesign) =====
   Active = navy 700 + a 3px navy underline on a hairline track. Sticky under the
   club-branded navbar; the row scrolls horizontally on narrow viewports. Buttons
   are parent-scoped so they beat the global button[type=...] element resets. */
.c-hub-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    padding: 10px 0 0;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.c-hub-nav__seg {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.c-hub-nav__seg::-webkit-scrollbar {
    display: none;
}

/* Equal-width, centred tabs spanning the content column (reference frames 1b–1e). */
.c-hub-nav__seg .c-hub-tab {
    flex: 1;
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--body);
    padding: 12px 6px;
    border-radius: 0;              /* underline must stay straight — a global button radius curved it */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.c-hub-nav__seg .c-hub-tab:hover {
    color: var(--ink);
}

.c-hub-nav__seg .c-hub-tab[aria-selected="true"] {
    color: var(--accent);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

.c-hub-tab__ic {
    display: flex;
}

.c-hub-tab__ic svg {
    width: 18px;
    height: 18px;
    display: block;
}

.c-hub-tab__count {
    font-size: var(--font-size-sm);
    font-weight: 700;
    opacity: 0.7;
}

@media (max-width: 559px) {
    .c-hub-nav__seg {
        gap: 20px;
    }
    .c-hub-tab__ic svg {
        width: 17px;
        height: 17px;
    }
}

/* ===== HUB BODY / PANELS ===== */
.c-hub-body {
    padding: 22px 0 44px;
}

@media (min-width: 760px) {
    .c-hub-body {
        padding: 20px 0 60px;
    }
}

/* Single-product club (no tab bar): restore the top breathing room the sticky
   nav normally supplies, so content doesn't jam against the club masthead. */
.c-hub-body--solo {
    padding-top: 40px;
}

@media (min-width: 760px) {
    .c-hub-body--solo {
        padding-top: 44px;
    }
}

.c-hub-panel[hidden] {
    display: none;
}

.c-hub-phead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.c-hub-phead__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.c-hub-phead__sub {
    color: var(--muted);
    font-size: var(--font-size-sm);
    margin: 3px 0 0;
}

/* ===== FILTER (flat text toggle) ===== */
.c-hub-filter {
    display: inline-flex;
    gap: 18px;
}

.c-hub-filter .c-hub-filter__btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--muted);
    padding: 4px 0;
    transition: color 0.14s ease;
}

.c-hub-filter .c-hub-filter__btn:hover {
    color: var(--ink);
}

.c-hub-filter .c-hub-filter__btn[aria-pressed="true"] {
    color: var(--ink);
}

/* ===== PROOF STATS (flat hairline tiles) ===== */
.c-hub-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.c-hub-proof__stat {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 10px;
    text-align: center;
}

.c-hub-proof__num {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-2xl);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.c-hub-proof__label {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ===== GRIDS ===== */
.c-comp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 560px) {
    .c-comp-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 920px) {
    .c-comp-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c-mem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 560px) {
    .c-mem-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* The competition card (.c-comp*) now lives in the shared component file
   06-components/_c-comp-card.css so the homepage and this page stay in sync.
   The .c-comp-grid layout object above stays here (org-page specific). */

/* ===== MEMBERSHIP CARD (flat, real facts) ===== */
.c-mem {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 21px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.14s ease;
}

.c-mem:hover {
    border-color: var(--line-strong);
}

.c-mem__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.c-mem__tier {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--ink);
}

.c-mem__season {
    font-size: var(--font-size-2xs); /* pill micro-label: 12px even though sentence-case */
    font-weight: 600;
    color: var(--muted);
    background: var(--hub-line-2);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.c-mem__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 16px 0 2px;
}

.c-mem__price b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--ink);
}

.c-mem__price span {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.c-mem__instal {
    color: var(--body);
    font-size: var(--font-size-xs);
}

/* Quiet per-plan deadline — plain muted line (no checkmark: the ✓ fact list is
   a redesign anti-pattern). Hairline top divider separates it from the price. */
.c-mem__payby {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hub-line-2);
    font-size: var(--font-size-xs);
    color: var(--muted);
}

.c-mem__facts {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--hub-line-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.c-mem__facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--body);
}

.c-mem__tick {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}

.c-mem__tick svg {
    display: block;
}

.c-mem__cta {
    margin-top: 18px;
}

/* Payment trust cue under the Join button — quiet, muted, lock icon. */
.c-mem__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 12px 0 0;
    font-size: var(--font-size-2xs);
    color: var(--muted);
}

.c-mem__secure svg {
    flex: none;
}

/* ===== SHARED FLAT BUTTONS (anchors — unaffected by global button resets) ===== */
.c-hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--r-sm);
    padding: 12px 18px;
    text-decoration: none;
    transition: background 0.14s ease;
}

.c-hub-btn svg {
    display: block;
    transition: transform 0.18s ease;
}

.c-hub-btn:hover svg {
    transform: translateX(2px);
}

.c-hub-btn--block {
    width: 100%;
}

.c-hub-btn--primary {
    background: var(--accent);
    color: var(--card);
}

.c-hub-btn--primary:hover,
.c-hub-btn--primary:focus-visible {
    background: var(--accent-strong);
    color: var(--card);
    text-decoration: none;
}

.c-hub-btn--soft {
    background: var(--accent-soft);
    color: var(--accent);
}

.c-hub-btn--soft:hover,
.c-hub-btn--soft:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
}

/* ===== EMPTY / LOADING STATES ===== */
.c-hub-empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 44px 26px;
    text-align: center;
}

.c-hub-empty__ic {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}

.c-hub-empty__ic svg {
    display: block;
}

.c-hub-empty__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--ink);
    margin: 0;
}

.c-hub-empty__text {
    color: var(--muted);
    font-size: var(--font-size-sm);
    margin: 7px auto 0;
    max-width: 42ch;
}

.c-hub-empty .c-hub-btn {
    margin-top: 18px;
}

.c-hub-loading {
    color: var(--muted);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 36px 0;
}

/* ===== CONTACT (always-visible below the hub) ===== */
.c-hub-contact {
    margin-top: 24px;
}

/* Flatten + downscale the shared contact CTA to the club page (the fragment ships a gradient
   card + radial glow + gradient icon + dark pill button — too loud, and it's only a secondary
   action). Page-scoped overrides; the shared fragment is untouched. Compact flat card, small
   accent-soft icon, and a GHOST button so it never competes with the primary Join CTA. */
.c-hub-contact .contact-card {
    margin-bottom: 0;
}

.c-hub-contact .contact-card__inner {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    gap: 10px;
}

.c-hub-contact .contact-card__inner:hover {
    border-color: var(--line);
    box-shadow: none;
}

.c-hub-contact .contact-card__glow {
    display: none;
}

/* Minimal: drop the decorative icon entirely so this reads as a quiet secondary prompt,
   not a card competing with the lotto/join content above it. */
.c-hub-contact .contact-card__icon {
    display: none;
}

.c-hub-contact .contact-card__content {
    gap: 0;
}

.c-hub-contact .contact-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.c-hub-contact .contact-card__desc {
    font-size: var(--font-size-sm);
    color: var(--muted);
}

/* Secondary ghost: white, hairline border, accent text — clearly actionable but never
   reads as the primary action (Join stays the only filled blue button). */
.c-hub-contact button.contact-card__btn {
    background: var(--card) !important;
    color: var(--accent) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    padding: 9px 16px !important;
    font-size: var(--font-size-sm) !important;
    /* don't stretch in the column flex — a compact action, not a full-width bar */
    align-self: flex-start;
    width: auto;
}

.c-hub-contact button.contact-card__btn:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent-soft) !important;
    box-shadow: none;
    transform: none;
}

.c-hub-contact button.contact-card__btn svg {
    width: 16px;
    height: 16px;
}

/* ===== NOT-FOUND / USER PLACEHOLDER ===== */
.c-org-notfound {
    max-width: 500px;
    margin: 80px auto;
    padding: 0 24px;
}

/* ===== LOTTO LAUNCH =====
   The "you're live" banner (post-publish, one-time) lives further down (.c-lotto-live). The
   persistent share control moved into the play fragment's heading row (.c-lotto__share-btn in
   _c-lotto-play-page.css) - it used to be a separate "Club lotto" row here, which doubled the
   header now that the fragment carries its own heading. */

/* ===== MEMBERSHIP SHARE HEADER =====
   Section header for the membership panel: the "Membership" title + intro on the left, the persistent
   share control on the right (mirrors .c-lotto-share). Same flat --accent rules and the same button
   scoping so it beats the global button[type=...] element resets (0,2,0 > 0,1,1). */
.c-mem-share {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.c-mem-share__head {
    min-width: 0;
}

.c-mem-share__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.c-mem-share__sub {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
}

.c-mem-share .c-mem-share__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--accent);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.c-mem-share .c-mem-share__btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    /* Pin the accent text on hover, same reason as .c-lotto-share__btn:hover above. */
    color: var(--accent);
}

/* One-time "your lotto is live" banner. */
.c-lotto-live {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 16px;
    padding: 12px 44px 12px 14px; /* right pad leaves room for the absolute dismiss */
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
}

.c-lotto-live__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card);
    color: var(--accent);
}

.c-lotto-live__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.c-lotto-live__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.c-lotto-live__sub {
    font-size: 13px;
    color: var(--body);
}

.c-lotto-live .c-lotto-live__copy {
    flex: 1 1 100%;          /* mobile: drops to its own full-width row */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: var(--accent);
    color: white;
    border-radius: var(--r-sm);
    padding: 9px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.c-lotto-live .c-lotto-live__copy:hover {
    background: var(--accent-strong);
    /* Pin white text on hover: the global button[type="button"]:hover (0,2,1) sets
       color:var(--color-primary-700) and would otherwise beat the base rule (0,2,0),
       turning the label dark-blue on the blue fill. */
    color: white;
}

.c-lotto-live .c-lotto-live__dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.c-lotto-live .c-lotto-live__dismiss:hover {
    color: var(--ink);
}

@media (min-width: 560px) {
    .c-lotto-live .c-lotto-live__copy {
        flex: 0 0 auto;      /* desktop: sits inline on the same row */
    }
}