/* ============================================================
   Risorse — stile sezione contenuti (indice + articoli)
   Complementare a output.css (Tailwind): qui solo ciò che le
   utility compilate non coprono (tipografia editoriale, card).
   Palette: primary #A27ABA, secondary #69B4E4, dark #0A0A0A
   ============================================================ */

/* ---------- Card articolo (pagina indice) ---------- */
.ris-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.ris-card:hover {
    border-color: rgba(162, 122, 186, 0.6);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
}
.ris-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}
.ris-card h2 a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.ris-card p {
    font-size: 0.875rem;
    color: #B0B0B0;
    line-height: 1.6;
}

/* ---------- Chip tag di fase ---------- */
.ris-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    width: fit-content;
}
.ris-tag--guide  { background: rgba(105, 180, 228, 0.15); color: #69B4E4; border: 1px solid rgba(105, 180, 228, 0.35); }
.ris-tag--case   { background: rgba(162, 122, 186, 0.15); color: #A27ABA; border: 1px solid rgba(162, 122, 186, 0.35); }
.ris-tag--costi  { background: rgba(52, 211, 153, 0.12);  color: #34D399; border: 1px solid rgba(52, 211, 153, 0.3);  }

/* ---------- Meta (data, tempo lettura) ---------- */
.ris-meta {
    font-size: 0.75rem;
    color: #7a7a7a;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

/* ---------- Breadcrumb ---------- */
.ris-crumbs {
    font-size: 0.75rem;
    color: #7a7a7a;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.ris-crumbs a { color: #B0B0B0; transition: color 0.2s ease; }
.ris-crumbs a:hover { color: #fff; }
.ris-crumbs span[aria-hidden] { color: #4a4a4a; }

/* ---------- Risposta breve (blocco estraibile da AI) ---------- */
.ris-short {
    border-left: 3px solid #69B4E4;
    background: rgba(105, 180, 228, 0.07);
    border-radius: 0 0.75rem 0.75rem 0;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}
.ris-short p {
    font-size: 1rem;
    line-height: 1.7;
    color: #e5e5e5;
    margin: 0;
}

/* ---------- Corpo articolo: tipografia editoriale ---------- */
.ris-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #d4d4d4;
}
.ris-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 3rem 0 1rem;
    line-height: 1.3;
    scroll-margin-top: 6rem;
}
.ris-body h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 6rem;
}
.ris-body p { margin: 0 0 1.25rem; }
.ris-body a {
    color: #69B4E4;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(105, 180, 228, 0.4);
    transition: text-decoration-color 0.2s ease;
}
.ris-body a:hover { text-decoration-color: #69B4E4; }
.ris-body strong { color: #fff; font-weight: 600; }
.ris-body ul, .ris-body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}
.ris-body ul { list-style: disc; }
.ris-body ol { list-style: decimal; }
.ris-body li { margin-bottom: 0.5rem; }
.ris-body li::marker { color: #A27ABA; }

/* Tabelle dati (scroll orizzontale su mobile, mai overflow di pagina) */
.ris-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
}
.ris-body table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ris-body th {
    text-align: left;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}
.ris-body td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: top;
}
.ris-body tr:last-child td { border-bottom: none; }

/* Citazione / evidenza */
.ris-body blockquote {
    border-left: 3px solid #A27ABA;
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 1.5rem 0;
    color: #b8b8b8;
    font-style: italic;
}

/* ---------- Blocco FAQ ---------- */
.ris-faq { margin-top: 3rem; }
.ris-faq h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin: 1.75rem 0 0.5rem;
}
.ris-faq p { color: #b8b8b8; }

/* ---------- Box autore ---------- */
.ris-author {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
    margin: 3rem 0 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ris-author img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(162, 122, 186, 0.5);
}
.ris-author strong { display: block; color: #fff; font-size: 0.9375rem; }
.ris-author p { font-size: 0.8125rem; color: #B0B0B0; line-height: 1.55; margin: 0.25rem 0 0; }
.ris-author a { color: #69B4E4; text-decoration: none; }
.ris-author a:hover { text-decoration: underline; }

/* ---------- CTA articolo ---------- */
.ris-cta {
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin: 3rem 0 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.14), rgba(105, 180, 228, 0.12));
    border: 1px solid rgba(162, 122, 186, 0.3);
}
.ris-cta p { color: #d4d4d4; font-size: 0.9375rem; margin: 0 0 1.25rem; }

/* ---------- Link correlati ---------- */
.ris-related { margin: 3rem 0 0; }
.ris-related h2 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B0B0B0;
    margin-bottom: 1rem;
}
.ris-related ul { display: flex; flex-direction: column; gap: 0.6rem; }
.ris-related a { color: #d4d4d4; font-size: 0.9375rem; transition: color 0.2s ease; }
.ris-related a:hover { color: #69B4E4; }

/* ---------- Fonti ---------- */
.ris-sources {
    margin: 2.5rem 0 0;
    font-size: 0.8125rem;
    color: #8a8a8a;
}
.ris-sources ol { padding-left: 1.25rem; }
.ris-sources a { color: #8fa8c9; text-decoration: underline; text-underline-offset: 2px; }
.ris-sources a:hover { color: #69B4E4; }