/* Accordion applicazioni - home page.
   Colori e font sono quelli del tema: arancione #f29100, testo #1d1d1b,
   'Graphik Wide' per i titoli e 'Graphik' per il testo corrente. */

.pp-applicazioni {
    --pp-arancione: #f29100;
    --pp-testo: #1d1d1b;
    --pp-testo-soft: #4d4d4d;
    --pp-superficie: #ffffff;
    --pp-superficie-alt: #f7f7f7;
    --pp-raggio: 10px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    color: var(--pp-testo);
}

.pp-applicazioni__item {
    background: var(--pp-superficie);
    border-radius: var(--pp-raggio);
    overflow: hidden;
}

/* --- intestazione della riga --- */

.pp-applicazioni__headline {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.pp-applicazioni__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.pp-applicazioni__label {
    font-family: 'Graphik Wide', 'Graphik', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 39px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

/* Il cerchio fa parte del disegno dell'icona (tracciato pieno preso dal Figma),
   quindi qui niente border: servirebbe solo a raddoppiarlo. Il tondo arancione
   al passaggio del mouse resta, come sfondo dietro l'icona che diventa bianca. */
.pp-applicazioni__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.pp-applicazioni__icon svg {
    width: 100%;
    height: 100%;
}

.pp-applicazioni__toggle:hover .pp-applicazioni__icon {
    background: var(--pp-arancione);
    color: #ffffff;
}

.pp-applicazioni__item.is-open .pp-applicazioni__icon {
    transform: rotate(180deg);
}

/* --- pannello aperto ---
   L'altezza viene impostata dal JS per animare l'apertura; a transizione
   finita torna a auto, cosi' il contenuto puo' crescere (es. font piu' grandi
   scelti dall'utente) senza restare tagliato. */

.pp-applicazioni__panel {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height .3s ease;
}

.pp-applicazioni__item.is-open .pp-applicazioni__panel {
    visibility: visible;
}

/* Proporzioni prese dal Figma: dentro una card larga 1799 con 40px di padding,
   l'immagine misura 1209 e il pannello 492, cioe' 2.46 : 1, con 18px di
   distanza (qui 12px, riproporzionati alla larghezza del contenitore del sito). */
.pp-applicazioni__panel-inner {
    display: grid;
    grid-template-columns: 2.46fr 1fr;
    gap: 12px;
    padding: 0 24px 24px;
}

.pp-applicazioni__media {
    border-radius: 8px;
    overflow: hidden;
}

.pp-applicazioni__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

/* --- pannello di destra --- */

.pp-applicazioni__content {
    background: var(--pp-superficie-alt);
    border-radius: 8px;
    padding: 26px 28px;
}

/* Figma: Graphik Wide Regular 30. */
.pp-applicazioni__title {
    margin: 0 0 12px;
    font-family: 'Graphik Wide', 'Graphik', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
}

.pp-applicazioni__price-prefix {
    margin: 0;
    font-size: 13px;
    color: var(--pp-testo-soft);
}

.pp-applicazioni__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

/* Figma: Graphik Semibold 36, #F29100, simbolo davanti all'importo.
   Semibold = 600, lo stesso peso che il sito usa gia' per i prezzi in scheda
   prodotto (.current-price-value). Del font e' caricato solo il Regular, quindi
   il 600 e' sintetizzato dal browser: succede gia' sulle schede prodotto, e
   usare lo stesso trattamento tiene i prezzi coerenti in tutto il sito.
   Il rapporto col prezzo dei prodotti resta quello del Figma, 36:24 = 1,5. */
.pp-applicazioni__price-value {
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--pp-arancione);
}

.pp-applicazioni__price-note {
    font-size: 11px;
    color: var(--pp-testo-soft);
}

.pp-applicazioni__disclaimer {
    margin: 2px 0 16px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
}

.pp-applicazioni__text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pp-testo-soft);
}

.pp-applicazioni__claim {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.pp-applicazioni__products-title {
    margin: 0 0 12px;
    font-family: 'Graphik Wide', 'Graphik', Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 400;
}

.pp-applicazioni__products {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-applicazioni__product-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    background: var(--pp-superficie);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease;
}

.pp-applicazioni__product-link:hover,
.pp-applicazioni__product-link:focus-visible {
    box-shadow: 0 0 0 1px var(--pp-arancione);
    color: inherit;
    text-decoration: none;
}

.pp-applicazioni__product-thumb {
    flex: 0 0 auto;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9e9e9;
}

.pp-applicazioni__product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-applicazioni__product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-applicazioni__product-name {
    font-family: 'Graphik Wide', 'Graphik', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
}

/* "a partire da" e' un'etichetta, non parte del prezzo: piccola e in grigio
   come il "tua a partire da" del prezzo grande qui sopra. In arancione
   sembrava far parte dell'importo. */
.pp-applicazioni__product-price-prefix {
    font-size: 11px;
    line-height: 1.2;
    color: var(--pp-testo-soft);
}

.pp-applicazioni__product-price {
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pp-arancione);
}

.pp-applicazioni__product-badge {
    font-size: 11px;
    color: var(--pp-testo-soft);
}

/* --- tablet: il pannello di destra sta stretto sotto i 1200px --- */

@media (max-width: 1199px) {
    .pp-applicazioni__panel-inner {
        grid-template-columns: 2fr 1fr;
    }

    .pp-applicazioni__label {
        font-size: 30px;
    }
}

/* --- mobile: immagine sopra, pannello sotto --- */

@media (max-width: 767px) {
    .pp-applicazioni__toggle {
        padding: 18px 20px;
        gap: 16px;
    }

    .pp-applicazioni__label {
        font-size: 22px;
    }

    .pp-applicazioni__icon {
        width: 32px;
        height: 32px;
    }

    .pp-applicazioni__panel-inner {
        grid-template-columns: 1fr;
        padding: 0 20px 20px;
    }

    .pp-applicazioni__media img {
        min-height: 200px;
        max-height: 260px;
    }

    .pp-applicazioni__content {
        padding: 20px;
    }
}

/* Chi ha chiesto meno animazioni non deve vedere lo scorrimento dell'altezza. */
@media (prefers-reduced-motion: reduce) {
    .pp-applicazioni__panel,
    .pp-applicazioni__icon {
        transition: none;
    }
}

/* Sezione che ospita l'accordion nel layout home.
   Lo stile sta qui e non nelle impostazioni della sezione perche' quelle
   finirebbero nel CSS generato dal page builder, che non viene rigenerato per
   una sezione inserita da codice. Il colore continua la fascia
   "Trova il policarbonato giusto" che sta subito sopra.
   Due selettori: `elementor-element-ppaccord1` e' la classe che il page builder
   genera dall'id della sezione ed e' quella che funziona oggi;
   `pp-applicazioni-section` arriva dal campo "CSS Classes" della sezione, che
   questa versione di AxonCreator non stampa nel markup ma che tornerebbe utile
   se il widget venisse spostato o duplicato dal page builder. */
.pp-applicazioni-section,
.elementor-element-ppaccord1 {
    background-color: #efefef;
    padding: 0 20px 60px;
}

/* Il contenitore standard del tema (1120px) e' troppo stretto per questo
   blocco. L'altezza della riga la detta il pannello di destra, che a 306px di
   larghezza va a capo spesso e diventa alto ~810px: l'immagine, che riempie la
   colonna in altezza, si ritrovava in un box quasi quadrato e con object-fit
   cover perdeva meta' della larghezza, sembrando "zoomata".
   A 1440px l'immagine sta nel suo rapporto originale (1,37) e non viene
   ritagliata; e' anche piu' vicino al Figma, dove la card occupa il 94% dei
   1920px del frame.
   Il selettore e' volutamente lungo: il tema fissa la larghezza con
   `.elementor-section.elementor-section-boxed > .elementor-container`, che ha
   specificita' maggiore di una singola classe, quindi serve almeno pari peso
   piu' il tag per avere la meglio. */
section.pp-applicazioni-section.elementor-section > .elementor-container,
section.elementor-element-ppaccord1.elementor-section > .elementor-container {
    max-width: 1440px;
}

@media (max-width: 767px) {
    .pp-applicazioni-section,
    .elementor-element-ppaccord1 {
        padding: 0 12px 40px;
    }
}