/* ==========================================================================
   Meditace (body.page-meditation): úvod s fotkou, výklad, termín, příprava
   Společné komponenty (nadpis s proužkem, text z editoru) jsou v sections.css.
   ========================================================================== */

/* obsah sekcí je odsazený od okraje sloupce o 10 px */
.meditation__container {
    padding-inline: 10px;
}

/* ---------- úvod: ilustrace v kruhu a text ---------- */

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

.meditation-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
}

.meditation-hero__media,
.meditation-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meditation-hero__media {
    margin-right: 60px;
    background: url('../../images/bg-circles.png') center / contain no-repeat;
}

.meditation-hero__image {
    width: 100%;
}

.meditation-hero__content {
    padding-right: 10px;
}

.meditation-hero__eyebrow {
    margin-bottom: 16px;
}

.meditation-hero__title {
    margin-bottom: 36px;
    text-transform: none;
}

.meditation-hero__text {
    margin-bottom: 20px;
    color: #f5f5f5;
    font: 400 19px/34.2px var(--font-body);
}

.meditation-hero__text p {
    margin-bottom: 16px;
}

.meditation-hero__text p:last-child {
    margin-bottom: 0;
}

/* menší tlačítko přes celou šířku sloupce */
.meditation-hero__button {
    gap: 9px;
    padding: 10.5px 26.46px;
    box-shadow: none;
    font-size: 15px;
}

.meditation-hero__button:hover {
    transform: none;
}

.meditation-hero__button .icon {
    width: 15px;
    height: 15px;
}

/* tablet: ilustrace nahoře, vše na střed v jednom sloupci */
@media (max-width: 1024px) {
    .meditation-hero {
        padding: 40px 40px 60px;
    }

    .meditation-hero__grid {
        grid-template-columns: 1fr;
    }

    .meditation-hero__media {
        margin: 40px;
    }

    .meditation-hero__image {
        width: 70%;
        margin-inline: auto;
    }

    .meditation-hero__content {
        text-align: center;
    }
}

/* mobil: nad ilustrací jsou ikony sítí */
@media (max-width: 767px) {
    .meditation-hero {
        padding: 40px 20px 0;
    }

    .meditation-hero__grid {
        min-height: 400px;
    }

    .meditation-hero__media {
        margin: 0 0 40px;
    }

    .meditation-hero__socials {
        margin-bottom: 20px;
    }

    .meditation-hero__image {
        width: 90%;
        margin-bottom: 20px;
    }

    .meditation-hero__content {
        padding-right: 0;
    }

    .meditation-hero__text {
        margin-bottom: 36px;
        font-size: 16px;
        line-height: 28.8px;
    }
}

/* ---------- co jsou vedené meditace ---------- */

.meditation-about,
.meditation-description,
.meditation-schedule,
.meditation-preparation,
.meditation-guide {
    padding-block: 10px;
}

@media (max-width: 767px) {
    /* na mobilu zůstává pod nadpisem místo po skrytých ikonách sítí */
    .meditation-about__heading {
        padding-bottom: 10px;
    }
}

/* ---------- termín: nadpis a poznámka v jednom proužku ---------- */

.meditation-schedule .section-heading__title {
    margin: 8px 0 0 11px;
}

.meditation-schedule__note {
    flex-basis: 50%;
    color: #f5f5f5;
    font: 400 13px/19.5px var(--font-ui);
    text-align: center;
}

.meditation-schedule__note p {
    margin-bottom: 16px;
}

.meditation-schedule__note p:first-child {
    margin-top: 15px;
}

@media (max-width: 1024px) {
    .meditation-schedule .section-heading__title {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .meditation-schedule__note {
        font-size: 10px;
        line-height: 15px;
    }
}

/* ---------- jak se připravit ---------- */

@media (max-width: 767px) {
    .meditation-preparation .section-heading__title {
        text-align: center;
    }
}

.meditation-guide__text {
    color: #f5f5f5;
    font: 500 16px/17.6px var(--font-label);
}

@media (max-width: 767px) {
    .meditation-guide__text {
        padding-bottom: 20px;
    }
}

/* ---------- ikony tlačítek ---------- */

.icon--address-book { --icon: url('../../images/icons/address-book.svg'); }
.icon--user-circle { --icon: url('../../images/icons/user-circle.svg'); }