/* ============================================================================
   public-site.css — styling for the /c/{slug}/* public surface.
   Kept deliberately small in this slice (no block-builder themes yet). The
   admin shell uses admin.css and lives in a separate namespace so a tenant
   theme on the public side never bleeds into the management UI.
   ============================================================================ */

:root {
    --public-accent: var(--rz-primary);
}

/* ===== Links =====
   Browser-default :visited purple and :link blue both read poorly on the dark theme.
   Anchor all states to the public surface's accent so visited vs unvisited stay legible
   regardless of which tenant accent the club is using. */

.public-site a,
.public-site a:link,
.public-site a:visited {
    color: var(--public-accent);
    text-decoration-color: color-mix(in srgb, var(--public-accent) 50%, transparent);
}

.public-site a:hover,
.public-site a:focus {
    color: color-mix(in srgb, var(--public-accent) 75%, white);
    text-decoration-color: currentColor;
}

.public-site a:active {
    color: var(--public-accent);
}

.public-site {
    min-height: 100vh;
    background: var(--rz-base-100);
    display: flex;
    flex-direction: column;
}

.public-site__body {
    flex: 1;
}

.public-site__footer {
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--rz-base-300);
    color: var(--rz-text-secondary-color);
}

/* ===== Public announcements grid =====
   Card layout for the News strip on /c/{slug}. Each card links through to the public
   detail page; hover lifts and tints with --public-accent so the cards read as the
   primary interactive element on the page. */

.public-announcements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.public-announcement-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-100);
    text-decoration: none;
    color: inherit;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.public-announcement-card:hover,
.public-announcement-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--public-accent) 45%, transparent);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--public-accent) 30%, transparent);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.public-announcement-card__meta {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--public-accent);
}

.public-announcement-card__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--rz-text-color);
}

.public-announcement-card__preview {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.public-announcement-card__author {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    border-top: 1px solid color-mix(in srgb, var(--rz-base-300) 60%, transparent);
}

/* ===== Branded header ===== */

.public-site-header {
    border-bottom: 1px solid var(--rz-base-300);
    background: color-mix(in srgb, var(--public-accent) 8%, var(--rz-base-100));
    padding: 1rem 0;
}

.public-site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.public-site-header__brand img,
.public-site-header__brand-logo {
    height: 44px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}

/* ===== CSS-only logo mark =====
   44x44 ink square stamped with the club's first letter in display type. A small
   red flag is clipped to the top-right corner via ::after. Used when the club has
   no LogoImagePath — gives any club a designed brand presence out of the box. */

.public-site-header__brand-mark {
    width: 44px;
    height: 44px;
    background: #0E1216;
    color: #F4F1EA;
    display: grid;
    place-items: center;
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    letter-spacing: -1px;
    position: relative;
    flex-shrink: 0;
}

.public-site-header__brand-mark::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #D8232A;
}

/* Brand text wrapper so name + tail + tagline stack as a single column next to the mark. */
.public-site-header__brand-text {
    line-height: 1;
}

/* Tail line — words 3+ of a long club name. Smaller and muted under the primary wordmark. */
.public-site-header__brand-tail {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.1;
    margin-top: 2px;
}

.public-site-header__brand-name {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
}

.public-site-header__brand-tagline {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.1;
}

.public-site-header__nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.public-site-header__nav a {
    color: var(--rz-text-color);
    text-decoration: none;
    font-size: 0.95rem;
}

.public-site-header__nav a:hover {
    color: var(--public-accent);
}

/* ===== Hero ===== */

.public-site-hero {
    position: relative;
    padding: 4rem 1rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    min-height: 280px;
}

/* Split mode lays the hero out two-column and runs the headline taller-than-wide so
   the type stacks vertically the way the mockup does ("PLAY HARD." / "PLAY-" / "TOGETHER.")
   without admins having to hand-author line breaks. */
.public-site-hero--split .public-site-hero__heading {
    max-width: 11ch;
}

.public-site-hero--with-image {
    color: #fff;
}

.public-site-hero--with-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.public-site-hero__content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.public-site-hero__heading {
    font-size: 2.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.public-site-hero__subheading {
    font-size: 1.15rem;
    margin: 0;
    opacity: 0.92;
}

/* ===== Hero CTA =====
   Rendered when Block.CtaText is set. Themes can override the button surface and the
   icon size; the base treatment is a pill with an arrow trailing the label.

   Scoped under .public-site so the rules win against the universal
   `.public-site a` link colour (specificity 0,1,1) — otherwise the CTA's white-on-red
   label collapses to red-on-red and reads invisible. */

.public-site .public-site-hero__cta,
.public-site .public-site-hero__cta:link,
.public-site .public-site-hero__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.7rem 1.2rem;
    background: var(--public-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: filter 120ms ease, transform 120ms ease;
}

.public-site .public-site-hero__cta:hover,
.public-site .public-site-hero__cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.public-site-hero__cta .material-icons {
    font-size: 1.1em;
}

/* ===== Section intro body + CTA =====
   Optional paragraph and link rendered above the items in multi-item blocks (Values
   Pillars, Locations, …). Lets a section open with a sentence of framing copy and a
   "see all" or "find on map" call-to-action without dedicating a separate block to it. */

.public-site-section__intro {
    margin: 0 0 1rem 0;
    color: var(--rz-text-secondary-color);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 60ch;
    white-space: pre-wrap;
}

.public-site-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 1.5rem 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--public-accent);
    border-radius: 999px;
    color: var(--public-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 120ms ease, color 120ms ease;
}

.public-site-section__cta:hover,
.public-site-section__cta:focus-visible {
    background: var(--public-accent);
    color: #fff;
    text-decoration: none;
}

.public-site-section__cta .material-icons {
    font-size: 1em;
}

/* ===== Hero split layout =====
   Activated via Block.ContentJson layout="split-event". Two-column grid with the tagline
   on the left and an auto-rendered next-upcoming-event card on the right. Collapses to a
   single column at narrow widths so the side panel doesn't squeeze the headline. */

.public-site-hero--split {
    text-align: left;
}

.public-site-hero__split {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (max-width: 860px) {
    .public-site-hero__split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.public-hero-event {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
    background-size: cover;
    background-position: center;
    min-height: 200px;
    align-items: end;
    position: relative;
    overflow: hidden;
}

.public-hero-event--with-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
    z-index: 0;
}

.public-hero-event > * {
    position: relative;
    z-index: 1;
}

.public-hero-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}

.public-hero-event__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--public-accent);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    min-width: 72px;
    line-height: 1;
}

.public-hero-event__chip-month {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.public-hero-event__chip-day {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 0.25rem;
}

.public-hero-event__copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.public-hero-event__kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--public-accent);
}

.public-hero-event__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    word-wrap: break-word;
}

.public-hero-event__meta {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ===== Hero split fallback panel =====
   Shown on the right when split mode is on but there's no upcoming event. Renders the
   first available feature image (Site.HeroImagePath then Club.LogoImagePath). The empty
   variant is a flat accent-colored block — a clear visual placeholder that nudges the
   admin to upload a hero image or wait for events. */

.public-hero-feature {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    min-height: 200px;
    /* Aspect-ratio + max-height keep the panel reading as a poster-sized card rather than
       stretching to match the headline's full height. The left column's tall display type
       can grow without forcing the placeholder into a giant void. */
    aspect-ratio: 4 / 5;
    max-height: 360px;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 280px;
}

.public-hero-feature--empty {
    background-color: var(--public-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.public-hero-feature__stamp {
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ===== Section wrapper ===== */

.public-site-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.public-site-section__title {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid color-mix(in srgb, var(--public-accent) 35%, transparent);
    padding-bottom: 0.5rem;
}

/* ===== Section eyebrow =====
   Short red bar + small mono uppercase kicker that sits above a section title.
   Pure presentational — themes can override colour or sizing without touching
   the renderer. */

.public-site-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.public-site-section__eyebrow-bar {
    width: 56px;
    height: 3px;
    background: var(--public-accent);
    flex-shrink: 0;
}

.public-site-section__eyebrow-text {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--public-accent);
    font-weight: 700;
}

.public-site-section__body {
    font-size: 1.05rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ===== Contact card ===== */

.public-contact-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.public-contact-card__item {
    padding: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-100);
}

.public-contact-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.25rem;
}

.public-contact-card__value {
    font-size: 1rem;
    word-break: break-word;
}

.public-contact-card__value a {
    color: var(--public-accent);
    text-decoration: none;
}

/* ===== Event cards ===== */

.public-event-card {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 1.25rem;
    background: var(--rz-base-100);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.public-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.25);
}

.public-event-card__title {
    margin: 0 0 0.4rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.public-event-card__title a {
    color: inherit;
    text-decoration: none;
}

.public-event-card__title a:hover {
    color: var(--public-accent);
}

.public-event-card__meta {
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.5rem;
}

.public-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ===== Draft preview banner =====
   Shown to ClubAdmins viewing /c/{slug} when IsPublished=false. Anonymous visitors
   never see this — they get a 404 instead. Sticky so it stays visible as the admin
   scrolls a long page. */

.public-site-draft-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #7c2d12;
    color: #fff;
    padding: 0.6rem 1rem;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.9rem;
}

/* ===== Utility strip =====
   Optional black bar above the main header. Default theme hides it; themes opt in
   by un-hiding via display rules under their own scope. */

.public-site-util {
    display: none;
}

.public-site-util__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    gap: 28px;
    align-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.public-site-util__live {
    color: #1FA9D6;
}

.public-site-util__item {
    color: inherit;
    text-decoration: none;
}

.public-site-util__item:hover {
    text-decoration: underline;
}

.public-site-util__spacer {
    margin-left: auto;
    display: flex;
    gap: 20px;
}

/* ===== Photo placeholders =====
   Diagonal-stripe surfaces driven by repeating-linear-gradient. Three tones via
   modifier classes; aspect-ratio modifiers keep the boxes consistent across pages.
   Themes can swap stripes for real imagery via background-image overrides. */

.public-hero-photo {
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #0E1216 0 14px, #1c1a17 14px 28px);
    color: #F4F1EA;
    aspect-ratio: 16 / 9;
}

.public-hero-photo--red {
    background: repeating-linear-gradient(135deg, #D8232A 0 14px,
                color-mix(in srgb, #D8232A 88%, black) 14px 28px);
}

.public-hero-photo--paper {
    background: repeating-linear-gradient(135deg, #F4F1EA 0 14px,
                color-mix(in srgb, #F4F1EA 94%, black) 14px 28px);
    color: #0E1216;
}

.public-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 70%, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
}

/* ===== Hero stack — multi-layer poster on the right of split-mode hero =====
   Decorative photo placeholders plus optional event-driven badge + card overlays.
   Layout: positioning context with specific layer placements; collapses to a
   simpler stack on narrow viewports. */

.public-hero-stack {
    position: relative;
    height: 580px;
    align-self: stretch;
}

.public-hero-stack__photo-large {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 520px;
    aspect-ratio: auto;
}

.public-hero-stack__photo-small {
    position: absolute;
    left: 0;
    top: 220px;
    width: 280px;
    max-width: 80%;
    aspect-ratio: 4 / 5;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.public-hero-stack__badge {
    position: absolute;
    right: -8px;
    bottom: 24px;
    background: var(--public-accent);
    color: #fff;
    padding: 20px 24px;
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.public-hero-stack__badge--empty {
    pointer-events: none;
}

.public-hero-stack__badge-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 6px;
}

.public-hero-stack__badge-num {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 92px;
    line-height: 0.85;
    letter-spacing: -1px;
}

.public-hero-stack__badge-foot {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-top: 8px;
}

.public-hero-stack__card {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    color: #0E1216;
    border: 1px solid #0E1216;
    border-top: 4px solid #1FA9D6;
    padding: 16px 18px;
    width: 220px;
    text-decoration: none;
    display: block;
}

.public-hero-stack__card-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6B7480;
}

.public-hero-stack__card-title {
    font-family: 'Anton', sans-serif;
    font-size: 32px;
    line-height: 1;
    margin: 10px 0 0;
    letter-spacing: 0.5px;
}

.public-hero-stack__card-sub {
    margin: 8px 0 0;
    font-size: 13px;
    color: #6B7480;
}

@media (max-width: 860px) {
    .public-hero-stack {
        height: auto;
        display: grid;
        gap: 16px;
    }
    .public-hero-stack__photo-large,
    .public-hero-stack__photo-small,
    .public-hero-stack__badge,
    .public-hero-stack__card {
        position: static;
        width: auto;
        height: auto;
    }
    .public-hero-stack__photo-large {
        aspect-ratio: 16 / 10;
    }
}

/* ===== Block-driven shell ===== */

.public-site-shell {
    display: flex;
    flex-direction: column;
}

.public-site-shell__blocks {
    display: flex;
    flex-direction: column;
}

.public-site-shell__body {
    padding: 2rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* ===== Section lede ===== */

.public-site-section__lede {
    font-size: 1.05rem;
    color: var(--rz-text-secondary-color);
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

/* ===== Text + image block ===== */

.public-site-text-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

@media (max-width: 720px) {
    .public-site-text-image {
        grid-template-columns: 1fr;
    }
}

.public-site-text-image__img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.public-site-text-image__lede {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
    color: var(--rz-text-color);
}

/* ===== Bento grid ===== */

.public-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.public-bento__tile {
    padding: 1.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.public-bento__icon {
    font-size: 1.75rem;
    color: var(--public-accent);
}

.public-bento__heading {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.public-bento__body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

/* ===== Gallery grid ===== */

.public-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.public-gallery__tile {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-300);
}

.public-gallery__tile img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.public-gallery__caption {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-100);
}

/* ===== Slideshow (static stack v1) ===== */

.public-slideshow {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.public-slideshow__slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
}

@media (max-width: 720px) {
    .public-slideshow__slide {
        grid-template-columns: 1fr;
    }
}

.public-slideshow__img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.public-slideshow__heading {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.public-slideshow__body {
    margin: 0;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

/* ===== Newsletter signup ===== */

.public-newsletter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.public-newsletter__input {
    flex: 1 1 240px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}

.public-newsletter__input:focus {
    outline: 2px solid color-mix(in srgb, var(--public-accent) 60%, transparent);
    outline-offset: 1px;
    border-color: var(--public-accent);
}

.public-newsletter__submit {
    appearance: none;
    background: var(--public-accent);
    color: #fff;
    border: 0;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.public-newsletter__submit:hover {
    filter: brightness(1.05);
}

/* ===== Teams list ===== */

.public-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.public-teams-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.public-teams-card__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.public-teams-card__meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--public-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.public-teams-card__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

/* ===== Public teams page (per-team sections) =====
   The /c/{slug}/teams route renders one section per active team with its own buckets
   (Tryouts, Upcoming matches, Recent results, Tournaments). Reuses .public-event-card
   and .public-event-grid so the cards match the Events page; only the per-team header
   chrome and bucket separators are new. */

.public-team-section + .public-team-section {
    border-top: 1px solid var(--rz-base-300);
}

.public-team-section__head {
    margin-bottom: 1rem;
}

.public-team-section__title {
    margin-bottom: 0.4rem;
}

.public-team-section__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.public-team-section__desc {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 70ch;
}

.public-team-bucket + .public-team-bucket {
    margin-top: 1.25rem;
}

.public-team-bucket__title {
    margin: 0 0 0.6rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

/* ===== Marquee ribbon =====
   Pure-CSS scroller. The track is wider than the container; we translate it leftward in a
   linear loop. Duplicated items inline (8 copies) keep the loop seamless even at slow speeds.
   `prefers-reduced-motion` honoured so motion-sensitive readers see a static strip. */

.public-marquee {
    background: var(--public-accent);
    color: #fff;
    overflow: hidden;
    padding: 0.75rem 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.public-marquee__track {
    display: inline-flex;
    gap: 1.5rem;
    animation: marquee-scroll 30s linear infinite;
    will-change: transform;
}

.public-marquee__item,
.public-marquee__dot {
    display: inline-block;
    font-size: 1rem;
}

.public-marquee__dot {
    opacity: 0.6;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .public-marquee__track {
        animation: none;
    }
}

/* ===== Values pillars =====
   Big anchor letter + name + paragraph per row. Generic theme keeps it neutral; loud
   typography lands in theme-kinetic-sport.css. */

.public-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.public-pillars__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.public-pillars__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.public-pillars__letter {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--public-accent);
    text-align: center;
}

.public-pillars__name {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.public-pillars__body {
    margin: 0;
    line-height: 1.55;
    color: var(--rz-text-secondary-color);
}

@media (max-width: 540px) {
    .public-pillars__row {
        grid-template-columns: 56px 1fr;
        gap: 1rem;
    }
    .public-pillars__letter {
        font-size: 3rem;
    }
}

/* ===== Weekday schedule cards ===== */

.public-weekday-grid {
    /* Min of 140px so a typical Mon–Fri schedule fits in one row at desktop widths
       and only wraps on narrow phones. minmax(0,…) lets cards shrink past their
       intrinsic content width when squeezed. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.public-weekday-card {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.public-weekday-card__day {
    background: var(--public-accent);
    color: #fff;
    padding: 0.75rem 1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.1rem;
}

.public-weekday-card__time {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-weight: 600;
    text-align: center;
    color: var(--rz-text-color);
}

.public-weekday-card__title {
    margin: 0;
    padding: 0.25rem 1rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rz-text-color);
}

.public-weekday-card__details {
    margin: 0;
    padding: 0.25rem 1rem 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
}

.public-weekday-card__cta {
    display: block;
    text-align: center;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--public-accent);
    font-weight: 600;
    border-top: 1px solid var(--rz-base-300);
    margin-top: auto;
}

.public-weekday-card__cta:hover {
    background: color-mix(in srgb, var(--public-accent) 10%, transparent);
}

/* ===== Locations =====
   Numbered list of club facilities (gyms, fields, courts). Each row hangs off a big "01" /
   "02" / "03" anchor on the left. Generic theme keeps the anchors muted; theme-kinetic-sport
   turns them into oversized display type. */

.public-locations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.public-locations__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rz-base-300);
}

.public-locations__row:last-child {
    border-bottom: 0;
}

.public-locations__index {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--public-accent);
}

.public-locations__name {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.public-locations__address {
    margin: 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.95rem;
    line-height: 1.5;
}

.public-locations__notes {
    margin: 0.25rem 0 0 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    font-style: italic;
}

/* "Role" label above the facility name — tiny uppercase mono kicker. */
.public-locations__role {
    margin: 0 0 0.5rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rz-text-secondary-color);
}

/* Actions column — outlined Directions button + small Map link. */
.public-locations__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.public-locations__directions {
    color: inherit;
    border: 1.5px solid currentColor;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    text-align: center;
}

.public-locations__directions:hover {
    background: currentColor;
}

.public-locations__directions:hover * {
    color: var(--rz-base-100);
}

.public-locations__map {
    color: var(--public-accent);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}

.public-locations__map:hover {
    text-decoration: underline;
}

/* Meta wrappers — let themes pull the heading/lede/intro/cta into a sticky left
   column alongside the items. Default rendering is just a block-flow container so
   the visuals are unchanged for themes that don't opt in. */
.public-pillars-meta,
.public-locations-meta,
.public-contact-card-meta {
    display: contents;
}

/* ===== Contact section =====
   Default rendering keeps the items grid as-is. Themes can opt into the giant
   background letter via the bg span; default theme leaves it hidden. */

.public-contact-section {
    position: relative;
}

.public-contact-section__bg {
    display: none;
}

.public-contact-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--public-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
}

.public-contact-card__cta:hover {
    filter: brightness(1.05);
    color: #fff;
}

@media (max-width: 540px) {
    .public-locations__row {
        grid-template-columns: 56px 1fr;
        gap: 1rem;
    }
    .public-locations__index {
        font-size: 2rem;
    }
}

/* ===== Events block "see all" CTA ===== */

.public-events-cta {
    margin: 1.25rem 0 0 0;
    text-align: right;
}

.public-events-cta a {
    font-weight: 500;
}

/* ===== LocalTime "in your time" hint ===== */

.local-time__hint {
    color: var(--rz-text-secondary-color);
    font-size: 0.9em;
    font-style: italic;
}

/* ===== Event detail + registration form ===== */

.public-event-detail {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.public-event-detail__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.25rem 0 0 0;
    line-height: 1.15;
}

.public-event-detail__meta {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rz-text-color);
}

.public-event-detail__meta > div + div {
    margin-top: 0.25rem;
}

.public-event-detail__description {
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    padding: 1rem;
    border-left: 3px solid color-mix(in srgb, var(--public-accent) 50%, transparent);
    background: var(--rz-base-100);
}

.public-event-detail__hint {
    color: var(--rz-text-secondary-color);
    margin: 0;
    font-size: 0.95rem;
}

.public-event-detail__register {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rz-base-300);
}

.public-event-detail__register h2 {
    margin: 0 0 1rem 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.public-event-register-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.public-event-register-options__btn {
    appearance: none;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    text-decoration: none;
    padding: 0.55rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.public-event-register-options__btn.is-active {
    background: var(--public-accent);
    border-color: var(--public-accent);
    color: #fff;
}

.public-event-register-options__btn:hover:not(.is-active) {
    border-color: var(--public-accent);
}

.public-event-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-100);
}

.public-event-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
}

.public-event-form input,
.public-event-form textarea {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--rz-text-color);
}

.public-event-form input:focus,
.public-event-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--public-accent) 60%, transparent);
    outline-offset: 1px;
    border-color: var(--public-accent);
}

.public-event-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.public-event-form__required {
    color: var(--rz-danger);
}

.public-event-form__submit {
    align-self: flex-start;
    appearance: none;
    background: var(--public-accent);
    color: #fff;
    border: 0;
    padding: 0.65rem 1.2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.public-event-form__submit:hover {
    filter: brightness(1.05);
}

/* ===== Thanks page ===== */

.public-event-thanks {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
}

.public-event-thanks h1 {
    margin: 0;
    font-size: 1.75rem;
}

.public-event-thanks p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}