/* ==========================================================================
   HERO
   ========================================================================== */

.hero__col { padding-block: var(--space-10); }
.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; margin: 0 0 var(--space-2); }
h2.hero__subtitle { font-size: var(--fs-50); line-height: 1.2; max-inline-size: 21ch; margin: 0 0 var(--space-2); }
h2.hero__subtitle.fertility,
h2.hero__subtitle.predictor { text-wrap: balance; }
p.hero__text { font-size: var(--fs-35); line-height: 1.3; max-inline-size: 26ch; margin: 0; }
p.hero__text.sid,
p.hero__text.predictor { text-wrap: balance; }

/* COSA  */

section.cosa { box-shadow: -10px -10px 10px #0000000a; padding-block: var(--space-10); }
.cosa__grid { position: relative; }
p.cosa__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h2.cosa__title { font-size: var(--fs-55); line-height: 1.2; margin: 0 0 var(--space-2); }
p.cosa__text { font-size: var(--fs-25); line-height: 1.5; }
p.cosa__text:has(+ p.cosa__text) { margin: 0 0 var(--space-2); }
p.cosa__text:has(+ ul.cosa__list) { margin: 0 0 var(--space-4); }
p.cosa__text:last-of-type { margin: 0; }
ul.cosa__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
li.cosa__item { display: flex; align-items: center; gap: calc(var(--space-2) / 2); position: relative; }
p.cosa__item-text { font-size: var(--fs-25); margin: 0; }
img.cosa__icon { width: clamp(2rem, calc(1.43vw + 1.71rem), 3rem); height: auto; }
img.cosa__pic { position: absolute; height: auto; }

/* OBIETTIVI */

section.obiettivo { padding-block: var(--space-10); }
.obiettivo__text { font-size: var(--fs-40); line-height: 1.3; margin: 0; text-wrap: balance; }

/* FUNZIONA (come) */

section.come { padding-block: var(--space-10); }
p.come__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h2.come__title { font-size: var(--fs-55); line-height: 1; margin: 0 0 var(--space-8); }
.come__grid-card { display: grid; gap: var(--space-6); }
.card { --circle-size: clamp(6.75rem, calc(6.4vw + 1.28rem), 8rem); --circle-overlap: calc(var(--circle-size) / 2);box-shadow: -15px 3px 15px #0000000d; border-radius: 2rem; position: relative; }
.card__inner { margin-bottom: var(--space-6); }
.card__circle { position: absolute; top: calc(var(--circle-overlap) * -0.5); left: 50%; transform: translateX(-50%); width: var(--circle-size); height: var(--circle-size); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
p.card__number { font-size: var(--fs-100); line-height: 1; margin: 0; }
.card__body { text-align: center; display: flex; flex-direction: column; gap: var(--space-6); margin-top: calc(var(--circle-overlap) + var(--space-4)); }
h3.card__title { font-size: var(--fs-35); line-height: 1.3; max-inline-size: 12ch; text-wrap: balance; margin: auto; position: relative; }
h3.card__title::after { position: absolute; content: ""; display: block; width: 5rem; height: 1px; background: var(--cobalt); bottom: calc(-1 * (var(--space-6) / 2)); margin: auto; right: 0; left: 0; }
p.card__text { font-size: var(--fs-20); line-height: 1.3; text-wrap: balance; margin: auto; }

/* PARTNER */

.partner__col { padding-block: var(--space-6); }
p.partner__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h2.partner__title { font-size: var(--fs-55); line-height: 1; margin: 0 0 var(--space-4); }
p.partner__text { font-size: var(--fs-25); line-height: 1.5; margin: 0 0 var(--space-4); text-wrap: balance; }
img.partner__img { width: 100%; }
a.partner__btn { font-size: var(--fs-20); text-decoration: none; border: 3px solid var(--mist); border-radius: 5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
a.partner__btn.padding { padding-inline: var(--space-4); width: fit-content; }

@media (max-width: 550px) {
    p.cosa__text { max-inline-size: 37ch; text-wrap: balance; }
    img.cosa__pic { display: none; }

    .partner__col { padding-inline: 8vw; }
    a.partner__btn { width: 15rem; height: 3.5rem; }
}

@media (max-width: 766.9px) {
    picture.hero__picture { display: block; }
    picture.hero__picture img { width: 100%; height: auto; }

    .come__grid-card { grid-template-columns: 1fr; max-inline-size: 350px; margin: auto; }

    p.partner__text { max-inline-size: 38ch; }
    img.partner__img { height: auto; }
}

@media (min-width: 551px) and (max-width: 766.9px) {
    p.cosa__text { max-inline-size: 39ch; }
    img.cosa__pic { width: clamp(9rem, 25.8vw, 200px); bottom: -8rem; }
    img.cosa__pic.fertility,
    img.cosa__pic.predictor,
    img.cosa__pic.sid { right: 3rem; }

    .come__grid-card { max-inline-size: 350px; }

    .partner__col { padding-inline-start: 10vw; }
}

@media (min-width: 551px) and (max-width: 1099.9px) {
    a.partner__btn { width: 16rem; }
}

@media (min-width: 551px) {
    a.partner__btn { height: 4rem; }
}

@media (max-width: 899.9px) {
    img.cosa__pic.biTool { right: 0; }

    h3.card__title.laser { max-inline-size: 14ch; }
    p.card__text { max-inline-size: 21ch; }
}

@media (min-width: 767px) {
    .hero { background-size: cover !important; background-position: right center !important; }
    picture.hero__picture { display: none; }

    img.cosa__pic.fertility,
    img.cosa__pic.biTool,
    img.cosa__pic.predictor,
    img.cosa__pic.sid { right: 0; }

    .partner__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    img.partner__img { height: 100%; object-fit: cover; }
}

@media (min-width: 767px) and (max-width: 899.9px) {
    .hero { background: url('/media/heroAltriStrumenti767.webp'); }

    img.cosa__pic.biTool,
    img.cosa__pic.predictor { width: 30vw; bottom: 0; }
    img.cosa__pic.fertility,
    img.cosa__pic.sid { width: 34vw; bottom: 0; }

    .come__grid-card { grid-template-columns: repeat(2, 1fr); }
    .card:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: 50%; }
}

@media (min-width: 767px) and (max-width: 1099.9px) {
    p.cosa__text { max-inline-size: 32ch; }
    p.cosa__text.predictor { max-inline-size: 36ch; text-wrap: balance; }

    .partner__col { padding-inline-start: calc((100vw - 84vw) / 2); }
    p.partner__text { inline-size: 28ch; }
    p.partner__text.predictor { max-inline-size: 29ch; }
    p.partner__text.sid { max-inline-size: 32ch; }
    p.partner__text.laser { max-inline-size: 31ch; }
}

@media (min-width: 900px) {
    img.cosa__pic.fertility,
    img.cosa__pic.biTool,
    img.cosa__pic.predictor,
    img.cosa__pic.sid { top: 50%; transform: translateY(-50%); }

    .cosa__content { width: fit-content; }

    .come__grid-card { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) and (max-width: 1099.9px) {
    .hero { background: url('/media/heroAltriStrumenti900.webp'); }

    img.cosa__pic.predictor { width: 30vw; }
    img.cosa__pic.fertility,
    img.cosa__pic.biTool,
    img.cosa__pic.sid { width: 37vw; }

    p.card__text { inline-size: 17ch; }
}

@media (min-width: 1100px) {
    p.cosa__text { inline-size: 39ch; text-wrap: balance; }

    .obiettivo__text { max-inline-size: 50ch; }

    p.card__text { inline-size: 21ch; }

    a.partner__btn { width: 18rem; }
}

@media (min-width: 1100px) and (max-width: 1400px) {
    .hero { background: url('/media/heroAltriStrumenti1100.webp'); }

    img.cosa__pic.biTool,
    img.cosa__pic.predictor { width: 25rem; left: 33rem; }
    img.cosa__pic.fertility,
    img.cosa__pic.sid { width: clamp(20rem, 30vw, 480px); }

    .partner__col { padding-inline-start: calc((100vw - 80vw) / 2); }
    p.partner__text { inline-size: 32ch; }
}

@media (max-width: 1400px) {
    .partner__col { padding-block: var(--space-8); }
}

@media (min-width: 1401px) {
    .hero { background: url('/media/heroAltriStrumenti1401.webp'); }

    img.cosa__pic.biTool,
    img.cosa__pic.predictor { width: clamp(28rem, 21.8vw, 480px); }
    img.cosa__pic.fertility,
    img.cosa__pic.sid { width: clamp(30rem, 27vw, 550px); }

    .partner__col { padding-inline-start: calc((100vw - min(80vw, 1200px)) / 2); }
    p.partner__text { inline-size: 38ch; }
}