/* Hub www.thehivemind.it */

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.comb{position:absolute;inset:0;width:100%;height:100%;opacity:.6;pointer-events:none}
@media (max-width:900px){.comb-labels{display:none}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:3rem;padding-block:clamp(3.5rem,9vw,7rem)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.title{font:700 clamp(3.6rem,13vw,9.5rem)/.86 var(--display);text-transform:uppercase;margin:0 0 1.5rem}
.title .l1{display:block;color:var(--head)}
.title .l2{display:block;color:var(--amber);font-size:.3em;letter-spacing:.14em;margin-top:.35em;padding-top:.35em;border-top:2px solid var(--amber);width:max-content}
.lede{font-size:1.3rem;max-width:34ch;color:var(--head)}
.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* tabellone dei server (il pezzo memorabile, come il registro di bordo del sito DayZ) */
.board{align-self:end;background:var(--bg2);border:1px solid var(--line);padding:1.5rem 1.6rem 1.3rem;font-size:1rem;box-shadow:8px 8px 0 color-mix(in srgb,var(--rust) 45%,transparent)}
.board h3{font-size:1rem;color:var(--muted);letter-spacing:.12em;margin-bottom:.6rem}
.board ul{list-style:none;margin:0;padding:0}
.board li+li{border-top:1px dashed var(--line)}
.board a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"game arrow" "name arrow" "tag arrow";padding:.9rem 0;color:inherit;text-decoration:none}
.board a::after{content:"→";grid-area:arrow;align-self:center;font:500 1.6rem var(--display);color:var(--amber);transition:transform .15s}
.board a:hover::after,.board a:focus-visible::after{transform:translateX(4px)}
.board .game{grid-area:game;font:400 .85rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.board .name{grid-area:name;font:700 1.7rem/1.1 var(--display);text-transform:uppercase;color:var(--head)}
.board .tag{grid-area:tag;font-style:italic;color:var(--muted)}
.board a:hover .name{color:var(--amber)}
.live{display:flex;align-items:center;gap:.5rem;font:400 .9rem var(--display);letter-spacing:.05em;color:var(--muted);margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.9rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}

/* schede dei server */
.worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:2.5rem}
@media (max-width:820px){.worlds{grid-template-columns:1fr}}
.world{background:var(--bg2);border:1px solid var(--line);border-top:4px solid var(--accent,var(--amber));padding:1.8rem 1.8rem 1.6rem;display:flex;flex-direction:column}
.world.dayz{--accent:var(--rust)}
.world.zomboid{--accent:var(--sea)}
.world .game{font:400 .95rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.world h3{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:1rem}
.world p{font-size:1.05rem}
.world dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:.5rem 0 0;font-size:1rem}
.world dt{color:var(--muted);font-style:italic}
.world dd{margin:0;color:var(--head)}
.world .actions{margin-top:auto;padding-top:1.8rem}

/* community */
.community{background:var(--bg2)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--head);margin-top:2.5rem}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
.pillars article{padding:1.4rem 1.4rem 0 0;border-right:1px solid var(--line)}
.pillars article+article{padding-left:1.4rem}
.pillars article:last-child{border-right:0}
@media (max-width:820px){.pillars article,.pillars article+article{padding:1.2rem 0;border-right:0;border-bottom:1px solid var(--line)}}
.pillars h3{margin-bottom:.6rem}
.pillars p{font-size:1.02rem}

/* invito finale */
.join{text-align:center}
.join p{margin-inline:auto;color:var(--head);font-size:1.2rem}
.join .actions{justify-content:center}

/* colori del nido d'ape nell'intestazione */
.c-line-stroke{stroke:var(--line)}
.c-amber-fill{fill:var(--amber)}
.c-cell{fill:color-mix(in srgb,var(--amber) 10%,transparent);stroke:var(--amber)}
.c-amber-soft{fill:var(--amber);opacity:.35}