/* Enquiry form now the only child of the shared .container grid (the
   exhibitor-logo panel moved out to .bookstall-partners-strip, a
   full-width section of its own -- see below), so it's re-centered here
   as a fixed-width column instead of stretching/staying pinned left in
   what used to be a 2fr/3fr grid track. Scoped to this page's own
   stylesheet, so the shared .container/.left-column used by other
   2-column form pages (contact-us.php, Register_EGN.php, ...) is
   untouched. */
.container {
    display: flex;
    justify-content: center;
}

.left-column {
    max-width: 720px;
}

/* Hero ("page-header-intro") on this page is the only one sitewide that
   carries a CTA button below its intro paragraph -- the shared
   .page-header-intro rule in common.css has no spacing rule for that
   combination, so it's added here instead of common.css (page-exclusive
   combo, not used by any other page yet). */
.bookstall-hero {
    padding-bottom: 48px;
}

.bookstall-hero-cta {
    margin-top: 28px;
}

/* Consent checkbox row -- replaces the old inline style="display:flex..." */
.bookstall-consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bookstall-consent-row input[type="checkbox"] {
    margin-top: 5px;
    flex-shrink: 0;
}

/* Form's closing CTA block (submit button + GDPR notice) now uses the
   shared .form-cta-footer/.form-submit-row (common.css) -- same pattern as
   contact-us.php/travel-desk-contact.php/Register_EGN.php/visitor-workshop.php. */

.exhibitors-header {
    text-align: center;
    padding: 0;
    margin: 0;
}

.exhibitors-header h2 {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* "OUR PREVIOUS PARTNERS" -- full-width section sitting right after the
   page intro's "Explore Floor Planner" button, above the (now centered)
   enquiry form (2026-09-05, replaces the earlier narrow-right-column
   3-column vertical carousel now that the panel moved out of the
   left/right split entirely). */
.bookstall-partners-strip {
    width: 100%;
    padding: 0 var(--edge-pad) 40px;
    box-sizing: border-box;
}

/* Auto-scrolling 3-row logo carousel. Pure CSS: each row's track holds
   its slice of logos once, then the same slice again (.logo-row-dup);
   animating translateX from 0 to -50% loops seamlessly because that
   duplicate half is pixel-identical to the first -- no JS/timer needed.
   Middle row runs in reverse for visual variety; all three run at
   different speeds so they don't fall back into sync. */
.logo-row-carousel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.logo-row {
    overflow: hidden;
}

.logo-row-track {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: max-content;
    animation: bookstallLogoScrollLeft 42s linear infinite;
}

.logo-row--reverse .logo-row-track {
    animation-name: bookstallLogoScrollRight;
}

.logo-row:nth-child(2) .logo-row-track { animation-duration: 36s; }
.logo-row:nth-child(3) .logo-row-track { animation-duration: 48s; }

/* Fixed tile width so a flex row of naturally different-width logo
   images still lines up into clean columns as it scrolls. */
.logo-row-track .exhibitor-logo {
    flex: 0 0 170px;
}

/* display:contents keeps the duplicated logos in the same flex row as
   the first copy (this wrapper exists only so aria-hidden can hide the
   whole repeated set from assistive tech in one place). */
.logo-row-dup {
    display: contents;
}

@keyframes bookstallLogoScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes bookstallLogoScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Pause on hover/focus so a visitor can actually read a logo, and stop
   entirely for reduced-motion users. */
.logo-row-carousel:hover .logo-row-track,
.logo-row-carousel:focus-within .logo-row-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .logo-row-track {
        animation: none;
    }
}

@media (max-width: 600px) {
    .logo-row-carousel {
        gap: 10px;
        margin-top: 18px;
    }
    .logo-row-track {
        gap: 10px;
    }
    .logo-row-track .exhibitor-logo {
        flex-basis: 130px;
        height: 65px;
    }
}