/* =====================================================================
   pl-tribe.css — layer condiviso del design system "Tribe" (.pt)
   ---------------------------------------------------------------------
   Estratto da community.njk per essere riusato da /community e
   /community/incontri-avanzati senza duplicare il CSS .pt.
   Va caricato DOPO /pl-home.css e PRIMA dello <style> locale di pagina
   (che contiene solo i componenti unici di ciascuna pagina):
     s-94d6eb4b7207.css  ->  pl-home.css  ->  pl-tribe.css  ->  <style>
   Contiene SOLO componenti riusabili: token premium, sfondi, tipografia,
   bottoni, ricetta vetro delle card, calendario (.tribe-date*/.tribe-btn*),
   legenda, FAQ (.pt-faq), citazioni (.qg .review-card), CTA finale
   (.finalcta), sticky, e i fix alle collisioni di pl-home.css.
   Nessun hex fuori dai token --pl-*, salvo i valori gia' presenti
   nell'originale (gradienti scuri, vetri, overlay).
   ===================================================================== */

/* --- font: fallback anti-CLS --- */
@font-face{font-family:'Inter-fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Cormorant-fallback';src:local('Georgia');size-adjust:88%;ascent-override:110%;descent-override:30%;line-gap-override:0%}

/* --- variabili .pt mappate 1:1 sui token premium di pl-home.css --- */
.pt{--brand:var(--pl-brand);--brand-light:var(--pl-brand-light);--brand-deep:var(--pl-brand-deep);
    --dark:var(--pl-dark);--dark-soft:var(--pl-dark-soft);--paper:var(--pl-paper);
    --paper-soft:var(--pl-paper-soft);--paper-warm:var(--pl-paper-warm);--ink:var(--pl-ink);
    font-family:'Inter','Inter-fallback',system-ui,sans-serif;color:var(--pl-ink);line-height:1.7;overflow-x:clip;font-variant-numeric:lining-nums}
.pt .sf{font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif}
.pt .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* pagina scura fino al footer: niente fascia chiara, footer senza margin-top */
html:has(.pt),body:has(.pt){background:var(--pl-dark)}
body:has(.pt) .pl-footer{margin-top:0}

/* --- sfondi: sezioni scure (come .section-b della home) e chiare --- */
.pt .dark,.pt .warm{position:relative;overflow:hidden;color:var(--pl-paper);
    background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.045),transparent 34%),radial-gradient(circle at 82% 0%,rgba(242,140,24,.2),transparent 36%),linear-gradient(180deg,#17120d 0%,#0f0e0d 100%)}
.pt .dark::after,.pt .warm::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px);background-size:160px 160px;opacity:.22;mask-image:radial-gradient(circle at 50% 22%,black 0%,transparent 62%)}
.pt .dark>.wrap,.pt .warm>.wrap{position:relative;z-index:2}
.pt .soft{background:var(--pl-paper-soft)}
.pt .paper{background:var(--pl-paper)}

/* --- tipografia e utilita' --- */
.pt .kick{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin:0}
.pt .kd{color:var(--pl-brand)}
.pt .kl{color:var(--pl-brand-deep)}
.pt .chap{font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-style:italic;font-size:24px;margin:0}
.pt .h2{font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-weight:600;font-size:clamp(40px,4.8vw,64px);line-height:1.04;letter-spacing:-.035em;margin:14px 0 0}
.pt .h2 em{font-style:italic}
.pt .h2.acc em{color:var(--brand-deep)}
.pt .body{font-size:17px;line-height:1.65;margin:0}
.pt .mutedd{color:rgba(244,238,229,.76)}
.pt .mutedl{color:rgba(20,17,14,.74)}
.pt .sec{padding:120px 0}
.pt a{color:var(--brand-deep)}.pt a:hover{color:#7a3d00}
/* nav fissa: spacer in cima alla prima sezione scura */
.pt .pt-top{padding-top:80px}

/* --- bottoni: .btn .btn-orange (home) + ghost su scuro --- */
.pt .btn{min-height:52px}
.pt a.btn-orange,.pt a.btn-ghost,.pt a.plan-btn{color:#fff}
.pt .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.09);backdrop-filter:blur(12px);font-family:inherit}
.pt .btn-ghost:hover{background:rgba(255,255,255,.15)}

/* --- lead (su scuro) --- */
.pt .lead{font-size:19px;line-height:1.6;color:rgba(244,238,229,.82);max-width:560px;margin:0 0 34px}
.pt .lead strong{color:var(--paper);font-weight:600}
.pt .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* --- ricetta vetro delle card del valore (su chiaro) --- */
.pt .pc{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.28));border-radius:var(--pl-radius);overflow:hidden;box-shadow:var(--pl-shadow-soft);display:flex;flex-direction:column;text-decoration:none;color:var(--pl-ink);border:1px solid rgba(48,34,22,.08);transition:transform .25s var(--pl-ease),box-shadow .25s var(--pl-ease)}
.pt .pc:hover{transform:translateY(-4px);box-shadow:var(--pl-shadow-premium);color:var(--pl-ink)}
.pt .pcb{padding:26px;display:flex;flex-direction:column;gap:6px;flex:1}
.pt .pct{font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-size:31px;line-height:1.05;font-weight:500;margin:0}
.pt .ptime{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand-deep);margin:0 0 4px}
.pt .pcl{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:rgba(20,17,14,.84)}
.pt .pcl li{display:flex;gap:10px;align-items:flex-start}
.pt .pcl svg{flex:none;margin-top:3px}
.pt .pcgo{margin-top:auto;padding-top:18px;font-weight:600;font-size:14px;color:var(--brand-deep);display:inline-flex;gap:6px;align-items:center}

/* --- archivio: numero-ancora e legenda formati --- */
.pt .giant{font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-size:210px;line-height:.8;color:var(--brand);margin:26px 0 0;font-weight:500;letter-spacing:-.03em}
.pt .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;font-size:14px;color:rgba(244,238,229,.72)}
/* 4 voci: 2x2 su desktop, mai una voce orfana (count-aware via :has) */
.pt .legend:has(span:nth-child(4)){grid-template-columns:repeat(2,1fr)}
.pt .legend strong{color:var(--paper);font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-size:24px;font-weight:600;margin-right:6px}
.pt .arrowl{display:inline-flex;align-items:center;gap:8px;color:var(--brand);text-decoration:none;font-weight:600;font-size:15px;margin-top:28px}
.pt .arrowl:hover{color:var(--brand-light)}

/* --- calendario "prossimi": intestazione + card data (ri-skin del partial tribe) --- */
.pt .nexth{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:88px 0 22px;padding-top:40px;border-top:1px solid rgba(244,238,229,.12)}
.pt .tribe-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.pt .tribe-date{background:radial-gradient(circle at 100% 0%,rgba(242,140,24,.1),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);border-radius:var(--pl-radius);padding:26px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"day rel" "title title" "week week";gap:0;align-items:start;box-shadow:0 24px 90px rgba(0,0,0,.25)}
.pt .tribe-date__day{grid-area:day;font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-size:72px;line-height:.85;color:var(--brand);font-weight:500}
.pt .tribe-date__month{grid-area:day;align-self:end;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:rgba(244,238,229,.7);margin-left:84px;margin-top:-18px}
.pt .tribe-date__rel{grid-area:rel;justify-self:end;min-width:96px;text-align:center;font-size:12px;font-weight:600;background:rgba(242,140,24,.14);color:var(--brand-light);padding:7px 12px;border-radius:999px;white-space:nowrap}
.pt .tribe-date__title{grid-area:title;font-family:'Cormorant Garamond','Cormorant-fallback',Georgia,serif;font-size:25px;line-height:1.1;margin:18px 0 0;font-weight:500;color:var(--paper)}
.pt .tribe-dates__empty{grid-column:1/-1;text-align:center;padding:28px;border:1px dashed rgba(244,238,229,.3);border-radius:16px;color:rgba(244,238,229,.8)}
.pt .tribe-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--pl-brand-deep),var(--pl-brand),var(--pl-brand-light));box-shadow:var(--pl-shadow-brand)}
.pt .tribe-btn:hover{transform:translateY(-2px)}
.pt .tribe-btn--ghost{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none;backdrop-filter:blur(12px)}
.pt .tribe-btn--ghost:hover{background:rgba(255,255,255,.15)}

/* --- citazioni: 3 .review-card della home in griglia --- */
.pt .qg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
/* pl-home impone .review-card{min-width:82vw!important} (carosello home): neutralizzato qui */
.pt .qg .review-card{display:flex;flex-direction:column;min-width:0!important}

/* --- FAQ: <details> nativo con il look della FAQ home --- */
.pt .pt-faq{max-width:750px;margin:48px auto 0;display:flex;flex-direction:column}
.pt .pt-faq details{border-bottom:1px solid rgba(20,17,14,.1)}
.pt .pt-faq summary{cursor:pointer;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:500;color:var(--pl-ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 0}
.pt .pt-faq summary:hover{color:var(--pl-brand)}
.pt .pt-faq summary::-webkit-details-marker{display:none}
.pt .pt-faq summary span{color:var(--pl-brand);font-size:1.3rem;line-height:1;font-weight:300;transition:transform .3s}
.pt .pt-faq details[open] summary span{transform:rotate(45deg)}
.pt .pt-faq p{margin:0 0 22px;font-size:.88rem;color:rgba(20,17,14,.62);line-height:1.7;max-width:680px}

/* --- CTA finale su immagine --- */
.pt .finalcta{position:relative;overflow:hidden;padding:150px 0}
.pt .finalcta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt .finalcta .ov{position:absolute;inset:0;background:rgba(10,9,8,.62)}
.pt .finalcta .wrap{position:relative;text-align:center}

/* --- sticky mobile --- */
.pt .sticky{display:none}

/* --- slider prima/dopo (.ba): componente condiviso tra /community e
   /community/incontri-avanzati. Il markup lo rende tribe/slider.njk, il JS
   tribe/slider.njk (stesso partial). L'aspect-ratio di default e' 2/1
   (orizzontale, /community); una pagina con foto verticale lo sovrascrive
   sul proprio .ba (incontri: 1048/1590). --- */
.pt .ba{position:relative;border-radius:var(--pl-radius);overflow:hidden;aspect-ratio:2/1;box-shadow:var(--pl-shadow-premium);background:#222;touch-action:none;user-select:none}
.pt .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pt .ba__after{position:absolute;inset:0;overflow:hidden;width:50%}
.pt .ba__after img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.pt .bal{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.pt .bak{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none}
.pt .ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.pt .tag{position:absolute;top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(15,14,13,.72);color:#fff;pointer-events:none;z-index:2}

/* =============================== @media 980 =============================== */
@media (max-width:980px){
 .pt .sec{padding:96px 0}
 .pt .giant{font-size:150px}
 .pt .nexth{margin-top:64px}
 .pt .tribe-dates,.pt .qg{grid-template-columns:minmax(0,1fr)}
}

/* =============================== @media 600 =============================== */
@media (max-width:600px){
 .pt .wrap{padding:0 16px}
 .pt .sec{padding:20px 0}
 .pt .h2{font-size:clamp(28px,7.5vw,34px);line-height:1.08}
 .pt .pt-top{padding-top:40px}
 .pt .body{font-size:15px;line-height:1.6}
 /* card del valore: lista piu' compatta */
 .pt .pcl{gap:7px;margin-top:12px;font-size:14px}
 .pt .pcl li{line-height:1.35}
 /* CTA finale: padding verticale ridotto su mobile */
 .pt .finalcta{padding:34px 0}
 /* numero-ancora + legenda. pl-home @768 impone p,li{font-size:.95rem!important}:
    il giant e' un <p>, quindi !important per restituirgli la scala. */
 .pt .giant{font-size:clamp(72px,22vw,96px)!important;margin-top:8px;line-height:.78}
 .pt .arrowl{margin-top:14px}
 /* legenda su mobile: era display:grid, quindi flex-wrap era inerte. Ora grid
    esplicita: 3 voci in riga, 4 voci 2x2 (count-aware). */
 .pt .legend{grid-template-columns:repeat(3,1fr);gap:12px;font-size:12px;margin-top:12px}
 .pt .legend:has(span:nth-child(4)){grid-template-columns:repeat(2,1fr)}
 .pt .legend span{min-width:0}
 .pt .legend strong{font-size:20px;margin-right:4px;display:block}
 /* calendario: righe compatte ~88px */
 .pt .nexth{margin-top:16px;padding-top:16px}
 .pt .tribe-dates{display:flex;flex-direction:column;gap:12px}
 .pt .tribe-date{grid-template-columns:56px 1fr;grid-template-areas:"day title" "day rel";column-gap:16px;row-gap:4px;align-items:center;padding:14px 18px;min-height:88px}
 .pt .tribe-date__day{grid-area:day;align-self:start;justify-self:center;font-size:38px;line-height:1;text-align:center}
 .pt .tribe-date__month{grid-area:day;align-self:end;justify-self:center;position:static;margin:0;text-align:center;font-size:12px;letter-spacing:.14em}
 .pt .tribe-date__title{grid-area:title;align-self:end;font-size:18px;margin:0;line-height:1.15}
 .pt .tribe-date__rel{grid-area:rel;justify-self:start;align-self:start;min-width:0;padding:4px 10px}
 /* aree tocco >= 44px */
 .pt .arrowl{min-height:44px;display:inline-flex;align-items:center}
 .pt a[href*="trustpilot"]{display:inline-flex;align-items:center;min-height:44px}
 /* citazioni: carosello orizzontale, card 85% */
 .pt .qg{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:28px -16px 0;padding:0 16px 4px;scrollbar-width:none}
 .pt .qg::-webkit-scrollbar{display:none}
 .pt .qg .review-card{flex:0 0 85%;scroll-snap-align:start;padding:24px}
 /* sticky: comparsa gestita da JS (classe is-visible) */
 body:has(.pt){padding-bottom:0}
 .pt .sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:8px;padding:10px 12px;background:rgba(15,14,13,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(244,238,229,.14)}
 .pt .sticky.is-visible{display:flex}
 body.pl-footer-visible .pt .sticky.is-visible{display:none}
 body:has(.pt .sticky.is-visible){padding-bottom:72px}
 .pt .sticky .btn{flex:1;min-height:48px;padding:0 12px;font-size:14px}
 /* tipografia minima >= 12px */
 .pt .kick{font-size:12px;letter-spacing:.18em}
 /* etichette PRIMA/DOPO dello slider: >= 12px su mobile */
 .pt .tag{font-size:12px;letter-spacing:.1em;padding:6px 11px}
}
@media (prefers-reduced-motion:reduce){.pt .pc{transition:none}}