/*
 * Community page (page-community.php). Converted from
 * design_handoff_v5_round3/Marketing Mockups/Pages/Community.dc.html (<helmet>).
 *
 * The Community design ships its OWN responsive layer (the `.rsp-*` classes +
 * @media below) — kept verbatim. Shared machinery is global and reused, not
 * duplicated here: the page shell (`.atarim-page` min-width), the nav
 * hamburger, the footer recolumn, scroll-reveal (`[data-rev]`/`.hp-on`),
 * grain, fonts and smooth scroll all live in tokens.css / site.css. The dc's
 * `.rsp-page{min-width:0}` is dropped — the global `.atarim-page` rule covers
 * it. Page-unique classes are prefixed cm-*.
 */

/* Light-page scrollbar (overrides the global dark one, only while this page's CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* In-page anchor offset (so #summit lands below the fixed nav). */
section[id] { scroll-margin-top: 96px; }

/* ===== Buttons + channel cards, converted from style-hover ===== */
.cm-mint { transition: background .16s ease; }
.cm-mint:hover { background: #35c98a; }
.cm-ghost { transition: border-color .16s ease, color .16s ease; }
.cm-ghost:hover { border-color: #9385FF; color: #9385FF; }
.cm-channel:hover { border-color: rgba(109, 93, 243, 0.45); transform: translateY(-3px); }

/* ===== Hero face collage =====
 * The wrapper carries data-rev; each face inherits the same hpRise entrance with
 * the stagger delay set inline, so the cluster assembles rather than popping in
 * as one block. Reduced motion is handled globally in tokens.css. */
.cm-collage.hp-on img {
	animation-name: hpRise;
	animation-duration: .85s;
	animation-timing-function: cubic-bezier(.22, .61, .21, 1);
	animation-fill-mode: both;
}

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec, untouched ===== */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
	/* Narrow the collage column before it starts squeezing the H1. */
	.rsp-herogrid { grid-template-columns: 1fr 320px !important; gap: 40px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-tiles2 { grid-template-columns: 1fr !important; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	/* Stack: text first, collage below and centred at a smaller size. */
	.rsp-herogrid { grid-template-columns: 1fr !important; gap: 44px !important; }
	.cm-collage { justify-self: center !important; max-width: 300px !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 128px !important; padding-bottom: 54px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	/* Summit (text + stats) is a fixed 1fr/360px grid the source @media never stacked;
	   the 360px stats column overflows (clipped) on phones. Stack it. */
	.rsp-2col { grid-template-columns: 1fr !important; gap: 28px !important; }
}