/*
 * Event Enquiry
 * Template: template-event-enquiry.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * Mirrors the Contact page layout: the event summary (a .panel from
 * single-event.css, reusing its .event-details rows)
 * beside the form card. The Gravity Form wears the .contact-form skin from
 * contact.css; only the radio choices, which the contact form does not
 * have, are styled here.
 */

.event-enquiry {
    --section-pad: var(--space-2xl);
    background-color: var(--color-muted);
}

.event-enquiry__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-2xl);
    align-items: start;
}

/* --- Event summary ------------------------------------------------------- */

.event-enquiry__eyebrow {
    margin: 0 0 var(--space-sm);
    font-size: var(--text--1);
    color: var(--color-secondary);
}

.event-enquiry__title {
    margin: 0 0 var(--space-md);
    font-size: var(--text-2);
}

/* The panel is the contrast colour, so the row dividers need the page white to show. */
.event-enquiry__event .event-details__row {
    border-color: var(--color-background);
}

.event-enquiry__club {
    margin: var(--space-md) 0 0;
    font-size: var(--text--1);
    font-weight: var(--font-light);
}

.event-enquiry__club a {
    color: var(--color-primary);
}

.event-enquiry__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-md);
    color: var(--color-secondary);
    font-weight: var(--font-heavy);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.event-enquiry__back:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Form ---------------------------------------------------------------- */

/* Without an event summary (only reachable mid-submission) the form takes the full row. */
.event-enquiry__form:only-child {
    grid-column: 1 / -1;
}

/* Radio choices (Yes / No): theme colours for the Orbital controls, in a row via Gravity Forms' own horizontal alignment. */
.event-enquiry .gform_wrapper {
    --gf-ctrl-choice-check-color: var(--color-secondary) !important;
    --gf-ctrl-choice-size: 1.25rem !important;
    --gf-field-choice-gap: var(--space-xs) !important;
    --gf-field-choice-align-x-gap-x: var(--space-lg) !important;
}

.event-enquiry .gform_wrapper .gfield_radio .gform-field-label--type-inline {
    font-family: var(--font-body);
    font-size: var(--text-0);
    font-weight: var(--font-light);
    color: var(--color-text);
}

@media screen and (max-width: 1024px) {

    .event-enquiry__layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

}