/* ============================================================
   Venue pages — shared layout.
   Scoped to .venue-page, applied to all six:
     salles.php      / en/private-rooms.php
     mariages.php    / en/weddings.php
     corporatifs.php / en/corporate-event.php

   Replaces the earlier rooms-only rooms.css; the three pairs use
   the same section markup, so they get one stylesheet rather than
   three near-copies that drift apart.
   ============================================================ */
.venue-page {
    --text-measure: 580px;      /* text sitting beside a carousel   */
    --wide-measure: 900px;      /* standalone full-width text block */
    --title-space: 1.25rem;     /* breathing room above a title     */
    --page-inset: 160px;        /* left/right margin for the page   */
    --stack-gap: 2.5rem;        /* gap between two stacked full-width blocks */
    --paper: #fbf8f3;           /* replaces the grey band background   */

    /* Top of the carousel, so it lines up with the top of the eyebrow.
       3.3rem is .cont_text_holder's `padding: 3em 0` at the 1.1rem body
       size; the eyebrow adds its own margin on top. Derived, so changing
       --title-space keeps the photo aligned. */
    --image-top: calc(3.3rem + var(--title-space));
}

/* ---------- reading width ----------
   The site's .container-fluid.padding is the full viewport minus its
   padding, so an unconstrained text block runs to ~200 characters a
   line on a desktop. Text beside a carousel is already held by a
   Bootstrap column and takes the narrower measure; a standalone block
   has no column, so it is capped and centred instead. */
.venue-page .cont-slider_text .cont_text_holder {
    max-width: var(--text-measure);
}
.venue-page .container-fluid.padding > .cont_text_holder,
.venue-page .col-lg-12 .cont_text_holder {
    max-width: var(--wide-measure);
    margin-left: auto;
    margin-right: auto;
}

/* Some sections close .cont_text_holder before their button, others keep
   it inside. Where the text box is capped and centred, a button left
   outside it keeps the full-width edge and no longer lines up with the
   copy above it. Give it the same box. A general sibling (~) rather than
   adjacent (+) because a stray <br> usually sits between the two. */
.venue-page .container-fluid.padding > .cont_text_holder ~ .btn-wrap,
.venue-page .col-lg-12 .cont_text_holder ~ .btn-wrap {
    max-width: var(--wide-measure);
    margin-left: auto;
    margin-right: auto;
}

/* ---------- section titles and eyebrows ----------
   Whichever element opens the block carries the top space, so an
   eyebrow and its title never double-space. */
.venue-page .cont_text_holder .section-eyebrow,
.venue-page .cont_text_holder .title {
    margin-top: var(--title-space);
}
.venue-page .cont_text_holder .section-eyebrow + .title {
    margin-top: 0;
}
.venue-page .cont_text_holder .section-eyebrow {
    margin-bottom: .5em;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7d7d7d;
}

/* ---------- page margins ----------
   .padding leaves only 90px from the viewport edge, and .offset_image
   is absolutely positioned at right:0, so the carousels ran hard into
   the edge of the screen. Both bands move in together. The carousel
   keeps its inner edge where it was: it loses the width it gains in
   offset, so the text column beside it does not move.

   From 1200px up only: below that the site tightens .padding itself,
   and under 992px .offset_image goes position:relative and stacks. */
@media only screen and (min-width: 1200px) {
    .venue-page .padding {
        padding-left: var(--page-inset);
        padding-right: var(--page-inset);
    }
    .venue-page .offset_image {
        right: var(--page-inset);
        width: calc(55% - var(--page-inset));
    }
    .venue-page .offset_image.alt {
        right: auto;
        left: var(--page-inset);
    }
}

/* ---------- carousel vertical alignment ----------
   .offset_image sits at top:0, so photos started at the very top of the
   section while the text began 3em lower. Drop them to meet the eyebrow
   and take the same off the height so the bottom edge stays put. */
@media only screen and (min-width: 992px) {
    .venue-page .offset_image {
        top: var(--image-top);
        height: calc(100% - var(--image-top));
    }
}

/* ---------- stacked full-width blocks ----------
   Where a two-column section was collapsed to one column, the blocks
   sit directly on top of each other. The site's `ul` has margin: 0, so
   a list ending one block runs straight into the heading text opening
   the next. Give the second block room. */
.venue-page .col-lg-12.px-0 + .col-lg-12.px-0 {
    margin-top: var(--stack-gap);
}

/* ---------- section backgrounds ----------
   The sections alternate white .section_wrapper with cool-grey #f6f6f6
   .section_wrapper1. The alternation stays; only the grey band changes,
   to the warm --paper already used by the blog and contact pages. White
   sections are left alone. */
.venue-page .section_wrapper1 {
    background-color: var(--paper);
}