/* ==========================================================================
   Ceník (body.page-pricing): karty služeb. Karta .price-card se používá i na
   stránce Solárium (body.page-solarium page-pricing).
   Zlomy: tablet ≤ 1024 px, mobil ≤ 767 px.
   ========================================================================== */

/* ---------- úvodní pás: na počítači a tabletu jen místo pod hlavičkou, na mobilu ikony sítí ---------- */

.pricing-top {
    padding: 100px 0 60px;
    --pattern-size: contain;
    --pattern-position: 50% 100%;
}

.pricing-top__socials {
    margin-block: 15px;
}

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

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

/* ---------- závěrečný pás s ikonami sítí (na mobilu se ikony nezobrazují, zůstane jen malá mezera) ---------- */

@media (max-width: 767px) {
    .pricing-bottom {
        padding-bottom: 6px;
    }
}

/* ---------- řádky s kartami: každý řádek je sekce (.pricing__row), karty v něm jsou po třech vedle sebe,
   neúplný řádek se roztáhne (2 karty = poloviny, 1 karta = celá šířka) ---------- */

.pricing__cards {
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .pricing__cards {
        flex-wrap: wrap;
        justify-content: center;
        padding-inline: 10px;
    }
}

/* ---------- karta služby ---------- */

.price-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 40px;
    text-align: center;
}

@media (max-width: 1024px) {
    /* užší okno: karty se zalamují do dalšího řádku, místo aby se mačkaly (tři vedle sebe jen od ~850 px) */
    .price-card {
        flex-basis: 250px;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    /* mobil: karta přes celou šířku okna, bez bočního odsazení řádku */
    .pricing__cards {
        padding-inline: 0;
    }

    .price-card {
        flex-basis: 100%;
        max-width: none;
    }
}

/* štítek v rohu karty (zalomený cíp vlevo dole) */

.price-card__badge {
    position: absolute;
    top: 1px;
    left: -8px;
    padding: 3px 15px;
    border-radius: 4px 4px 4px 0;
    background: var(--gold);
    color: #fff;
    font: 600 16px/24px var(--font-ui);
}

.price-card__badge::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    border-right: 8px solid var(--gold);
    border-bottom: 8px solid transparent;
}

/* název a cena */

.price-card__title {
    margin: 36px 0 18px;
    color: #fff;
    font: 600 36px/49px var(--font-ui);
}

.price-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}

.price-card__amount {
    color: var(--gold);
    font: 400 70px/105px var(--font-ui);
}

.price-card__unit {
    color: #fff;
}

.price-card__dash {
    font: 500 17px/25.5px var(--font-ui);
}

.price-card__suffix {
    font: 600 29px/43.5px var(--font-ui);
}

/* odrážky se šipkou (u karty s tlačítkem bez šipek) */

.price-card__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.price-card__feature {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    color: #fff;
    font: 400 16px/24px var(--font-ui);
}

.price-card__arrow {
    width: 31px;
    height: 31px;
    margin-right: 5px;
    color: var(--gold);
}

/* tlačítko */

.price-card__features + .price-card__action {
    margin-top: 5px;
}

.price-card__button {
    display: inline-flex;
    justify-content: center;
    min-width: 43%;
    padding: 10px 20px;
    background: var(--gold);
    color: #fff;
    font: 600 16px/24px var(--font-ui);
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.price-card__button:hover {
    background: rgba(176, 132, 80, .78);
    color: #d6d6d6;
}

@media (max-width: 767px) {
    .price-card__button {
        min-width: min(320px, 100%);
    }
}

/* ---------- ikona stránky ---------- */

.icon--arrow-right { --icon: url('../../images/icons/arrow-right.svg'); }