/*
 * File: conversion-styles.css
 * Focus: Bento Grid, Responsive Tables, Sticky Footer
 * [cite_start]Source: Blueprint Tecnico Strategico [cite: 30, 237-564]
 */

/* =========================================
   1. BENTO GRID LAYOUT (Moda & Lifestyle)
   ========================================= */

.bento-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Stack verticale su mobile */
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Tablet e Desktop Logic */
@media (min-width: 768px) {
    .bento-grid-container {
        grid-template-columns: repeat(4, 1fr); /* 4 colonne */
        grid-template-rows: repeat(2, minmax(250px, auto)); /* Altezza minima righe */
        grid-auto-flow: dense; /* Riempie i buchi automaticamente */
    }

    /* Hero Item: Occupa 2 colonne e 2 righe */
    .bento-item-hero {
        grid-column: span 2;
        grid-row: span 2;
        position: relative;
        overflow: hidden;
    }

    /* Detail Item: 1x1 */
    .bento-item-detail {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* CTA Item: 1x1 ma visivamente distinto */
    .bento-item-cta {
        grid-column: span 1;
        grid-row: span 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* Stili comuni delle card */
.bento-card {
    border-radius: 4px; [cite_start]/* Raggio minimo per look premium [cite: 279] */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Overlay per testo su immagini */
.bento-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(26,26,46,0.9), transparent);
    padding: 20px;
}

.bento-img-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   2. TECH MAXIMIZER TABLE (Mobile Optimized)
   ========================================= */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: var(--wp--preset--font-family--body-sans);
}

.comparison-table th,
.comparison-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.comparison-table th {
    background-color: var(--wp--preset--color--midnight-charcoal);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table-btn {
    display: inline-block;
    background: var(--wp--preset--color--luxury-gold);
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-radius: 0px;
}

[cite_start]/* MOBILE OPTIMIZATION - STACKED CARDS [cite: 386] */
@media screen and (max-width: 768px) {
    
    /* Forza gli elementi della tabella a comportarsi come blocchi */
    .comparison-table, 
    .comparison-table thead, 
    .comparison-table tbody, 
    .comparison-table th, 
    .comparison-table td, 
    .comparison-table tr {
        display: block;
    }

    /* Nasconde l'header della tabella visivamente */
    .comparison-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Ogni riga diventa una "Card" */
    .comparison-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        background: #fff;
    }

    /* Stile delle celle "impilate" */
    .comparison-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* Spazio per l'etichetta */
        text-align: right;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Generazione delle etichette tramite data-label */
    .comparison-table td:before {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-label); [cite_start]/* Prende il testo dall'attributo HTML [cite: 432] */
        color: var(--wp--preset--color--midnight-charcoal);
        font-size: 0.85rem;
        text-transform: uppercase;
    }

    /* Eccezione per la prima riga (Nome del prodotto) */
    .comparison-table td:first-child {
        background-color: var(--wp--preset--color--soft-cream);
        padding-left: 15px;
        text-align: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .comparison-table td:first-child:before {
        display: none;
    }
}

/* =========================================
   3. STICKY FOOTER CONVERSION (Amazon Compliant)
   ========================================= */

.sticky-footer-conversion {
    position: fixed;
    bottom: -100px; /* Nascosto inizialmente */
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 2px solid var(--wp--preset--color--luxury-gold);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    padding: 12px 20px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: bottom 0.4s ease-in-out;
}

.sticky-footer-conversion.visible {
    bottom: 0; /* Slide in */
}

/* Nascondi su Desktop */
@media (min-width: 769px) {
    .sticky-footer-conversion { display: none!important; }
}

.sticky-info {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: var(--wp--preset--color--midnight-charcoal);
}

.sticky-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.sticky-status {
    font-weight: bold;
    color: #27ae60;
}

.sticky-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sticky-btn {
    background: var(--wp--preset--color--luxury-gold);
    color: #fff!important;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-radius: 0px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#close-sticky {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
}