/* ==========================================================================
   Stránka O mně (body.page-about): úvod s fotkou, karty výkladů, životní cesta, otázky.
   Úvod (.profile-intro), textové sekce (.text-section), nadpisy (.section-heading),
   seznamy (.feature-list, .rich-text) a otázky (.faq) jsou sdílené v sections.css.
   ========================================================================== */

/* ---------- úvod: na mobilu je pod textem větší mezera než u profilu lektora ---------- */

@media (max-width: 767px) {
    .page-about .profile-intro__body {
        padding-bottom: 36px;
    }
}

/* ---------- textové sekce: mobilní odsazení shora se sekci od sekce liší (podle originálu) ---------- */

@media (max-width: 767px) {
    .about-constellations {
        padding-top: 15px;
    }

    .about-consultations,
    .about-experience {
        padding-top: 0;
    }
}

/* ---------- karty výkladů (osobně / online) ---------- */

.about-cards__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.about-card {
    padding: 10px;
}

/* zlatý proužek je o 5 px delší než text nadpisu */
.about-card__heading {
    padding-bottom: 5px;
}

.about-card__text {
    margin-bottom: 21px;
    font: 400 16px/24px var(--font-ui);
    color: var(--muted);
}

.about-card__text p + p {
    margin-top: 16px;
}

.about-card__list {
    --feature-icon-color: var(--gold);
}

.about-card__list ul {
    margin-left: 5px;
}

/* seznam druhé karty je o 25 px níž, aby na počítači navazoval na seznam první karty */
.about-card--online .about-card__list {
    padding-top: 25px;
}

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

/* ---------- moje cesta (vzdělání a praxe) ---------- */

.about-journey__title {
    margin: 10px 0 26px;
}

.about-journey__list {
    color: var(--muted);
}

@media (max-width: 1024px) {
    .about-journey {
        padding-top: 80px;
    }

    .about-journey__title {
        margin-bottom: 86px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .about-journey {
        padding: 13px 20px 80px;
    }

    .about-journey__title {
        margin-bottom: 26px;
    }
}

/* ---------- otázky a odpovědi: pozadí bez oblohy, vlastní odsazení ---------- */

@media (max-width: 1024px) {
    .about-faq {
        padding: 80px 40px 300px;
    }
}

@media (max-width: 767px) {
    .about-faq {
        padding: 13px 20px 80px;
    }
}