/* V51 (51.6) F05 -- guest / member home (workstream "home"). SCOPED ONLY: every rule starts with a .pb51- class (on the home
   views only); no element / global selector, no change to the shell, header, sidebar, logo or footer. Existing PB tokens only
   (Light / Dark / System through pb-tokens.css + the .pb40-* palette of pb-v40-home.css); logical properties (RTL / LTR flip
   once); no animation; 48px touch targets for the controls added here.
   F05-R004 hero composition, R007 one heading per group, R012 / R031 grid + 1:1 contain media, R009 / C005 / C007 disclosures,
   R028 compact sort row, R033 activity notice. */

.pb51-home, .pb51-member { container-type: inline-size; }

/* ------------------------------------------------------------------ hero (F05-R004) */
.pb51-home .pb51-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy art" "tail tail";
    align-items: start;
    gap: 12px 16px;
    box-sizing: border-box;
    max-inline-size: 1200px;
    margin-inline: auto;
    margin-block-end: 24px;
    padding: 24px 16px;
}
.pb51-home .pb51-hero__copy { grid-area: copy; min-inline-size: 0; }
.pb51-home .pb51-hero__art { grid-area: art; justify-content: flex-end; }
.pb51-home .pb51-hero__tail { grid-area: tail; min-inline-size: 0; }
.pb51-home .pb51-hero__img { inline-size: 96px; max-inline-size: 120px; block-size: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.pb51-home .pb51-hero__title { margin: 0 0 8px; font-size: 28px; line-height: 34px; }
.pb51-home .pb51-hero__lead { margin: 0; max-inline-size: 60ch; font-size: 16px; line-height: 24px; }
.pb51-home .pb51-hero__tail .pb40-hero__actions { margin-block-start: 4px; }
.pb51-home .pb51-hero__help { margin: 4px 0 0; }
.pb51-home .pb51-hero__help a { display: inline-flex; align-items: center; min-block-size: 48px; font-weight: 600; color: var(--pb40-accent-text, inherit); }
@container (max-width: 279px) {
    .pb51-home .pb51-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "tail"; }
    .pb51-home .pb51-hero__art { justify-content: flex-start; }
}
@container (min-width: 360px) {
    .pb51-home .pb51-hero__img { inline-size: 112px; }
}
@container (min-width: 680px) {
    .pb51-home .pb51-hero {
        grid-template-columns: minmax(0, 1fr) 220px;
        grid-template-areas: "copy art" "tail art";
        gap: 16px 32px;
        padding: 32px 24px;
    }
    .pb51-home .pb51-hero__img { inline-size: 220px; max-inline-size: 220px; }
    .pb51-home .pb51-hero__title { font-size: 40px; line-height: 48px; }
}
@container (min-width: 960px) {
    .pb51-home .pb51-hero { grid-template-columns: minmax(0, 1fr) 240px; }
    .pb51-home .pb51-hero__img { inline-size: 240px; max-inline-size: 240px; }
}
@container (min-width: 1200px) {
    .pb51-home .pb51-hero { grid-template-columns: minmax(0, 1fr) 260px; }
    .pb51-home .pb51-hero__img { inline-size: 260px; max-inline-size: 260px; }
}

/* ------------------------------------------------------------------ disclosures (C005 More options, C007 About, C010 Filter) */
.pb51-more, .pb51-about, .pb51-filter { margin-block: 8px 0; }
.pb51-more > summary, .pb51-about > summary, .pb51-filter > summary {
    display: inline-flex; align-items: center; min-block-size: 48px; cursor: pointer; font-weight: 600;
    color: var(--pb-action-text, #BD006E);
}
.pb51-more > summary:focus-visible, .pb51-about > summary:focus-visible, .pb51-filter > summary:focus-visible,
.pb51-group__all:focus-visible, .pb51-filter__reset:focus-visible { outline: 3px solid var(--pb-focus, #BD006E); outline-offset: 2px; }
.pb51-more__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.pb51-more__list a { display: inline-flex; align-items: center; min-block-size: 48px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pb51-about p { margin: 4px 0 8px; max-inline-size: 72ch; color: var(--pb-text-secondary, inherit); }
.pb51-filter { max-inline-size: 100%; }
.pb51-filter__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-inline-size: 100%; margin-block: 4px 12px; }
.pb51-filter__form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.pb51-filter__form label { display: inline-flex; align-items: center; gap: 6px; min-block-size: 48px; }
.pb51-filter__form select { min-block-size: 48px; max-inline-size: 100%; }
.pb51-filter__form .pb-btn { min-block-size: 48px; }
.pb51-filter__reset { display: inline-flex; align-items: center; min-block-size: 48px; color: var(--pb-action-text, #BD006E); }
.pb51-filter__active { margin: 4px 0; font-weight: 600; }
.pb51-note { margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: var(--pb40-accent-soft, var(--pb-surface-subtle, transparent)); border: 1px solid var(--pb-divider, #E3E6ED); }

/* ------------------------------------------------------------------ source groups (F05-R007) */
.pb51-groups { display: grid; gap: 28px; margin-block-end: 24px; }
.pb51-group { min-inline-size: 0; }
.pb51-group__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-block-end: 8px; }
.pb51-group__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--pb-text-primary, inherit); }
.pb51-group__all { display: inline-flex; align-items: center; min-block-size: 48px; font-size: 14px; font-weight: 600; color: var(--pb-action-text, #BD006E); }
.pb51-group__note { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--pb-text-secondary, inherit); }
.pb51-group__legacy { margin: 0; }
.pb51-group__legacy a { display: inline-flex; align-items: center; min-block-size: 48px; font-weight: 600; color: var(--pb-action-text, #BD006E); }

/* ------------------------------------------------------------------ grid + typed cards (F05-R012 / R013 / R031):
   below 320 = 1 column, 320-679 = 2, 680-959 = 3, 960+ = 4; gap 12 below 680, 16 above; 1:1 media, contain, brand surface */
.pb51-home .pb51-cards, .pb51-home .pb51-grid, .pb51-member .pb40-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@container (max-width: 319px) {
    .pb51-home .pb51-cards, .pb51-home .pb51-grid, .pb51-member .pb40-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 680px) {
    .pb51-home .pb51-cards, .pb51-home .pb51-grid, .pb51-member .pb40-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@container (min-width: 960px) {
    .pb51-home .pb51-cards, .pb51-home .pb51-grid, .pb51-member .pb40-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pb51-home .pb51-cards > li, .pb51-home .pb51-grid > * { min-inline-size: 0; }
.pb51-home .pb51-card__media { aspect-ratio: 1 / 1; background: var(--pb-media-matte, #F4F5F8); }
.pb51-home .pb51-card__media img, .pb51-home .pb51-grid .pb-feed-card-media img { object-fit: contain; }
.pb51-member .pb40-card__media { aspect-ratio: 1 / 1; }
.pb51-home .pb51-card__kind { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pb-text-secondary, inherit); }
.pb51-home .pb51-card__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.pb51-card__unit, .pb51-card__ship { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--pb-text-secondary, inherit); }
.pb51-card__ship { display: block; }

/* ------------------------------------------------------------------ member: compact sort row (F05-R028 / C023 / C024) + activity */
.pb51-member .pb51-tools { row-gap: 8px; }
.pb51-member .pb51-sort { flex-wrap: wrap; align-items: center; gap: 8px; min-block-size: 48px; }
.pb51-member .pb51-sort select { max-inline-size: 100%; }
.pb51-activity { margin: 0 0 12px; padding: 4px 14px; border-radius: 10px; border: 1px solid var(--pb40-edge, var(--pb-divider, #E3E6ED)); background: var(--pb40-surface, var(--pb-surface, transparent)); }
.pb51-activity a { display: inline-flex; align-items: center; min-block-size: 48px; font-weight: 600; color: var(--pb40-accent-text, var(--pb-action-text, #BD006E)); }
.pb51-activity a:focus-visible, .pb51-note a:focus-visible { outline: 3px solid var(--pb-focus, #BD006E); outline-offset: 2px; }

@media (forced-colors: active) {
    .pb51-note, .pb51-activity { border-color: CanvasText; }
}