.group-compact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 208px; min-height: 208px; max-height: 208px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-base-100) 40%, transparent);
  color: var(--color-base-content);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.group-compact-card:hover { border-color: color-mix(in srgb, var(--color-base-content) 30%, transparent); background: color-mix(in srgb, var(--color-base-100) 60%, transparent); }
.group-compact-card:focus-visible { outline: 3px solid var(--color-base-content); outline-offset: 3px; }
.group-card-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.group-card-photo { position: relative; flex: 0 0 88px; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--color-base-content) 5%, transparent); }
.group-card-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.group-card-image-cover { object-fit: cover; }
.group-card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }
.group-card-placeholder svg { width: 28px; height: 28px; }
.group-card-photo [hidden] { display: none; }
.group-card-info { flex: 1; min-width: 0; }
.group-compact-card .group-card-name { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.group-compact-card .group-card-city { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 0; font-size: 13px; line-height: 1.5; font-weight: 400; color: color-mix(in srgb, var(--color-base-content) 78%, transparent); overflow-wrap: anywhere; }
.group-card-genres { display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; gap: 4px; margin-top: 8px; }
.group-card-genre { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--color-base-content) 7%, transparent); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.group-card-more { flex-shrink: 0; font-size: 12px; line-height: 18px; color: color-mix(in srgb, var(--color-base-content) 78%, transparent); }
.group-compact-card .group-card-description { flex-shrink: 0; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-base-content) 82%, transparent); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.group-card-footer { margin-top: auto; padding-top: 10px; text-align: right; font-size: 12px; line-height: 1.5; font-weight: 600; }
.group-compact-card:hover .group-card-footer span, .group-compact-card:focus-visible .group-card-footer span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .group-compact-card { padding: 12px; border-radius: 12px; }
  .group-card-photo { flex-basis: 72px; width: 72px; height: 72px; }
  .group-compact-card .group-card-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .group-compact-card { transition: none; } }

.group-cards-hero { --group-feature-height: 440px; align-items: start; }
.group-cards-hero-side { align-content: start; align-items: stretch; }

.group-feature-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; height: var(--group-feature-height, 440px); min-height: var(--group-feature-height, 440px); max-height: var(--group-feature-height, 440px); overflow: hidden;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
  background: #19151f; color: #fff; text-decoration: none;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-secondary) 12%, transparent);
  transition: border-color .15s, box-shadow .15s;
}
.group-feature-card:hover { border-color: var(--color-secondary); box-shadow: 0 8px 32px color-mix(in srgb, var(--color-secondary) 22%, transparent); }
.group-feature-card:focus-visible { outline: 3px solid var(--color-base-content); outline-offset: 4px; }
.group-feature-media { position: absolute; inset: 0; background: #24202c; }
.group-feature-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 8%) 0%, rgb(0 0 0 / 40%) 25%, rgb(0 0 0 / 80%) 55%, rgb(0 0 0 / 95%) 100%); }
.group-feature-image { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 0; }
.group-feature-avatar { object-fit: cover; object-position: center; }
.group-feature-placeholder { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; color: #b8afc5; }
.group-feature-placeholder svg { width: 48px; height: 48px; }
.group-feature-media [hidden] { display: none; }
.group-feature-promotion { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; background: #19151feb; color: #fff; font-size: 11px; line-height: 16px; }
.group-feature-promotion svg { width: 13px; height: 13px; }
.group-feature-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; min-width: 0; margin-top: auto; padding: 18px; }
.group-feature-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-feature-card .group-feature-name { margin: 0; color: #fff; font-size: 24px; line-height: 1.2; font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.group-feature-verified { flex-shrink: 0; }
.group-feature-city { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; color: #d3cddc; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.group-feature-city span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.group-feature-city svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.group-feature-genres { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 5px; margin-top: 10px; }
.group-feature-genres span { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px; border: 1px solid #ffffff26; border-radius: 6px; color: #e9e5ef; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.group-feature-card .group-feature-description { margin: 12px 0 0; color: #d3cddc; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.group-feature-footer { margin-top: auto; padding-top: 18px; }
.group-feature-card .group-feature-action { width: 100%; min-height: 40px; height: auto; padding: 8px 12px; white-space: normal; }
.group-feature-action svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .group-feature-card { border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .group-feature-card { transition: none; } }

/* Two compact rows share the same height as the fixed featured card. */
@media (min-width: 768px) {
  .group-cards-hero-side-balanced { height: var(--group-feature-height); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  /* Add 12px to the catalog's existing 12px gap, matching the 24px card gap. */
  .groups-catalog > [data-promo-banner] { margin-block: 12px; }
}