/* The community library shares Scena's type and color tokens. */
.community-gallery {
  display: block;
  color: var(--scena-ink);
  background: #fcfbf8;
  line-height: 1.6;
}

.community-gallery [hidden] { display: none !important; }
.community-gallery :is(#community-collections, #community-results) { scroll-margin-block-start: 88px; }
.community-gallery .sec { padding-block: clamp(38px, 6vw, 76px); }
.community-gallery h2 { font-size: var(--scena-heading); line-height: 1.16; letter-spacing: var(--scena-heading-tracking); }
.community-gallery p { overflow-wrap: anywhere; }
.community-gallery :is(a, button):focus-visible { outline: 2px solid var(--scena-focus); outline-offset: 4px; }

.community-hero { background: #f5f1e9; border-block-end: 1px solid var(--scena-line); }
.community-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .82fr);
  gap: clamp(24px, 6vw, 90px);
  align-items: center;
}

.community-kicker {
  display: inline-block;
  margin-block-end: 12px;
  color: var(--scena-action);
  font-size: .78rem;
  font-weight: 740;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-hero h1 { text-wrap: balance; }
.community-hero .lead { margin-block-start: 16px; max-inline-size: 53ch; }
.community-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 24px; }
.community-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  padding-inline: 16px;
  border-radius: 5px;
  background: var(--scena-action);
  color: #fff;
  font-weight: 680;
}

.community-action:hover { background: var(--scena-action-hover); }
.community-hero-status { color: var(--scena-muted); font-size: .875rem; }
.community-record {
  padding: clamp(18px, 3vw, 30px);
  border-radius: 8px;
  background: #202329;
  color: #fff;
}

.community-record .community-kicker { color: #ffc4ae; }
.community-record h2 { font-size: clamp(1.28rem, 2.2vw, 1.75rem); }
.community-record ol { margin: 16px 0 0; padding: 0; list-style: none; }
.community-record li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-block: 10px; border-block-start: 1px solid #51545a; }
.community-record li:last-child { padding-block-end: 0; }
.community-record li > span { color: #ffc4ae; font-size: .75rem; line-height: 2; }
.community-record strong { display: block; font-weight: 650; }
.community-record li p { color: #d6d8df; font-size: .875rem; line-height: 1.45; }

.community-section-intro { max-inline-size: 68ch; margin-block-start: 10px; color: var(--scena-muted); }
.community-categories,
.community-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 24px;
}

.community-category {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--scena-line);
  border-radius: var(--scena-radius-card);
  background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}

.community-category:has(button:is(:hover, :focus-visible, [aria-pressed="true"])) { border-color: #b65b48; background: #fff8f3; }
.community-category:focus-within { outline: 2px solid var(--scena-focus); outline-offset: 2px; }
.community-category h3 { font-size: 1.05rem; line-height: 1.24; }
.community-category button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}

.community-category button::after { content: ""; position: absolute; inset: 0; }
.community-category button:focus-visible { outline: none; }
.community-category p { margin-block: 8px 14px; color: var(--scena-muted); font-size: .895rem; line-height: 1.48; }
.community-category .community-category-icon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  margin-block-end: 12px;
  border-radius: 5px;
  background: var(--category-tint, #f5eee4);
  color: var(--category-ink, #7f3b2a);
}

.community-category[data-tone="blue"] { --category-tint: #edf1f7; --category-ink: #36547d; }
.community-category[data-tone="green"] { --category-tint: #e8f0e9; --category-ink: #38604a; }
.community-category[data-tone="purple"] { --category-tint: #f0edf6; --category-ink: #5c4d7b; }
.community-category-icon svg { inline-size: 19px; block-size: 19px; }
.community-category-example { margin-block-start: auto; color: #57524b; font-size: .78rem; line-height: 1.4; }

.community-results { background: #f5f1e9; border-block-start: 1px solid var(--scena-line); }
.community-results-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.community-reset {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #c9bfb0;
  border-radius: 4px;
  background: #fff;
  color: var(--scena-ink);
  font: inherit;
  font-weight: 650;
}

.community-reset:hover { background: #faf6f0; }
.community-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-block-start: 22px;
  padding: clamp(16px, 3vw, 27px);
  border: 1px solid var(--scena-line);
  border-inline-start: 3px solid var(--scena-action);
  background: #fff;
}

.community-empty > svg { inline-size: 23px; block-size: 23px; color: var(--scena-action); margin-block-start: 2px; }
.community-empty h3 { font-size: 1.08rem; line-height: 1.3; }
.community-empty p { max-inline-size: 62ch; margin-block: 5px 8px; color: var(--scena-muted); font-size: .93rem; }
.community-empty a { color: var(--scena-action); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.community-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.community-video-card { min-inline-size: 0; overflow: hidden; border: 1px solid var(--scena-line); border-radius: 8px; background: #fff; }
.community-video-card video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #1b1c21; }
.community-video-copy { padding: 16px; }
.community-video-copy h3 { margin-block: 4px 6px; font-size: 1.12rem; line-height: 1.35; }
.community-video-copy p { margin-block-start: 5px; color: var(--scena-muted); font-size: .9rem; }
.community-video-copy [data-video-meta] { margin: 0; font-size: .78rem; }
.community-video-copy [data-video-creator] { color: var(--scena-ink); font-weight: 630; }

@media (max-width: 900px) {
  .community-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .community-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .community-video-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
  .community-categories { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .community-category { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 3px 12px; padding: 12px; }
  .community-category .community-category-icon { grid-row: span 3; align-self: start; inline-size: 36px; margin: 0; }
  .community-category p { margin: 0; }
  .community-category-example { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .community-category { transition: none; }
}