/* =========================================================
   Public Communities — listing (/{slug}/) + single (/{slug}/{name}/)
   -----------------------------------------------------------------
   Enqueued conditionally, see communities-public-routes.php.
   ========================================================= */

/* Defined at :root, not on .community-public-wrap — the subheader
   (.community-public-subheader) has to work standalone on an arbitrary
   Bricks-built page via [community_shop_subheader], entirely outside
   .community-public-wrap, and every var(--cbp-*) reference inside it
   would otherwise silently resolve to nothing (same class of bug as
   --cb-* only being defined inside .cb-shell, and --cb-* only inside
   .community-admin-wrap, both fixed earlier). */
:root {
    /* Aliased to the shared tokens (pickleheart-tokens.css, enqueued as a
       dependency — see communities-public-routes.php) rather than
       redeclared, so this page's palette can't drift from the rest of
       the site's copies of the same colors again — same fix already
       applied to community-style.css's --cb-* block and
       community-admin-style.css's --ca-* block. --cbp-radius,
       --cbp-coral-dark and --cbp-yellow-soft have no shared equivalent
       and stay locally defined; --cbp-coral-soft and --cbp-sage-soft are
       now washes of the aliased solid colors instead of their own
       hardcoded rgba(). */
    --cbp-primary: var(--foreground-primary);
    --cbp-primary-dark: var(--foreground-primary-hover);
    --cbp-primary-soft: var(--pkl-navy-500-a08);
    --cbp-coral: var(--pkl-coral-300);
    --cbp-coral-dark: #d97572;
    --cbp-coral-soft: color-mix(in srgb, var(--pkl-coral-300) 14%, transparent);
    --cbp-sage: var(--pkl-sage);
    --cbp-sage-soft: color-mix(in srgb, var(--pkl-sage) 16%, transparent);
    --cbp-yellow-soft: #FBF3D3;
    --cbp-border: var(--border-neutral-weak);
    --cbp-text: var(--text-neutral-strong);
    --cbp-text-muted: var(--text-neutral-weak);
    --cbp-radius: 18px;
}

.community-public-wrap,
.community-public-wrap *,
.community-public-wrap *::before,
.community-public-wrap *::after {
    box-sizing: border-box;
}

/* The full-bleed background below uses 100vw to escape .community-
   public-wrap's max-width — but 100vw includes the scrollbar's own
   width, so it renders slightly wider than the visible viewport and
   forces a horizontal scrollbar. Safe to scope here since this
   stylesheet only loads on these two pages (see header comment). */
body { overflow-x: hidden; }

.community-public-wrap {
    position: relative;

    /* !important because the theme has its own `main { ... }` width/margin
       rule that was fighting this one — with both applying at once, the
       browser was landing on a wrong effective width; !important is what
       actually makes ours win outright instead of the two half-applying. */
    width: 100% !important;
    max-width: 1100px !important; /* matches .brxe-container — the site's header/footer width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 48px 24px 90px;
    color: var(--cbp-text);
}

/* Full-bleed background — listing page only, not the single page —
   breaks out of .community-public-wrap's 1100px max-width to span the
   full viewport, while the wrap's own content (page header, grid) stays
   at the constrained width. Standard "full-bleed inside a centered
   container" trick: 100vw wide, centered via left:50% +
   translateX(-50%), negative z-index so it sits behind the wrap's
   normal-flow children without needing to touch their own stacking. */
.community-public-listing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
    background-image: url(https://pickleheart.org/wp-content/uploads/2026/07/Artboard-3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.community-public-page-header {
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}
/* Values below are read straight out of the legacy Bricks template's
   own global classes (title2 / heading2 / basetext) — see the comment
   at the top of communities-public-listing.php. */
.community-public-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 400;
    color: var(--cbp-text);
    margin-bottom: 10px;
}
.community-public-eyebrow img { display: block; width: 40px; height: 40px; object-fit: contain; }
.community-public-title {
    align-self: center;
    margin: 0 auto 20px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 60px;
    line-height: 1.25;
    text-align: center;
    max-width: 620px;
}
.community-public-page-sub { margin: 0 auto; font-size: 26px; line-height: 30px; color: var(--cbp-text-muted); max-width: 560px; }
@media (max-width: 680px) {
    .community-public-eyebrow { font-size: 14px; }
    .community-public-eyebrow img { width: 30px; height: 30px; }
    .community-public-title { font-size: 24px; }
    .community-public-page-sub { font-size: 16px; line-height: 20px; }
}
.community-public-empty { color: var(--cbp-text-muted); }

/* Sub-header — sits directly under the site's own main header, full
   viewport width (same "full-bleed inside a centered container" trick
   as .community-public-listing::before above), with its inner content
   constrained to the same 1100px column as everything else on the
   page. Height matches the site's own header exactly (see the
   height/padding values below — pulled from the real header, not
   guessed). */
.community-public-subheader {
    width: 100%;
    background: #FAF3EB;
}
.community-public-subheader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    /* Matches the site's own #brx-header, which has no explicit
       height/padding rule anywhere in its CSS — its height is purely
       content-driven (logo + nav row), currently rendering at 73px on
       desktop. There's no fixed value to hook a var() to, so this is
       hardcoded to the same number rather than left to its own
       (differently-sized) content to coincidentally match. */
    height: 73px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.community-public-subheader-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; }
.community-public-subheader-logo img { display: block; height: 44px; width: auto; object-fit: contain; }
.community-public-subheader-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--cbp-text);
    white-space: nowrap;
}
.community-public-subheader-nav { display: flex; align-items: center; gap: 32px; }
.community-public-subheader-nav a {
    font-size: 15px;
    font-weight: 700;
    color: var(--cbp-text);
    text-decoration: none;
}
.community-public-subheader-nav a:hover { color: var(--cbp-primary); }
@media (max-width: 560px) {
    .community-public-subheader-inner { height: 70px; }
    .community-public-subheader-logo img { height: 34px; }
    .community-public-subheader-name { font-size: 13.5px; }
    .community-public-subheader-nav { gap: 18px; }
    .community-public-subheader-nav a { font-size: 13.5px; }
}
.community-public-preview-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: auto;
    white-space: nowrap;
    background: rgba(255, 243, 205, 0.9);
    backdrop-filter: blur(4px);
    color: #7a5c00;
    border: 1px solid rgba(240, 215, 140, 0.9);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
    .community-public-preview-banner { white-space: normal; text-align: center; max-width: 90vw; }
}

/* ---------------------------------------------------------
   Listing — a card per community, 2 per row. The footer is a flex row
   of actions on purpose: a future "Shop" button for eligible
   communities drops in next to "View Community" without any layout
   changes.
   --------------------------------------------------------- */
.community-public-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
@media (max-width: 680px) {
    .community-public-grid { grid-template-columns: 1fr; }
}

/* Card — ported 1:1 from the legacy Bricks template (post 4276), whose
   "card" is a query-loop block with a Bricks "shape divider" (an
   uploaded SVG, template-assets/brand/card-shape.svg) as
   its actual visible silhouette, not a CSS-drawn shape. All values below
   (shadow/radius/padding/gaps/sizes/gradient) are copied from that
   template's element settings + global classes, not eyeballed. */
.community-public-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    margin-top: 56px;
}

/* This is an <img>, not a CSS background — its fill is white (same as
   the page), so the only thing that makes the wavy card silhouette
   visible is its shadow. box-shadow can't do that (it shadows the
   element's rectangular box, ignoring the SVG's actual alpha shape);
   filter: drop-shadow() does — it follows the rendered pixels, so the
   shadow itself traces the wave outline. No spread-radius equivalent
   exists for drop-shadow, so the blur is upsized to compensate. */
.community-public-card-shape {
    display: block;
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    height: calc(100% + 56px);
    z-index: 0;
    filter: drop-shadow(10px -6px 22px rgba(16, 24, 40, 0.16));
    pointer-events: none;
}

.community-public-card-inner {
    position: relative;
    z-index: 1;
    display: block;
    padding: 5px 20px 20px;
}

.community-public-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.community-public-card-logo,
.community-public-card-logo--placeholder {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 50px;
    object-fit: contain;
}
.community-public-card-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cbp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.community-public-card-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    border-radius: 20px;
    background: var(--cbp-sage-soft);
    overflow: hidden;
    margin-top: 20px;
}
.community-public-card-photo > img:not(.community-public-card-photo-placeholder) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.community-public-card-photo-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.9;
}

.community-public-card-footer { display: block; margin-top: 40px; }
.community-public-card-location {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cbp-text-muted);
}
.community-public-card-location img { display: block; width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; }
.community-public-card-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.community-public-card-members {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cbp-text-muted);
}
.community-public-card-members img { display: block; width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; }
.community-public-card-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.community-public-card-view-btn,
.community-public-card-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap;
    transition: box-shadow 0.15s ease;
}
.community-public-card-shop-btn {
    gap: 8px;
    background: #F1E6C6;
    color: #3A3A3A;
    padding: 0.5em 1em;
}
.community-public-card-shop-btn img { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.community-public-card-view-btn:hover,
.community-public-card-shop-btn:hover { box-shadow: none; }

/* ---------------------------------------------------------
   Single community page.
   --------------------------------------------------------- */
/* Hero — ported from the Bricks template: name/description on one
   side, the photo (sitting on the same wavy card-shape.svg used on the
   listing cards, drop-shadow again for the same reason) on the other. */
.community-public-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 40px 0 80px;
    padding: 40px 0;
    background: #fff;
}
@media (max-width: 720px) {
    .community-public-hero { flex-direction: column; margin: 0 0 40px; padding: 0; }
}

.community-public-hero-info { flex: 1 1 0; min-width: 0; }
/* Overrides .community-public-title's listing-page styling (centered,
   60px) — the hero name on the single page is left-aligned and smaller. */
.community-public-hero-info .community-public-title {
    align-self: auto;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: "winter Draw", inherit;
    font-weight: 400;
    font-size: 24px;
    text-align: left;
    max-width: none;
}
.community-public-desc { margin: 20px 0 0; font-size: 22px; line-height: 26px; color: var(--cbp-text); }
@media (max-width: 720px) {
    .community-public-desc { font-size: 12px; line-height: 16px; }
}

.community-public-hero-photo-wrap { position: relative; flex: 1 1 0; min-width: 0; margin-top: 56px; }
.community-public-hero-shape {
    display: block;
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    height: calc(100% + 56px);
    z-index: 0;
    filter: drop-shadow(10px -6px 22px rgba(16, 24, 40, 0.16));
    pointer-events: none;
}
.community-public-hero-photo {
    position: relative;
    z-index: 1;
    width: calc(100% - 40px);
    height: 250px;
    margin: 0 20px 20px;
    background: var(--cbp-sage-soft);
    border-radius: 20px;
    overflow: hidden;
}
.community-public-hero-photo > img:not(.community-public-hero-photo-placeholder) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.community-public-hero-photo-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.9;
}

/* Community Information — icon + label rows on a pale panel, 2 per
   row, matching the legacy template's "Community Information:" block
   (background #F9F3EC, real icon assets, bold-label + value text). */
/* Full-bleed panel background (same 100vw trick as the listing page's
   background — see the comment on .community-public-listing::before)
   while the title/grid inside stay at the normal content width. */
.community-public-info-card {
    position: relative;
    padding: 40px 0;
    margin: 0 0 80px;
}
.community-public-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
    background: #F9F3EC;
}
.community-public-info-card-title { margin: 0 0 20px; font-size: 24px; font-weight: 800; color: var(--cbp-text); }
@media (max-width: 680px) {
    .community-public-info-card-title { font-size: 18px; }
}
.community-public-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
}
.community-public-info-item { display: flex; align-items: flex-start; gap: 10px; }
.community-public-info-item img { display: block; flex: 0 0 auto; width: 50px; height: 50px; object-fit: contain; }
@media (max-width: 560px) {
    .community-public-info-item img { width: 25px; height: 25px; }
}
.community-public-info-text { font-size: 15px; line-height: 1.5; color: var(--cbp-text); min-width: 0; }

/* The communication tool shows its own mark.
   Scoped with the class on the img because the rule above sizes every
   image in this block to a fixed 50x50 icon box — which squashed a
   260x50 wordmark down to about ten pixels tall.
   Capped by height, not width, so the three marks — an 856x223
   wordmark, a 260x50 and a 131x30 — all sit on one line without any of
   them dwarfing the others. */
.community-public-info-item img.community-public-comm-logo {
  display: block;
  margin-top: 7px;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 30px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 560px) {
  .community-public-info-item img.community-public-comm-logo { max-height: 22px; }
}


.community-public-section { margin-bottom: 40px; }
/* Section headings — the pink brush-stroke background from the legacy
   template, white text over it. */
.community-public-section-title {
    display: table;
    margin: 0 auto 40px;
    padding: 10px 85px;
    background-image: url("brand/bg-brush.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    font-family: "winter Draw", inherit;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}
.community-public-section > *:not(.community-public-section-title) {
    font-size: 26px;
    line-height: 30px;
    color: var(--cbp-text);
}
@media (max-width: 680px) {
    .community-public-section-title { padding: 16px 20px; background-size: 100% 100%; font-size: 18px; white-space: normal; }
    .community-public-section > *:not(.community-public-section-title) { font-size: 16px; line-height: 20px; }
}

/* Home Parks — a horizontally-snapping slider showing 2 cards per
   "page"; extra parks scroll into view instead of stacking the page
   taller. Same banner/logo visual language as the listing cards. */
.community-public-parks-slider-wrap { position: relative; padding: 0 4px; }
.community-public-parks-slider {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hide the scrollbar cross-browser — the slider is navigated via
       the arrow buttons / swipe, a visible track just adds noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.community-public-parks-slider::-webkit-scrollbar { display: none; height: 0; }
.community-public-parks-slider.is-single { justify-content: center; }
.community-public-parks-slider.is-single .community-public-park-card { flex: 0 0 calc(50% - 14px); }
@media (max-width: 680px) {
    .community-public-parks-slider.is-single .community-public-park-card { flex: 0 0 88%; }
}

/* Values below ported from the same legacy template's Parks slider
   (element "qbohga" and children) — box-shadow/radius/padding/photo
   height/icon sizes are its actual production settings, not eyeballed. */
.community-public-park-card {
    flex: 0 0 calc(50% - 14px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #ddd;
    padding: 20px;
    margin: 20px 0;
}
@media (max-width: 680px) {
    .community-public-park-card { flex: 0 0 88%; }
}

.community-public-park-card-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background: var(--cbp-sage-soft);
    overflow: hidden;
    margin-bottom: 20px;
}
.community-public-park-card-banner > img:not(.community-public-park-card-banner-placeholder) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.community-public-park-card-banner-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.9;
}
.community-public-park-card-logo-wrap {
    position: absolute;
    left: 14px;
    bottom: -18px;
    z-index: 3;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.community-public-park-card-logo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}
.community-public-park-card-logo--placeholder { object-fit: contain !important; padding: 4px; background: var(--cbp-coral-soft); }

.community-public-park-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.community-public-park-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cbp-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.community-public-park-card-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.community-public-park-card-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cbp-text-muted);
}
.community-public-park-card-fact img { display: block; flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; }
.community-public-park-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: capitalize;
    text-decoration: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    align-self: flex-start;
    transition: box-shadow 0.15s ease;
}
.community-public-park-card-btn:hover { box-shadow: none; }

/* Prev/next arrows — sit just outside the card edges, sized and
   colored to match the site's brand rather than a generic grey
   circle; disabled state fades out once there's nothing left that
   direction to scroll to. */
.community-public-parks-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--cbp-border);
    background: #fff;
    color: var(--cbp-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(31, 73, 125, 0.16);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.community-public-parks-nav:hover {
    background: var(--cbp-primary);
    color: #fff;
    box-shadow: 0 10px 22px rgba(31, 73, 125, 0.28);
}
.community-public-parks-nav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}
.community-public-parks-nav:disabled:hover { background: #fff; color: var(--cbp-primary); }
.community-public-parks-nav--prev { left: -19px; }
.community-public-parks-nav--next { right: -19px; }
@media (max-width: 680px) {
    .community-public-parks-nav { display: none; }
}

/* Shop — only shown when the community has "Community has Shop?"
   checked. Text + Shop Now button on the left, the shop image (or a
   cream placeholder box with the brand heart sticker overlapping its
   top edge, same as the "no image yet" pattern used elsewhere) on the
   right. */
.community-public-shop {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 100px;
    padding-top: 150px;
    border-top: 1px solid var(--cbp-border);
}
@media (max-width: 720px) {
    .community-public-shop { flex-direction: column; gap: 32px; text-align: center; }
}

.community-public-shop-info { flex: 1 1 0; min-width: 0; }
.community-public-shop-title {
    margin: 0 0 16px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.15;
    color: var(--cbp-text);
}
.community-public-shop-desc { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--cbp-text-muted); max-width: 420px; }
@media (max-width: 720px) {
    .community-public-shop-desc { max-width: none; }
}
.community-public-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.community-public-shop-btn:hover { background: var(--cbp-primary-dark); color: #fff; }

.community-public-shop-photo-wrap { position: relative; flex: 1 1 0; min-width: 0; max-width: 480px; }
.community-public-shop-box {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    background: #E9E2CE;
    border-radius: 20px;
}

.community-public-shop-photo {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    object-fit: cover;
}
.community-public-shop-photo--placeholder {
    object-fit: contain;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
}
@media (max-width: 480px) {
    .community-public-shop-title { font-size: 34px; }
    .community-public-shop-photo { width: 45%; }
}
.community-public-section p { line-height: 1.6; color: var(--cbp-text); }

/* =========================================================
   People (/{slug}/{name}/people)
   -----------------------------------------------------------------
   The community's roster. Built from the same --cbp-* palette and the
   same card language as the listing and single pages above, so moving
   between the tabs stays inside one design.

   The roster is the page, so everything here exists to make thirty
   faces scan as one group rather than thirty things: one card shape,
   one gap, one caption, and a grid that refills itself at every width
   instead of leaving an orphan on the last row.
   ========================================================= */
.community-public-people .community-people-count {
    margin: 18px 0 0;
    font-size: 15px;
    color: var(--cbp-text-muted);
}
.community-public-people .community-people-count strong {
    font-size: 19px;
    font-weight: 800;
    color: var(--cbp-text);
}

.community-people-group { margin-bottom: 56px; }
.community-people-group:last-child { margin-bottom: 0; }
.community-people-group-head { margin-bottom: 24px; }
.community-people-group-head .community-public-desc { margin: 6px 0 0; max-width: 56ch; }

.community-people-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}
/* auto-fill with a minimum rather than a fixed column count: the row
   refills itself as the viewport changes, which is what keeps two
   dozen volunteers from ending on a lone card. */
.community-people-roster--feature {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 32px 24px;
}
.community-people-roster--dense {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 24px 16px;
}

.community-people-member { text-align: center; }

.community-people-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--cbp-radius);
    overflow: hidden;
    background: var(--cbp-coral-soft);
    margin-bottom: 12px;
}
.community-people-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Somebody with no photo yet. Their initials at the same size as
   everyone else's face, so a gap in the data doesn't become a gap in
   the grid. */
.community-people-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 30px;
    color: var(--cbp-text);
}
.community-people-roster--dense .community-people-initials { font-size: 24px; }

.community-people-name {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--cbp-text);
    text-wrap: balance;
}
.community-people-roster--dense .community-people-name { font-size: 14px; }

/* Duties sit inside the group's own section, under their faces, with a
   rule rather than a card: the photos above already carry the visual
   weight and a second bounded surface would compete with them. */
.community-people-duties {
    display: grid;
    gap: 20px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--cbp-border);
}
.community-people-duties--split {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    align-items: start;
}
.community-people-duties-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cbp-text);
}
.community-people-duties-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--cbp-text-muted);
}
.community-people-duties-body p { margin: 0 0 12px; }
.community-people-duties-body strong { color: var(--cbp-text); }
.community-people-duties-body ul,
.community-people-duties-body ol { margin: 0; padding-left: 0; }
.community-people-duties-body li { margin-bottom: 12px; }
.community-people-duties-body li:last-child { margin-bottom: 0; }

/* Our pickleball instead of a disc. Only unordered lists: an <ol> is
   numbered because the order is the point, and swapping its numerals
   for identical balls would throw that away. Drawn with ::before
   rather than list-style-image, which gives no control over size or
   baseline. */
.community-people-duties-body ul { list-style: none; }
.community-people-duties-body ul > li {
    position: relative;
    padding-left: 30px;
}
.community-people-duties-body ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 17px;
    height: 17px;
    background: url('./illustrations/pickleball-outline.png') center / contain no-repeat;
}

/* The whole-team block, marked off so it reads as an addition to the
   duties beside it — the ones nobody is exempt from — rather than as
   more of the volunteers' own list. */
.community-people-duties-block--shared {
    border-left: 3px solid var(--cbp-coral);
    padding-left: 24px;
}

@media (max-width: 760px) {
    .community-people-group { margin-bottom: 40px; }
    .community-people-roster--feature { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 16px; }
    .community-people-roster--dense { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 20px 12px; }
    .community-people-name { font-size: 14px; }
    .community-people-roster--dense .community-people-name { font-size: 13px; }
    .community-people-initials { font-size: 24px; }
    .community-people-duties { margin-top: 28px; padding-top: 22px; }
    .community-people-duties-block--shared { padding-left: 16px; }
    .community-people-duties-body ul > li { padding-left: 26px; }
    .community-people-duties-body ul > li::before { width: 15px; height: 15px; }
}