/*
 * Theme bridge for the public community route.
 *
 * The business UI remains owned by community.css. These overrides only place that
 * UI inside theme-hao's content shell and deliberately stay scoped to the
 * community body/host so no homepage, post, taxonomy, or user page is affected.
 */
@view-transition {
  navigation: auto;
}

html:has(body[data-type='community']) {
  scrollbar-gutter: stable;
}

body[data-type='community'] {
  overflow-x: clip;
  scrollbar-gutter: stable;
  background: var(--heo-background);
  color: var(--heo-fontcolor);
}

body[data-type='community'] .cc-community-theme-page {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--heo-background);
}

@supports not (min-height: 100dvh) {
  body[data-type='community'] .cc-community-theme-page {
    min-height: 100vh;
  }
}

body[data-type='community'] .cc-community-theme-page > #page-header {
  flex: 0 0 auto;
}

body[data-type='community'] .cc-community-theme-page > #footer.lycoris-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

body[data-type='community'] #content-inner.cc-community-theme-layout,
body[data-type='community'] #content-inner.cc-community-theme-layout.hide-aside {
  --cc-community-detail-article-layout-max: min(
    calc(100vw - var(--hao-site-sidebar-shell-width, 256px) - 44px),
    1120px
  );
  --cc-community-detail-shell-max: calc(
    var(--cc-community-detail-article-layout-max) + 236px + 22px
  );
  display: block;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.4vw, 2.25rem) 3.5rem;
  box-sizing: border-box;
  background: transparent;
}

body[data-type='community'] [data-cc-community-theme-host] {
  --cc-community-primary: var(--heo-main, var(--heo-theme));
  --cc-community-accent: var(--heo-main, var(--heo-theme));
  --cc-community-primary-soft: var(--heo-main-op, var(--heo-theme-op));
  --cc-community-soft: var(--heo-main-op, var(--heo-theme-op));
  --cc-community-bg: var(--heo-background);
  --cc-community-card-bg: var(--heo-card-bg);
  --cc-community-card-bg-hover: color-mix(in srgb, var(--heo-card-bg) 92%, var(--heo-main-op));
  --cc-community-card-bg-strong: var(--heo-card-bg);
  --cc-community-border: var(--heo-card-border);
  --cc-community-border-hover: var(--heo-main);
  --cc-community-text: var(--heo-fontcolor);
  --cc-community-muted: var(--heo-secondtext);
  --cc-community-shadow-sm: var(--heo-shadow-border);
  --cc-community-shadow-md: var(--heo-shadow-border);
  --cc-community-shadow: var(--heo-shadow-border);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  container: cc-community-theme / inline-size;
  font-family: inherit;
}

body[data-type='community'] [data-cc-community-theme-host] > link,
body[data-type='community'] [data-cc-community-theme-host] > script {
  display: none;
}

body[data-type='community'] [data-cc-community-theme-host] > .cc-community-root.cc-community-shell {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--heo-fontcolor);
  font-family: inherit;
  /*
   * theme-hao's generic first-layout-child rule uses overflow: hidden. This
   * wrapper contains the desktop sticky rail, so it must not become a scroll
   * or clipping boundary on the community route.
   */
  overflow: visible;
}

body[data-type='community'] [data-cc-community-theme-host] :where(
  .cc-community-panel,
  .cc-community-card,
  .cc-community-detail-topic-card,
  .cc-community-comment,
  .cc-community-comment-form,
  .cc-community-comment-login,
  .cc-community-welcome-card,
  .cc-community-toolbar,
  .cc-community-board-rail
) {
  border-color: var(--heo-card-border);
  background-color: var(--heo-card-bg);
  box-shadow: var(--heo-shadow-border);
}

body[data-type='community'] [data-cc-community-theme-host] #cc-community-heroui-header {
  width: 100%;
  min-width: 0;
  min-height: min(42rem, calc(100dvh - 10rem));
  margin: 0 0 1rem;
  /*
   * Do not contain this host: layout/paint containment creates the sticky
   * containing block in Chromium, so the desktop rail scrolls away with this
   * host instead of observing the document scroll container.
   */
  view-transition-name: cc-community-shell;
}

body[data-type='community']
  [data-cc-community-theme-host]
  #cc-community-heroui-header[data-community-ready='false'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-type='community']
  [data-cc-community-theme-host]
  #cc-community-heroui-header[data-community-ready='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease;
}

/* Shadow DOM does not make its host non-empty, so ready must explicitly win. */
body[data-type='community'] [data-cc-community-theme-host][data-cc-heroui-ready='true']
  #cc-community-heroui-header {
  display: block;
}

/* The create route is rendered by the HeroUI island. Keep the legacy form alive
 * as a visually hidden business bridge so its existing upload, draft and submit
 * listeners remain the single source of mutation behavior. */
body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-route='create']
  #cc-community-heroui-header {
  margin-bottom: 0;
}

body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-route='home']
  #cc-community-heroui-header {
  margin-bottom: 0;
}

body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-route='detail']
  #cc-community-heroui-header {
  margin-bottom: 0;
}

body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-ready='true'][data-cc-heroui-route='create']
  > .cc-community-root.cc-community-shell
  > :is(.cc-community-hero, .cc-community-toolbar, .cc-community-toast) {
  display: none !important;
}

body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-route='create']
  [data-cc-community-view][data-cc-react-create-hidden='true'],
body[data-type='community']
  [data-cc-community-theme-host][data-cc-heroui-ready='true'][data-cc-heroui-route='create']
  [data-cc-community-view] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  white-space: nowrap !important;
}

body[data-type='community'] .community-slash-menu {
  z-index: 1000;
  display: grid;
  width: min(240px, calc(100vw - 32px)) !important;
  min-width: min(220px, calc(100vw - 32px));
  max-width: min(248px, calc(100vw - 32px));
  max-height: 320px;
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--heo-card-border, rgba(148, 163, 184, 0.28));
  border-radius: 8px;
  background: var(--heo-card-bg, var(--card-bg, #fff));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  color: var(--heo-fontcolor, #1f2937);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body[data-type='community'] .community-slash-item {
  display: grid;
  min-height: 40px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

body[data-type='community'] .community-slash-item:hover,
body[data-type='community'] .community-slash-item.is-selected {
  background: color-mix(in srgb, var(--heo-fontcolor, #1f2937) 5%, transparent);
}

body[data-type='community'] .community-slash-item-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: var(--heo-secondtext, #6b7280);
}

body[data-type='community'] .community-slash-item-icon svg {
  width: 16px;
  height: 16px;
}

body[data-type='community'] .community-slash-item:hover .community-slash-item-icon,
body[data-type='community'] .community-slash-item.is-selected .community-slash-item-icon {
  color: var(--heo-theme, #d86f9d);
}

body[data-type='community'] .community-slash-item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.0625rem;
}

body[data-type='community'] .community-slash-item-copy strong,
body[data-type='community'] .community-slash-item-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-type='community'] .community-slash-item-copy strong {
  font-size: 13px;
  font-weight: 500;
}

body[data-type='community'] .community-slash-item-copy em,
body[data-type='community'] .community-slash-empty {
  color: var(--heo-secondtext, #6b7280);
  font-size: 0.75rem;
  font-style: normal;
}

body[data-type='community'] .community-slash-empty {
  padding: 0.625rem 0.75rem;
}

body[data-type='community'] [data-cc-community-theme-host] :where(
  .cc-community-view,
  .cc-community-forum-layout,
  .cc-community-forum-main,
  .cc-community-forum-sidebar,
  .cc-community-detail-layout,
  .cc-community-detail-main,
  .cc-community-detail-aside,
  .cc-community-compose-layout,
  .cc-community-compose-main,
  .cc-community-compose-side,
  .cc-community-category-layout,
  .cc-community-category-main,
  .cc-community-user-layout,
  .cc-community-skeleton-layout,
  .cc-community-skeleton-main,
  .cc-community-skeleton-side
) {
  min-width: 0;
  max-width: 100%;
}

body[data-type='community'] [data-cc-community-theme-host] :where(img, iframe, canvas) {
  max-width: 100%;
}

@media (min-width: 1024px) {
  body[data-type='community'] #content-inner.cc-community-theme-layout,
  body[data-type='community'] #content-inner.cc-community-theme-layout.hide-aside {
    max-width: calc(1400px + 256px);
  }
}

@media (min-width: 1281px) {
  body[data-type='community']
    #content-inner.cc-community-theme-layout:has(
      > [data-cc-community-shell-island][data-community-route='detail']
    ),
  body[data-type='community']
    #content-inner.cc-community-theme-layout[data-cc-heroui-route='detail'] {
    width: min(100%, var(--cc-community-detail-shell-max));
    max-width: var(--cc-community-detail-shell-max);
    padding-left: 0;
    padding-right: 0;
  }
}

@supports not (overflow: clip) {
  body[data-type='community'] {
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(cc-community-shell),
  ::view-transition-new(cc-community-shell) {
    animation: none !important;
  }
}

/*
 * theme-hao adds a 256px desktop rail at 1101px. At that exact boundary the
 * viewport is desktop-sized, but the remaining community slot is too narrow
 * for the legacy app's fixed 300px auxiliary column. Respond to the actual
 * content slot width so the primary feed stays readable without changing the
 * theme's own sidebar breakpoint.
 */
@container cc-community-theme (max-width: 920px) {
  .cc-community-root.cc-community-shell :where(
    .cc-community-forum-layout,
    .cc-community-detail-layout,
    .cc-community-compose-layout,
    .cc-community-category-layout,
    .cc-community-user-layout,
    .cc-community-skeleton-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cc-community-root.cc-community-shell :where(
    .cc-community-forum-sidebar,
    .cc-community-detail-aside,
    .cc-community-compose-side
  ) {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-forum-sidebar {
    display: none !important;
  }

  .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-welcome-card.is-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-welcome-card.is-hero
    .cc-community-welcome-stats {
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  body[data-type='community'] .cc-community-theme-page,
  body[data-type='community'] #content-inner.cc-community-theme-layout,
  body[data-type='community'] [data-cc-community-theme-host] {
    max-width: 100%;
    overflow-x: clip;
  }

  body[data-type='community'] #content-inner.cc-community-theme-layout,
  body[data-type='community'] #content-inner.cc-community-theme-layout.hide-aside {
    width: 100%;
    padding: 10px max(10px, env(safe-area-inset-right)) 2.75rem
      max(10px, env(safe-area-inset-left));
  }

  body[data-type='community'].hao-mobile-menu-open {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    scrollbar-gutter: auto !important;
  }

  body[data-type='community'].hao-mobile-menu-open #body-wrap.cc-community-theme-page,
  body[data-type='community'].hao-mobile-menu-open .cc-community-theme-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-type='community'] #page-header #nav #nav-right #nav-user-home .nav-user-home__link,
  body[data-type='community']
    #page-header
    #nav
    #nav-right
    #nav-user-home
    .nav-user-home__link.is-active {
    border: 1px solid rgba(244, 114, 182, 0.28) !important;
    outline: 0 !important;
    background: rgba(244, 114, 182, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.08) !important;
  }

  body[data-type='community'] #page-header #nav #nav-right #nav-user-home .nav-user-home__link:hover,
  body[data-type='community']
    #page-header
    #nav
    #nav-right
    #nav-user-home
    .nav-user-home__link.is-active:hover {
    background: rgba(244, 114, 182, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.1) !important;
  }

  html[data-theme='dark']
    body[data-type='community']
    #page-header
    #nav
    #nav-right
    #nav-user-home
    .nav-user-home__link,
  body[data-type='community'][data-theme='dark']
    #page-header
    #nav
    #nav-right
    #nav-user-home
    .nav-user-home__link {
    border-color: rgba(244, 114, 182, 0.34) !important;
    background: rgba(244, 114, 182, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.12) !important;
  }

  body[data-type='community'] #sidebar #menu-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100200 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(245, 247, 250, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: none !important;
    transition:
      opacity 180ms ease,
      visibility 0s linear 180ms;
  }

  html[data-theme='dark'] body[data-type='community'] #sidebar #menu-mask,
  body[data-type='community'][data-theme='dark'] #sidebar #menu-mask {
    background: rgba(15, 18, 25, 0.16);
  }

  body[data-type='community'] #sidebar.hao-mobile-menu--open #menu-mask {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 180ms ease,
      visibility 0s linear 0s;
  }

  body[data-type='community'] #sidebar #sidebar-menus.hao-mobile-grid-menu {
    z-index: 100201;
  }

  /* Disable the plugin's generated fixed mobile rail; the theme owns navigation. */
  body[data-type='community'] [data-cc-community-theme-host]
    > .cc-community-root.cc-community-shell,
  body[data-type='community'] [data-cc-community-theme-host]
    > .cc-community-root.cc-community-shell[data-cc-route] {
    --cc-community-mobile-rail: 0px;
    --cc-community-mobile-gap: 0px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    > .cc-community-root.cc-community-shell
    > .cc-community-hero
    .cc-community-nav,
  body[data-type='community'] [data-cc-community-theme-host]
    > .cc-community-root.cc-community-shell[data-cc-route]
    > .cc-community-hero
    .cc-community-nav {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    gap: 0.5rem !important;
    padding: 0.25rem 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    scrollbar-width: none;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    > .cc-community-root.cc-community-shell
    > .cc-community-hero
    .cc-community-nav::-webkit-scrollbar {
    display: none;
  }

  body[data-type='community'] [data-cc-community-theme-host] :where(
    .cc-community-forum-layout,
    .cc-community-detail-layout,
    .cc-community-compose-layout,
    .cc-community-category-layout,
    .cc-community-user-layout,
    .cc-community-skeleton-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  body[data-type='community'] [data-cc-community-theme-host] :where(
    .cc-community-forum-sidebar,
    .cc-community-detail-aside,
    .cc-community-compose-side
  ) {
    position: static !important;
    width: 100%;
    max-width: 100%;
  }

  body[data-type='community'] [data-cc-community-theme-host] :where(
    .cc-community-view,
    .cc-community-panel,
    .cc-community-card,
    .cc-community-topic-card,
    .cc-community-detail-topic-card,
    .cc-community-comments
  ) {
    min-width: 0;
    max-width: 100%;
  }

  body[data-type='community'] [data-cc-community-theme-host] :where(
    h1,
    h2,
    h3,
    p,
    a,
    button,
    input,
    textarea,
    select
  ) {
    max-width: 100%;
  }

  body[data-type='community'] [data-cc-community-theme-host] :where(h1, h2, h3, p, a) {
    overflow-wrap: anywhere;
  }

}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body[data-type='community'] #sidebar #menu-mask {
    transition: none !important;
  }

  body[data-type='community'] [data-cc-community-theme-host] *,
  body[data-type='community'] [data-cc-community-theme-host] *::before,
  body[data-type='community'] [data-cc-community-theme-host] *::after {
    scroll-behavior: auto !important;
  }
}

/*
 * Home feed refinement.
 *
 * community-home-enhancer.js only rearranges nodes emitted by the business app;
 * these rules own the visual hierarchy without changing its request or action code.
 */
body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-feed-list.is-galgamex-flow {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(0.75rem, 1.4vw, 1rem);
  width: 100%;
  min-width: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #f472b6 20%, var(--cc-community-border));
  border-radius: 0.5rem;
  background: var(--cc-community-card-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-card:hover {
  border-color: color-mix(in srgb, #ec4899 42%, var(--cc-community-border));
  background: var(--cc-community-card-bg-hover) !important;
  box-shadow: none !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-card
  .cc-community-card-body {
  display: grid;
  grid-template-rows: auto !important;
  gap: clamp(0.75rem, 1.25vw, 1rem) !important;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.375rem) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-card-head {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-card-head
  .cc-community-author {
  width: auto;
  min-width: 0;
  margin-left: auto;
  text-align: left;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-author
  :is(.cc-community-author-avatar, .cc-community-author-name):focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 3px;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-main {
  display: grid;
  gap: 0.75rem !important;
  min-width: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-title-row
  h2 {
  margin: 0;
  font-size: clamp(1.125rem, 1.45vw, 1.375rem) !important;
  font-weight: 650;
  line-height: 1.35 !important;
  letter-spacing: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-title-row
  h2
  a:hover {
  color: #db2777;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-excerpt[data-cc-plain-summary='true'],
body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-excerpt[data-cc-plain-summary='true'].has-images {
  display: -webkit-box !important;
  max-width: 72ch !important;
  margin: 0;
  overflow: hidden;
  color: var(--cc-community-muted);
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem) !important;
  line-height: 1.72 !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images] {
  display: grid !important;
  width: 100% !important;
  max-width: min(100%, 47.5rem) !important;
  gap: clamp(0.375rem, 1vw, 0.625rem) !important;
  margin: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='1'] {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: min(100%, 40rem) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='5'] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images]
  > a {
  position: relative;
  display: block;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--cc-community-border);
  border-radius: 0.75rem !important;
  background: color-mix(in srgb, var(--cc-community-card-bg) 86%, #fce7f3);
  flex: none !important;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images='1']
  > a {
  aspect-ratio: 16 / 9;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images]
  > a
  img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto !important;
  object-fit: cover;
  transition: opacity 180ms ease;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images[data-cc-visible-images]
  > a:hover
  img {
  opacity: 0.94;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-preview-images
  .cc-community-image-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgb(17 24 39 / 58%);
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: 750;
  letter-spacing: 0.02em;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-meta-row {
  min-width: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-topic-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem !important;
  min-width: 0;
  padding-top: 0.875rem !important;
  border-top: 1px solid color-mix(in srgb, var(--cc-community-border) 78%, transparent);
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  :is(.cc-community-home-footer-left, .cc-community-home-footer-right) {
  display: flex;
  align-items: center;
  min-width: 0;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-home-footer-left {
  justify-content: flex-start;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-home-footer-right {
  justify-content: flex-end;
  gap: clamp(0.5rem, 1.4vw, 0.875rem);
  margin-left: auto;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-home-footer-left
  .cc-community-section-chip {
  min-height: 2rem;
  padding: 0.3rem 0.625rem;
  border-color: color-mix(in srgb, #f472b6 30%, var(--cc-community-border));
  border-radius: 999px;
  background: color-mix(in srgb, #fce7f3 34%, var(--cc-community-card-bg));
  color: color-mix(in srgb, #be185d 74%, var(--cc-community-text));
  font-size: 0.75rem;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  :is(.cc-community-metrics, .cc-community-topic-actions) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  :is(.cc-community-metric, .cc-community-topic-action, .cc-community-action-icon) {
  min-width: 0;
  min-height: 2rem;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-forum-tabs[data-cc-board-whitelist='true'] {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-forum-tabs[data-cc-board-whitelist='true']::-webkit-scrollbar {
  display: none;
}

body[data-type='community'] [data-cc-community-theme-host]
  .cc-community-root.cc-community-shell[data-cc-route='home']
  .cc-community-forum-tabs[data-cc-board-whitelist='true']
  .cc-community-forum-tab {
  flex: 0 0 auto;
  min-height: 2.75rem;
  border-radius: 999px;
  touch-action: manipulation;
}

@media (max-width: 640px) {
  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-topic-card
    .cc-community-card-body {
    padding: 0.875rem !important;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-topic-title-row
    h2 {
    font-size: 1.125rem !important;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-preview-images:is(
      [data-cc-visible-images='3'],
      [data-cc-visible-images='4'],
      [data-cc-visible-images='5']
    ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-preview-images:is(
      [data-cc-visible-images='3'],
      [data-cc-visible-images='5']
    )
    > a:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-topic-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-home-footer-right {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 420px) {
  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    .cc-community-home-footer-right {
    gap: 0.375rem;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    :is(.cc-community-metrics, .cc-community-topic-actions) {
    gap: 0.25rem;
  }

  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    :is(.cc-community-metric, .cc-community-topic-action, .cc-community-action-icon) {
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-type='community'] [data-cc-community-theme-host]
    .cc-community-root.cc-community-shell[data-cc-route='home']
    :is(.cc-community-topic-card, .cc-community-preview-images img) {
    transition: none !important;
  }
}