/* ======================================================
        S L I D E R 
====================================================== */

/* ======================
       GENERICI
========================= */

/* Disattiva i link del glossario solo dentro lo slider
   MA NON sull'autore (.fpp-author) */
.fpp-overlay a.cm-tooltip:not(.fpp-author),
.fpp-overlay a.glossaryLink:not(.fpp-author),
.fpp-overlay span.cm-tooltip,
.fpp-overlay span.glossaryLink {
    pointer-events: none !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: default !important;
}

.swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.swiper-wrapper,
.swiper-slide,
.fpp-slide {
    height: 100%;
}

.swiper-slide {
    display: flex;
}

.fpp-slide {
    flex: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

/* FRECCE DESTRA E SINISTRA */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
}

/* TRE PALLINI NAVIGAZIONE */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}

/* ======================================================
        SFONDO
====================================================== */
.fpp-overlay {
    background: linear-gradient(to bottom, rgba(205 21 21 / 40%), rgba(0,0,0,0.8));
    padding: 0rem 2rem 2rem 3rem !important;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* ======================================================
       TITOLO - DATA - TESTO BREVE
====================================================== */
.fpp-overlay h2 {
    margin-bottom: 3px;
    font-weight: 600 !important;
    margin-top: 30px !important;
    line-height: 1em!important;
}
.fpp-overlay h2 a {
    color: #fff;
    text-decoration: none;
}

/* META BASE */
.fpp-meta {
    font-size: 1rem;
    text-transform: none;
    font-style: normal;
    margin-bottom: 10px;
    opacity: 0.9;

    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}

/* AUTORE — versione cliccabile senza sottolineatura */
.fpp-overlay .fpp-meta a.fpp-author,
.fpp-overlay .fpp-meta a.fpp-author.glossaryLink,
.fpp-overlay .fpp-meta a.fpp-author.cm-tooltip {
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    color: #1a6eb7 !important;
    text-transform: none !important;
    font-style: normal !important;

    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer;
}

.fpp-overlay .fpp-meta a.fpp-author:hover {
    text-decoration: none !important;
    opacity: 0.85;
    color: white!important;
}

/* DATA */
.fpp-meta .fpp-date {
    font-weight: 400 !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    text-transform: none !important;
    font-style: normal !important;
}

/* TESTO BREVE */
.fpp-excerpt {
    margin-top: 10px;
}

/* Pattern slider */
.pattern_slider {
    margin-bottom: -45px !important;
}

.emoji {
    font-size: 1em !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ------------------------------------------------------ */
/* 📱 FULL WIDTH SOLO SU MOBILE                           */
/* ------------------------------------------------------ */
@media (max-width: 768px) {

    .pattern_slider,
    .pattern_slider .swiper-container,
    .pattern_slider .swiper-wrapper,
    .pattern_slider .swiper-slide,
    .pattern_slider .fpp-slide {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
    }

    .pattern_slider {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important; /* Fix margine negativo */
    }

    .pattern_slider .fpp-overlay {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ------------------------------------------------------ */
/* 📱 VERSIONE RESPONSIVE (smartphone e piccoli tablet)   */
/* ------------------------------------------------------ */
@media (max-width: 768px) {

    /* FIX ALTEZZA MOBILE */
    .swiper-container {
        height: auto !important;
        min-height: 420px !important;
    }

    /* FIX SLIDE CHE SI SCHIACCIA */
    .swiper-slide,
    .fpp-slide {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-end;
    }

    /* FIX OVERLAY */
    .fpp-overlay {
        padding: 1rem !important;
    }

    /* FIX TITOLO */
    .fpp-overlay h2,
    .fpp-overlay a {
        margin-bottom: 0 !important;
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    /* FIX META */
    .fpp-meta .emoji {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        opacity: 0.9 !important;
    }
}


/* ----------------------------------------
   GRIGLIA 3×3 PER IL FOCAL POINT
---------------------------------------- */

.fpp-focal-grid {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    gap: 10px;
    margin: 10px 0 20px;
}

.fpp-focal-point {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.fpp-focal-point input {
    display: none;
}

.fpp-focal-point span {
    display: block;
    width: 14px;
    height: 14px;
    margin: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: 0.2s ease;
}

.fpp-focal-point:hover span {
    background: #7aaaff;
}

.fpp-focal-point.active span,
.fpp-focal-point input:checked + span {
    background: #1e73be;
    box-shadow: 0 0 6px rgba(30,115,190,0.7);
}

/* ======================================================
   SLIDER — FIX LANDSCAPE SMARTPHONE (Edge/Chrome/Brave)
   - immagine: cover (come verticale)
   - overlay: non invade tutta la slide
   - testo breve: sempre visibile (anche su Brave)
====================================================== */

@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {

  /* 1) Altezza slider coerente con le barre browser (svh) */
  .pattern_slider .swiper-container{
    height: 82svh !important;
    min-height: 320px !important;
  }

  /* 2) Forza l’immagine a comportarsi come “zoom/cover” */
  .pattern_slider .fpp-slide{
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* 3) Overlay: non deve coprire tutto */
  .pattern_slider .fpp-overlay{
    padding: 0.8rem 1rem 1rem !important;
    max-height: 55% !important;
    overflow: hidden !important;
  }

  /* 4) Titolo più compatto */
  .pattern_slider .fpp-overlay h2,
  .pattern_slider .fpp-overlay h2 a{
    font-size: 1.15rem !important;
    line-height: 1.05 !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* 5) Meta più compatta */
  .pattern_slider .fpp-meta{
    font-size: 0.95rem !important;
    margin-bottom: 0.35rem !important;
  }

  /* 6) TESTO BREVE: SEMPRE visibile + clamp (evita invasione) */
  .pattern_slider .fpp-excerpt{
    display: block !important;
    margin-top: 0.4rem !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;

    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important; /* 3 righe, cambia se vuoi */
  }
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ======================================================
   SMARTPHONE LANDSCAPE — impila le colonne
   home_intro sopra / home_featured sotto
====================================================== */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {

  /* forza il wrapper delle colonne a comportarsi come stack */
  .home_intro,
  .home_featured {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* lo slider scende sotto */
  .home_featured {
    margin-top: 20px !important;
  }

  /* evita schiacciamenti verticali dello slider */
  .home_featured,
  .home_featured .swiper-container,
  .home_featured .swiper-wrapper,
  .home_featured .swiper-slide,
  .home_featured .fpp-slide {
    height: 400px !important;
    min-height: 0 !important;
  }

  /* overlay leggibile ma compatto */
  .home_featured .fpp-overlay {
    padding: 1rem 1.25rem !important;
  }
}