/* ==========================================================================
   KONTAKT PAGE (Contact subpage)
   Sections: contact info (reused), Calendly booking widget.
   Mobile-first layout.
   ========================================================================== */

/* ----- PAGE WRAPPER ----- */

.kontakt-page {
    background-color: var(--color-pink-light);
    flex: 1;
}

/* ----- SECTION 1: CONTACT (overrides for contact page) ----- */

.contact--page {
    padding: var(--space-2xl) var(--space-md) var(--space-xl) var(--space-md);
}

/* ----- SECTION 2: CALENDLY BOOKING ----- */

.kontakt-booking {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
}

.kontakt-booking__title {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.kontakt-booking__widget {
    max-width: 1000px;
    margin: 0 auto;
}

.kontakt-page .contact__petals {
    opacity: 1;
}

/* Email icon: inline with text, scales with font size */
.contact__email-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 0.4em;
    margin-bottom: 0.15em;
}

/* Calendar icon: inline with heading, scales with font size */
.kontakt-booking__icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.4em;
    margin-bottom: 0.15em;
}

/* ----- SECTION 3: BILLING INFO ----- */

.kontakt-billing {
    padding: var(--space-2xl) var(--space-md) var(--space-xl) var(--space-md);
    text-align: center;
}

.kontakt-billing__title {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.kontakt-billing__content {
    font-size: var(--text-body-small);
    line-height: var(--lh-body);
    max-width: 600px;
    margin: 0 auto;
}

.kontakt-billing__content p {
    margin-bottom: var(--space-xs);
}

/* Receipt icon: inline with heading, scales with font size */
.kontakt-billing__icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.4em;
    margin-bottom: 0.15em;
}


/* ==========================================================================
   DESKTOP (768px+)
   ========================================================================== */

@media (min-width: 768px) {

    .contact--page {
        padding: var(--space-2xl) var(--space-md) var(--space-2xl) var(--space-md);
    }

    .kontakt-booking {
        padding: 0 var(--space-2xl) 0 var(--space-2xl);
    }

    .kontakt-page .contact__petals {
        opacity: 0;
    }

    .kontakt-decoration {
        padding: 0 0 var(--space-2xl) 0;
        text-align: center;
    }

    .kontakt-booking__title {
        margin-bottom: 0;
    }

    /* Hover: show petals */
    .contact__decoration .contact__petals {
        opacity: 1;
    }
}