/**
 * THE VINTAGE TIMES - News Card Component Stylesheet [v27.10 - 20% LARGER TOP BADGES]
 * LOCATION: public_html/css/v_news_card.css
 */
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: 100%; }

@media (max-width: 1024px) { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .archive-grid { grid-template-columns: 1fr; gap: 20px; } }

.vintage-news-card { 
    background: var(--vintage-paper); border: 3px solid var(--black); border-radius: 0px; 
    box-shadow: 8px 8px 0px var(--vintage-shadow); position: relative; display: flex; 
    flex-direction: column; 
    overflow: visible; /* Indispensabile per mostrare la metà superiore della spilla fuori bordo */
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.vintage-news-card:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0px var(--neon-pink); background-color: var(--white); }

/* Evidenziazione cromatica se la categoria corrente è bloccata */
.vintage-news-card.card-pinned-active {
    background-color: var(--white);
    border: 3px solid var(--neon-pink);
    box-shadow: 8px 8px 0px var(--black);
}

.vintage-news-card .img-box { width: 100%; border-bottom: 3px solid var(--black); overflow: hidden; background: #000000; position: relative; }
.vintage-news-card .img-box img { 
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(100%) sepia(10%) contrast(1.1) brightness(0.95); 
    opacity: 0.85; transition: filter 0.35s ease-in-out, opacity 0.35s ease-in-out; 
}
.vintage-news-card:hover .img-box img { filter: grayscale(0%) sepia(0%) contrast(1) brightness(1); opacity: 1; }

.vintage-news-card .card-body { 
    padding: 20px; flex-grow: 1; display: flex; flex-direction: column; 
    justify-content: space-between; overflow: hidden; box-sizing: border-box; 
}

.vintage-news-card .card-text-top { display: flex; flex-direction: column; width: 100%; }
.vintage-news-card .card-actions-bottom { display: flex; flex-direction: column; width: 100%; margin-top: auto; }

.vintage-news-card h2 { 
    font-family: 'Georgia', serif; font-size: 16px; margin: 0 0 8px 0; font-weight: 900; 
    text-transform: uppercase; line-height: 1.3; color: var(--black); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vintage-news-card .curation-credit { font-family: var(--font-mono); font-size: 9px; color: var(--black); margin-bottom: 15px; font-weight: 900; text-transform: uppercase; }

/* CONTENITORE METADATI FLUTTUANTE — Abbassato leggermente di 3px per bilanciare i badge più alti */
.card-top-metadata-row {
    position: absolute;
    top: 18px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 11;
}
/* BADGE TEMPORALE E CATEGORIA — Font incrementato del 20% (da 8px a 9.6px) e padding proporzionato */
.new-badge, .category-badge-right { 
    position: static; 
    background: var(--white); color: var(--black);
    padding: 5px 12px; font-family: var(--font-mono); font-size: 9.6px; font-weight: 900;
    text-transform: uppercase; border: 2px solid var(--black); box-shadow: 2px 2px 0px var(--neon-blue); white-space: nowrap; 
    text-decoration: none; display: block;
}
.badge-today { background: #fffbeb; border-color: var(--black); box-shadow: 2px 2px 0px var(--black); color: #b45309; }

.category-badge-right {
    box-shadow: 2px 2px 0px var(--neon-blue);
    transition: background-color 0.1s, color 0.1s;
}
.category-badge-right:hover {
    background: var(--black);
    color: var(--white);
}

/* 📎 GRAFFETTA BRUTALISTA CON ALLUNGAMENTO IN DIAGONALE (SCALE DIAGONALE) */
.brutalist-paperclip {
    position: absolute;
    top: -20px; 
    right: 15px; 
    width: 24px; 
    height: 38px; 
    color: #336699; 
    z-index: 99; 
    display: block;
    filter: drop-shadow(3px 3px 0px var(--black));
    transform: rotate(30deg) scaleY(1.5);
    transform-origin: center center;
    transition: transform 0.15s ease-in-out, color 0.15s;
}

/* Effetto dinamico brutalista al passaggio del mouse */
.brutalist-paperclip:hover {
    color: var(--neon-pink);
    transform: rotate(20deg) scaleY(1.6);
}

/* PULSANTE DI LETTURA ORIGINALE ANCORATO AL FONDO CARD */
.vintage-news-card .btn-read { 
    margin-top: auto; display: block; padding: 10px 15px; background: var(--white); color: var(--black); 
    border: 2px solid var(--black); font-family: var(--font-mono); font-size: 11px; font-weight: 900; 
    text-decoration: none; text-align: center; box-shadow: 4px 4px 0px var(--black); transition: transform 0.05s, box-shadow 0.05s; text-transform: uppercase; 
}
.vintage-news-card .btn-read:hover { background: var(--black); color: var(--white) !important; box-shadow: 4px 4px 0px var(--neon-pink); }
.vintage-news-card .btn-read:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--black); }

/* CLASSI DI INTEGRAZIONE PER LE ANIMAZIONI DELL'INFINITE SCROLL */
.ajax-loaded-card {
    opacity: 0; transform: translateY(25px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ajax-loaded-card.visible { opacity: 1; transform: translateY(0); }

#infinite-scroll-sentinel { 
    grid-column: 1 / -1; text-align: center; padding: 40px 20px; font-family: var(--font-mono); 
    font-size: 13px; font-weight: 900; letter-spacing: 2px; color: var(--black); background: var(--white);
    border: 2px dashed var(--black); margin: 40px 0 20px 0; display: none; position: relative; overflow: hidden; text-transform: uppercase; box-shadow: 4px 4px 0px var(--black);
}
#infinite-scroll-sentinel::after { content: " ✦ ✦ ✦"; color: var(--neon-pink); animation: pulseBlink 1s infinite steps(2); }
@keyframes pulseBlink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (max-width: 768px) {
    .vintage-news-card { height: auto !important; min-height: 0 !important; }
    .vintage-news-card:hover { transform: none; box-shadow: 4px 4px 0px var(--neon-pink); }
    .card-top-metadata-row { top: 12px; left: 10px; right: 10px; }
    /* Adattamento mobile proporzionato al 20% per display ridotti */
    .new-badge, .category-badge-right { padding: 4px 10px; font-size: 8.5px; }
    .brutalist-paperclip { width: 16px; height: 52px; top: -26px; right: 15px; }
}