/* ============================================================================
   catalogue-page.css — mediaset-distribution-new
   Pagina Catalogue (/catalogue/) — misure esatte dal CSS Figma fornito
   ============================================================================

   STRUTTURA:
   .catalogue-content        → contenitore: padding 60px 0 100px (stesso valore usato in Footage/Mediaset Italia), gap 50px
   .catalogue-search          → column, gap 25px: titolo + barra ricerca
   .catalogue-title           → Geologica Cursive 700 36px, colore #2B75F5
   .catalogue-search__bar     → row, gap 25px: input pill + Advanced Search
   .catalogue-carousels       → column, gap 50px: i 10 .home-section
   I singoli .home-section/.carousel-* sono già definiti in home.css;
   .news-breadcrumb è già definito in single-news.css.
   ============================================================================ */

/* Override padding/box-shadow/max-width di base del vecchio style.css su #mainContent .wrapper —
   stesso pattern di mediaset-italia.css/search.css per il padding (il valore reale, 60px,
   è su .catalogue-content sotto); max-width:100% (invece del cap globale 1728px) fa sì che
   i caroselli si adattino fullwidth allo schermo, come Hero/Show Reel/Programming Schedule. */
#mainContent > .wrapper {
    box-shadow: none !important;
    padding-top: 0 !important;
    max-width: 100% !important;
}

.catalogue-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 70px 0 100px 0;
    gap: 50px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ─── TITOLO + RICERCA ───────────────────────────────────────────────────── */
.catalogue-search {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    width: 100%;
    padding-right: 100px;
    box-sizing: border-box;
    /* Riduce lo spazio dal breadcrumb (gap 50px del genitore) a 30px, standard
       del sito. Qui il breadcrumb è .news-breadcrumb, che non ha padding
       proprio (a differenza di .breadcrumb usato in Markets/Contact/ecc, che
       ne ha 10px) — quindi -20px, non -30px, per arrivare a 30px totali.
       Riguarda solo questa transizione, non quella successiva verso
       .catalogue-carousels (gestita dal gap del genitore, invariato). */
    margin-top: -20px;
}

/* Dal Figma — Catalogue: Geologica Cursive 700 36px, colore #2B75F5 */
.catalogue-title {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 36px;
    color: #2B75F5;
    margin: 0;
}

.catalogue-search__bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    width: 100%;
}

/* Dal Figma — Frame 22: pill border 1px #323E48, radius 30px, width 500px max 600px height 40px */
.catalogue-search__input-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 500px;
    max-width: 600px;
    height: 40px;
    border: 1px solid #323E48;
    border-radius: 30px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Dal Figma — input testo: padding 0 20px, font Geologica 300 14px rgba(50,62,72,0.8) */
.catalogue-search__input {
    flex: 1;
    height: 100%;
    /* !important necessari: la regola generica "form input[type='text']" in
       style.css/global.css ha specificità più alta di questa singola classe
       (2 selettori di tag + 1 attributo battono 1 classe, per il calcolo CSS)
       e altrimenti vincerebbe lei su padding/width/border. */
    padding: 0 20px !important;
    width: auto !important;
    border: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    font-feature-settings: 'ss01' on;
    color: rgba(50, 62, 72, 0.8);
}

.catalogue-search__input::placeholder {
    color: rgba(50, 62, 72, 0.8);
}

/* Dal Figma — icona: width 100px height 40px, background #323E48, radius 30px */
.catalogue-search__btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    background: #323E48;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    flex-shrink: 0;
}

.catalogue-search__btn:hover {
    background: #2B75F5;
}

/* Dal Figma — invia richiesta (Advanced Search): padding 9px 25px, border 1px #2B75F5,
   radius 50px, background bianco, testo Geologica Cursive 700 16px #2B75F5 */
.catalogue-search__advanced {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 9px 25px;
    background: #FFFFFF;
    border: 1px solid #2B75F5;
    border-radius: 50px;
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #2B75F5;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.catalogue-search__advanced:hover {
    background: #2B75F5;
    color: #FFFFFF;
    text-decoration: none;
}

/* ─── CARRELLI ───────────────────────────────────────────────────────────── */
.catalogue-carousels {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* ─── CARROSELLO VERTICALE — solo Feature Films (locandine poster) ─────────
   Dal Figma Style Guide: card 177x250px (vs 444x250px orizzontale standard),
   niente TAG sopra il titolo, gap 20px tra immagine e testo */
.carousel-card--vertical {
    width: 177px;
}

.carousel-card--vertical .carousel-card__img {
    width: 177px;
    height: 250px;
}

.carousel-card--vertical .carousel-card__body {
    width: 177px;
}

.carousel-card--vertical .carousel-card__title {
    width: 177px;
}

@media screen and (max-width: 768px) {
    .carousel-card--vertical {
        width: 130px;
    }

    .carousel-card--vertical .carousel-card__img {
        width: 130px;
        height: 184px;
    }

    .carousel-card--vertical .carousel-card__body,
    .carousel-card--vertical .carousel-card__title {
        width: 130px;
    }
}

/* ─── MEDIA QUERIES ──────────────────────────────────────────────────────── */
@media screen and (max-width: 1280px) {
    .catalogue-content {
        padding: 70px 0 100px 0;
    }

    .catalogue-search {
        padding-right: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .catalogue-content {
        padding: 100px 0 60px 0;
        gap: 40px;
    }

    .catalogue-search {
        padding-right: 40px;
    }

    .catalogue-search__bar {
        flex-wrap: wrap;
        gap: 15px;
    }

    .catalogue-search__input-wrap {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .catalogue-content {
        padding: 70px 0 40px 0;
        gap: 30px;
    }

    .catalogue-search {
        padding-right: 16px;
    }

    .catalogue-title {
        font-size: 28px;
        line-height: 32px;
    }

    .catalogue-search__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .catalogue-search__advanced {
        align-self: flex-start;
    }
}