/**
 * REI — Archivio Comunicazioni
 * Stile coerente con Archivio Magazine — filigrane megafono, hero pulito,
 * Agevolazioni meteo) — filigrane animate giornale, hero pulito, card
 * stile GNE (titolo verde maiuscolo centrato + Leggi Tutto verde).
 *
 * @since 1.26.0
 */

/* v2.2: bg transparent — lascia trasparire la filigrana a tema del main */
.rei-com-arc { position: relative; min-height: 60vh; overflow: hidden; background: transparent; }
.rei-com-arc__container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* ===== SFONDO DECORATIVO ===== */
.rei-com-arc__bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.rei-com-arc__glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); opacity: 0.22; }
.rei-com-arc__glow--tl { top: -200px; left: -180px; background: radial-gradient(circle, #20A47B 0%, transparent 70%); }
.rei-com-arc__glow--tr { top: -150px; right: -200px; background: radial-gradient(circle, #D1E000 0%, transparent 70%); opacity: 0.16; }
.rei-com-arc__glow--bl { bottom: -240px; left: -160px; background: radial-gradient(circle, #D1E000 0%, transparent 70%); opacity: 0.16; }
.rei-com-arc__glow--br { bottom: -200px; right: -180px; background: radial-gradient(circle, #20A47B 0%, transparent 70%); }

/* Filigrane animate pulse 4s — stesso pattern di Servizi/Tutela utenti */
.rei-com-arc__particle { position: absolute; opacity: 0.13; animation: rei-com-float 4s ease-in-out infinite; }
.rei-com-arc__particle svg { width: 100%; height: 100%; display: block; }
@keyframes rei-com-float {
    0%   { transform: scale(0.5) rotate(-6deg); opacity: 0.05; }
    50%  { transform: scale(1.1) rotate(5deg);  opacity: 0.22; }
    100% { transform: scale(0.5) rotate(-6deg); opacity: 0.05; }
}
@media (prefers-reduced-motion: reduce) { .rei-com-arc__particle { animation: none; opacity: 0.11; } }

/* 14 particelle giornale (mix verde + 3 gialli accent) */
.rei-com-arc__particle--1  { top:  3%; left:  1%; width: 200px; height: 200px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); }
.rei-com-arc__particle--2  { top: 11%; right: 2%; width: 225px; height: 225px; color: #D1E000; filter: drop-shadow(0 0 24px rgba(209,224,0,0.5)); }
.rei-com-arc__particle--3  { top: 23%; left:  6%; width: 170px; height: 170px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 0.8s; }
.rei-com-arc__particle--4  { top: 30%; right: 7%; width: 150px; height: 150px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 1.2s; }
.rei-com-arc__particle--5  { top: 40%; left:  2%; width: 190px; height: 190px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 2s; }
.rei-com-arc__particle--6  { top:  7%; left: 43%; width: 160px; height: 160px; color: #D1E000; filter: drop-shadow(0 0 24px rgba(209,224,0,0.5)); animation-delay: 0.5s; }
.rei-com-arc__particle--7  { top: 51%; right: 3%; width: 215px; height: 215px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 1.5s; }
.rei-com-arc__particle--8  { top: 35%; left: 29%; width: 150px; height: 150px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 3s; }
.rei-com-arc__particle--9  { top: 61%; left:  8%; width: 180px; height: 180px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 2.2s; }
.rei-com-arc__particle--10 { top: 69%; right: 20%; width: 165px; height: 165px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 0.9s; }
.rei-com-arc__particle--11 { top: 47%; left: 47%; width: 170px; height: 170px; color: #D1E000; filter: drop-shadow(0 0 24px rgba(209,224,0,0.5)); animation-delay: 1.8s; }
.rei-com-arc__particle--12 { top: 79%; left: 31%; width: 200px; height: 200px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 2.6s; }
.rei-com-arc__particle--13 { top: 87%; right: 5%; width: 185px; height: 185px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 1.1s; }
.rei-com-arc__particle--14 { top: 92%; left:  4%; width: 155px; height: 155px; color: #20A47B; filter: drop-shadow(0 0 24px rgba(32,164,123,0.5)); animation-delay: 3.4s; }

/* ===== HERO ===== */
.rei-com-arc__hero { padding: 72px 0 40px; text-align: left; }
.rei-com-arc__eyebrow {
    display: inline-block;
    background: #E4F6F0; color: #20A47B;
    border: 1px solid #D2F0E6;
    padding: 6px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 700;
    text-transform: capitalize; letter-spacing: 0.04em;
    margin: 0 0 24px;
}
.rei-com-arc__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05; font-weight: 800;
    margin: 0 0 22px; color: #157155;
    letter-spacing: -0.02em;
    max-width: 960px;
}
.rei-com-arc__title-green { color: #20A47B; }
.rei-com-arc__lead {
    max-width: 760px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #3C3C3B;
}

/* Filtri categoria */
.rei-com-arc__filters {
    display: flex; flex-wrap: wrap;
    gap: 10px; margin-top: 28px;
}
.rei-com-arc__filter {
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #CBDED5;
    border-radius: 999px;
    text-decoration: none;
    color: #157155;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.rei-com-arc__filter:hover,
.rei-com-arc__filter.is-active {
    background: #20A47B;
    border-color: #20A47B;
    color: #fff;
}

/* ===== LISTA ARTICOLI ===== */
.rei-com-arc__body { padding: 48px 0 80px; }

/* Riga nera spessa sopra la griglia (come il blocco Magazine del live) */
.rei-com-arc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-bottom: 50px;
    border-top: 3px solid #1B1B1B;
    padding-top: 40px;
}

/* ===== CARD ARTICOLO (card bianca, immagine a filo, testo con respiro) ===== */
.rei-com-card {
    background: #fff;
    border: 2px solid var(--rei-green, #20A47B); /* v2.2: contorno verde su tutti i riquadri */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(21, 113, 85, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
/* Hover "emerge" composto (vince su photo-hover.css per specificità) */
body .rei-com-arc__grid .rei-com-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(21, 113, 85, 0.16);
}
body .rei-com-arc__grid .rei-com-card:hover .rei-com-card__title {
    color: #157155; /* color change al posto della sottolineatura */
    text-decoration: none;
}

.rei-com-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.rei-com-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E4F6F0;
    position: relative;
}
.rei-com-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    display: block;
}
.rei-com-card:hover .rei-com-card__thumb img {
    transform: scale(1.05);
}
.rei-com-card__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rei-com-card__body {
    padding: 22px 22px 20px; /* respiro interno del blocco testo */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.rei-com-card__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rei-green, #20A47B);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0 0 10px;
}
.rei-com-card__meta {
    font-size: 0.95rem;
    color: var(--rei-ink, #3C3C3B);
    margin-bottom: 14px;
}
.rei-com-card__excerpt {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;
}
.rei-com-card__cta {
    display: inline-block;
    color: var(--rei-green, #20A47B);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    margin-top: auto;
}
.rei-com-card:hover .rei-com-card__cta {
    color: #157155;
    text-decoration: underline;
}

/* ===== PAGINAZIONE ===== */
.rei-com-arc__pagination {
    text-align: center;
}
.rei-com-arc__pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.rei-com-arc__pagination a,
.rei-com-arc__pagination span {
    padding: 8px 14px;
    border-radius: 8px;
    background: #fff;
    color: #157155;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}
.rei-com-arc__pagination a:hover,
.rei-com-arc__pagination .current {
    background: #20A47B;
    color: #fff;
    border-color: #20A47B;
}

/* ===== EMPTY ===== */
.rei-com-arc__empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.rei-com-arc__empty h2 {
    color: #157155;
    margin: 0 0 12px;
}
.rei-com-arc__empty p {
    color: #555;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    .rei-com-arc__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rei-com-arc__container { padding: 0 20px; }
    .rei-com-arc__hero { padding: 48px 0 28px; }
    .rei-com-arc__title { font-size: 2.2rem; }
    .rei-com-arc__grid { grid-template-columns: 1fr; }
}