/* ==========================================================================
   Kromdraai Blomme — the enquiry page.

   The page is one band: the words on the left, the form on a dark card on
   the right. It uses the same tokens as the rest of the site, so it sits
   with the contact page and the story page rather than beside them.
   ========================================================================== */

.kb-enquire {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    box-sizing: border-box;
}

.kb-enquire__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* --------------------------------------------------------------------------
   1. The words
   -------------------------------------------------------------------------- */
.kb-enquire__eyebrow {
    color: var(--kb-sage);
}

.kb-enquire__title {
    font-family: var(--kb-font-display);
    font-size: var(--kb-fs-h2);
    font-weight: 300;
    line-height: 1.08;
    color: var(--kb-forest);
    margin: 0.7rem 0 0;
}

.kb-enquire__rule {
    display: block;
    width: 62px;
    height: 1px;
    background: var(--kb-gold);
    opacity: 0.55;
    margin: 1.1rem 0 1.3rem;
}

.kb-enquire__lead {
    font-size: var(--kb-fs-lead);
    line-height: 1.75;
    color: var(--kb-ink-soft);
    max-width: 42ch;
}

.kb-enquire__list-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kb-sage);
    margin: 1.7rem 0 0.8rem;
}

.kb-enquire__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.2rem;
    max-width: 30rem;
}

.kb-enquire__list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--kb-ink-soft);
}

.kb-enquire__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kb-sage);
    opacity: 0.85;
}

.kb-enquire__contact {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--kb-line);
}

.kb-enquire__contact-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kb-sage);
    margin-bottom: 0.6rem;
}

.kb-enquire__contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
}

.kb-enquire__contact-link {
    font-family: var(--kb-font-display);
    font-size: 1.15rem;
    color: var(--kb-forest);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 90, 60, 0.4);
    /* An email address must be able to break on a narrow screen. */
    overflow-wrap: anywhere;
    transition: color 0.35s var(--kb-ease), border-color 0.35s var(--kb-ease);
}

.kb-enquire__contact-link:hover,
.kb-enquire__contact-link:focus-visible {
    color: var(--kb-olive);
    border-bottom-color: var(--kb-olive);
}

/* --------------------------------------------------------------------------
   2. The form card
   -------------------------------------------------------------------------- */
.kb-enquire__form {
    padding: clamp(1.5rem, 3vw, 2.6rem);
    background: var(--kb-forest);
    border: 1px solid rgba(247, 245, 239, 0.14);
    box-shadow: 0 30px 70px -34px rgba(22, 38, 28, 0.55);
    box-sizing: border-box;
}

/* The form system styles the button through several selectors, so these
   are written to outrank them. */
.kb-enquire__form .enquire .gen_btn,
.kb-enquire__form form[data-form] .gen_btn,
.kb-enquire__form .site_form .gen_btn {
    background: var(--kb-ivory);
    color: var(--kb-forest);
    border-radius: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 30px;
    min-height: 54px;
    box-shadow: none;
}

.kb-enquire__form .enquire .gen_btn:hover,
.kb-enquire__form form[data-form] .gen_btn:hover,
.kb-enquire__form .site_form .gen_btn:hover,
.kb-enquire__form .enquire .gen_btn:focus-visible,
.kb-enquire__form form[data-form] .gen_btn:focus-visible {
    background: var(--kb-forest-deep);
    color: var(--kb-ivory);
    filter: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .kb-enquire__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.2rem;
    }
}

@media (max-width: 780px) {
    .kb-enquire {
        padding-block: clamp(2rem, 8vw, 3rem);
    }

    .kb-enquire__title {
        font-size: clamp(1.9rem, 8vw, 2.4rem);
    }

    .kb-enquire__lead {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .kb-enquire__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }

    .kb-enquire__contact {
        margin-top: 1.5rem;
        padding-top: 1.1rem;
    }

    .kb-enquire__form {
        padding: 1.15rem;
    }

    /* The fields sit closer together, so the whole form fits on one
       screen without being cramped. */
    .kb-enquire__form .form_group {
        margin-bottom: 12px;
        row-gap: 10px;
    }

    .kb-enquire__form .form_field input,
    .kb-enquire__form .form_field select {
        height: 48px;
    }

    .kb-enquire__form .form_field textarea {
        min-height: 120px;
    }

    .kb-enquire__form .form_label label {
        font-size: 0.62rem;
    }
}


/* Shown above the form when an enquiry was not sent (?n=1). */
.enquire_notice {
    margin: 0 0 1.4rem;
    padding: 0.9rem 1.1rem;
    border: 2px solid #b3402a;
    background: #fbeeea;
    color: #6e2315;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* Replaces the form after an enquiry was sent (?sent=1). It has its own dark
   backdrop and light text, so it reads on any photograph behind it, and it
   keeps clear of the sticky header when the page scrolls to it. */
div.enquire_thanks {
    margin: 0;
    padding: 2rem 1.6rem;
    border: 2px solid #f7f5ef;
    background: rgba(18, 28, 21, 0.88);
    color: #f7f5ef;
    text-align: center;
    scroll-margin-top: 8rem;
    outline: none;
}

div.enquire_thanks h3.enquire_thanks__title {
    margin: 0 0 0.7rem;
    color: #f7f5ef;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.25;
}

div.enquire_thanks p {
    margin: 0;
    color: #f7f5ef;
    line-height: 1.6;
}