/* ==========================================================================
   Solárium (body.page-solarium): popis solária, citát, fotka s ikonami sítí.
   Karta s cenou za minutu je v page-pricing.css (stránka načítá oba soubory).
   Zlomy: tablet ≤ 1024 px, mobil ≤ 767 px.
   ========================================================================== */

/* ---------- úvod: nadpis a popis ---------- */

.solarium-intro {
    --pattern-size: contain;
    --pattern-position: 50% 100%;
    padding-top: 100px;
}

.solarium-intro__title {
    margin-bottom: 20px;
    color: #fff;
    font: 400 26px/26px var(--font-ui);
}

@media (max-width: 1024px) {
    .solarium-intro {
        padding: 40px 40px 60px;
    }
}

@media (max-width: 767px) {
    .solarium-intro {
        padding: 40px 20px 0;
    }

    .solarium-intro__title {
        margin-bottom: 0;
    }
}

/* ---------- popis solária (části oddělené čarou) ---------- */

.solarium-info {
    display: flow-root; /* okraje nadpisu uvnitř se nesčítají s okolím */
    padding-bottom: 103px;
    color: #fff;
    font: 400 16px/24px var(--font-ui);
}

/* Hlavní nadpis stránky. V originále je téměř neviditelný (tmavý na tmavém), ale zabírá místo a zalamuje se podle šířky,
   proto zůstal jako nadpis s průhledným textem – obsah se pod ním posouvá stejně jako dřív. */
.solarium-info__heading {
    margin: 55px 0 27.5px;
    color: transparent;
    font: 600 55px/82.5px var(--font-ui);
    user-select: none;
}

@media (max-width: 1199px) {
    .solarium-info__heading {
        margin: 42px 0 21px;
        font-size: 42px;
        line-height: 58.8px;
    }
}

.solarium-info p,
.solarium-info ul {
    margin-bottom: 16px;
}

.solarium-info li {
    margin-top: 4px;
    list-style: disc inside;
}

.solarium-info strong {
    font-weight: 800;
}

.solarium-info h2 {
    margin: 48px 0 12px;
    font: 700 48px/61px var(--font-ui);
}

/* podnadpis „Proč právě Luxura X7?“ je h2 (hierarchie nadpisů), ale vypadá jako h3 */
.solarium-info h3,
.solarium-info .solarium-info__subtitle {
    margin: 36px 0 18px;
    font: 600 36px/49px var(--font-ui);
}

.solarium-info__divider {
    margin: 0;
    border: 0;
    border-top: 1px solid #f5f5f7;
}

/* nadpisy se zmenšují už od 1199 px (jako v původním návrhu) */
@media (max-width: 1199px) {
    .solarium-info h2 {
        margin: 36px 0 9px;
        font: 700 36px/50.4px var(--font-ui);
    }
}

/* ---------- citát ---------- */

.solarium-quote {
    padding-bottom: 92px;
}

.solarium-quote__text {
    width: 60%;
    margin-inline: auto;
    padding: 10px;
    color: var(--gold);
    font: italic 600 36px/36px var(--font-title);
    text-align: center;
}

@media (max-width: 767px) {
    /* 1 px nahoře a dole navíc: prázdné sloupce, které sekce měla v originále */
    .solarium-quote {
        padding-block: 1px 93px;
    }

    .solarium-quote__text {
        width: auto;
    }
}

/* ---------- název solária, ikony sítí a fotka ---------- */

.solarium-product {
    padding-bottom: 40px;
}

.solarium-product__grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}

.solarium-product__info,
.solarium-product__media {
    padding: 10px;
}

.solarium-product__title {
    margin-bottom: 20px;
    color: var(--gold);
    font: 600 36px/36px var(--font-ui);
}

.solarium-product__image {
    margin-inline: auto;
}

@media (max-width: 767px) {
    .solarium-product__grid {
        grid-template-columns: 1fr;
    }

    .solarium-product__socials {
        padding-block: 15px;
    }
}

/* ---------- karta s cenou: necelá třetina šířky uprostřed, nejméně tak široká, aby se cena vešla na jeden řádek
   (na mobilu celá šířka) ---------- */

.solarium-pricing {
    padding-block: 10px;
}

.solarium-pricing .pricing__cards {
    justify-content: center;
}

.solarium-pricing .price-card {
    flex: 0 1 31%;
    min-width: 260px;
}

@media (max-width: 767px) {
    .solarium-pricing {
        padding-block: 11px;
    }

    /* mobil: karta je o něco užší než okno (92,45 %) a přiléhá zleva, jako na původním webu */
    .solarium-pricing .pricing__cards {
        justify-content: flex-start;
        padding-inline: 10px;
    }

    .solarium-pricing .price-card {
        flex: 0 0 92.45%;
        min-width: 0;
    }
}