/**
 * REI Theme — Stili template interni
 *
 * Stilizza i template:
 *  - page.php (.rei-page)
 *  - single.php (.rei-single)
 *  - archive.php, archive-offerta.php, archive-magazine.php (.rei-archive)
 *
 * Tutti i template condividono lo stesso pattern di hero + body, coerente
 * con la home, usando le CSS vars del design system REI.
 *
 * @since 0.17.0
 */

/* ==========================================================================
   1. HERO COMUNE (page + single + archive)
   ========================================================================== */
.rei-page__hero,
.rei-single__hero,
.rei-archive__hero {
    text-align: center;
    padding: 80px 0 60px;
}
.rei-page__hero-inner,
.rei-single__hero-inner,
.rei-archive__hero-inner {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.rei-page__title,
.rei-archive__title {
    font-size: clamp( 2.25rem, 4.5vw, 4rem );
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 14px 0 18px;
    color: var(--rei-ink);
}
.rei-single__title {
    font-size: clamp( 2rem, 4vw, 3.25rem );
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 14px 0 18px;
}

.rei-page__lead,
.rei-single__lead,
.rei-archive__lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--rei-ink-soft, #4a4a4a);
    margin: 0 0 20px;
    font-weight: 400;
}

/* ==========================================================================
   2. CONTENT BODY (page + single)
   ========================================================================== */
.rei-page__body,
.rei-single__body {
    padding-top: 50px;
    padding-bottom: 70px;
}
.rei-page__container,
.rei-single__container {
    max-width: 780px;
    margin: 0 auto;
}

.rei-page__thumb,
.rei-single__feature {
    margin: -100px 0 36px;
    border-radius: var(--rei-radius-2xl, 28px);
    overflow: hidden;
    box-shadow: var(--rei-shadow-xl, 0 30px 60px rgba(0,0,0,0.12));
    position: relative;
    z-index: 3;
}
.rei-page__thumb img,
.rei-single__feature img,
.rei-single__feature-img {
    width: 100%;
    height: auto;
    display: block;
}
.rei-single__feature .rei-container {
    max-width: 1080px;
}

/* === Typography del content === */
.rei-page__content,
.rei-single__content {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--rei-gray-text, #2c2c2c);
}
.rei-page__content > *,
.rei-single__content > * {
    margin: 0 0 1.4em;
}
.rei-page__content h2,
.rei-single__content h2 {
    font-size: 1.875rem;
    font-weight: 800;
    margin: 2em 0 0.6em;
    letter-spacing: -0.02em;
    color: var(--rei-ink);
}
.rei-page__content h3,
.rei-single__content h3 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 1.8em 0 0.5em;
    color: var(--rei-ink);
}
.rei-page__content h4,
.rei-single__content h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 1.6em 0 0.4em;
    color: var(--rei-ink);
}
.rei-page__content blockquote,
.rei-single__content blockquote {
    border-left: 4px solid var(--rei-green, #22ca01);
    padding: 14px 22px;
    margin: 1.8em 0;
    font-style: italic;
    font-size: 1.15rem;
    background: var(--rei-cream, #fff4e6);
    border-radius: 0 12px 12px 0;
}
.rei-page__content blockquote p:last-child,
.rei-single__content blockquote p:last-child {
    margin-bottom: 0;
}
.rei-page__content ul,
.rei-page__content ol,
.rei-single__content ul,
.rei-single__content ol {
    padding-left: 1.4em;
}
.rei-page__content ul li,
.rei-page__content ol li,
.rei-single__content ul li,
.rei-single__content ol li {
    margin-bottom: 0.4em;
}
.rei-page__content img,
.rei-single__content img {
    border-radius: var(--rei-radius-lg, 16px);
    box-shadow: var(--rei-shadow-md, 0 8px 20px rgba(0,0,0,0.08));
    margin: 1.6em 0;
}
.rei-page__content a,
.rei-single__content a {
    color: var(--rei-green-deep, #0a7d2c);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: var(--rei-transition);
}
.rei-page__content a:hover,
.rei-single__content a:hover {
    color: var(--rei-green-dark, #075c1f);
}

.rei-page__content code,
.rei-single__content code {
    background: var(--rei-cream-dark, #f5e9d0);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.92em;
}
.rei-page__content pre,
.rei-single__content pre {
    background: var(--rei-ink, #0d1421);
    color: #eee;
    padding: 18px 22px;
    border-radius: 14px;
    overflow-x: auto;
    margin: 1.6em 0;
}
.rei-page__content pre code,
.rei-single__content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* ==========================================================================
   3. SINGLE — meta, byline, tag, related
   ========================================================================== */
.rei-single__cat {
    display: inline-block;
    padding: 6px 14px;
    background: var(--rei-green, #22ca01);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
}
.rei-single__cat:hover {
    background: var(--rei-green-deep, #0a7d2c);
    color: #fff;
}

.rei-single__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--rei-gray, #666);
}
.rei-single__avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: block;
}
.rei-single__byline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rei-single__author {
    font-weight: 600;
    color: var(--rei-ink, #0d1421);
}
.rei-single__sep {
    color: #bbb;
}

.rei-single__tags {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #e0d8c8;
    font-size: 0.95rem;
}
.rei-single__tags strong {
    margin-right: 10px;
}
.rei-single__tags a {
    display: inline-block;
    margin-right: 6px;
    padding: 4px 10px;
    background: var(--rei-cream, #fff4e6);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--rei-ink, #0d1421);
    text-decoration: none;
}
.rei-single__tags a:hover {
    background: var(--rei-yellow, #ffd400);
}

/* === Related articles === */
.rei-single__related {
    padding-top: 60px;
    padding-bottom: 60px;
}
.rei-single__related-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}
.rei-single__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.rei-single__related-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--rei-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--rei-shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
    text-decoration: none;
    color: inherit;
    transition: var(--rei-transition);
}
.rei-single__related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rei-shadow-lg, 0 20px 40px rgba(0,0,0,0.12));
}
.rei-single__related-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.rei-single__related-body {
    padding: 18px 20px 22px;
}
.rei-single__related-body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--rei-ink);
}
.rei-single__related-body time {
    font-size: 0.85rem;
    color: var(--rei-gray, #777);
}

/* ==========================================================================
   4. PAGE — children grid
   ========================================================================== */
.rei-page__children {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1px solid #e0d8c8;
}
.rei-page__children-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 28px;
    text-align: center;
}
.rei-page__children-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.rei-page__child-card {
    display: block;
    padding: 24px 28px;
    background: #fff;
    border-radius: var(--rei-radius-lg, 16px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rei-shadow-sm);
    border: 1px solid #e8e0cf;
    transition: var(--rei-transition);
    position: relative;
}
.rei-page__child-card:hover {
    transform: translateY(-3px);
    border-color: var(--rei-green, #22ca01);
    box-shadow: 0 12px 28px rgba(34, 202, 1, 0.18);
}
.rei-page__child-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--rei-ink);
}
.rei-page__child-card p {
    margin: 0;
    color: var(--rei-gray, #666);
    font-size: 0.95rem;
    line-height: 1.5;
}
.rei-page__child-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--rei-green, #22ca01);
    font-size: 1.3rem;
    transition: transform 0.2s;
}
.rei-page__child-card:hover .rei-page__child-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   5. ARCHIVE — griglia generica
   ========================================================================== */
.rei-archive__body {
    padding-top: 50px;
    padding-bottom: 70px;
}

.rei-archive__filters {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.rei-archive__filter {
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #d6cdba;
    border-radius: 999px;
    text-decoration: none;
    color: var(--rei-ink, #0d1421);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--rei-transition);
}
.rei-archive__filter:hover,
.rei-archive__filter.is-active {
    background: var(--rei-green, #22ca01);
    border-color: var(--rei-green, #22ca01);
    color: #fff;
}

.rei-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 50px;
}

.rei-archive__card {
    background: #fff;
    border-radius: var(--rei-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--rei-shadow-sm);
    transition: var(--rei-transition);
}
.rei-archive__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rei-shadow-lg, 0 20px 40px rgba(0,0,0,0.12));
}
.rei-archive__card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.rei-archive__card-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--rei-cream-dark, #f5e9d0);
}
.rei-archive__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.rei-archive__card:hover .rei-archive__card-thumb img {
    transform: scale(1.05);
}
.rei-archive__card-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.rei-archive__card-body {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.rei-archive__card-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rei-green-deep, #0a7d2c);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.rei-archive__card-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--rei-ink);
}
.rei-archive__card-excerpt {
    color: var(--rei-gray, #666);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 14px;
    flex: 1;
}
.rei-archive__card-meta {
    font-size: 0.85rem;
    color: var(--rei-gray, #777);
}

/* ==========================================================================
   6. (DEPRECATO) ARCHIVE MAGAZINE — variante card --mag
   Dalla v1.24.3 l'archivio Magazine usa il template archive-magazine.php
   con CSS dedicato in assets/css/archive-magazine.css (classi .rei-mag-card).
   Il blocco qui sotto è mantenuto per retro-compatibilità nel caso di
   override di terze parti.
   ========================================================================== */

.rei-archive__card--mag {
    background: #fff;
    text-align: center;
}
.rei-archive__card--mag .rei-archive__card-thumb {
    aspect-ratio: 16 / 10;
}
.rei-archive__card--mag .rei-archive__card-body {
    padding: 22px 24px 26px;
    text-align: center;
    align-items: center;
}
.rei-archive__card--mag .rei-archive__card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rei-green-deep, #16a300);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0 0 10px;
}
.rei-archive__card--mag .rei-archive__card-meta {
    font-size: 0.9rem;
    color: var(--rei-gray, #555);
    margin-bottom: 14px;
    text-align: center;
}
.rei-archive__card--mag .rei-archive__card-excerpt {
    color: var(--rei-gray, #555);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;
}
.rei-archive__card--mag .rei-archive__card-cta {
    display: inline-block;
    color: var(--rei-green-deep, #16a300);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
    margin-top: auto;
}
.rei-archive__card--mag:hover .rei-archive__card-cta {
    color: #0d6a00;
    text-decoration: underline;
}

/* ==========================================================================
   6b. (DEPRECATO) ARCHIVE MAGAZINE — featured article
   Mantenuto per retro-compatibilità (non più usato in archive-magazine.php
   dalla v1.24.1: vedi card --mag sopra).
   ========================================================================== */
.rei-magazine-featured {
    background: #fff;
    border-radius: var(--rei-radius-2xl, 28px);
    overflow: hidden;
    box-shadow: var(--rei-shadow-xl);
    margin-bottom: 50px;
}
.rei-magazine-featured__link {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    text-decoration: none;
    color: inherit;
}
.rei-magazine-featured__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rei-cream-dark);
}
.rei-magazine-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.rei-magazine-featured:hover .rei-magazine-featured__thumb img {
    transform: scale(1.04);
}
.rei-magazine-featured__body {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rei-magazine-featured__cat {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rei-green-deep, #0a7d2c);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.rei-magazine-featured__title {
    font-size: clamp( 1.5rem, 2.4vw, 2rem );
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--rei-ink);
    letter-spacing: -0.02em;
}
.rei-magazine-featured__excerpt {
    color: var(--rei-gray, #555);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 18px;
}
.rei-magazine-featured__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--rei-gray, #777);
}

/* ==========================================================================
   7. ARCHIVE OFFERTE — card prezzo
   ========================================================================== */
.rei-archive__grid--offerte {
    grid-template-columns: repeat(2, 1fr);
}
.rei-offerta-card {
    background: #fff;
    border-radius: var(--rei-radius-2xl, 28px);
    padding: 32px 34px;
    box-shadow: var(--rei-shadow-md);
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: var(--rei-transition);
}
.rei-offerta-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rei-shadow-xl);
}
.rei-offerta-card--green {
    border-color: rgba(34, 202, 1, 0.2);
}
.rei-offerta-card--red {
    border-color: rgba(227, 30, 36, 0.2);
}
.rei-offerta-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rei-offerta-card__tipologia {
    font-size: 0.8rem;
    padding: 4px 12px;
    background: var(--rei-cream, #fff4e6);
    border-radius: 999px;
    color: var(--rei-ink);
    font-weight: 600;
}
.rei-offerta-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.rei-offerta-card__title a {
    color: var(--rei-ink);
    text-decoration: none;
}
.rei-offerta-card__title a:hover {
    color: var(--rei-green-deep);
}
.rei-offerta-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}
.rei-offerta-card__price-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--rei-ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
.rei-offerta-card--red .rei-offerta-card__price-amount {
    color: #e31e24;
}
.rei-offerta-card--green .rei-offerta-card__price-amount {
    color: var(--rei-green-deep, #0a7d2c);
}
.rei-offerta-card__price-unit {
    font-size: 1rem;
    color: var(--rei-gray, #666);
    font-weight: 600;
}
.rei-offerta-card__durata {
    background: var(--rei-cream, #fff4e6);
    padding: 10px 14px;
    border-radius: 10px;
    margin: 0 0 18px;
    font-size: 0.95rem;
}
.rei-offerta-card__durata strong {
    display: block;
    font-size: 0.8rem;
    color: var(--rei-gray, #555);
    margin-bottom: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rei-offerta-card__vantaggi {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
}
.rei-offerta-card__vantaggi li {
    padding: 4px 0 4px 26px;
    position: relative;
    font-size: 0.95rem;
    color: var(--rei-ink);
}
.rei-offerta-card__vantaggi li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--rei-green, #22ca01);
    font-weight: 700;
}
.rei-offerta-card--red .rei-offerta-card__vantaggi li::before {
    color: #e31e24;
}
.rei-offerta-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.rei-offerta-card__arera {
    font-size: 0.75rem;
    color: var(--rei-gray, #888);
}
.rei-offerta-card__arera code {
    background: var(--rei-cream-dark, #f5e9d0);
    padding: 1px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* ==========================================================================
   8. PAGINAZIONE
   ========================================================================== */
.rei-archive__pagination .nav-links,
.rei-archive__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.rei-archive__pagination .page-numbers {
    padding: 10px 16px;
    border: 1px solid #d6cdba;
    border-radius: 8px;
    background: #fff;
    color: var(--rei-ink);
    font-weight: 600;
    text-decoration: none;
    transition: var(--rei-transition);
    min-width: 44px;
    text-align: center;
}
.rei-archive__pagination .page-numbers:hover,
.rei-archive__pagination .page-numbers.current {
    background: var(--rei-green, #22ca01);
    border-color: var(--rei-green, #22ca01);
    color: #fff;
}

/* ==========================================================================
   9. EMPTY STATE
   ========================================================================== */
.rei-archive__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--rei-gray, #777);
}
.rei-archive__empty h2 {
    font-size: 1.5rem;
    margin: 0 0 10px;
    color: var(--rei-ink);
}
.rei-archive__empty p {
    margin: 0;
    font-size: 1.05rem;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
    .rei-archive__grid,
    .rei-single__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rei-archive__grid--offerte {
        grid-template-columns: 1fr;
    }
    .rei-magazine-featured__link {
        grid-template-columns: 1fr;
    }
    .rei-magazine-featured__thumb {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .rei-page__hero,
    .rei-single__hero,
    .rei-archive__hero {
        padding: 50px 0 36px;
    }
    .rei-page__body,
    .rei-single__body,
    .rei-archive__body {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .rei-archive__grid,
    .rei-single__related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rei-page__children-grid {
        grid-template-columns: 1fr;
    }
    .rei-page__thumb,
    .rei-single__feature {
        margin-top: -50px;
        border-radius: var(--rei-radius-lg, 16px);
    }
    .rei-offerta-card {
        padding: 24px 22px;
    }
    .rei-offerta-card__price-amount {
        font-size: 2rem;
    }
    .rei-magazine-featured__body {
        padding: 24px 22px 28px;
    }
    .rei-page__content,
    .rei-single__content {
        font-size: 1rem;
    }
    .rei-page__content h2,
    .rei-single__content h2 {
        font-size: 1.5rem;
    }
    .rei-page__content h3,
    .rei-single__content h3 {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   11. BLOCK PATTERN — Hero pagina interna (minimal editabile)
   v0.17.3: Stile minimal con tutti i blocchi editabili (no più span/pillole HTML).
   Tipografia coerente con la home ma senza decorazioni che richiedano markup
   custom non editabile dall'utente.
   ========================================================================== */
.rei-pattern-hero {
    padding: 60px 0 50px;
    position: relative;
    overflow: hidden;
}
.rei-pattern-hero .wp-block-columns,
.rei-pattern-hero__columns {
    align-items: center;
    gap: 50px;
}
/* Eyebrow: verde, uppercase, letter-spacing largo, piccolo */
.rei-pattern-hero__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 0 0 16px !important;
    line-height: 1.3 !important;
}
/* Titolo: grande, bold, leading stretto */
.rei-pattern-hero__title {
    font-size: clamp( 2.5rem, 5vw, 4.5rem ) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 22px !important;
    color: var(--rei-ink, #0d1421) !important;
}
/* Sottotitolo */
.rei-pattern-hero__sub {
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    color: var(--rei-ink-soft, #4a4a4a) !important;
    margin: 0 0 28px !important;
}
/* Bottoni CTA */
.rei-pattern-hero__cta {
    margin-bottom: 22px !important;
    gap: 14px !important;
}
.rei-pattern-hero__cta .wp-block-button .wp-block-button__link {
    padding: 16px 28px;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: var(--rei-transition);
}
/* Bottone primario verde pieno */
.rei-pattern-hero__btn--primary .wp-block-button__link {
    background: var(--rei-green, #22ca01);
    color: #fff;
    border-color: var(--rei-green, #22ca01);
}
.rei-pattern-hero__btn--primary .wp-block-button__link:hover {
    background: var(--rei-green-deep, #0a7d2c);
    border-color: var(--rei-green-deep, #0a7d2c);
    transform: translateY(-2px);
}
/* Bottone secondario outline scuro */
.rei-pattern-hero__btn--secondary .wp-block-button__link {
    background: transparent;
    color: var(--rei-ink, #0d1421);
    border-color: var(--rei-ink, #0d1421);
}
.rei-pattern-hero__btn--secondary .wp-block-button__link:hover {
    background: var(--rei-ink, #0d1421);
    color: #fff;
    transform: translateY(-2px);
}
/* Trust line */
.rei-pattern-hero__trust {
    font-size: 0.95rem !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 0 !important;
}
/* Foto */
.rei-pattern-hero__photo img {
    border-radius: var(--rei-radius-2xl, 28px);
    box-shadow: var(--rei-shadow-xl, 0 30px 60px rgba(0,0,0,0.12));
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .rei-pattern-hero {
        padding: 40px 0 36px;
    }
    .rei-pattern-hero .wp-block-columns,
    .rei-pattern-hero__columns {
        gap: 28px;
    }
    .rei-pattern-hero__title {
        font-size: clamp( 2rem, 6vw, 2.8rem ) !important;
    }
    .rei-pattern-hero__sub {
        font-size: 1.05rem !important;
    }
    .rei-pattern-hero__cta {
        flex-direction: column;
    }
    .rei-pattern-hero__cta .wp-block-button {
        width: 100%;
    }
    .rei-pattern-hero__cta .wp-block-button .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   v0.18.0 — PATTERN COMUNI
   Stili condivisi tra più pattern (eyebrow, section title)
   ========================================================================== */
.rei-pattern-eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 0 0 14px !important;
    line-height: 1.3 !important;
}
.rei-pattern-section-title {
    font-size: clamp( 2rem, 4vw, 3rem ) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 40px !important;
    color: var(--rei-ink, #0d1421) !important;
}

/* ==========================================================================
   v0.18.0 — PATTERN 5: Mini Hero
   ========================================================================== */
.rei-pattern-minihero {
    padding: 70px 0 60px;
    text-align: center;
}
.rei-pattern-minihero__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 0 0 16px !important;
}
.rei-pattern-minihero__title {
    font-size: clamp( 2.5rem, 5vw, 4rem ) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 20px !important;
    color: var(--rei-ink, #0d1421) !important;
}
.rei-pattern-minihero__sub {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
    color: var(--rei-ink-soft, #4a4a4a) !important;
    margin: 0 auto 28px !important;
    max-width: 620px;
}
.rei-pattern-minihero__cta {
    justify-content: center !important;
    gap: 14px !important;
}

/* ==========================================================================
   v0.18.0 — PATTERN 6: Servizi grid
   ========================================================================== */
.rei-pattern-servizi {
    padding: 70px 0;
    text-align: center;
}
.rei-pattern-servizi__grid {
    margin-top: 20px;
    gap: 24px !important;
}
.rei-pattern-servizi__card {
    background: #fff;
    border-radius: var(--rei-radius-lg, 16px);
    padding: 32px 22px !important;
    box-shadow: var(--rei-shadow-md, 0 8px 20px rgba(0,0,0,0.06));
    text-align: center;
    transition: var(--rei-transition);
    border: 1px solid #efe7d4;
}
.rei-pattern-servizi__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rei-shadow-xl, 0 20px 40px rgba(0,0,0,0.12));
}
.rei-pattern-servizi__icon {
    font-size: 2.5rem !important;
    margin: 0 0 14px !important;
    line-height: 1 !important;
}
.rei-pattern-servizi__title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    color: var(--rei-ink, #0d1421) !important;
    letter-spacing: -0.01em !important;
}
.rei-pattern-servizi__desc {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--rei-gray, #6c6c6c) !important;
    margin: 0 !important;
}

/* ==========================================================================
   v0.18.0 — PATTERN 7: CTA banner finale
   ========================================================================== */
.rei-pattern-cta-banner {
    background: linear-gradient(135deg, var(--rei-green, #22ca01), var(--rei-green-deep, #0a7d2c)) !important;
    padding: 70px 24px;
    text-align: center;
    color: #fff;
}
.rei-pattern-cta-banner__title {
    font-size: clamp( 2.25rem, 4.5vw, 3.5rem ) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
    margin: 0 auto 18px !important;
    max-width: 720px;
}
.rei-pattern-cta-banner__sub {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.92) !important;
    margin: 0 auto 32px !important;
    max-width: 580px;
}
.rei-pattern-cta-banner__cta {
    justify-content: center !important;
    gap: 14px !important;
}
.rei-pattern-cta-banner__btn .wp-block-button__link {
    padding: 16px 32px;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: var(--rei-transition);
}
.rei-pattern-cta-banner__btn--white .wp-block-button__link {
    background: #fff;
    color: var(--rei-green-deep, #0a7d2c);
    border-color: #fff;
}
.rei-pattern-cta-banner__btn--white .wp-block-button__link:hover {
    background: var(--rei-cream, #fff4e6);
    transform: translateY(-2px);
}
.rei-pattern-cta-banner__btn--ghost .wp-block-button__link {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.rei-pattern-cta-banner__btn--ghost .wp-block-button__link:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   v0.18.0 — PATTERN 8: Magazine 3 articoli
   ========================================================================== */
.rei-pattern-magazine {
    padding: 70px 0;
    text-align: center;
}
.rei-pattern-magazine__grid {
    margin-top: 20px;
    gap: 24px !important;
}
.rei-pattern-magazine__card {
    background: #fff !important;
    border-radius: var(--rei-radius-lg, 16px) !important;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: var(--rei-shadow-md);
    text-align: left;
    transition: var(--rei-transition);
}
.rei-pattern-magazine__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rei-shadow-xl);
}
.rei-pattern-magazine__thumb {
    margin: 0 !important;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--rei-cream-dark, #f5e9d0);
}
.rei-pattern-magazine__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rei-pattern-magazine__cat {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 18px 22px 8px !important;
    text-transform: uppercase !important;
}
.rei-pattern-magazine__title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 22px 8px !important;
    color: var(--rei-ink, #0d1421) !important;
    letter-spacing: -0.01em !important;
}
.rei-pattern-magazine__excerpt {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--rei-gray, #6c6c6c) !important;
    margin: 0 22px 22px !important;
}

/* ==========================================================================
   v0.18.0 — PATTERN 9: Sezione Offerta
   ========================================================================== */
.rei-pattern-offerta {
    padding: 70px 0;
}
.rei-pattern-offerta__columns {
    align-items: center;
    gap: 50px !important;
}
.rei-pattern-offerta__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #e31e24 !important; /* rosso per offerte gas, cambiabile */
    margin: 0 0 14px !important;
}
.rei-pattern-offerta__title {
    font-size: clamp( 2rem, 4vw, 3rem ) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 16px !important;
    color: var(--rei-ink, #0d1421) !important;
}
.rei-pattern-offerta__sub {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    color: var(--rei-ink-soft, #4a4a4a) !important;
    margin: 0 0 24px !important;
}
.rei-pattern-offerta__prezzi {
    margin-bottom: 28px !important;
    gap: 14px !important;
}
.rei-pattern-offerta__prezzo {
    background: #fff !important;
    border-radius: 14px;
    padding: 18px 20px !important;
    border: 1px solid #efe7d4;
}
.rei-pattern-offerta__prezzo-label {
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--rei-gray, #777) !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
}
.rei-pattern-offerta__prezzo-amount {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: var(--rei-ink, #0d1421) !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}
.rei-pattern-offerta__cta {
    gap: 14px !important;
}
.rei-pattern-offerta__photo img {
    border-radius: var(--rei-radius-2xl, 28px);
    box-shadow: var(--rei-shadow-xl);
    width: 100%;
    height: auto;
}

/* ==========================================================================
   v0.18.0 — PATTERN 10: Sezione Chiamate (testo+lista+foto)
   ========================================================================== */
.rei-pattern-chiamate {
    padding: 70px 0;
}
.rei-pattern-chiamate__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rei-green-deep, #0a7d2c) !important;
    margin: 0 0 14px !important;
}
.rei-pattern-chiamate__title {
    font-size: clamp( 2rem, 4vw, 3rem ) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 16px !important;
    color: var(--rei-ink, #0d1421) !important;
}
.rei-pattern-chiamate__sub {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    color: var(--rei-ink-soft, #4a4a4a) !important;
    margin: 0 0 24px !important;
}
.rei-pattern-chiamate__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.rei-pattern-chiamate__list li {
    position: relative;
    padding: 8px 0 8px 32px !important;
    font-size: 1rem !important;
    color: var(--rei-ink, #0d1421) !important;
    line-height: 1.5;
}
.rei-pattern-chiamate__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 6px;
    width: 22px;
    height: 22px;
    background: var(--rei-green, #22ca01);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.rei-pattern-chiamate__photo img {
    border-radius: var(--rei-radius-2xl, 28px);
    box-shadow: var(--rei-shadow-xl);
    width: 100%;
    height: auto;
}

/* ==========================================================================
   v0.18.0 — PATTERN 11: Sezione App (dark)
   ========================================================================== */
.rei-pattern-app {
    background: var(--rei-ink, #0d1421) !important;
    color: #fff !important;
    padding: 70px 0;
}
.rei-pattern-app__phone img {
    width: 100%;
    height: auto;
    max-width: 360px;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(34, 202, 1, 0.25));
}
.rei-pattern-app__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rei-green, #22ca01) !important;
    margin: 0 0 14px !important;
}
.rei-pattern-app__title {
    font-size: clamp( 2.25rem, 4.5vw, 3.5rem ) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
    margin: 0 0 18px !important;
}
.rei-pattern-app__sub {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.85) !important;
    margin: 0 0 28px !important;
}
.rei-pattern-app__stores {
    gap: 14px !important;
}
.rei-pattern-app__store .wp-block-button__link {
    padding: 14px 26px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 14px;
    border: 1px solid transparent;
    background: #fff;
    color: var(--rei-ink, #0d1421);
    transition: var(--rei-transition);
}
.rei-pattern-app__store .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34, 202, 1, 0.3);
}

/* ==========================================================================
   v0.18.0 — PATTERN 12: Testimonianze
   ========================================================================== */
.rei-pattern-testimonianze {
    padding: 70px 0;
    text-align: center;
}
.rei-pattern-testimonianze__grid {
    margin-top: 20px;
    gap: 24px !important;
}
.rei-pattern-testimonianze__card {
    background: #fff !important;
    border-radius: var(--rei-radius-lg, 16px) !important;
    padding: 28px 26px !important;
    text-align: left;
    box-shadow: var(--rei-shadow-md);
    border: 1px solid #efe7d4;
}
.rei-pattern-testimonianze__stars {
    font-size: 1.2rem !important;
    color: #ffc107 !important;
    letter-spacing: 0.15em !important;
    margin: 0 0 14px !important;
    line-height: 1 !important;
}
.rei-pattern-testimonianze__quote {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: var(--rei-ink, #0d1421) !important;
    margin: 0 0 20px !important;
    font-style: italic;
}
.rei-pattern-testimonianze__author {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    color: var(--rei-gray, #6c6c6c) !important;
    margin: 0 !important;
}
.rei-pattern-testimonianze__author strong {
    color: var(--rei-ink, #0d1421);
    font-weight: 700;
}

/* ==========================================================================
   v0.18.0 — RESPONSIVE per tutti i pattern nuovi
   ========================================================================== */
@media (max-width: 768px) {
    .rei-pattern-minihero,
    .rei-pattern-servizi,
    .rei-pattern-magazine,
    .rei-pattern-offerta,
    .rei-pattern-chiamate,
    .rei-pattern-app,
    .rei-pattern-testimonianze {
        padding: 44px 0;
    }
    .rei-pattern-cta-banner {
        padding: 50px 20px;
    }
    .rei-pattern-section-title {
        font-size: clamp( 1.6rem, 6vw, 2.2rem ) !important;
        margin-bottom: 28px !important;
    }
    .rei-pattern-minihero__title,
    .rei-pattern-offerta__title,
    .rei-pattern-chiamate__title,
    .rei-pattern-app__title,
    .rei-pattern-cta-banner__title {
        font-size: clamp( 1.75rem, 6vw, 2.4rem ) !important;
    }
    .rei-pattern-minihero__cta,
    .rei-pattern-cta-banner__cta,
    .rei-pattern-offerta__cta,
    .rei-pattern-app__stores {
        flex-direction: column;
    }
    .rei-pattern-minihero__cta .wp-block-button,
    .rei-pattern-cta-banner__cta .wp-block-button,
    .rei-pattern-offerta__cta .wp-block-button,
    .rei-pattern-app__stores .wp-block-button {
        width: 100%;
    }
    .rei-pattern-minihero__cta .wp-block-button__link,
    .rei-pattern-cta-banner__cta .wp-block-button__link,
    .rei-pattern-offerta__cta .wp-block-button__link,
    .rei-pattern-app__stores .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}