/* Shared Feed / Clubs shell, aligned with the standard application header. */
.community-sections-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 96rem;
  padding: 0 1.25rem;
  margin: 0 auto;
  align-items: start;
  box-sizing: border-box;
}
.community-left-rail { position: sticky; top: 100px; min-width: 0; }
.community-section-nav { display: flex; flex-direction: column; gap: 4px; }
[data-community-section-thumb] { display: none; }
.community-section-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #686a73 !important; text-decoration: none; box-sizing: border-box; }
.community-section-link:hover { background: #eeeef2; }
.community-section-link.is-active { background: #eaeaf0; color: #202127 !important; }
.community-section-link:focus-visible { outline: 2px solid var(--color-primary, #ff0000); outline-offset: 3px; }
.community-section-link .community-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
[data-community-section-content] { min-width: 0; }
.community-clubs-page { background: #f6f6f8; }
.community-clubs-layout { height: 100%; min-height: 0; }
/* Clubs scrolls inside the result list, so its rail is already stationary. */
.community-clubs-layout > .community-left-rail { position: static; }
.community-clubs-content { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .community-sections-layout { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .community-sections-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .community-left-rail { position: static; }
  .community-section-nav { flex-direction: row; }
  .community-section-link { flex: 1; justify-content: center; padding: 10px 12px; }
  .community-clubs-layout { grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .community-feed, .community-clubs-page { --community-switcher-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  body[data-hotwire-native="true"] .community-feed,
  body[data-hotwire-native="true"] .community-clubs-page { --community-switcher-bottom: 6rem; }

  .community-sections-layout { padding: 0 1rem; gap: 0; }
  .community-feed .community-sections-layout, .community-detail .community-sections-layout { padding: 0; }

  /* Reuse the permanent section links as the mobile Jobs-style switcher.
     Only the pill receives taps; the area beside it remains scrollable. */
  .community-sections-layout > .community-left-rail {
    position: fixed;
    top: auto;
    bottom: var(--community-switcher-bottom);
    left: 0;
    right: 0;
    z-index: 65;
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;
  }
  /* The mobile geometry, thumb and item styles are shared with Company / Jobs
     in application.css. Keep only this navigation's active-side mapping here. */
  body [data-mobile-section-switcher] [data-community-section-thumb] {
    display: block;
    transform: translateX(0);
    transition: none;
  }
  .community-section-nav:has([data-community-section="clubs"].is-active) [data-community-section-thumb] { transform: translateX(100%); }

  /* Details own their bottom actions. Ancestor selectors also follow Turbo
     navigation when it moves the permanent navigation node between pages. */
  .community-detail .community-left-rail,
  body.clubs-mobile-detail-open .community-clubs-layout > .community-left-rail { display: none; }
  turbo-frame:has(#clubs-admin-fab[aria-expanded="true"]) .community-left-rail { visibility: hidden; }

  .community-page.community-feed { padding-bottom: calc(var(--community-switcher-bottom) + 4.25rem); }
  /* A passing notice sits above the floating switcher, never on it. */
  .community-feed .community-toast { bottom: calc(var(--community-switcher-bottom) + 4.25rem); }
  .community-clubs-layout { padding: 0; grid-template-rows: minmax(0, 1fr); }
  /* The page's pt-12 clears the same 48px web header as Jobs and Explore.
     Keep search in flow because only the Clubs results scroll. */
  .community-clubs-content #mobile-search-container { position: relative; top: auto; left: auto; right: auto; flex: 0 0 auto; }
  .community-clubs-content [data-native-stable-search-spacer] { display: none; }
  /* Override the shared native list inset too, so the last card clears the pill. */
  body turbo-frame[data-page-type="clubs"] .community-clubs-content #club-list {
    --floating-controls-bottom-padding: calc(var(--community-switcher-bottom) + 4.25rem);
    padding-bottom: var(--floating-controls-bottom-padding) !important;
    scroll-padding-bottom: var(--floating-controls-bottom-padding);
  }
}
@media (max-width: 399px) {
  /* The admin-only 56px action needs a separate row on narrow phones. */
  [data-clubs-add-fab] { transform: translateY(-4.25rem); }
  body turbo-frame[data-page-type="clubs"]:has([data-clubs-add-fab]) .community-clubs-content #club-list {
    --floating-controls-bottom-padding: calc(var(--community-switcher-bottom) + 8.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .community-section-nav [data-community-section-thumb], .community-section-link { transition: none; }
}

/* A shared loading surface keeps the destination visible while Turbo fetches it.
   It sits below the header and permanent section navigation without moving the
   outgoing document or changing its scrollbar. */
html[data-community-section-pending] [data-community-section-content] { visibility: hidden; }
.community-section-loading {
  position: fixed;
  z-index: 50;
  top: 64px;
  right: max(20px, calc((100% - 96rem) / 2 + 20px));
  bottom: 0;
  left: max(264px, calc((100% - 96rem) / 2 + 264px));
  padding: 36px 0 0;
  overflow: hidden;
  background: #f6f6f8;
  pointer-events: auto;
  box-sizing: border-box;
}
.community-section-loading__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.community-section-loading [data-loading-section] { display: none; }
.community-section-loading[data-section="feed"] [data-loading-section="feed"] { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; }
.community-section-loading[data-section="clubs"] [data-loading-section="clubs"] { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 16px; height: 100%; }
.community-section-loading__shape { display: block; height: 12px; width: 100%; border-radius: 6px; background: #ececf1; flex-shrink: 0; }
.community-section-loading__shape.community-section-loading__short { width: 28%; min-width: 70px; }
.community-section-loading__shape.community-section-loading__medium { width: 64%; }
.community-section-loading__shape.community-section-loading__avatar { width: 40px; height: 40px; border-radius: 50%; }
.community-section-loading__sort { display: flex; justify-content: flex-end; align-items: center; height: 44px; padding: 0 2px 12px; box-sizing: border-box; }
.community-section-loading__sort .community-section-loading__shape { width: 112px; }
.community-section-loading__composer,
.community-section-loading__card { position: relative; overflow: hidden; border: 1px solid #e9e8ee; border-radius: 14px; background: #fff; margin-bottom: 16px; padding: 22px; }
.community-section-loading__composer { display: flex; align-items: center; gap: 12px; min-height: 88px; box-sizing: border-box; }
.community-section-loading__author { display: flex; align-items: center; gap: 12px; }
.community-section-loading__lines { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.community-section-loading__body { margin-top: 22px; gap: 12px; }
.community-section-loading__actions { display: flex; gap: 8px; margin-top: 24px; }
.community-section-loading__actions .community-section-loading__shape { height: 28px; width: 54px; border-radius: 20px; }
.community-section-loading__rail .community-section-loading__card { min-height: 140px; gap: 18px; }
.community-section-loading__club-list,
.community-section-loading__club-detail { min-width: 0; border: 1px solid #f0f0f3; border-radius: 16px; background: #fff; overflow: hidden; }
.community-section-loading__search { display: flex; gap: 8px; padding: 12px; }
.community-section-loading__search-input { height: 42px; flex: 1; width: auto; border-radius: 12px; }
.community-section-loading__filter { width: 80px; height: 42px; border-radius: 12px; }
.community-section-loading__results { display: flex; align-items: center; min-height: 44px; padding: 0 16px; }
.community-section-loading__club-row { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px; border-bottom: 1px solid #f3f3f5; position: relative; overflow: hidden; }
.community-section-loading__shape.community-section-loading__club-logo { width: 48px; height: 48px; border-radius: 12px; }
.community-section-loading__club-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.community-section-loading__club-detail .community-section-loading__medium { max-width: 220px; }
.community-section-loading__club-detail .community-section-loading__short { max-width: 150px; }
.community-section-loading__composer::after,
.community-section-loading__card::after,
.community-section-loading__club-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, #ffffff80 50%, transparent 75%); transform: translateX(-100%); animation: community-section-loading-shimmer 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes community-section-loading-shimmer { to { transform: translateX(100%); } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .community-section-loading { left: 224px; }
}
@media (max-width: 1199px) {
  .community-section-loading[data-section="feed"] [data-loading-section="feed"] { grid-template-columns: minmax(0, 1fr); }
  .community-section-loading__rail { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .community-section-loading { top: 156px; left: 20px; padding-top: 0; }
}
body[data-hotwire-native="true"] .community-section-loading { top: 0; padding-top: 0; }
@media (max-width: 767px) {
  .community-section-loading { top: 48px; right: 0; left: 0; padding: 0; }
  .community-section-loading__sort { display: none; }
  .community-section-loading__composer,
  .community-section-loading__card { margin-bottom: 0; padding: 18px 16px 10px; border-width: 0 0 1px; border-radius: 0; }
  .community-section-loading__composer { min-height: 78px; padding: 16px; }
  .community-section-loading__shape.community-section-loading__avatar { width: 38px; height: 38px; }
  .community-section-loading[data-section="clubs"] [data-loading-section="clubs"] { grid-template-columns: minmax(0, 1fr); }
  .community-section-loading__club-list { border: 0; border-radius: 0; }
  .community-section-loading__search { padding: 12px 16px; }
  .community-section-loading__search-input { height: 36px; }
  .community-section-loading__filter { width: 36px; height: 36px; }
  .community-section-loading__club-detail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .community-section-loading__composer::after,
  .community-section-loading__card::after,
  .community-section-loading__club-row::after { animation: none; }
}