/* ============================================================
 * SPV Post Layouts CSS
 * Widget: spv-archive-posts | spv-related-posts
 * Prefisso classi: .spv-pl
 * 4 layout: hero_grid | grid_cards | mixed_list | magazine
 * ============================================================ */

/* ============================================================
 * RESET & BASE
 * ============================================================ */

.spv-pl {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.spv-pl *,
.spv-pl *::before,
.spv-pl *::after {
    box-sizing: border-box;
}

.spv-pl a {
    text-decoration: none;
    color: inherit;
}

.spv-pl img {
    display: block;
    width: 100%;
    height: auto;
}

/* Titolo sezione (correlati) */
.spv-pl__section-title {
    margin: 0 0 20px 0;
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a2e;
    padding-bottom: 10px;
    border-bottom: 3px solid #e84040;
}

/* Placeholder editor */
.spv-pl__editor-placeholder {
    padding: 20px;
    background: #fff8e1;
    border: 1px dashed #ffc107;
    border-radius: 6px;
    text-align: center;
    color: #856404;
    font-size: 13px;
}

/* No-image placeholder */
.spv-pl__no-img {
    background: #dee2e6;
    display: block;
}

/* ============================================================
 * BADGE CATEGORIA
 * ============================================================ */

.spv-pl__badge {
    display: inline-block;
    padding: 4px 10px;
    background: #e84040;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: default;
}

/* Badge su chip chip data (layout grid_cards) */
.spv-pl__date-chip {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 10px;
    border-radius: 3px;
    line-height: 1.4;
}

/* ============================================================
 * META (autore, data, commenti, views)
 * ============================================================ */

.spv-pl__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 6px;
}

.spv-pl__meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.spv-pl__meta svg {
    flex-shrink: 0;
    vertical-align: middle;
}

.spv-pl__meta--overlay {
    color: rgba(255,255,255,0.85);
}

.spv-pl__meta--card,
.spv-pl__meta--list {
    color: #6c757d;
}

/* ============================================================
 * OVERLAY (hero/card)
 * ============================================================ */

.spv-pl__hero,
.spv-pl__featured {
    position: relative;
    overflow: hidden;
}

.spv-pl__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    background: linear-gradient(to top, rgba(0,0,0,0.60) 0%, transparent 70%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spv-pl__hero-link,
.spv-pl__card-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.spv-pl__hero-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.spv-pl__hero-link:hover .spv-pl__hero-img,
.spv-pl__card-link:hover .spv-pl__card-img {
    transform: scale(1.04);
}

.spv-pl__hero-title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

/* ============================================================
 * GRIGLIA (condivisa tra layout)
 * ============================================================ */

.spv-pl__grid,
.spv-pl__list-grid {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.spv-pl__grid--2col { grid-template-columns: repeat(2, 1fr); }
.spv-pl__grid--3col { grid-template-columns: repeat(3, 1fr); }
.spv-pl__grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
 * LAYOUT 1 — HERO GRID
 * ============================================================ */

.spv-pl--hero-grid {}

/* Heroes row (1-3 hero affiancati) */
.spv-pl__heroes {
    display: grid;
    gap: 20px;
}

.spv-pl__heroes--1 { grid-template-columns: 1fr; }
.spv-pl__heroes--2 { grid-template-columns: 1fr 1fr; }
.spv-pl__heroes--3 { grid-template-columns: 2fr 1fr 1fr; }

/* Card sotto l'hero */
.spv-pl__card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.spv-pl__card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.spv-pl__img-wrap {
    position: relative;
    overflow: hidden;
}

.spv-pl__img-wrap .spv-pl__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.spv-pl__card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.spv-pl__card:hover .spv-pl__card-img {
    transform: scale(1.04);
}

.spv-pl__card-body {
    padding: 14px;
}

.spv-pl__card-title {
    margin: 6px 0 4px;
    font-size: 1em;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

/* ============================================================
 * LAYOUT 2 — GRID CARDS (full overlay)
 * ============================================================ */

.spv-pl--grid-cards .spv-pl__card--overlay {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.spv-pl--grid-cards .spv-pl__card--overlay .spv-pl__card-link {
    display: block;
}

.spv-pl--grid-cards .spv-pl__card-img {
    height: 280px;
}

.spv-pl--grid-cards .spv-pl__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
}

.spv-pl--grid-cards .spv-pl__card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
}

/* Fix: in grid_cards, card-top è fuori dall'overlay (usa position assoluta) */
.spv-pl--grid-cards .spv-pl__card--overlay {
    position: relative;
}

/* Card-top in alto, titolo in basso */
.spv-pl--grid-cards .spv-pl__overlay {
    justify-content: flex-end;
}

.spv-pl--grid-cards .spv-pl__card-title {
    color: #fff;
    font-size: 1.05em;
    margin: 0;
}

/* ============================================================
 * LAYOUT 3 — MIXED LIST
 * ============================================================ */

.spv-pl--mixed-list .spv-pl__hero {
    margin-bottom: 20px;
}

.spv-pl--mixed-list .spv-pl__list-grid {
    margin-top: 0;
}

.spv-pl__list-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.spv-pl__list-thumb {
    flex: 0 0 90px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}

.spv-pl__list-thumb img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.spv-pl__list-thumb:hover img {
    transform: scale(1.06);
}

.spv-pl__list-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spv-pl__list-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spv-pl__list-title:hover {
    color: #e84040;
}

.spv-pl__list-excerpt {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
 * LAYOUT 4 — MAGAZINE
 * ============================================================ */

.spv-pl--magazine {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.spv-pl__featured {
    flex: 1 1 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.spv-pl__featured .spv-pl__hero-img {
    height: 100%;
    min-height: 400px;
}

.spv-pl__sidebar {
    flex: 0 0 33%;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
}

.spv-pl__sidebar-title {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a2e;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.spv-pl__sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spv-pl__sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dee2e6;
}

.spv-pl__sidebar-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.spv-pl__sidebar-num {
    flex: 0 0 28px;
    font-size: 2em;
    font-weight: 900;
    color: #dee2e6;
    line-height: 1;
    text-align: right;
}

.spv-pl__sidebar-thumb {
    flex: 0 0 60px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}

.spv-pl__sidebar-thumb img {
    width: 60px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.spv-pl__sidebar-thumb:hover img {
    transform: scale(1.07);
}

.spv-pl__sidebar-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.spv-pl__sidebar-stats {
    font-size: 10px;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.spv-pl__sidebar-title {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    margin-top: 2px;
}

.spv-pl__sidebar-title:hover {
    color: #e84040;
}

.spv-pl__sidebar-date {
    font-size: 10px;
    color: #6c757d;
}

/* ============================================================
 * HERO MULTIPLI (heroes--2, heroes--3)
 * ============================================================ */

.spv-pl__heroes--2 .spv-pl__hero-img,
.spv-pl__heroes--3 .spv-pl__hero .spv-pl__hero-img {
    height: 360px;
}

.spv-pl__heroes--3 .spv-pl__heroes > .spv-pl__hero:first-child .spv-pl__hero-img {
    height: 360px;
}

/* ============================================================
 * RESPONSIVE — Tablet (max 1024px)
 * ============================================================ */

@media (max-width: 1024px) {

    .spv-pl__grid--4col { grid-template-columns: repeat(3, 1fr); }

    .spv-pl--magazine {
        gap: 16px;
    }

    .spv-pl__sidebar {
        flex: 0 0 36%;
    }

    .spv-pl__heroes--3 {
        grid-template-columns: 1fr 1fr;
    }

    .spv-pl__heroes--3 .spv-pl__hero:nth-child(3) {
        display: none;
    }
}

/* ============================================================
 * RESPONSIVE — Mobile (max 768px)
 * ============================================================ */

@media (max-width: 768px) {

    /* Grid: passa a 2 colonne */
    .spv-pl__grid--3col,
    .spv-pl__grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero più basso */
    .spv-pl__hero-img {
        height: 300px !important;
    }

    /* Heroes multipli: tutti in colonna singola */
    .spv-pl__heroes--2,
    .spv-pl__heroes--3 {
        grid-template-columns: 1fr;
    }

    .spv-pl__heroes--3 .spv-pl__hero:nth-child(3) {
        display: block;
    }

    /* Magazine: impila verticalmente */
    .spv-pl--magazine {
        flex-direction: column;
    }

    .spv-pl__sidebar {
        flex: 0 0 auto;
    }

    .spv-pl__featured .spv-pl__hero-img {
        min-height: 260px;
    }

    /* Card image ridotte */
    .spv-pl__card-img {
        height: 180px !important;
    }

    .spv-pl--grid-cards .spv-pl__card-img {
        height: 200px !important;
    }

    /* Lista: gap ridotto */
    .spv-pl__list-grid {
        gap: 12px;
    }

    /* Titolo hero più piccolo */
    .spv-pl__hero-title {
        font-size: 1.2em;
    }

    /* Overlay meno padding */
    .spv-pl__overlay {
        padding: 14px 14px 18px;
    }
}

/* ============================================================
 * RESPONSIVE — Smartphone small (max 480px)
 * ============================================================ */

@media (max-width: 480px) {

    /* Tutto in colonna singola */
    .spv-pl__grid--2col,
    .spv-pl__grid--3col,
    .spv-pl__grid--4col {
        grid-template-columns: 1fr;
    }

    .spv-pl--grid-cards.spv-pl__grid--2col,
    .spv-pl--grid-cards.spv-pl__grid--3col {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero ancora più basso */
    .spv-pl__hero-img {
        height: 220px !important;
    }

    /* Lista thumbnail su mobile: impila verticalmente */
    .spv-pl__list-item {
        flex-direction: column;
        gap: 8px;
    }

    .spv-pl__list-thumb {
        flex: 0 0 auto;
        width: 100%;
    }

    .spv-pl__list-thumb img {
        width: 100%;
        height: 160px;
    }

    /* Sidebar magazine: lista compatta */
    .spv-pl__sidebar-num {
        font-size: 1.5em;
        flex: 0 0 24px;
    }

    .spv-pl__sidebar-thumb {
        flex: 0 0 48px;
    }

    .spv-pl__sidebar-thumb img {
        width: 48px;
        height: 40px;
    }

    /* Titolo sezione */
    .spv-pl__section-title {
        font-size: 1.2em;
    }
}

/* ============================================================
 * HOVER & ANIMAZIONI
 * ============================================================ */

.spv-pl__hero:hover .spv-pl__hero-img {
    transform: scale(1.03);
    transition: transform 0.4s ease;
}

.spv-pl__list-item:hover .spv-pl__list-title {
    color: #e84040;
}

.spv-pl__sidebar-item:hover .spv-pl__sidebar-title {
    color: #e84040;
}


/* ============================================================
 * SPV Archive List — widget spv-archive-list
 * Prefisso: .spv-al
 * Layout: grid | list | numbered
 * ============================================================ */

/* Base container */
.spv-al {
    width: 100%;
    box-sizing: border-box;
}

.spv-al__section-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #24244d;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

/* -----------------------------------------------------------
 * LAYOUT GRID (card)
 * ----------------------------------------------------------- */
.spv-al--grid {
    display: grid;
    gap: 20px;
}

.spv-al__grid--1col { grid-template-columns: 1fr; }
.spv-al__grid--2col { grid-template-columns: repeat(2, 1fr); }
.spv-al__grid--3col { grid-template-columns: repeat(3, 1fr); }
.spv-al__grid--4col { grid-template-columns: repeat(4, 1fr); }

.spv-al__card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.spv-al__card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.spv-al__card-img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #f0f0f0;
}

.spv-al__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.spv-al__card:hover .spv-al__card-img {
    transform: scale(1.04);
}

.spv-al__no-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.spv-al__card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spv-al__card-title {
    display: block;
    font-size: 0.95em;
    font-weight: 600;
    color: #24244d;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s;
}

.spv-al__card-title:hover { color: #0073aa; }

.spv-al__card-excerpt {
    font-size: 0.82em;
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
}

/* -----------------------------------------------------------
 * LAYOUT LIST (orizzontale)
 * ----------------------------------------------------------- */
.spv-al--list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spv-al--list--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.spv-al__list-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
}

.spv-al--list--2col .spv-al__list-item {
    border-bottom: none;
    padding-bottom: 0;
}

.spv-al__list-thumb {
    flex: 0 0 100px;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #f0f0f0;
}

.spv-al__list-thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.spv-al__list-item:hover .spv-al__list-thumb img { transform: scale(1.05); }

.spv-al__list-body {
    flex: 1;
    min-width: 0;
}

.spv-al__list-title {
    display: block;
    font-size: 0.92em;
    font-weight: 600;
    color: #24244d;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.15s;
}

.spv-al__list-title:hover { color: #0073aa; }

.spv-al__list-excerpt {
    font-size: 0.80em;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* -----------------------------------------------------------
 * LAYOUT NUMBERED (lista numerata)
 * ----------------------------------------------------------- */
.spv-al--numbered {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spv-al--numbered--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.spv-al__num-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f4f4f4;
    counter-increment: none; /* indice gestito da PHP */
}

.spv-al--numbered--2col .spv-al__num-item {
    border-bottom: none;
    padding-bottom: 0;
}

.spv-al__num-index {
    flex: 0 0 28px;
    font-size: 1.4em;
    font-weight: 800;
    color: #dee2e6;
    line-height: 1;
    text-align: center;
    min-width: 28px;
}

.spv-al__num-thumb {
    flex: 0 0 60px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
}

.spv-al__num-thumb img {
    width: 60px;
    height: 50px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.spv-al__num-item:hover .spv-al__num-thumb img { transform: scale(1.05); }

.spv-al__num-body {
    flex: 1;
    min-width: 0;
}

.spv-al__num-title {
    display: block;
    font-size: 0.88em;
    font-weight: 600;
    color: #24244d;
    text-decoration: none;
    line-height: 1.35;
    transition: color 0.15s;
}

.spv-al__num-title:hover { color: #0073aa; }

/* -----------------------------------------------------------
 * META (autore, data, commenti)
 * ----------------------------------------------------------- */
.spv-al__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.75em;
    color: #6c757d;
    margin-top: 4px;
}

.spv-al__meta-author,
.spv-al__meta-date,
.spv-al__meta-comments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* -----------------------------------------------------------
 * BADGE
 * ----------------------------------------------------------- */
.spv-al__badge {
    display: inline-block;
    font-size: 0.70em;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    color: #fff;
    background: #0073aa;
}

/* -----------------------------------------------------------
 * PLACEHOLDER EDITOR
 * ----------------------------------------------------------- */
.spv-al__editor-placeholder {
    padding: 20px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    text-align: center;
    color: #6c757d;
    font-size: 0.9em;
}

/* -----------------------------------------------------------
 * RESPONSIVE Archive List
 * ----------------------------------------------------------- */
@media (max-width: 768px) {
    .spv-al__grid--3col,
    .spv-al__grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .spv-al--list--2col {
        grid-template-columns: 1fr;
    }

    .spv-al--numbered--2col {
        grid-template-columns: 1fr;
    }

    .spv-al__list-thumb {
        flex: 0 0 80px;
    }
}

@media (max-width: 480px) {
    .spv-al__grid--2col,
    .spv-al__grid--3col,
    .spv-al__grid--4col {
        grid-template-columns: 1fr;
    }

    .spv-al__list-item {
        flex-direction: column;
    }

    .spv-al__list-thumb {
        flex: 0 0 auto;
        width: 100%;
    }

    .spv-al__list-thumb img {
        width: 100%;
        height: 140px;
    }
}
 }

/* ============================================================
 * RESPONSIVE — Archive List
 * ============================================================ */

@media (max-width: 768px) {
    .spv-al__grid--3col,
    .spv-al__grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .spv-al--list--2col,
    .spv-al--numbered--2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .spv-al__grid--2col,
    .spv-al__grid--3col,
    .spv-al__grid--4col {
        grid-template-columns: 1fr;
    }

    .spv-al__list-thumb {
        flex: 0 0 80px;
        width: 80px;
        height: 60px;
    }
}