/* A community homepage as blocks (655_home_blocks.sql, blocks.js): the owner's order, hidden parts, each part's style
   and the banner's layout. Section styles come from sections.css (each block gets class sx); this file fits them to the
   community page's own markup (.wrap, .sec-head) and adds the banner layouts Centered, Full photo and Quiet. */
main.blk-on { display: flex; flex-direction: column; }
main.blk-on > #pk { display: contents; }
main.blk-on > * { min-width: 0; }
.blk-off { display: none !important; }
.blk-host-off { position: relative; opacity: .55; outline: 2px dashed var(--line-2); outline-offset: -8px; }
.blk-host-off::before { content: 'Hidden from visitors'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; font: 600 13px var(--body); color: var(--muted); background: var(--panel); border: 1px dashed var(--line-2); border-radius: 999px; padding: 3px 12px; }

/* Section style on a community block */
:root .sx.sxs-w-narrow > .wrap { max-width: 820px; }
:root .sx.sxs-w-full > .wrap { max-width: none; }
:root .sx.sxs-al-center .sec-head { flex-direction: column; align-items: center; text-align: center; }
:root .sx.sxs-al-center .sec-head p { margin-left: auto; margin-right: auto; }
:root .sx.sxs-h-s :is(.sec-head h2, h2.display, .gp-join-copy h2) { font-size: clamp(26px, 3vw, 36px); }
:root .sx.sxs-h-m :is(.sec-head h2, h2.display, .gp-join-copy h2) { font-size: clamp(32px, 4.2vw, 52px); }
:root .sx.sxs-h-l :is(.sec-head h2, h2.display, .gp-join-copy h2) { font-size: clamp(40px, 5.6vw, 76px); }
:root .sx.sxs-h-xl :is(.sec-head h2, h2.display, .gp-join-copy h2) { font-size: clamp(48px, 7.6vw, 104px); }
:root .sx.sxs-h-hide :is(.sec-head h2, h2.display) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .sx.sxs-on :is(h2, h3, .sec-head p) { color: var(--cream); }
.sx:is(.sxs-bg-pattern, .sxs-bg-photo, .sxs-bg-gradient) > .wrap { position: relative; z-index: 1; }
:root .sx.sxs-sp-compact { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
:root .sx.sxs-sp-roomy { padding-top: clamp(96px, 12vw, 168px); padding-bottom: clamp(96px, 12vw, 168px); }

/* The banner: Centered, Full photo, Quiet (the headline's own font, size, weight and color come from hero.css) */
.hero.hero-l-centered .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero.hero-l-centered .copy { align-items: center; }
.hero.hero-l-centered .copy p { margin-left: auto; margin-right: auto; }
.hero.hero-l-centered .actions { justify-content: center; }
.hero.hero-l-centered .art { justify-content: center; width: 100%; }
.hero.hero-l-centered h1 { max-width: 18ch; }
.hero.hero-l-cover { min-height: max(560px, 88svh); display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: radial-gradient(110% 90% at 80% 0%, color-mix(in srgb, var(--amber) 45%, transparent), transparent 60%), var(--deep, #10131F); }
.hero.hero-l-cover .art { display: none; }
.hero.hero-l-cover .inner { grid-template-columns: 1fr; padding-top: 140px; }
.hero.hero-l-cover :is(h1, p) { color: #fff; }
.hero.hero-l-cover p { color: rgba(255, 255, 255, .86); }
.hero.hero-l-cover .btn-outline-blue { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero.hero-l-cover .kicker { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.hero.hero-l-cover.hxn-center .inner { justify-items: center; text-align: center; }
.hero.hero-l-cover.hxn-center .copy { align-items: center; }
.hero.hero-l-cover.hxn-center .actions { justify-content: center; }
.hero.hero-l-cover.hxn-d-none .hero-photo::after { background: linear-gradient(180deg, transparent 50%, rgba(5, 7, 13, .45)) !important; }
.hero.hero-l-cover.hxn-d-light .hero-photo::after { background: linear-gradient(180deg, rgba(5, 7, 13, .15), rgba(5, 7, 13, .6)) !important; }
.hero.hero-l-cover.hxn-d-medium .hero-photo::after { background: linear-gradient(180deg, rgba(5, 7, 13, .3), rgba(5, 7, 13, .78)) !important; }
.hero.hero-l-cover.hxn-d-strong .hero-photo::after { background: rgba(5, 7, 13, .72) !important; }
.hero.hero-l-quiet .art { display: none; }
.hero.hero-l-quiet .inner { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; }
.hero.hero-l-quiet h1 { font-size: clamp(40px, 5vw, 68px); max-width: 20ch; }
.hero.hxn-center:not(.hero-l-cover) .inner { justify-items: center; text-align: center; }
.hero.hxn-center:not(.hero-l-cover) .copy { align-items: center; }
.hero.hxn-center .actions { justify-content: center; }
.hero.hxn-h-short { min-height: 44vh; } .hero.hxn-h-medium { min-height: 64vh; } .hero.hxn-h-tall { min-height: 82vh; } .hero.hxn-h-full { min-height: 100svh; }
.hero[class*="hxn-h-"] { display: flex; flex-direction: column; justify-content: center; }
.hero.hero-l-cover[class*="hxn-h-"] { justify-content: flex-end; }

/* Over the banner (Top menu), on a community homepage */
html[data-menu="over"]:has(main > .hero:first-child) .site-header { position: fixed; left: 0; right: 0; top: 0; transition: background .3s ease, border-color .3s ease; }
html[data-menu="over"][data-menu-stick="no"]:has(main > .hero:first-child) .site-header { position: absolute; }
html[data-menu="over"]:has(main > .hero:first-child) .site-header:not(.past-hero) { background: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-menu="over"] main > .hero:first-child { border-top: var(--hdr-h, 76px) solid transparent; }