/* =============================================================
   SUBCATEGORY PATTERN — shared by all sotto-categorie mockups
   (forex/guida/azioni/crypto/etf/... ). In the final WP theme this
   becomes a single template part + enqueue.
   ============================================================= */

/* ---- hero sottocategoria ---- */
/* Hero categorie CHIARO/editoriale (no blocco scuro): bianco-paper, testo ink, accento brand soffuso */
.subhero{position:relative;overflow:hidden;color:var(--ink);border-radius:var(--r-lg);padding:30px 32px;margin:6px 0 22px;
	background:linear-gradient(180deg,#fff,#f6f3ec);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
/* tratto top neutro sfumato (tridimensionalità, niente accento "AI" colorato) */
.subhero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(21,18,28,.30) 22%,rgba(21,18,28,.30) 78%,transparent)}
.subhero::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(73,7,217,.08),transparent 64%)}
.subhero .in{position:relative;max-width:66ch}
.subhero .eyebrow{color:var(--violet)}
.subhero h1{font-family:var(--disp);font-weight:600;font-size:2.6rem;letter-spacing:-.02em;line-height:1.02;margin:10px 0 0;color:var(--ink)}
.subhero h1 .fx{color:var(--violet)}
.subhero p{color:var(--muted);font-size:1.02rem;margin-top:12px;max-width:62ch}
.subhero .pairs-wrap{display:flex;align-items:center;gap:10px;margin-top:18px;min-width:0}
.subhero .pairs[data-hscroll]{cursor:grab;user-select:none}
.subhero .pairs.is-drag{cursor:grabbing}
.subhero .pairs{position:relative;display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.subhero .pairs::-webkit-scrollbar{display:none}
.subhero .pchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.subhero .pairs-info{flex:0 0 auto}.subhero .pairs-info .q{background:var(--card);border-color:var(--line-2)}
.subhero .pchip b{color:var(--ink);font-weight:700}
.subhero .pchip .up{color:var(--green-700)}.subhero .pchip .dn{color:var(--down)}
.sim-note{position:relative;font-size:.66rem;color:var(--muted);margin-top:9px}

/* big-search nell'hero (pattern "auto/ricerca" — la ricerca è protagonista) */
.bigsearch{position:relative;display:flex;align-items:center;margin-top:20px;max-width:520px}
.bigsearch svg{position:absolute;left:16px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.bigsearch input{width:100%;font-family:var(--sans);font-size:1rem;border:1px solid var(--line-2);background:#fff;color:var(--ink);border-radius:12px;padding:14px 16px 14px 46px;transition:.18s}
.bigsearch input::placeholder{color:var(--muted)}
.bigsearch input:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(73,7,217,.13)}
.suggest{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.suggest .lb{font-size:.72rem;color:var(--muted)}
.suggest button{cursor:pointer;background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--sans);font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:999px;transition:.16s}
.suggest button:hover{background:var(--violet);color:#fff;border-color:var(--violet)}

/* info-tooltip accanto al nome categoria */
.cat-info{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--violet);cursor:help;vertical-align:middle;margin-left:12px;position:relative;top:-6px;transition:.18s}
.cat-info:hover,.cat-info:focus-visible{background:var(--violet-tint);border-color:var(--violet);color:var(--violet-700);outline:none}
.cat-info svg{width:13px;height:13px}
.cat-info .pop{width:300px}
.cat-info .pop b{color:#fff}

/* ---- barra filtri semantici ---- */
.fbar{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:16px 18px;margin:0 0 18px;position:sticky;top:10px;z-index:30}
.fbar .frow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbar .flabel{font-family:var(--disp);font-size:.92rem;font-weight:600;font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.chip{cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-family:var(--sans);font-size:.8rem;font-weight:600;padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--violet);color:var(--violet)}
.chip .n{font-size:.66rem;font-weight:700;color:var(--muted);background:var(--paper-2);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 8px 18px -9px rgba(73,7,217,.7)}
.chip.on .n{background:rgba(255,255,255,.22);color:#fff}
.fsearch{position:relative;display:flex;align-items:center}
.fsearch input{font-family:var(--sans);font-size:.85rem;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px 9px 32px;width:210px;background:#fff;color:var(--ink);transition:.18s}
.fsearch input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-tint)}
.fsearch svg{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.fmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;font-size:.78rem;color:var(--muted)}
.fmeta .cnt b{color:var(--ink-2);font-weight:700}
.fmeta .reset{font-weight:700;color:var(--violet);cursor:pointer;display:none}
.fmeta .reset.show{display:inline}
/* "infinite reveal" SEO-safe: tutte le guide su 1 URL (Google le vede), ma oltre
   la 24ª restano nascoste (display:none → immagini non caricate) finché non si
   clicca "Mostra tutte" o si applica un filtro (subcat.js gestisce poi .hide). */
.cardgrid.is-capped > .card:nth-child(n+25){display:none}
.cardmore-wrap{display:flex;justify-content:center;margin:10px 0 6px}
.cardmore{font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--violet);cursor:pointer;background:linear-gradient(180deg,#fff,#faf9ff);border:1px solid var(--line-2);border-radius:999px;padding:12px 28px;box-shadow:0 6px 18px -10px rgba(73,7,217,.4);transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
.cardmore:hover{transform:translateY(-2px);border-color:var(--violet);color:var(--violet-700);box-shadow:0 12px 26px -12px rgba(73,7,217,.55)}

/* ---- card con sottotitolo + cluster ---- */
.card .sub{font-size:.82rem;line-height:1.45;color:var(--muted);margin:0 0 2px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.9em}
.card.hide{display:none}
.card .ctags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.card .ctag{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--violet);background:var(--violet-tint);border-radius:5px;padding:2px 7px}
.card .ctag.g{color:var(--green-700);background:var(--green-tint)}
.card .ctag.r{color:#a52727;background:#fbe9e9}
mark{background:#fff2ab;color:inherit;padding:0 1px;border-radius:2px}

/* sigillo paternità editoriale — glass discreto (pattern "targhetta") */
.eseal{position:absolute;top:11px;right:11px;z-index:3;width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:help;color:rgba(255,255,255,.9);background:rgba(10,6,24,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.26);transition:background .16s,border-color .16s,color .16s}
.eseal:hover,.eseal:focus-visible{background:rgba(10,6,24,.62);border-color:rgba(255,255,255,.55);color:#fff;outline:none}
.eseal svg{width:13px;height:13px}
.eseal--rev{color:rgba(255,255,255,.66)}
.eseal--rev:hover,.eseal--rev:focus-visible{color:rgba(255,255,255,.92)}
/* tooltip robusto: singolo elemento flottante, riposizionato a ogni apertura/scroll */
.eseal-tt{position:fixed;left:0;top:0;z-index:9999;max-width:300px;width:max-content;background:var(--ink);color:#e9e6f2;font-size:.74rem;line-height:1.5;padding:11px 13px;border-radius:10px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .13s ease,transform .13s ease,visibility .13s;pointer-events:none}
.eseal-tt.show{opacity:1;visibility:visible;transform:translateY(0)}
.eseal-tt b{color:#fff;display:block;margin-bottom:3px}
.eseal-tt::after{content:"";position:absolute;left:var(--ax,50%);top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.eseal-tt.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}

.nores{display:none;text-align:center;padding:50px 20px;color:var(--muted)}
.nores.show{display:block}
.nores .big{font-family:var(--disp);font-size:1.3rem;color:var(--ink-2);margin-bottom:6px}

/* ---- assist educativo ---- */
.edu{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;margin:34px 0;box-shadow:var(--shadow-xs);position:relative;overflow:hidden}
.edu::before{content:none}
.edu .eh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.edu h2{font-family:var(--disp);font-weight:600;font-size:1.4rem}
.edu .eh p{font-size:.82rem;color:var(--muted);margin-top:3px}
.edu .more{font-size:.78rem;font-weight:700;color:var(--violet);white-space:nowrap}
.terms{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.terms::-webkit-scrollbar{height:6px}.terms::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.term{scroll-snap-align:start;flex:0 0 232px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;text-decoration:none;color:inherit;transition:.2s}
.term:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--violet)}
.term .w{display:block;font-family:var(--disp);font-weight:600;font-size:1.06rem;color:var(--ink);margin-bottom:6px}
.term .d{display:block;font-size:.78rem;color:var(--muted);line-height:1.5}
.term .go{display:inline-block;font-size:.7rem;font-weight:700;color:var(--violet);margin-top:11px}

/* ---- box broker correlati ---- */
.relbroker{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px 28px;margin:34px 0 10px;position:relative;overflow:hidden}
.relbroker::before{content:"";position:absolute;inset:0 0 0 auto;width:42%;background:radial-gradient(circle at 80% 30%,rgba(4,190,104,.35),transparent 60%)}
.relbroker .rh{position:relative;font-family:var(--disp);font-weight:600;font-size:1.3rem}
.relbroker .rs{position:relative;color:#b7b1c4;font-size:.85rem;margin:4px 0 16px}
.relbroker .rl{position:relative;display:flex;gap:10px;flex-wrap:wrap}
.relbroker .rl a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:.84rem;padding:10px 15px;border-radius:9px;transition:.18s}
.relbroker .rl a:hover{background:#fff;color:var(--violet)}
.relbroker .rl a.primary{background:#fff;color:var(--violet);font-weight:700}

/* ---- minimal (sottocategorie povere: niente filtri) ---- */
.subcat-intro{font-family:var(--disp);font-size:1.18rem;line-height:1.55;color:var(--ink-2);max-width:64ch;margin:0 0 26px}

@media(max-width:760px){
  .subhero{padding:22px 18px}
  .subhero h1{font-size:1.55rem;line-height:1.16}
  .subhero h1 .fx{font-size:1.35rem}
  .subhero h1 .cat-info{font-size:.5em;vertical-align:middle}
  /* prezzi live: gestiti dalla regola base (.pairs-wrap + scroll) */
  .subhero .pchip{flex:0 0 auto}
  .fbar{position:static}
  .fbar .frow{gap:10px}
  .flabel{flex:0 0 100%}
  /* chip in riga unica scrollabile (swipe) invece di righe impilate */
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;margin:0 -18px;padding:2px 18px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}
  .fsearch{flex:0 0 100%}.fsearch input{width:100%}
  .bigsearch{max-width:none}
}

/* =======================================================================
   Category visual upgrade (2026-06-15): card 3D + bordi sfumati, zoom
   immagine, container interattivi. Scoped a .cardgrid (solo categorie/archivi).
   ===================================================================== */
/* Article cards → refined 3D bordered cards with gradient hairline on hover */
.cardgrid{gap:22px}
.cardgrid .card{position:relative;isolation:isolate;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(21,18,28,.04),0 14px 30px -22px rgba(21,18,28,.5);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s}
.cardgrid .card:hover{transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:0 2px 6px rgba(21,18,28,.06),0 30px 54px -26px rgba(73,7,217,.45)}
.cardgrid .card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:3;pointer-events:none;opacity:0;transition:opacity .32s;
  background:linear-gradient(135deg,rgba(73,7,217,.55),rgba(4,190,104,.4) 58%,transparent 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cardgrid .card:hover::after{opacity:1}
.cardgrid .card .ph{aspect-ratio:16/10;border-radius:0;box-shadow:none;margin:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cardgrid .card:hover .ph{transform:scale(1.045)}
.cardgrid .card h3{margin:14px 16px 6px;font-size:1.06rem;transition:color .2s}
.cardgrid .card:hover h3{color:var(--violet-700)}
.cardgrid .card .sub{margin:0 16px}
.cardgrid .card .meta{margin:11px 16px 0}
.cardgrid .card .ctags{margin:10px 16px 15px}
/* contenuti non ancora revisionati: leggera texture diagonale (segnale, non invasivo) */
.cardgrid .card[data-unrev] .ph::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(21,18,28,.03) 9px,rgba(21,18,28,.03) 18px)}

/* Filter bar: gradient hairline in cima + profondità (no absolute → robusto anche static) */
.fbar{background:linear-gradient(180deg,#fff,#fbfaff);
  box-shadow:0 1px 2px rgba(21,18,28,.04),0 16px 34px -26px rgba(73,7,217,.22)}

/* Concept cards (edu): 3D + bordo sfumato su hover */
.term{position:relative;isolation:isolate;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.term:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 20px 38px -20px rgba(73,7,217,.5)}
.term::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:2;pointer-events:none;opacity:0;transition:opacity .28s;
  background:linear-gradient(135deg,var(--violet),var(--green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.term:hover::after{opacity:1}

/* Subhero chiaro: ombra neutra leggera (no glow violetto da blocco scuro) */
.subhero{box-shadow:0 18px 40px -30px rgba(21,18,28,.28)}
.relbroker{box-shadow:0 30px 60px -40px rgba(21,18,28,.7)}
.relbroker .rl a{transition:transform .2s,background .2s,color .2s}
.relbroker .rl a:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .cardgrid .card,.cardgrid .card .ph,.term,.relbroker .rl a{transition:none}
  .cardgrid .card:hover,.term:hover,.cardgrid .card:hover .ph{transform:none}
}