/* ==========================================================================
   Konstelace (body.page-constellations): rezervace, výklad, přínosy, pozvání
   Společné komponenty (nadpis s proužkem, seznam s ikonami, text) jsou v sections.css.
   ========================================================================== */

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

/* ---------- pruh se vzorem pod hlavičkou (prázdná sekce) ----------
   V původním návrhu je vzor nakreslený na 175 px vysoké ploše, jejíž spodní část zakrývá další sekce;
   zůstává vidět jen horní pruh. Vzor je proto posunutý o 35 px (tablet 80 px, mobil 130 px) nahoru. */

.constellations-top {
    --pattern-size: auto 175px;
    --pattern-position: 50% -35px;
    height: 105px;
}

@media (max-width: 1024px) {
    .constellations-top {
        --pattern-position: 50% -80px;
        height: 15px;
    }
}

@media (max-width: 767px) {
    .constellations-top {
        --pattern-size: auto 279px;
        --pattern-position: 50% -130px;
        height: 19px;
    }
}

/* ---------- rezervace ---------- */

.constellations-booking {
    padding: 10px 0 20px;
}

.constellations-booking__heading {
    margin-bottom: 20px;
}

/* ---------- co jsou konstelace ---------- */

.constellations-about {
    padding-bottom: 10px;
}

.constellations-about__text {
    margin: 15px 0 20px;
}

/* v původním textu je mezi odstavci prázdný řádek */
.constellations-about__text p:first-child {
    margin-bottom: 56px;
}

.constellations-about__socials {
    margin-bottom: 20px;
}

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

/* ---------- pro koho a co přinesou: dva sloupce ---------- */

.constellations-benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-block: 10px;
}

.constellations-benefits__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* nadpis má o pár pixelů víc místa, aby se delší titulky na tabletu nezalamovaly */
.constellations-benefits .section-heading__title {
    padding-right: 0;
}

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

/* ---------- pozvání k rezervaci ---------- */

.constellations-invitation {
    /* dole zůstává místo po prázdném odstavci z původního textu */
    padding-block: 10px 50px;
}

.constellations-invitation__text {
    margin-top: 20px;
}