/**
 * ME FREE — sections.css
 * Sezioni della home (e riutilizzabili in qualsiasi pagina).
 * Sostituisce: sezioni.css, chisiamo.css, timeline.css, highlights.css
 *
 * Indice
 *  1. Sezione (ritmo verticale, container, toni)
 *  2. Tipografia di sezione
 *  3. Layout split
 *  4. Media
 *  5. Manifesto
 *  6. Timeline
 *  7. Liste / highlights / cards
 */

/* =========================================================
   1. SEZIONE
   .me-section = fascia a tutta larghezza (può avere sfondo).
   Il padding laterale è calcolato: il contenuto resta nel
   container senza annidare un .me-container (uno strato in
   meno per il cliente). Nei blocchi GenerateBlocks lascia
   padding/margini a zero: comanda la classe.
   ========================================================= */

.me-section {
    position      : relative;
    padding-block : var(--me-section-y);
    /* il contenuto occupa al massimo --me-container, centrato, con gutter minimo */
    padding-inline: max(var(--me-gutter), calc((100% - var(--me-container)) / 2));
}

.me-container {
    width        : min(calc(100% - var(--me-gutter) * 2), var(--me-container));
    margin-inline: auto;
}

.me-section .me-container {
    width                    : 100%;
    /* già dentro una sezione: il gutter c'è */
}

/* Toni: ritmo bianco → grigio chiarissimo → mare profondo */
.me-section--alt {
    background: var(--me-paper-alt);
}

.me-section--dark {
    --me-ink         : #fff;
    --me-ink-soft    : rgba(255, 255, 255, .74);
    --me-line        : rgba(255, 255, 255, .2);
    --me-label       : #7CC0D2;
    /* teal schiarito: il #18728B su scuro non è leggibile */
    background       : var(--me-color-deep);
    color            : #fff;
}

/* =========================================================
   2. TIPOGRAFIA DI SEZIONE
   Gli h2/h3 dentro .me-section sono serif senza classi:
   il cliente inserisce un normale blocco Titolo.
   :where() = specificità minima → le impostazioni di
   GenerateBlocks / colori dell'editor vincono sempre.
   ========================================================= */

:where(.me-section) {
    color: var(--me-ink);
}

:where(.me-section) :is(h2, h3) {
    font-family   : var(--me-font-serif);
    font-weight   : 400;
    line-height   : 1.1;
    letter-spacing: -.02em;
    text-wrap     : balance;
}

:where(.me-section) h2 {
    margin   : 0 0 1.25rem;
    font-size: clamp(2.1rem, 4.2vw, 3.6rem);
}

:where(.me-section) h3 {
    margin     : 0 0 1rem;
    font-size  : clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.2;
}

:where(.me-section) p {
    color: var(--me-ink-soft);
}

:where(.me-section) :is(p, ul, ol, blockquote) {
    max-width    : var(--me-measure);
    margin-inline: auto;
}

/* Eyebrow (il piccolo titolo sopra il titolo) — usa poco, solo dove serve */
.me-label,
.manifesto-label,
.timeline-label,
.boat-label,
.experience-label,
.highlight-label {
    margin        : 0 0 1.25rem;
    color         : var(--me-label);
    font-size     : .75rem;
    font-weight   : 600;
    line-height   : 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cta-section .me-label,
.experience-wrapper .me-label {
    margin    : 0 auto 1.25rem;
    text-align: center;
}

/* Titolo con classe (compatibilità con markup esistente) */
.me-title,
.manifesto-title,
.timeline-title,
.boat-title,
.experience-title {
    margin        : 0 0 1.25rem;
    font-family   : var(--me-font-serif);
    font-size     : clamp(2.1rem, 4.2vw, 3.6rem);
    font-weight   : 400;
    line-height   : 1.1;
    letter-spacing: -.02em;
    text-wrap     : balance;
}

.me-vision {
    margin-top : 2rem;
    font-family: var(--me-font-serif);
    font-size  : clamp(1.1rem, 1.5vw, 1.25rem);
    font-style : italic;
    color      : var(--me-color-primary);
    line-height: 1.6;
}

/* Paragrafo introduttivo */
.me-lead,
.manifesto-intro,
.boat-intro,
.me-intro {
    margin     : 0 0 2rem;
    color      : var(--me-ink-soft);
    font-size  : clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.7;
}

.me-tagline {
    margin    : .5rem 0 2rem;
    color     : var(--me-ink-soft);
    font-size : .9rem;
    font-style: italic;
}

.cta-signature {
    font-family: var(--me-font-serif);
}

/* =========================================================
   3. LAYOUT SPLIT (due colonne)
   Un Gruppo con classe .me-split e due figli.
   Alias: .me-grid / .boat-grid (1.1 / .9), .manifesto-grid
   ========================================================= */

.me-split,
.me-grid,
.boat-grid,
.manifesto-grid {
    display              : grid;
    grid-template-columns: var(--me-cols, repeat(2, minmax(0, 1fr)));
    gap                  : clamp(2.5rem, 6vw, 6rem);
    align-items          : center;
}

.me-grid,
.boat-grid {
    --me-cols: minmax(0, 1.1fr) minmax(0, .9fr);
}

.manifesto-grid,
.me-split--top {
    align-items: start;
}

.me-split>*,
.me-grid>*,
.boat-grid>*,
.manifesto-grid>* {
    min-width: 0;
}

/* Media a destra su desktop */
.me-split--reverse> :first-child {
    order: 2;
}

@media (max-width: 768px) {

    .me-split,
    .me-grid,
    .boat-grid,
    .manifesto-grid {
        grid-template-columns: 1fr;
        gap                  : 2.5rem;
    }

    .me-split--reverse> :first-child {
        order: 0;
    }

    /* su mobile l'immagine sta sopra il testo */
    .boat-media,
    .me-split__media {
        order: -1;
    }
}

/* =========================================================
   4. MEDIA
   Blocco Immagine con classe .me-media.
   Proporzioni: --me-ratio (default 4/3), es. style="--me-ratio:1/1"
   ========================================================= */

.me-media,
.manifesto-image,
.manifesto-image-wrapper,
.highlight-media {
    margin       : 0;
    overflow     : hidden;
    border-radius: var(--me-radius);
}

.manifesto-image {
    --me-ratio: 1 / 1;
}

.me-media img,
.manifesto-image img,
.highlight-media img {
    display     : block;
    width       : 100%;
    height      : auto;
    aspect-ratio: var(--me-ratio, 1 / 1);
    object-fit  : cover;
    transition  : transform 1.4s var(--me-ease);
}

/* Immagine che si "assesta" mentre entra: unico effetto scenico, molto lento */
.js .me-media.me-reveal img {
    transform : scale(1.07);
    transition: transform 2s var(--me-ease);
}

.js .me-media.me-reveal.is-visible img {
    transform: scale(1);
}

@media (hover: hover) {

    .me-media:hover img,
    .manifesto-image:hover img,
    .highlight-item:hover .highlight-media img {
        transform: scale(1.025);
    }
}

/* HOVER (separato e leggero) */
@media (hover: hover) {

    .me-media:hover img,
    .manifesto-image:hover img,
    .highlight-item:hover img {
        transform: scale(1.02);
    }

    .highlight-item:hover {
        transform : translateY(-5px);
        /* Solleva il box */
        box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);
        /* Aumenta l'ombra */
    }
}

/* =========================================================
   5. MANIFESTO
   ========================================================= */

.manifesto-right {
    display       : flex;
    flex-direction: column;
    gap           : 2.5rem;
    min-width     : 0;
}

.manifesto-highlight {
    margin     : 0;
    padding    : .25rem 0 .25rem 1.75rem;
    border-left: 2px solid var(--me-color-primary);
    background : none;
}

.manifesto-highlight p,
.manifesto-highlight {
    font-family: var(--me-font-serif);
}

.manifesto-highlight p {
    margin     : 0;
    max-width  : 30rem;
    color      : var(--me-label);
    font-size  : clamp(1.15rem, 1.8vw, 1.4rem);
    font-style : italic;
    line-height: 1.55;
}

/* =========================================================
   6. TIMELINE
   Markup: .timeline-verticale > .timeline-evento (×N)
           dentro ogni evento: .timeline-anno, titolo h3, paragrafo
   Il JS scrive solo --p (0→1) e la classe .is-active.
   Linea di progresso = transform (GPU), niente height animata.
   ========================================================= */

.timeline-verticale {
    --tl-indent : clamp(1.75rem, 4vw, 3rem);
    --p         : 0;
    position    : relative;
    margin-top  : clamp(3rem, 6vw, 5rem);
    padding-left: var(--tl-indent);
}

/* binario */
.timeline-verticale::before,
.timeline-verticale::after {
    content : "";
    position: absolute;
    top     : .4rem;
    bottom  : 0;
    left    : 0;
}

.timeline-verticale::before {
    width     : 1px;
    background: var(--me-line);
}

/* progresso */
.timeline-verticale::after {
    width           : 2px;
    margin-left     : -.5px;
    background      : var(--me-color-primary);
    transform-origin: top center;
    transform       : scaleY(var(--p));
    transition      : transform .7s var(--me-ease);
    will-change     : transform;
}

.timeline-evento {
    position: relative;
    padding : 0 0 clamp(2.5rem, 5vw, 4rem);
    border  : 0;
    /* reset: la vecchia versione disegnava una seconda linea */
}

.timeline-evento:last-child {
    padding-bottom: 0;
}

/* nodo */
.timeline-evento::before {
    content      : "";
    position     : absolute;
    top          : .05rem;
    left         : calc(var(--tl-indent) * -1);
    width        : 10px;
    height       : 10px;
    border       : 1px solid rgba(23, 27, 29, .35);
    border-radius: 50%;
    background   : var(--me-paper);
    transform    : translateX(-50%);
    transition   :
        background-color .6s var(--me-ease),
        border-color .6s var(--me-ease),
        box-shadow .6s var(--me-ease);
}

.timeline-evento.is-active::before {
    border-color: var(--me-color-primary);
    background  : var(--me-color-primary);
    box-shadow  : 0 0 0 5px rgba(var(--me-color-primary-rgb), .14);
}

.timeline-anno {
    margin        : 0 0 .9rem;
    color         : var(--me-ink-soft);
    font-size     : .75rem;
    font-weight   : 600;
    line-height   : 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition    : color .6s var(--me-ease);
}

.timeline-evento.is-active .timeline-anno {
    color: var(--me-label);
}

.timeline-evento p:last-child {
    margin     : 0;
    max-width  : 38rem;
    line-height: 1.7;
}

@media (max-width: 768px) {

    .timeline-verticale {
        --tl-indent: 1.5rem;
    }

    .timeline-evento::before {
        width : 9px;
        height: 9px;
    }
}

/* =========================================================
   7. LISTE / HIGHLIGHTS / CARDS
   ========================================================= */

/* Lista caratteristiche: blocco Elenco con classe .me-features */
.me-features,
.boat-features {
    display       : flex;
    flex-direction: column;
    gap           : .9rem;
    margin        : 0 0 2.5rem;
    padding       : 0;
    list-style    : none;
}

.me-features li,
.boat-features li {
    position    : relative;
    margin      : 0;
    padding-left: 2rem;
    color       : var(--me-ink);
    font-size   : .95rem;
    font-weight : 500;
    line-height : 1.5;
}

.me-features li::before,
.boat-features li::before {
    content   : "";
    position  : absolute;
    top       : .78em;
    left      : 0;
    width     : 1.1rem;
    height    : 1px;
    background: var(--me-color-primary);
}

/* Highlights: righe immagine + testo, alternate su desktop */
.highlight-item {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : clamp(1.5rem, 2vw, 3rem);
    align-items          : center;
    padding              : clamp(1.25rem, 2vw, 3rem);
    box-shadow           : 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    transition           : transform 0.4s ease, box-shadow 0.4s ease;
}

/*.highlight-item + .highlight-item {
    margin-top: clamp(3.5rem, 8vw, 7rem);
}*/

@media (min-width: 769px) {

    .highlight-item:nth-child(even) .highlight-media {
        order: 2;
    }
}

.highlight-content p {
    max-width: 30rem;
}

/* Immagine verticale (es. deriva): aggiungere la classe al contenitore
   .highlight-media invece di ritagliarla 4:3 */
.highlight-media--tall {
    --me-ratio: 4 / 5;
    max-width : 26rem;
}

@media (max-width: 768px) {

    .highlight-item {
        grid-template-columns: 1fr;
        grid-template-rows   : auto;
    }
}

@media (max-width: 900px) {
    .highlight-item {
        grid-template-columns: 1fr;
    }
}

/* Cards / esperienze: colonne con filetto, senza box.
   Si adattano da sole (1→3 colonne) senza media query.
   .gb-element-eb22fd4b = classe generata da GenerateBlocks:
   sostituiscila con .me-cards nel campo "Classi CSS aggiuntive". */
.me-cards,
.gb-element-eb22fd4b {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap                  : clamp(1.5rem, 3vw, 3rem);
    margin-block         : 3rem;
}

.me-cards>*,
.gb-element-eb22fd4b>* {
    padding   : 0;
    border-top: 1px solid var(--me-line);
}


/* =========================================================
   8. AGGIORNAMENTI (blocco "Ultimi articoli", classe .me-updates)
   Render lato server → i titoli sono nel DOM (SEO).
   ========================================================= */

.me-updates .wp-block-latest-posts__list {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap                  : clamp(1.5rem, 3vw, 2.5rem);
    margin               : 2.5rem 0;
    padding              : 0;
    list-style           : none;
}

.me-updates .wp-block-latest-posts__list>li {
    margin : 0;
    padding: 0;
}

.me-updates .wp-block-latest-posts__featured-image {
    margin       : 0 0 1rem;
    overflow     : hidden;
    border-radius: var(--me-radius);
}

.me-updates .wp-block-latest-posts__featured-image img {
    display     : block;
    width       : 100%;
    height      : auto;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
    transition  : transform 1.4s var(--me-ease);
}

@media (hover: hover) {

    .me-updates li:hover .wp-block-latest-posts__featured-image img {
        transform: scale(1.03);
    }
}

.me-updates .wp-block-latest-posts__post-date {
    display       : block;
    margin-bottom : .5rem;
    color         : var(--me-ink-soft);
    font-size     : .75rem;
    font-weight   : 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.me-updates .wp-block-latest-posts__post-title {
    display        : block;
    color          : var(--me-ink);
    font-family    : var(--me-font-serif);
    font-size      : 1.35rem;
    line-height    : 1.25;
    letter-spacing : -.01em;
    text-decoration: none;
}

.me-updates .wp-block-latest-posts__post-title:hover {
    text-decoration          : underline;
    text-decoration-thickness: 1px;
    text-underline-offset    : .2em;
}

.me-cards h3 {
    margin   : 0 0 .5rem;
    font-size: 1.35rem;
}

.me-cards p {
    margin: 0;
}

/* Titoli sulle fasce scure */
.me-section--dark :is(h2, h3, h4) {
    color: #fff;
}

/* =========================================
   BLOG LOOP — CARD EDITORIALE
   Griglia: riga 1 = immagine + titolo + estratto (sovrapposti)
            riga 2 = data
   ========================================= */

.blogpage-posts .wp-block-post-template {
    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 2rem;
    margin               : 3rem 0 0;
    /* niente più width  :100% + auto in conflitto */
    padding              : 0;
}

@media (max-width: 900px) {
    .blogpage-posts .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .blogpage-posts .wp-block-post-template {
        grid-template-columns: 1fr;
        gap                  : 1.5rem;
    }
}


.home-blogposts .gb-loop-item {
    --card-ratio         : 1 / 1;
    /* 4 / 5 per un taglio più editoriale */
    position             : relative;
    /* serve al link "stretched" */
    display              : grid;
    grid-template-columns: minmax(0, 1fr);
    overflow             : hidden;
    border-radius        : var(--me-radius-media, 16px);
    background           : #fff;
}

/* Immagine, titolo ed estratto condividono la riga 1 */
.home-blogposts .gb-loop-item>a,
.home-blogposts .gb-loop-item>h2,
.home-blogposts .gb-loop-item>p:nth-of-type(2) {
    grid-area: 1 / 1;
}

.home-blogposts .gb-loop-item a {
    text-shadow: 0px 0px 10px rgb(7, 45, 56);
}

/* Data: riga 2, attaccata all'immagine */
.home-blogposts .gb-loop-item>p:first-of-type {
    grid-area     : 2 / 1;
    margin        : 0;
    padding       : .85rem 1.25rem;
    color         : var(--me-ink-soft, #4B5256);
    font-size     : .75rem;
    font-weight   : 600;
    line-height   : 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* — Immagine + overlay — */
.home-blogposts .gb-loop-item>a {
    position     : relative;
    display      : block;
    overflow     : hidden;
    border-radius: var(--me-radius-media, 16px);
}

.home-blogposts .gb-loop-item>a img {
    display     : block;
    width       : 100%;
    height      : auto;
    aspect-ratio: var(--card-ratio);
    object-fit  : cover;
    transition  : transform .8s var(--me-ease, cubic-bezier(.16, 1, .3, 1));
}

/* Sfumatura fissa in basso: rende leggibile il titolo */
.home-blogposts .gb-loop-item>a::after {
    content       : "";
    position      : absolute;
    inset         : 0;
    pointer-events: none;
    background    : linear-gradient(to top,
            rgb(24, 114, 139, 1)0%,
            rgb(24, 114, 139, 0.5)50%,
            rgba(6, 22, 28, 0) 100%);
}

/* Velo scuro uniforme: compare in hover, dietro l'estratto */
.home-blogposts .gb-loop-item>a::before {
    content       : "";
    position      : absolute;
    inset         : 0;
    z-index       : 1;
    pointer-events: none;
    background    : rgba(6, 22, 28, .6);
    opacity       : 0;
    transition    : opacity .5s var(--me-ease, ease);
}

/* — Titolo: in basso, centrato, grande — */
.home-blogposts .gb-loop-item>h2 {
    z-index       : 2;
    align-self    : end;
    margin        : 0;
    padding       : 0 1.5rem 1.75rem;
    color         : #fff;
    font-family   : var(--me-font-serif, Georgia, serif);
    font-size     : clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight   : 400;
    line-height   : 1.2;
    letter-spacing: -.01em;
    text-align    : center;
    text-wrap     : balance;
    text-shadow   : 0 1px 18px rgba(0, 0, 0, .3);
    transition    : opacity .4s ease, transform .5s var(--me-ease, ease);
}

.home-blogposts .gb-loop-item>h2 a {
    color          : inherit;
    text-decoration: none;
}

/* Tutta la card è cliccabile (immagine, titolo, estratto, data) */
.home-blogposts .gb-loop-item>h2 a::after {
    content : "";
    position: absolute;
    inset   : 0;
}

/* — Estratto: centro perfetto, nascosto finché non serve — */
.home-blogposts .gb-loop-item>p:nth-of-type(2) {
    z-index       : 3;
    align-self    : center;
    justify-self  : center;
    max-width     : 80%;
    margin        : 0;
    color         : #fff;
    font-size     : 1rem;
    line-height   : 1.6;
    text-align    : center;
    opacity       : 0;
    transform     : translateY(10px);
    pointer-events: none;
    /* il click passa al link sotto */
    transition    : opacity .5s var(--me-ease, ease), transform .5s var(--me-ease, ease);
}

/*BLOG DATA*/
.blogpage-post .wp-block-post-date {
    margin    : 0;
    text-align: center;
    position  : relative;
}

.blogpage-post .wp-block-post-date time {
    display       : inline-block;
    font-size     : .7rem;
    font-weight   : 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color         : var(--me-ink-soft, #6b7280);
    opacity       : .8;
    line-height   : 1;

}


.blogpage-post .wp-block-post-date::before {
    content   : "";
    display   : block;
    width     : 24px;
    height    : 1px;
    background: var(--me-line, rgba(0, 0, 0, .15));
    margin    : 0 auto .5rem;
    opacity   : .6;
}


.blogpage-post li:hover .wp-block-post-date time {
    color  : var(--me-ink, #111);
    opacity: 1;
}

/* =========================================
   BLOG GRID CONTAINER (Fix centratura UL)
   ========================================= */
.blogpage-posts .wp-block-post-template,
.home-blogposts .wp-block-post-template {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 2rem;
    list-style           : none;
    padding              : 0;
    margin               : 3rem auto 0;
    width                : 100%;
}

/* Responsive: 2 colonne su tablet */
@media (max-width: 1024px) {

    .blogpage-posts .wp-block-post-template,
    .home-blogposts .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 colonna su mobile */
@media (max-width: 640px) {

    .blogpage-posts .wp-block-post-template,
    .home-blogposts .wp-block-post-template {
        grid-template-columns: 1fr;
        gap                  : 2.5rem;
    }
}

@media (hover: none),
(max-width: 900px) {
    .home-blogposts .gb-loop-item {
        --card-ratio: 4 / 5;
    }

    .home-blogposts .gb-loop-item>a::after {

        background: linear-gradient(to top,
                rgb(24, 114, 139, 1)0%,
                rgb(24, 114, 139, 0.5)100%,
                rgba(6, 22, 28, 0) 100%);
    }

    /* Mantieni titolo visibile */
    .home-blogposts .gb-loop-item>h2 {
        opacity  : 1;
        transform: none;
    }

    /* Mostra excerpt sotto il titolo (non più centrato overlay) */
    .home-blogposts .gb-loop-item>p:nth-of-type(2) {
        position      : relative;
        opacity       : 1;
        transform     : none;
        pointer-events: auto;
        max-width     : 100%;
        padding       : 0 1.25rem 1.25rem;
        color         : var(--me-ink, #171b1d);
        text-align    : left;
        background    : #fff;
    }

    /* Rimuovi overlay scuro inutile su mobile */
    .home-blogposts .gb-loop-item>a::before {
        display: none;
    }

    /* Riduci gradiente */
    .home-blogposts .gb-loop-item>a::after {
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0) 60%);
    }

    .home-blogposts .gb-loop-item a {
        text-shadow: none;
    }

    .home-blogposts .gb-loop-item {
        display       : flex;
        flex-direction: column;
    }

    .home-blogposts .gb-loop-item>h2 {
        position  : relative;
        padding   : 1rem 1.25rem 0.5rem;
        color     : var(--me-ink);
        text-align: left;
    }
}

/* =========================================
   HOVER / FOCUS — solo dispositivi con mouse
   Su touch resta: immagine + titolo + data (l'estratto non serve).
   ========================================= */
@media (hover: hover) {

    .home-blogposts .gb-loop-item:is(:hover, :focus-within)>a::after {
        content       : "";
        position      : absolute;
        inset         : 0;
        pointer-events: none;
        background    : linear-gradient(to top,
                rgba(0, 0, 0, .8) 0%,
                rgba(0, 0, 0, .8) 45%,
                rgba(0, 0, 0, .8) 100%);
    }

    .home-blogposts .gb-loop-item:is(:hover, :focus-within)>a img {
        transform: scale(1.05);
    }

    .home-blogposts .gb-loop-item:is(:hover, :focus-within)>a::before {
        opacity: 1;
    }

    .home-blogposts .gb-loop-item:is(:hover, :focus-within)>h2 {
        opacity  : 0;
        transform: translateY(10px);
    }

    .home-blogposts .gb-loop-item:is(:hover, :focus-within)>p:nth-of-type(2) {
        opacity  : 1;
        transform: none;
    }
}

/*EXPERIENCE*/
/* CARD */
.experience-card {
    position     : relative;
    overflow     : hidden;
    border-radius: 12px;
    text-align   : center;
}

/* WRAPPER IMMAGINE */
.experience-card .wp-block-image {
    margin: 0;
}

/* IMMAGINE */
.experience-card img {
    display     : block;
    width       : 100%;
    height      : auto;
    aspect-ratio: 1 / 1;
    object-fit  : cover;
}

/* TESTO SOPRA IMMAGINE */
.experience-card p {
    position   : absolute;
    bottom     : 0;
    left       : 0;
    right      : 0;
    margin     : 0;
    padding    : 1.2rem;
    color      : #fff;
    font-size  : 0.95rem;
    line-height: 1.4;
    z-index    : 2;
    /* overlay gradiente per leggibilità */
    background : linear-gradient(to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0));
}

.experience-card p {
    transform : translateY(10px);
    opacity   : 0.9;
    transition: all 0.6s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
    .experience-card:hover p {
        transform: translateY(0);
        opacity  : 1;
    }

    .experience-card img {
        transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
    }

    .experience-card:hover img {
        transform: scale(1.05);
    }

}

/* PARTE IN GRASSETTO */
.experience-card strong {
    display    : block;
    font-size  : 1.2rem;
    font-weight: 500;
}


/* =========================================
   BLOG PAGE — CLEAN EDITORIAL GRID
   ========================================= */

/* HEADER */
.blogpage-head {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align   : center;
}

.blogpage-head p:last-child {
    max-width  : 36rem;
    margin     : 1rem auto 0 !important;
    /* batte lo style inline */
    color      : var(--me-ink-soft);
    font-size  : clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.7;
}

/* GRID (doppia classe = batte lo stile di WordPress) */
.blogpage-post.wp-block-post-template {
    display              : grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap                  : 2.5rem 2rem;
    margin               : 0;
    padding              : 0;
    list-style           : none;
}

@media (max-width: 1024px) {
    .blogpage-post.wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .blogpage-post.wp-block-post-template {
        grid-template-columns: 1fr;
        gap                  : 2rem;
    }
}

/* CARD */
.blogpage-post .wp-block-post {
    position      : relative;
    /* per il link che copre tutta la card */
    display       : flex;
    flex-direction: column;
    gap           : .75rem;
    margin        : 0;
}

/* IMAGE */
.blogpage-post .wp-block-post-featured-image {
    margin       : 0;
    overflow     : hidden;
    border-radius: 12px;
}

.blogpage-post .wp-block-post-featured-image img {
    display                        : block;
    width                          : 100%;
    height                         : auto;
    aspect-ratio                   : 4 / 5 !important;
    /* batte lo style="aspect-ratio:1" inline */
    object-fit                     : cover;
    transition                     : transform .6s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
    .blogpage-post .wp-block-post:hover img {
        transform: scale(1.04);
    }
}

/* TITLE */
.blogpage-post .wp-block-post-title {
    margin        : .25rem 0 0 !important;
    /* batte gli style inline */
    font-family   : var(--me-font-serif);
    font-size     : clamp(1.15rem, 1.4vw, 1.3rem) !important;
    font-weight   : 400;
    line-height   : 1.25;
    letter-spacing: -.01em;
    text-align    : left !important;
    text-wrap     : balance;
}

.blogpage-post .wp-block-post-title a {
    color                    : var(--me-ink);
    text-decoration          : underline;
    text-decoration-color    : transparent;
    /* compare solo in hover */
    text-decoration-thickness: 1px;
    text-underline-offset    : .22em;
    transition               : text-decoration-color .4s ease;
}

.blogpage-post .wp-block-post:hover .wp-block-post-title a {
    text-decoration-color: currentColor;
}

/* tutta la card è cliccabile */
.blogpage-post .wp-block-post-title a::after {
    content : "";
    position: absolute;
    inset   : 0;
}

/* EXCERPT */
.blogpage-post .wp-block-post-excerpt {
    margin    : 0 !important;
    text-align: left !important;
}

.blogpage-post .wp-block-post-excerpt__excerpt {
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp        : 3;
    margin            : 0;
    overflow          : hidden;
    color             : var(--me-ink-soft);
    font-size         : .875rem !important;
    /* batte .has-small-font-size */
    line-height       : 1.55;
}


@media (max-width: 768px) {

    .blogpage-posts {
        max-width    : 1200px;
        margin       : 0 auto;
        padding-left : 2rem;
        padding-right: 2rem;
    }

    .blogpage-posts {
        padding-left : 1.25rem;
        padding-right: 1.25rem;
    }

    .blogpage-post {
        gap: 1.75rem;
    }

    .blogpage-post .wp-block-post {
        position     : relative;
        display      : grid;
        overflow     : hidden;
        border-radius: 16px;
        background   : #fff;
    }

    .blogpage-post .wp-block-post {
        border-radius: 12px;
        overflow     : hidden;
    }

    /* CONTAINER BLOG */
    .blogpage-posts {
        padding: 0 1rem;
        gap    : 1.5rem;
    }


}



/* =========================================================
   ARTICOLO — ordine, immagine, meta, fondo
   ========================================================= */

/* Ordine: titolo → immagine → testo → fondo */
body.me-article .inside-article {
    display       : flex;
    flex-direction: column;
}

.me-article .inside-article>* {
    width: 100%;
}

.me-article .entry-header {
    order: 2;
}

.me-article .featured-image {
    order: 1;
}

.me-article .entry-content {
    order: 3;
}

.me-article footer.entry-meta {
    order: 4;
}

.me-article .entry-title {
    font-family: var(--me-font-serif);
    font-size  : 3rem;
    color      : #333;
    max-width  : 64rem;
    margin     : 0 auto;
    padding    : 0 1rem;
}

/* — Meta dell'header (solo data; autore nascosto) — */
.me-article .entry-header .entry-meta {
    margin        : 1.25rem 0 0;
    color         : var(--me-label);
    font-size     : .75rem;
    font-weight   : 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    max-width     : 64rem;
    margin        : 0 auto;
    padding       : 1rem;
}

.me-article .entry-header .entry-meta .byline {
    display: none;
}

/* — Immagine in evidenza: orizzontale, mai più alta di ~576px — */
.me-article .inside-article>.featured-image {
    max-width    : 64rem;
    margin       : 0;
    padding      : 0;
    overflow     : hidden;
    border-radius: var(--me-radius-media, 16px);
    margin       : 0 auto;
}

/*.me-article .featured-image img {
    display      : block;
    width        : 100%;
    height       : auto;
    max-height   : 300px;
    aspect-ratio : 16 / 9;
    object-fit   : cover;
    margin       : 1rem auto;
    border-radius: var(--me-radius-media, 16px);
}*/

.me-article .featured-image img {
    display          : block;
    width            : 100%;
    height           : auto;
    /* niente aspect-ratio forzato */
    max-height       : 70vh;
    /* tetto generoso: limita le foto molto verticali */
    object-fit       : contain;
    /* non taglia mai, nel caso il tetto venga raggiunto */
    margin           : 1rem auto;
    border-radius    : var(--me-radius-media, 16px);
}

.me-article .entry-content {
    line-height: 1.6;
    color      : #333;
    max-width  : 64rem;
    margin     : 0 auto;
    padding    : 0 1rem;
}

/* Stili per i titoli (se presenti) */
.me-article .entry-content h2,
.me-article .entry-content h3,
.me-article .entry-content h4 {
    font-weight   : 500;
    font-family   : var(--me-font-serif);
    position      : relative;
    display       : inline-block;
    margin-bottom : 1rem;
    padding-bottom: 0.3rem;
}

.me-article .entry-content h2::after,
.me-article .entry-content h3::after,
.me-article .entry-content h4::after {
    content         : "";
    position        : absolute;
    bottom          : 0;
    left            : 0;
    width           : 100%;
    height          : 1.5px;
    background-color: #0073aa;
    transition      : width 0.3s ease;
}

/* Stili per i separatori */
.me-article .entry-content hr {
    margin          : 2rem 0;
    border          : none;
    height          : 1px;
    background-color: #e0e0e0;
    /* Colore chiaro per il separatore */
}

/* Stili per i link */
.me-article .entry-content a {
    color          : #0073aa;
    text-decoration: none;
    border-bottom  : 1px solid #0073aa;
}

.me-article .entry-content a:hover {
    border-bottom: 1px solid #005177;
}

.me-article .entry-content blockquote {
    border-left: 4px solid #0073aa;
    color      : #555;
}

@media (max-width: 600px) {

    .me-article .featured-image img {
        aspect-ratio: 4 / 3;
    }

    .me-article .entry-content {
        padding: 0;
    }
}

/* — Fondo articolo — */
.me-article footer.entry-meta {
    max-width     : 44rem;
    margin        : clamp(3rem, 6vw, 4.5rem) auto 0;
    padding-top   : 1.5rem;
    border-top    : 1px solid var(--me-line);
    color         : var(--me-ink-soft);
    font-size     : .75rem;
    font-weight   : 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    ;
}

/* niente icone; i tag ("italiano/inglese") sono solo un marcatore di lingua */
.me-article footer.entry-meta .gp-icon,
.me-article footer.entry-meta .tags-links {
    display: none;
}

.me-article footer.entry-meta .cat-links a {
    color          : var(--me-label);
    text-decoration: none;
}

/* — Articolo precedente / successivo — */
.me-article .post-navigation {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 1.5rem 2rem;
    margin-top           : 2rem;
}

.me-article .post-navigation :is(.nav-previous, .nav-next) {
    float: none;
    width: auto;
}

.me-article .post-navigation .nav-previous {
    grid-column: 1;
}

.me-article .post-navigation .nav-next {
    grid-column: 2;
    text-align : right;
}

.me-article .post-navigation .gp-icon {
    display: none;
}

/* etichetta (tradotta con :lang, niente testo da gestire in Polylang) */
.me-article .post-navigation :is(.nav-previous, .nav-next)::before {
    display       : block;
    margin-bottom : .5rem;
    color         : var(--me-label);
    font-size     : .72rem;
    font-weight   : 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.me-article .post-navigation .nav-previous::before {
    content: "Previous";
}

.me-article .post-navigation .nav-next::before {
    content: "Next";
}

html[lang^="it"] .me-article .post-navigation .nav-previous::before {
    content: "Precedente";
}

html[lang^="it"] .me-article .post-navigation .nav-next::before {
    content: "Successivo";
}

.me-article .post-navigation a {
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp        : 2;
    overflow          : hidden;
    color             : var(--me-ink);
    font-family       : var(--me-font-serif);
    font-size         : 1.05rem;
    font-weight       : 400;
    line-height       : 1.3;
    letter-spacing    : normal;
    text-transform    : none;
    text-decoration   : none;
}

.me-article .post-navigation a:hover {
    color: var(--me-color-primary);
}

@media (max-width: 520px) {

    .me-article .post-navigation {
        grid-template-columns: 1fr;
    }

    .me-article .post-navigation .nav-next {
        grid-column: 1;
        text-align : left;
    }
}