/*
 * Regional-homepage typography
 *
 * The US homepage establishes the intended height for every content block.
 * Some translated strings occupy substantially more horizontal space, which
 * made otherwise identical cards and sections taller. These language-specific
 * values preserve the source line-height and layout while allowing the same
 * amount of copy to fit in the US block height.
 */

html[lang^="de"] body.home {
    --sk-locale-hero-heading: 49px;
    --sk-locale-heading: 48px;
    --sk-locale-heading-xl: 54px;
    --sk-locale-heading-medium: 43px;
    --sk-locale-card-heading: 30px;
    --sk-locale-card-heading-small: 24px;
    --sk-locale-copy: 16px;
    --sk-locale-copy-small: 13px;
    --sk-locale-control: 13px;
    --sk-locale-stat-label: 30px;
}

html[lang^="fr"] body.home {
    --sk-locale-hero-heading: 54px;
    --sk-locale-heading: 52px;
    --sk-locale-heading-xl: 60px;
    --sk-locale-heading-medium: 46px;
    --sk-locale-card-heading: 33px;
    --sk-locale-card-heading-small: 26px;
    --sk-locale-copy: 16px;
    --sk-locale-copy-small: 13px;
    --sk-locale-control: 14px;
    --sk-locale-stat-label: 32px;
}

html[lang^="es"] body.home,
html[lang^="it"] body.home {
    --sk-locale-hero-heading: 55px;
    --sk-locale-heading: 53px;
    --sk-locale-heading-xl: 60px;
    --sk-locale-heading-medium: 47px;
    --sk-locale-card-heading: 34px;
    --sk-locale-card-heading-small: 26px;
    --sk-locale-copy: 16px;
    --sk-locale-copy-small: 13px;
    --sk-locale-control: 14px;
    --sk-locale-stat-label: 33px;
}

html[lang^="nl"] body.home,
html[lang^="fi"] body.home,
html[lang^="af"] body.home {
    --sk-locale-hero-heading: 52px;
    --sk-locale-heading: 50px;
    --sk-locale-heading-xl: 58px;
    --sk-locale-heading-medium: 44px;
    --sk-locale-card-heading: 32px;
    --sk-locale-card-heading-small: 25px;
    --sk-locale-copy: 16px;
    --sk-locale-copy-small: 13px;
    --sk-locale-control: 14px;
    --sk-locale-stat-label: 32px;
}

html[lang^="no"] body.home,
html[lang^="sv"] body.home {
    --sk-locale-hero-heading: 55px;
    --sk-locale-heading: 54px;
    --sk-locale-heading-xl: 60px;
    --sk-locale-heading-medium: 47px;
    --sk-locale-card-heading: 34px;
    --sk-locale-card-heading-small: 26px;
    --sk-locale-copy: 17px;
    --sk-locale-copy-small: 14px;
    --sk-locale-control: 14px;
    --sk-locale-stat-label: 33px;
}

/* Hero: all home pages use the compact US composition. The former selector
 * only matched the US page ID, causing regional copy to stretch the split
 * hero to the image's intrinsic height. */
@media (min-width: 900px) {
    body.home .hero__inner {
        align-items: start;
    }

    body.home .hero__media,
    body.home .hero__content {
        align-self: start;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    body.home .hero__image {
        height: 100%;
    }

    body.home .hero__content {
        padding-block: 2rem;
        gap: 1rem;
    }

    body.home .hero__heading {
        font-size: clamp(3rem, 4.7vw, 4.25rem);
        line-height: 0.96;
    }

    body.home .hero__description {
        margin-bottom: 0.5rem;
    }

    body.home .hero__cta {
        margin-bottom: 1.5rem;
    }
}

/* The values below are intentionally font-size only. Existing line heights,
 * card dimensions, image ratios and spacing remain the US values.  These rules
 * must only apply to locales that define the variables: an unresolved custom
 * property does not fall back to the preceding theme declaration. */
html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home .hero__heading {
    font-size: var(--sk-locale-hero-heading);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .two-ways__heading,
    .record__heading,
    .life-story-book__heading,
    .faq__heading,
    .how-it-works__heading,
    .thoughtful-tools__heading,
    .stories__heading,
    .timeless-gift__heading,
    .interview-prompts__heading,
    .capture-portrait__heading,
    .meaningful-gift__heading,
    .original-voice__heading,
    .commitment__heading,
    .begin-journey__heading,
    .exploring-options__heading,
    .from-voice__heading,
    .bring-memories__heading,
    .buy-gift__heading,
    .capture__heading,
    .life-story__heading,
    .read-their-words__heading,
    .meet-storykeeper__heading,
    .popular-covers__heading
) {
    font-size: var(--sk-locale-heading);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home .chapter-styles__heading {
    font-size: var(--sk-locale-heading-xl);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home .bond__heading {
    font-size: var(--sk-locale-heading-medium);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .two-ways__option-heading,
    .faq__card-heading,
    .how-it-works__card-heading,
    .capture-portrait__card-heading,
    .meaningful-gift__card-heading,
    .exploring-options__card-heading
) {
    font-size: var(--sk-locale-card-heading);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .record__step-heading,
    .thoughtful-tools__card-heading,
    .thoughtful-tools__cta-heading,
    .stories__slide-title,
    .original-voice__card-heading,
    .timeless-gift__card--has-cover .timeless-gift__card-heading
) {
    font-size: var(--sk-locale-card-heading-small);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .two-ways__subheading,
    .two-ways__option-description,
    .record__description,
    .record__step-text,
    .life-story-book__feature,
    .faq__description,
    .faq__card-text,
    .how-it-works__card-description,
    .thoughtful-tools__description,
    .thoughtful-tools__card-text,
    .stories__description,
    .timeless-gift__description,
    .bond__description,
    .capture-portrait__description,
    .capture-portrait__card-text,
    .meaningful-gift__card-text,
    .original-voice__card-text,
    .begin-journey__feature-text,
    .exploring-options__description,
    .from-voice__description,
    .bring-memories__description,
    .buy-gift__description,
    .life-story__description,
    .read-their-words__description,
    .meet-storykeeper__description,
    .chapter-styles__description
) {
    font-size: var(--sk-locale-copy);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .hero__description,
    .hero__stat-description,
    .hero__gift-note,
    .timeless-gift__card-description,
    .bond__feature-text,
    .interview-prompts__description,
    .how-it-works__step,
    .stories__slide-tags,
    .life-story-book__note
) {
    font-size: var(--sk-locale-copy-small);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home .hero__stat-label {
    font-size: var(--sk-locale-stat-label);
}

html:where([lang^="de"], [lang^="fr"], [lang^="es"], [lang^="it"], [lang^="nl"], [lang^="fi"], [lang^="af"], [lang^="no"], [lang^="sv"]) body.home :is(
    .hero__button,
    .two-ways__option-button,
    .record__button,
    .life-story-book__button,
    .faq__contact-button,
    .thoughtful-tools__cta-button,
    .interview-prompts__button,
    .capture-portrait__button,
    .meaningful-gift__button,
    .original-voice__button,
    .bond__button,
    .begin-journey__button,
    .exploring-options__button,
    .from-voice__button,
    .bring-memories__button,
    .buy-gift__button,
    .life-story__button,
    .read-their-words__button,
    .meet-storykeeper__button,
    .timeless-gift__card-cta
) {
    font-size: var(--sk-locale-control);
}

/* Korean has one substantially longer carousel label. */
html[lang^="ko"] body.home .exploring-options__label {
    font-size: 20px;
}

html[lang^="ko"] body.home .bring-memories__button {
    font-size: 13px;
}

@media (max-width: 899px) {
    html[lang^="de"] body.home {
        --sk-locale-hero-heading: 42px;
        --sk-locale-heading: 32px;
        --sk-locale-heading-xl: 36px;
        --sk-locale-heading-medium: 31px;
        --sk-locale-card-heading: 22px;
        --sk-locale-card-heading-small: 20px;
        --sk-locale-copy: 14px;
        --sk-locale-copy-small: 12px;
        --sk-locale-control: 13px;
        --sk-locale-stat-label: 20px;
    }

    html[lang^="fr"] body.home {
        --sk-locale-hero-heading: 48px;
        --sk-locale-heading: 34px;
        --sk-locale-heading-xl: 40px;
        --sk-locale-heading-medium: 33px;
        --sk-locale-card-heading: 24px;
        --sk-locale-card-heading-small: 21px;
        --sk-locale-copy: 15px;
        --sk-locale-copy-small: 13px;
        --sk-locale-control: 14px;
        --sk-locale-stat-label: 22px;
    }

    html[lang^="es"] body.home,
    html[lang^="it"] body.home,
    html[lang^="no"] body.home,
    html[lang^="sv"] body.home {
        --sk-locale-hero-heading: 49px;
        --sk-locale-heading: 35px;
        --sk-locale-heading-xl: 40px;
        --sk-locale-heading-medium: 34px;
        --sk-locale-card-heading: 25px;
        --sk-locale-card-heading-small: 22px;
        --sk-locale-copy: 15px;
        --sk-locale-copy-small: 13px;
        --sk-locale-control: 14px;
        --sk-locale-stat-label: 23px;
    }

    html[lang^="nl"] body.home,
    html[lang^="fi"] body.home,
    html[lang^="af"] body.home {
        --sk-locale-hero-heading: 46px;
        --sk-locale-heading: 33px;
        --sk-locale-heading-xl: 38px;
        --sk-locale-heading-medium: 32px;
        --sk-locale-card-heading: 24px;
        --sk-locale-card-heading-small: 21px;
        --sk-locale-copy: 15px;
        --sk-locale-copy-small: 13px;
        --sk-locale-control: 14px;
        --sk-locale-stat-label: 22px;
    }

    html[lang^="ko"] body.home .exploring-options__label {
        font-size: 15px;
    }
}

@media (max-width: 599px) {
    html[lang^="de"] body.home { --sk-locale-hero-heading: 24px; }
    html[lang^="fr"] body.home { --sk-locale-hero-heading: 25px; }
    html[lang^="es"] body.home,
    html[lang^="it"] body.home,
    html[lang^="no"] body.home,
    html[lang^="sv"] body.home { --sk-locale-hero-heading: 26px; }
    html[lang^="nl"] body.home,
    html[lang^="fi"] body.home,
    html[lang^="af"] body.home { --sk-locale-hero-heading: 25px; }
}