/*
 * Info Snippet component styles.
 *
 * This file contains the CSS previously embedded inline within the
 * components/info-snippet/info-snippet.php template. Moving the CSS to its
 * own file improves caching and allows browsers to download it once and
 * reuse it across pages. The styles define a Bento-style grid inspired by
 * macOS Sonoma, with glassmorphism cards, responsive layout and decorative
 * gradients.
 */

.bspc-bento-wrapper {
    /*
     * [Audit v5.0.7] Token base mappati a --bspc-* globali (SSOT).
     * Token glassmorphism (card-glass, border rgba bianco) restano locali
     * perché specifici di questo componente Bento.
     */
    --ap-font: var(--bspc-font-family);
    --ap-bg-base: var(--bspc-bg-light);
    --ap-card-glass: rgba(255, 255, 255, 0.65);
    --ap-card-glass-hover: rgba(255, 255, 255, 0.85);
    --ap-border: rgba(255, 255, 255, 0.6);
    --ap-border-hover: rgba(255, 255, 255, 0.9);
    --ap-text-primary: var(--bspc-text-primary);
    --ap-text-secondary: var(--bspc-text-light);
    --ap-accent: var(--bspc-blue-primary);
    --ap-accent-hover: var(--bspc-blue-hover);
    --ap-shadow-sm: var(--bspc-shadow-light);
    --ap-shadow-md: var(--bspc-shadow-medium);
    --ap-shadow-lg: var(--bspc-shadow-strong);
    --ap-radius: var(--bspc-radius-large);
    --ap-radius-inner: var(--bspc-radius-medium);

    font-family: var(--ap-font);
    box-sizing: border-box;
    background: var(--ap-bg-base);
    padding: 4rem 2rem;
    border-radius: var(--ap-radius);
    margin: 3rem auto;
    max-width: 1280px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.bspc-bento-wrapper * {
    box-sizing: border-box;
}

/* Sfondo Mesh Gradient Decorativo */
.bspc-bento-wrapper::before,
.bspc-bento-wrapper::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    /* Reduce blur for decorative gradients to improve performance */
    filter: blur(50px);
    opacity: 0.4;
    z-index: -1;
}

.bspc-bento-wrapper::before {
    background: radial-gradient(circle, #E0F0FF 0%, rgba(255,255,255,0) 70%);
    top: -200px;
    right: -100px;
}

.bspc-bento-wrapper::after {
    background: radial-gradient(circle, #F0F0F2 0%, rgba(255,255,255,0) 70%);
    bottom: -200px;
    left: -100px;
}

/* On mobile screens reduce background orb blur for better performance */
@media (max-width: 767.98px) {
    .bspc-bento-wrapper::before,
    .bspc-bento-wrapper::after {
        filter: blur(20px);
    }
}

/* Header Section */
.ap-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.ap-title-block h2 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ap-text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.1;
}

.ap-title-block p {
    font-size: 1.125rem;
    color: var(--ap-text-secondary);
    margin: 0;
    max-width: 550px;
    line-height: 1.5;
}

.ap-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ap-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--ap-text-primary);
    backdrop-filter: blur(4px);
}

/* Grid Layout */
.ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Card Design */
.ap-card {
    background: var(--ap-card-glass);
    /* Reduce blur and saturation on cards for better performance */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-inner);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    /* Transition only transform, background, border-color and box-shadow */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: var(--ap-shadow-sm);
    position: relative;
    overflow: hidden;
}

/* On small screens disable heavy backdrop filters for better performance */
@media (max-width: 767.98px) {
    .ap-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--ap-card-glass-hover);
    }
}

.ap-card:hover {
    transform: translateY(-5px) scale(1.01);
    background: var(--ap-card-glass-hover);
    border-color: var(--ap-border-hover);
    box-shadow: var(--ap-shadow-lg);
}

/* Icon Container */
.ap-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--bspc-radius-medium);
    background: linear-gradient(135deg, #FFFFFF, var(--bspc-bg-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--ap-accent);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.8);
}

.ap-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ap-text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.ap-card-desc {
    font-size: 0.95rem;
    color: var(--ap-text-secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

/* Link Button */
.ap-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ap-accent);
    text-decoration: none;
    margin-top: auto;
    padding: 6px 0;
    transition: color 0.2s;
}

.ap-link:hover {
    color: var(--ap-accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.ap-link svg {
    transition: transform 0.3s ease;
}

.ap-link:hover svg {
    transform: translateX(4px);
}

/* Highlight Card (Preventivo) */
.ap-card.highlight {
    background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(240,248,255,0.8));
    border: 1px solid rgba(0, 102, 204, 0.2);
}

.ap-card.highlight .ap-icon-box {
    background: var(--ap-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.ap-card.highlight .ap-card-title {
    color: var(--bspc-text-primary);
}

/* ==========================================================
   [7.12.0] Dark mode - Info Snippet (Bento "Informazioni utili")
   Le card leggevano da variabili locali hardcodate bianche
   (--ap-card-glass ecc.) senza controparte dark → isole chiare
   su pagina scura. Rimappiamo i token + override sugli elementi
   che usano letterali bianchi (icona, highlight, badge, footer).
   Pattern doppio del sito: [data-theme] + preferenza OS.
   ========================================================== */
[data-theme="dark"] .bspc-bento-wrapper {
    --ap-card-glass: rgba(28, 28, 30, 0.65);
    --ap-card-glass-hover: rgba(28, 28, 30, 0.85);
    --ap-border: rgba(255, 255, 255, 0.10);
    --ap-border-hover: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .bspc-bento-wrapper .ap-icon-box {
    background: linear-gradient(135deg, #2c2c2e, var(--bspc-bg-white));
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .bspc-bento-wrapper .ap-card.highlight {
    background: linear-gradient(145deg, rgba(41, 151, 255, 0.12), rgba(28, 28, 30, 0.85));
    border-color: rgba(41, 151, 255, 0.35);
}
[data-theme="dark"] .bspc-bento-wrapper .ap-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .bspc-bento-wrapper .ap-footer {
    border-top-color: rgba(255, 255, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bspc-bento-wrapper {
        --ap-card-glass: rgba(28, 28, 30, 0.65);
        --ap-card-glass-hover: rgba(28, 28, 30, 0.85);
        --ap-border: rgba(255, 255, 255, 0.10);
        --ap-border-hover: rgba(255, 255, 255, 0.18);
    }
    :root:not([data-theme="light"]) .bspc-bento-wrapper .ap-icon-box {
        background: linear-gradient(135deg, #2c2c2e, var(--bspc-bg-white));
        border-color: rgba(255, 255, 255, 0.10);
    }
    :root:not([data-theme="light"]) .bspc-bento-wrapper .ap-card.highlight {
        background: linear-gradient(145deg, rgba(41, 151, 255, 0.12), rgba(28, 28, 30, 0.85));
        border-color: rgba(41, 151, 255, 0.35);
    }
    :root:not([data-theme="light"]) .bspc-bento-wrapper .ap-badge {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.10);
    }
    :root:not([data-theme="light"]) .bspc-bento-wrapper .ap-footer {
        border-top-color: rgba(255, 255, 255, 0.10);
    }
}

/* Footer */
.ap-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    font-size: 0.9rem;
    color: var(--ap-text-secondary);
}

.ap-footer strong {
    color: var(--ap-text-primary);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 767.98px) {
    .bspc-bento-wrapper {
        padding: 2rem 1.25rem;
        margin: 2rem 0;
        border-radius: 0;
        width: 100%;
    }
    .ap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .ap-title-block h2 {
        font-size: 2rem;
    }
    .ap-grid {
        grid-template-columns: 1fr;
    }
}