/* HERO */
.hero__col { padding-block: var(--space-10); }
p.hero__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h1.hero__title { font-size: var(--fs-65); line-height: 1.1; text-wrap: balance; max-inline-size: 14ch; margin: 0; }

/* INFO */
section.info { padding-block: var(--space-10);}
.info__inner { position: relative; }
p.info__text { font-size: var(--fs-30); line-height: 1.4; }
.info__inner > p:first-of-type { margin: 0 0 var(--space-2);}
.info__inner > p:last-of-type { margin: 0;}
img.info__img { position: absolute; top: 50%; transform: translate(0, -50%); right: -6rem; width: 24rem; }

/* PAZIENTE */
section.paziente { padding-block: var(--space-10); }
p.paziente__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h2.paziente__title { font-size: var(--fs-55); line-height: 1.1; margin: 0 0 var(--space-4);}
.accordion__row { position: relative; &::before { position: absolute; content: ""; background: var(--white);   left: calc((100vw - 100%) / -2); width: calc(100% + (100vw - 100%) / 2); height: 1px; bottom: 0;}}
.accordion__row:first-of-type > button.accordion__btn { padding: 0 0 var(--space-4); }
.accordion__row:not(:first-of-type) > button.accordion__btn { padding: var(--space-4) 0; }
button.accordion__btn { width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-size: var(--fs-30); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); text-wrap: balance;&::after { content: "\e145"; font-weight: 900; font-family: 'Material Symbols Outlined'; color: var(--white);}}
.accordion__row.is-open > button.accordion__btn::after{ content: '\e15b'; }
.accordion__body { padding-block: 0 var(--space-6); }
p.accordion__text { font-size: var(--fs-20); line-height: 1.5; margin: 0 0 var(--space-2); }
p.accordion__text:nth-of-type(3), p.accordion__text:nth-of-type(6) { margin: 0 0 calc(var(--space-2) / 2); }
ul.accordion__list { padding-left: var(--space-2); margin: 0; display: flex; flex-direction: column; gap: calc(var(--space-2) / 2);}
ul.accordion__list:has(+ p) {margin-block: 0 var(--space-4);}
li.accordion__item { font-size: var(--fs-20); }

/* MEDICO */
section.medico { padding-block: var(--space-10); }
p.medico__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h2.medico__title { font-size: var(--fs-55); line-height: 1.1; margin: 0 0 var(--space-4);}
p.medico__text { font-size: var(--fs-20); line-height: 1.5; }
p.medico__text:has(+ ul) { margin: 0 0 var(--space-2);}
ul.medico__list { padding-left: var(--space-2); margin: 0; display: flex; flex-direction: column; gap: calc(var(--space-2) / 2);}
li.medico__item { font-size: var(--fs-20); }
p.medico__text:has(+ div) { margin: var(--space-2) 0 var(--space-6);}
.medico__actions { display: flex; gap: var(--space-4); flex-wrap: wrap;}
a.medico__btn { font-size: var(--fs-20); text-decoration: none; border-radius: 5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: fit-content; padding-inline: var(--space-8); }
.medico__btn--first { border: 3px solid var(--mist);  }
.medico__btn--secondary { border: 3px solid var(--pumpkin);  }
@media (max-width: 550px) {

    /* MEDICO */
    a.medico__btn { height: 3.5rem; width: 100%; }
}
@media (min-width: 551px) and (max-width: 899.9px) {

    /* MEDICO */
    a.medico__btn { height: 4rem; }
}
@media (max-width: 766.9px) {

    /* HERO */
    picture.hero__picture { display: block; line-height: 0; }
    picture.hero__picture img { width: 100%; height: auto; }

    /* INFO */
    p.info__text { max-inline-size: 38ch; }

    /* PAZIENTE */
    .paziente{ background: var(--cobalt);  }

    /* MEDICO */
    .medico { background: #01285F; }
}
@media (min-width: 767px) {

    /* HERO */
    .hero{ background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important;}
    h1.hero__title { inline-size: 14ch; }
    picture.hero__picture { display: none;}

    /* PAZIENTE */
    .paziente{ background-position: right bottom !important; background-repeat: no-repeat !important;}

    /* MEDICO */
    .medico{ background-position: right center !important; background-repeat: no-repeat !important;}
}
@media (min-width: 767px) and (max-width: 899.9px){

    /* HERO */
    .hero{ background: url('/media/heroInfo767.webp'); }

    /* PAZIENTE */
    .paziente{ background: url('/media/heroPaziente767.webp'), var(--cobalt);  }
    .paziente__accordion { max-width: 70vw; }

    /* MEDICO */
    .medico { background: url('/media/heroMedico767.webp'), #01285F; background-size: cover !important; }
    .medico__grid { max-width: 70vw; }
}
@media (min-width: 767px) and (max-width: 1099.9px){

    /* INFO */
    p.info__text { max-inline-size: 48ch; }

}
@media (min-width: 900px) {

    /* MEDICO */
    a.medico__btn { height: 4.5rem; }
}
@media (min-width: 900px) and (max-width: 1099.9px){

    /* HERO */
    .hero{ background: url('/media/heroInfo900.webp'); }

    /* PAZIENTE */
    .paziente{ background: url('/media/heroPaziente900.webp'), var(--cobalt);  }

    /* MEDICO */
    .medico { background: url('/media/heroMedico900.webp'), #01285F; background-size: cover !important; }
}
@media (min-width: 900px) and (max-width: 1400px){

    /* PAZIENTE */
    .paziente__accordion { max-width: 60vw; }

    /* MEDICO */
    .medico__grid { max-width: 60vw; }
}
@media (min-width: 1100px) and (max-width: 1400px){

    /* HERO */
    .hero{ background: url('/media/heroInfo1100.webp'); }

    /* INFO */
    p.info__text { max-inline-size: 56ch; }

    /* PAZIENTE */
    .paziente{ background: url('/media/heroPaziente1100.webp'), var(--cobalt);  }

    /* MEDICO */
    .medico { background: url('/media/heroMedico1100.webp'), #01285F; background-size: cover !important; }
}
@media (max-width: 1400px) {

    /* INFO */
    .info__img { display: none; }
}
@media (min-width: 1401px) {

    /* HERO */
    .hero{ background: url('/media/heroInfo1401.webp'); }

    /* INFO */
    .info__inner > p:first-of-type { max-inline-size: clamp(40ch, 52ch, 60vw);}
    .info__inner > p:last-of-type { max-inline-size: clamp(40ch, 48ch, 60vw); text-wrap: balance; }

    /* PAZIENTE */
    .paziente{ background: url('/media/heroPaziente1401.webp'), var(--cobalt);  }
    .paziente__accordion { max-width: min(65vw, 1000px); }

    /* MEDICO */
    .medico { background: url('/media/heroMedico1401.webp'), #01285F; background-size: contain !important; }
    .medico__grid { max-width: min(65vw, 1000px); }
}