/* ════════════════════════════════════════════════════════════
   Community Hub & Business Directory — community.css
   Loaded on /community, /community/businesses, /community/businesses/{slug},
   and /account/business via <HeadContent>.

   All values come from the canonical tokens defined by ThemeService
   (per /ui-rules.md). No hard-coded colors, radii, or shadows.
   ════════════════════════════════════════════════════════════ */

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

.biz-empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-muted);
}

.biz-empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}

.biz-empty-title {
    font-size: var(--text-card-title-size);
    font-weight: var(--text-card-title-weight);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.biz-empty-subtitle {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-5);
}

/* ── Eligibility card (XP progress) ──────────────────────── */

.biz-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.biz-card-icon {
    font-size: 2rem;
    margin-bottom: var(--space-3);
}

.biz-card-title {
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    margin: 0 0 var(--space-2);
}

.biz-card-subtitle {
    font-size: var(--text-body-size);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
    margin: 0 0 var(--space-5);
}

.biz-xp-progress {
    width: 100%;
    height: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.biz-xp-bar {
    height: 100%;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.biz-xp-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.biz-tips {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

.biz-tips-heading {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
}

.biz-tips-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.biz-tips-list li {
    margin-bottom: var(--space-1);
}

/* ── Status banners ──────────────────────────────────────── */

.biz-banner {
    border: 1px solid;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.biz-banner a {
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.biz-banner-info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

.biz-banner-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.biz-banner-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

/* ── Form fields ─────────────────────────────────────────── */

.biz-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
    color: var(--color-input-label);
}

.biz-input {
    width: 100%;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-family-base);
    font-size: var(--text-body-size);
    line-height: var(--line-height-normal);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.biz-input::placeholder { color: var(--color-input-placeholder); }

.biz-input:focus {
    outline: none;
    border-color: var(--color-input-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.biz-help {
    color: var(--color-input-help-text);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.biz-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 600px) {
    .biz-row { grid-template-columns: 1fr; }
}

/* ── Address fieldset ────────────────────────────────────── */

.biz-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: 0;
}

.biz-legend {
    padding: 0 var(--space-2);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.biz-legend-hint {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

/* ── Image upload rows ───────────────────────────────────── */

.biz-image-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

.biz-image-controls {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.biz-image-thumb {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.biz-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.biz-image-thumb-logo {
    width: 120px;
    height: 120px;
}

.biz-image-thumb-banner {
    width: 240px;
    height: 80px;
}

.biz-image-thumb-empty {
    color: var(--color-text-subtle);
    font-size: var(--font-size-xs);
    text-align: center;
    padding: var(--space-2);
}

/* ── Visibility toggle row ───────────────────────────────── */

.biz-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Toggle switch (CSS-only, no JS) */
.biz-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.biz-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.biz-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-border-strong);
    border-radius: 999px;
    transition: background 0.2s;
}

.biz-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--color-text-inverse);
    border-radius: 50%;
    transition: transform 0.2s;
}

.biz-switch input:checked + .biz-switch-slider {
    background: var(--color-accent);
}

.biz-switch input:checked + .biz-switch-slider::before {
    transform: translateX(20px);
}

.biz-switch input:focus-visible + .biz-switch-slider {
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

/* ── List view (My Businesses) ───────────────────────── */

.biz-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.biz-list-card {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.biz-list-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.biz-list-card-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--color-text-subtle);
}

.biz-list-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.biz-list-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.biz-list-card-title {
    font-size: var(--text-card-title-size);
    font-weight: var(--text-card-title-weight);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.biz-list-card-blurb {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
    margin: 0;
    /* Two-line clamp keeps the cards a predictable height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.biz-list-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.biz-list-card-link {
    color: var(--color-success);
}

.biz-list-card-meta-warn {
    color: var(--color-warning);
}

.biz-list-card-chevron {
    align-self: center;
    font-size: var(--font-size-xl);
    color: var(--color-text-subtle);
    flex-shrink: 0;
    line-height: 1;
}

/* ── Status pills (compact, used on list cards) ─────────────── */

.biz-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    border: 1px solid;
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.biz-pill-draft {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.biz-pill-pending {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info);
}

.biz-pill-approved {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.biz-pill-hidden {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.biz-pill-rejected {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

/* ── Public directory grid (used on /community hub preview and 
   /community/businesses full directory) ────────────────── */

.biz-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.biz-directory-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.biz-directory-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.biz-directory-card-thumb {
    aspect-ratio: 1;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-text-subtle);
    overflow: hidden;
}

.biz-directory-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.biz-directory-card-body {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.biz-directory-card-title {
    font-size: var(--text-card-title-size);
    font-weight: var(--text-card-title-weight);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.biz-directory-card-blurb {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
    margin: 0;
    /* Two-line clamp for predictable card heights across the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.biz-directory-card-meta {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ── Detail page — banner hero ────────────────────────── */

.biz-hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* margin-bottom is 0 — the .biz-detail-header below owns the spacing
       between the hero and the page header (margin-top: var(--space-5)),
       which keeps the gap definition in one place rather than splitting
       it across two adjacent rules.

       The wrapper has no border or background of its own. The banner img
       (or the empty placeholder div) fills the wrapper completely and
       supplies its own background — surface-alt for letterbox bars on
       contain-fit images, or an accent gradient on the empty state. The
       border-radius + overflow: hidden are the only chrome we need: they
       give the hero rounded corners regardless of the banner aspect. */
    margin-bottom: 0;
}

.biz-hero-banner {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    /* Show the WHOLE banner inside the 3:1 frame. The editor enforces a
       minimum upload size (1200×400) but not an exact aspect, so banners
       wider or taller than 3:1 used to crop with object-fit: cover. With
       'contain' the full image is always visible; non-3:1 uploads
       letterbox against the surface-alt background, which reads as
       intentional framing rather than broken layout. */
    object-fit: cover;
    background: var(--color-surface-alt);
}

.biz-hero-banner-empty {
    /* Subtle theme-tinted gradient when no banner is uploaded. Uses the
       accent color tinted via mix() so it adapts to whatever palette is
       currently active without us hard-coding a specific hue. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-accent) 18%, var(--color-surface-alt)),
        var(--color-surface-alt));
}

.biz-detail-header {
    /* Sits between the hero banner and the body sections. Logo + title
       on the same row, vertically centered against each other.

       Top margin separates it from the hero above (the request was to
       "add margin" between hero and this row). Bottom margin matches the
       body's internal section gap (var(--space-6) on .biz-detail-body's
       flex gap) so the spacing rhythm is consistent: header → first
       section → second section → owner all sit --space-6 apart. */
    margin: var(--space-5) 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.biz-hero-logo {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-text-subtle);
}

.biz-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.biz-hero-logo-empty {
    /* Inline emoji fallback rendered same size as a logo image. */
    background: var(--color-surface-alt);
}

.biz-hero-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-heading);
    /* No text-shadow — the title now sits on the surface instead of being
       overlaid on banner imagery, so it doesn't need legibility chrome. */
}

@media (max-width: 600px) {
    .biz-detail-header {
        margin: var(--space-4) 0;
        gap: var(--space-3);
    }
    .biz-hero-logo {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }
    .biz-hero-title {
        font-size: 1.25rem;
    }
}

/* ── Detail page — body sections ─────────────────────── */

.biz-detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.biz-detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Two-up row used to pair the Contact and Owner sections side-by-side on
   desktop. Auto-fit + minmax means each child wants at least 280px of
   width — viewports too narrow to hold both columns at that minimum
   collapse to a single column automatically, so the layout works on
   phones without a hand-tuned media query. When only one of the two
   children renders (e.g. a business with no owner reference), it expands
   to fill the row. */
.biz-detail-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.biz-detail-section-title {
    /* Subordinate to the page's h1 business name (1.5rem bold). Sized one
       step down with semibold weight so 'Visit or contact' reads as a
       section label rather than competing with the title for visual
       hierarchy. Color stays --color-heading to keep it semantically a
       heading rather than body text. */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin: 0;
}

.biz-detail-description {
    font-size: var(--text-body-size);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    /* Preserve the owner's intentional line breaks since we don't allow
       rich formatting in v1. */
    white-space: pre-wrap;
    margin: 0;
}

.biz-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.biz-contact-row {
    display: flex;
    /* flex-start so the icon top-aligns with the first line of text —
       matters specifically for the address row, which now uses
       PostalAddress.BlockDisplay and renders as 2–3 lines. Single-line
       rows (website, phone) look effectively identical with flex-start
       vs the old `center` because both items are roughly the same height. */
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-body-size);
    color: var(--color-text);
    /* Preserve the \n separators emitted by PostalAddress.BlockDisplay so
       the address renders as a multi-line block instead of one mashed
       line. Inherits to the anchor inside; safe for the single-line
       website/phone rows because their content has no newlines to
       preserve and pre-line still collapses runs of regular whitespace. */
    white-space: pre-line;
}

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

.biz-contact-row a:hover {
    text-decoration: underline;
}

.biz-contact-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
}

.biz-detail-owner {
    /* No top divider any more — owner used to sit BELOW the contact
       section in a single column and needed visual separation. Now it
       sits BESIDE the contact section in .biz-detail-row, where the grid
       gap supplies the separation. The tighter gap-1 still applies
       inside this section so the section title sits close to the card. */
    gap: var(--space-1);
}

/* When the owner section uses a PlayerCard, lay out the card next to a
   small text column with the owner's name + a CTA. The PlayerCard at
   'sm' is 140×200 — pairing it with a vertically-centered text column
   keeps the section visually balanced regardless of banner content above.
   On narrow viewports flex-wrap stacks the card on top of the text. */
.biz-detail-owner-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
}

.biz-detail-owner-card-link {
    display: block;
    text-decoration: none;
    /* PlayerCard has its own hover lift; reset link colors so the
       inherited a:hover doesn't double up. */
    color: inherit;
}

.biz-detail-owner-card-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.biz-detail-owner-card-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.biz-detail-owner-card-cta {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    text-decoration: none;
}

.biz-detail-owner-card-cta:hover {
    text-decoration: underline;
}

/* ── PlayerProfile hero pill — "Business Owner" CTA chip ─────────────
   Lives in the .pp-hero-meta row alongside Skill/Member-Since/Streak chips.
   The visual weight is a notch above the regular .pp-meta-item because
   this one is the only clickable item in the row — accent border + subtle
   tinted background draws the eye, hover fills to solid for affordance. */

.pp-business-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border: 1px solid var(--color-accent);
    /* Pill geometry — 999px is intentional and not a token concern. */
    border-radius: 999px;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    text-decoration: none;
    /* Subtle lift over the hero gradient — helps the pill stand off when
       the active palette has a low-contrast accent. */
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    /* Don't let the pill grow taller than other meta chips in the row. */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.pp-business-pill:hover {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
}

.pp-business-pill-icon {
    font-size: var(--font-size-md);
    line-height: 1;
    flex-shrink: 0;
}

.pp-business-pill-name {
    /* Cap the name length so the pill stays single-line on smaller hero
       widths. The full name is still on the destination page. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18ch;
}

.pp-business-pill-more {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    opacity: 0.85;
    margin-left: var(--space-1);
    flex-shrink: 0;
}

/* ── Community spotlight banners ───────────────────────────
   Wide promo cards rendered above the marketplace listings on /community
   and on the home page. 1 banner = full-width row; 2 banners = side-by-side
   at >700px viewports, stacked at narrower widths. Each card is a clickable
   surface to the business detail page.

   Layout: banner image on top (3:1 aspect), text body below. Text is
   intentionally NOT overlaid on the banner — banners frequently include
   the business name printed into the artwork itself, and overlapping the
   composed name with our generated label produced visual noise. The body
   section uses the card's surface color and standard text tokens, so it
   reads cleanly regardless of what the banner art looks like. */

.comm-spotlight {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (min-width: 700px) {
    .comm-spotlight:has(.comm-spotlight-card:nth-child(2)) {
        grid-template-columns: 1fr 1fr;
    }
}

.comm-spotlight-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.comm-spotlight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.comm-spotlight-banner {
    /* Aspect-ratio lives on the banner now (it used to live on the card
       when the body was overlaid). The body section flows naturally below. */
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.comm-spotlight-banner-empty {
    /* Theme-tinted gradient fallback when a featured business has no banner
       uploaded — same trick as .biz-hero-banner-empty on the detail page. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-accent) 22%, var(--color-surface-alt)),
        color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-alt)));
}

.comm-spotlight-body {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.comm-spotlight-eyebrow {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.comm-spotlight-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.comm-spotlight-blurb {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
    /* Single-line clamp keeps the body tidy when a description runs long. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .comm-spotlight-body {
        padding: var(--space-3);
    }
    .comm-spotlight-name {
        font-size: var(--font-size-lg);
    }
    .comm-spotlight-blurb {
        font-size: var(--font-size-xs);
    }
}

/* ── Community section tab strip ──────────────────────────────
   Text-style sub-tabs for switching between "Listings" and "Businesses."
   Rendered as anchor links so the URL canonically identifies the active
   tab and middle-click / right-click work normally. Active tab gets a
   solid underline; inactive tab is muted text. */

.comm-tabs {
    display: flex;
    gap: var(--space-5);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-5);
}

.comm-tab {
    display: inline-block;
    padding: var(--space-3) 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
    /* The bottom border lives on the tab itself, transparent by default,
       so the active state "replaces" the divider line rather than sitting
       on top of it (which would create a 2px doubled line). */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.comm-tab:hover {
    color: var(--color-text);
}

.comm-tab-active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

.comm-tab-active:hover {
    /* Keep the same color on hover when active — no need to highlight
       further, the underline already does the job. */
    color: var(--color-text);
}