/**
 * Landing page template
 *
 * Il contenuto Gutenberg non è dentro .container: qui i figli diretti di
 * .landing__content vengono centrati alla stessa larghezza di .container,
 * mentre i blocchi marcati .progetto / .moduloform / .alignfull escono
 * a tutta larghezza mantenendo il contenuto interno allineato.
 */

.landing {
    --landing-max: 100%;
    --landing-gutter: 1.25rem;
    --landing-band: #eeeeee;

    /* L'ultima sezione arriva a filo pagina: main ha padding-bottom */
    padding-bottom: 0;
}

@media only screen and (min-width: 576px) {
    .landing { --landing-max: 46.125rem; }
}

@media only screen and (min-width: 992px) {
    .landing { --landing-max: 62rem; }
}

@media only screen and (min-width: 1200px) {
    .landing { --landing-max: 80rem; }
}

/* Contenuto "in container" */
.landing__content > * {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--landing-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--landing-gutter);
    padding-right: var(--landing-gutter);
}

/*
 * Sezioni full width.
 * !important perché i blocchi Gutenberg portano il padding inline
 * (es. style="padding:2%"), che altrimenti vince sul foglio di stile.
 */
.landing__content > .progetto,
.landing__content > .\.progetto,
.landing__content > .moduloform,
.landing__content > .alignfull {
    max-width: none;
    padding-left: max(var(--landing-gutter), (100% - var(--landing-max)) / 2) !important;
    padding-right: max(var(--landing-gutter), (100% - var(--landing-max)) / 2) !important;
}

.landing__content > .progetto,
.landing__content > .\.progetto,
.landing__content > .moduloform {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.landing__content > .moduloform {
    background-color: var(--landing-band);
}

/* Blocchi full width adiacenti con lo stesso fondo: nessuno stacco fra i due */
.landing__content > .moduloform + .moduloform {
    padding-top: 0;
}

.landing__content > .moduloform:has(+ .moduloform) {
    padding-bottom: 0;
}

/*
 * Il form Discover porta con sé max-width, margini laterali e un fondo
 * proprio: qui si allinea al container come le altre sezioni.
 */
.landing .ideal-form {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    background-color: var(--landing-band);
}

/* Il blocco CF7 non aggiunge spazio verticale: ce l'ha già .ideal-form */
.landing__content > .wp-block-contact-form-7-contact-form-selector,
.landing__content > .wpcf7 {
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * Asterisco automatico sui campi obbligatori: segue la stessa logica della
 * validazione, quindi non va tenuto allineato a mano al contenuto del CF7.
 * I campi con [text*] portano .wpcf7-validates-as-required, mentre in CF7
 * ogni gruppo radio è obbligatorio salvo .ideal-optional-group.
 */
.landing .ideal-field:has(.wpcf7-validates-as-required) > label::after,
.landing .ideal-question:has(+ .ideal-text-options:not(.ideal-optional-group))::after,
.landing .ideal-question:has(+ .ideal-image-options:not(.ideal-optional-group))::after {
    content: " *";
    color: var(--ideal-error, #8f2424);
}

/* Validazione step-by-step: il messaggio riusa .wpcf7-not-valid-tip del form */
.landing .ideal-step-error {
    display: block;
}

.landing .ideal-text-options .ideal-step-error,
.landing .ideal-image-options .ideal-step-error {
    margin-top: 12px;
}

.landing .ideal-input.wpcf7-not-valid,
.landing .ideal-textarea.wpcf7-not-valid {
    border-bottom-color: #8f2424;
}

@media (max-width: 600px) {
    .landing .wp-block-media-text.is-stacked-on-mobile.discover-light-reverse-mobile>.wp-block-media-text__content    {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 60px;
    }
    .landing .wp-block-media-text.is-stacked-on-mobile.discover-light-reverse-mobile>.wp-block-media-text__media    {
        grid-column: 1;
        grid-row: 2;
    }
}