/* community theme: Community & Social Innovation
   Warm lantern light over a deep charcoal neighborhood: honey amber + soft sage,
   Bricolage Grotesque display, rounded conversational cards.
   Every selector is scoped to .theme-panel[data-theme="community"]. */

.theme-panel[data-theme="community"]{
  --tp-bg:
    radial-gradient(80% 55% at 100% 0%, rgba(240,168,80,.09), transparent 62%),
    radial-gradient(70% 55% at 88% 100%, rgba(150,186,140,.12), transparent 66%),
    linear-gradient(165deg, #17171A 0%, #121214 48%, #0F0F11 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos: 72% 50%;
  /* the photo (a market alley at dusk) stays brightest in the top-right corner, under the string lights;
     everything behind the text is held down to a warm charcoal */
  --tp-overlay:
    linear-gradient(90deg, rgba(16,16,18,.88) 0%, rgba(16,16,18,.75) 55%, rgba(16,16,18,.35) 100%),
    linear-gradient(180deg, rgba(16,16,18,.40) 0%, rgba(16,16,18,.80) 28%, rgba(16,16,18,.84) 75%, rgba(16,16,18,.74) 100%);

  --tp-accent: #F4B860;
  --tp-accent-2: #F7C987;
  --tp-text: #F2F0EC;
  --tp-text-2: #C4C2BD;
  --tp-line: rgba(255,255,255,.12);
  --tp-card: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --tp-card-border: rgba(255,255,255,.14);

  --tp-font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --tp-font-body: "Manrope", "Geist", system-ui, sans-serif;
  --tp-font-label: "Manrope", "Geist", system-ui, sans-serif;

  --tp-h3-size: clamp(38px, 4.6vw, 60px);
  --tp-h3-weight: 700;
  --tp-h3-stretch: 100%;
  --tp-h3-style: normal;
  --tp-h3-transform: none;
  --tp-h3-tracking: -.035em;
  --tp-radius:20px;
  --tp-decor-opacity: 1;

  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.09);
}

/* decor anchored to the top-right corner, so the string lights and the network stay off the text */
.theme-panel[data-theme="community"] .tp-decor{object-position: 100% 0}

/* ---------- label pill ---------- */
.theme-panel[data-theme="community"] .panel-n{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px; margin-bottom: 20px;
  border-radius: 999px; border: 1px solid rgba(175,205,162,.30);
  background: rgba(175,205,162,.10);
  color: #D3E7C8; font-family: var(--tp-font-label); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; line-height: 1;
}
.theme-panel[data-theme="community"] .panel-n::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #AFCDA2; box-shadow: 0 0 0 0 rgba(175,205,162,.55);
  animation: community-ping 4.5s ease-out infinite;
}
@keyframes community-ping{0%{box-shadow:0 0 0 0 rgba(175,205,162,.55)}60%,100%{box-shadow:0 0 0 9px rgba(175,205,162,0)}}

/* ---------- title: warm white into steel ---------- */
.theme-panel[data-theme="community"] h3{
  line-height: .98; padding-bottom: .06em; margin-bottom: 30px; max-width: 13em;
  color: #F2F0EC;
  background: linear-gradient(176deg, #FFFFFF 0%, #ECE7E0 48%, #BFC5CC 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- section labels ---------- */
.theme-panel[data-theme="community"] h4{
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--tp-text-2);
}
.theme-panel[data-theme="community"] h4::before{
  content: ""; width: 22px; height: 6px; border-radius: 6px; flex: none;
  background: linear-gradient(90deg, #F4B860, #AFCDA2);
}

/* ---------- questions as soft speech bubbles ---------- */
.theme-panel[data-theme="community"] .questions{display: grid; gap: 12px; margin-bottom: 38px}
.theme-panel[data-theme="community"] .questions li{
  padding: 20px 24px 20px 72px;
  border: 1px solid rgba(255,220,170,.11);
  border-radius: 26px 26px 26px 8px;
  background: linear-gradient(160deg, rgba(255,236,210,.065), rgba(255,236,210,.02));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 17px; font-weight: 500; line-height: 1.6;
}
.theme-panel[data-theme="community"] .questions li::before{
  left: 18px; top: 17px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: #2A1B0A;
  background: radial-gradient(circle at 35% 30%, #FFE8C2 0%, #F4B65F 62%, #DA8F3B 100%);
  box-shadow: 0 0 0 4px rgba(244,184,96,.12), 0 6px 18px rgba(240,160,70,.22);
}
.theme-panel[data-theme="community"] .questions li:nth-child(2)::before{
  color: #1B2617;
  background: radial-gradient(circle at 35% 30%, #F1F8EC 0%, #B6D3A8 62%, #88AE7B 100%);
  box-shadow: 0 0 0 4px rgba(175,205,162,.12), 0 6px 18px rgba(140,180,120,.2);
}

/* ---------- who's in the room: rounded, inviting tiles ---------- */
.theme-panel[data-theme="community"] .board{gap: 12px}
.theme-panel[data-theme="community"] .board li{
  position: relative; border-radius: 22px; padding: 16px 18px 18px;
  font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,230,195,.07);
}
.theme-panel[data-theme="community"] .board li.board-tbd{box-shadow: none; min-height: 64px}
/* the dashed seat is see-through: no blur, so a network line passing under it stays a crisp line */
.theme-panel[data-theme="community"] .board li.board-tbd{-webkit-backdrop-filter: none; backdrop-filter: none}
.theme-panel[data-theme="community"] .tag{
  display: block; width: fit-content; margin-bottom: 10px;
  padding: 5px 10px 4px; border-radius: 999px;
  background: rgba(244,184,96,.13); color: #F8CF92;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
}
.theme-panel[data-theme="community"] .board li:nth-child(even) .tag{background: rgba(175,205,162,.14); color: #CBE2BF}
/* a small person mark on each filled seat */
.theme-panel[data-theme="community"] .board li:not(.board-tbd)::after{
  content: ""; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 37%, #F4C27E 0 4.4px, transparent 5px),
    radial-gradient(ellipse 9.5px 7.5px at 50% 100%, #F4C27E 0 96%, transparent 100%),
    rgba(244,184,96,.14);
  box-shadow: 0 0 0 1px rgba(244,184,96,.22);
}
.theme-panel[data-theme="community"] .board li:nth-child(even):not(.board-tbd)::after{
  background:
    radial-gradient(circle at 50% 37%, #C3DDB6 0 4.4px, transparent 5px),
    radial-gradient(ellipse 9.5px 7.5px at 50% 100%, #C3DDB6 0 96%, transparent 100%),
    rgba(175,205,162,.14);
  box-shadow: 0 0 0 1px rgba(175,205,162,.24);
}
.theme-panel[data-theme="community"] .board li:hover{box-shadow: inset 0 1px 0 rgba(255,230,195,.1), 0 14px 30px rgba(0,0,0,.28)}

.theme-panel[data-theme="community"] .mentor-note{margin-top: 18px}

/* ---------- tablet / small laptop (721-1160px): the panel is either full width or squeezed beside the tab list,
   and the text spans almost all of it, so one cover-scaled drawing lands the lights on the label, the hubs on
   the card edges and the lower network under the tiles. Split it like the phone layout, at a fixed scale: lights + upper network as a header band
   to the right of the title, the lower network as a footer band in an empty strip under the mentor note. ---------- */
@media (min-width: 721px) and (max-width: 1160px){
  .theme-panel[data-theme="community"] .tp-art{
    bottom: auto; height: 440px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .theme-panel[data-theme="community"] .tp-decor{height: 640px}
  .theme-panel[data-theme="community"]::after{
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("community-decor.svg") no-repeat 100% 100% / auto 640px;
    -webkit-mask-image: linear-gradient(0deg, #000 0, #000 112px, transparent 240px);
    mask-image: linear-gradient(0deg, #000 0, #000 112px, transparent 240px);
  }
  .theme-panel[data-theme="community"] .tp-body{padding-bottom: 120px}
}

/* ---------- phone: the lights become a header band, the lower network a footer band ---------- */
@media (max-width: 720px){
  .theme-panel[data-theme="community"] .tp-art{
    bottom: auto; height: 300px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .theme-panel[data-theme="community"] .tp-decor{height: 520px}
  .theme-panel[data-theme="community"]::after{
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("community-decor.svg") no-repeat 100% 100% / auto 520px;
    -webkit-mask-image: linear-gradient(0deg, #000 0, #000 80px, transparent 210px);
    mask-image: linear-gradient(0deg, #000 0, #000 80px, transparent 210px);
  }
  .theme-panel[data-theme="community"] .tp-body{padding-top: 136px; padding-bottom: 112px}
  .theme-panel[data-theme="community"] .questions li{padding: 18px 18px 18px 64px; font-size: 16.5px}
  .theme-panel[data-theme="community"] .questions li::before{left: 14px; top: 16px; width: 36px; height: 36px}
}

@media (prefers-reduced-motion: reduce){
  .theme-panel[data-theme="community"] .panel-n::before{animation: none}
}

/* photo slot: uncomment once assets/themes/community.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="community"]::before{background-image:var(--tp-overlay),url("community.jpg")} */