/* channels.css — the community section.
 *
 * A contained tinted panel placed after the proof sections (case studies,
 * reviews) and before process/contact. Clearly subordinate to the case wall:
 * one block, not full-bleed, not the page's loudest field.
 */

/* ---- panel ---------------------------------------------------------------- */
.community{padding-block:clamp(48px,6vw,80px)}
.comm-panel{background:var(--surface);border:1px solid var(--rule);
  border-radius:16px;padding:clamp(32px,4vw,56px) clamp(24px,3.6vw,48px);
  max-width:900px;margin-inline:auto}

.comm-panel .sec-head{text-align:center;margin-bottom:clamp(28px,3.6vw,44px)}
.comm-panel .sec-head h2{font-size:clamp(24px,2.8vw,36px)}
.comm-panel .sec-head .sub{max-width:52ch;margin-inline:auto}

/* ---- perks — three concrete things you get -------------------------------- */
.comm-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
  margin-bottom:clamp(28px,3.6vw,44px)}
.comm-perk{text-align:center;padding:clamp(16px,2vw,24px)}
.comm-perk h3{font-family:var(--display);font-size:clamp(15px,1.4vw,18px);
  font-weight:600;margin:0 0 6px;color:var(--ink)}
.comm-perk p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}

/* ---- proof of life -------------------------------------------------------- */
.comm-proof{border-top:1px solid var(--rule);padding-top:clamp(16px,2vw,24px);
  margin-bottom:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:10px}
.comm-proof-item{display:flex;align-items:baseline;gap:12px;font-size:14px;
  color:var(--ink);text-decoration:none}
a.comm-proof-item:hover{color:var(--teal)}
.comm-proof-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);flex:none;min-width:10ch}
html[lang="ar"] .comm-proof-label{font-family:Qomraa,Tajawal,sans-serif;
  letter-spacing:0;font-size:12px;font-weight:600;text-transform:none}

/* ---- CTAs ----------------------------------------------------------------- */
.comm-cta{display:flex;justify-content:center;gap:12px;margin-bottom:16px;
  flex-wrap:wrap}
.comm-btn-tg{display:inline-flex;align-items:center;gap:8px}
.comm-btn-tg svg{flex:none}
.comm-btn-wa{display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--ink);border:1px solid var(--rule)}
.comm-btn-wa:hover{background:var(--page);border-color:var(--ink-soft)}
.comm-btn-wa svg{flex:none}

.comm-archive-link{display:block;text-align:center;font-size:13.5px;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.comm-archive-link:hover{color:var(--teal)}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:600px){
  .comm-perks{grid-template-columns:1fr;gap:12px}
  .comm-perk{text-align:start;padding:12px 0;border-top:1px solid var(--rule)}
  .comm-perk:first-child{border-top:none}
  .comm-proof-item{flex-direction:column;gap:4px}
  .comm-proof-label{min-width:auto}
  .comm-cta{flex-direction:column;align-items:stretch}
  .comm-btn-tg,.comm-btn-wa{justify-content:center}
}

/* ---- hidden --------------------------------------------------------------- */
.community[hidden],.comm-panel[hidden]{display:none!important}