/*
 * Événements privés — prune.
 *
 * The signature gesture is the invitation card: the four formules are engraved
 * cards laid slightly askew on the paper, not the homepage's photo tiles. The
 * wedding photographs are a taped collage rather than the washing line — the
 * line is the house's laundry, and it only holds eight prints anyway.
 */

.vo-event__frond {
    top: 40px;
    right: -80px;
    transform: rotate(20deg);
}

/* ==========================================================================
   Les formules — invitation cards
   ========================================================================== */

.vo-event__formules {
    background: var(--vo3-paper-deep);
}

.vo-event__track {
    align-items: stretch;
    /* The cards lean: without headroom the tilt clips against the track's edge. */
    padding-block: 22px 34px;
}

/* An engraved card: a hairline plum rule inset from the edge, the way a printed
   invitation is bordered. Each one leans a different way, as if they had been
   dealt onto the table. */
.vo-event__card {
    position: relative;
    flex-basis: clamp(270px, 26vw, 330px);
    border-radius: 3px;
    transform: rotate(var(--card-rot, 0deg));
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

.vo-event__card::after {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: 1;
    border: 1px solid color-mix(in srgb, var(--vo3-accent) 34%, transparent);
    border-radius: 1px;
    pointer-events: none;
}

/* Cyclic, not absolute: `4n+1` repeats every four cards, so adding a fifth formule
   keeps the scatter instead of rendering it flat. Nobody can tell a cycle of four
   from four bespoke angles, and the count stops being a hidden constraint. */
.vo-event__card:nth-of-type(4n+1) { --card-rot: -1.6deg; }
.vo-event__card:nth-of-type(4n+2) { --card-rot: 1.2deg; }
.vo-event__card:nth-of-type(4n+3) { --card-rot: -.8deg; }
.vo-event__card:nth-of-type(4n+4) { --card-rot: 1.8deg; }

/* Picked up off the table: it straightens as it lifts. */
.vo-event__card:hover {
    transform: rotate(calc(var(--card-rot, 0deg) * .25)) translateY(-8px);
}

/* The card is engraved paper, so its photograph sits inside the border rather
   than bleeding to the edge like the homepage's offer tiles. */
.vo-event__card .vo3-offer__media {
    margin: 9px 9px 0;
    border-radius: 1px;
}

.vo-event__card .vo3-offer__media img {
    aspect-ratio: 3 / 2;
}

.vo-event__when {
    font-family: var(--vo3-script);
    font-size: 23px;
    line-height: 1;
    color: var(--vo3-accent);
}

.vo-event__pricing-note {
    margin-top: 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--vo-muted);
    text-align: center;
}

/* ==========================================================================
   Capacité — two taped notes
   ========================================================================== */

.vo-event__capacity {
    padding-block: clamp(70px, 8vw, 110px);
}

.vo-event__capacity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(30px, 4vw, 56px);
}

/* The pair leans against each other rather than sitting square. */
.vo-event__note {
    max-width: none;
    text-align: left;
}

.vo-event__note:nth-of-type(odd) { transform: rotate(-.9deg); }
.vo-event__note:nth-of-type(even) { transform: rotate(.7deg); }

/* Smaller than a section title: these two notes sit side by side, not across the
   page. Overrides the clamp of .vo3-note__title, which _section_head also applies. */
.vo-event__note-title {
    font-size: clamp(26px, 3vw, 36px);
    margin: 6px 0 14px;
    text-align: left;
}

.vo-event__note-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--vo-muted);
}

/* ==========================================================================
   Inspiration — taped collage
   ========================================================================== */

.vo-event__collage {
    background: var(--vo3-paper-deep);
    padding-block: clamp(60px, 7vw, 100px);
}

.vo-event__collage-strip {
    display: flex;
    align-items: flex-start;
    gap: clamp(26px, 3vw, 44px);
    width: max-content;
    min-width: 100%;
    justify-content: center;
    /* Headroom for the tape, which sits 16px above each print, and for the prints
       that are pushed down the page. */
    padding: 34px max(var(--vo-gutter), 4vw) 40px;
}

/* Prints dropped on the page: each one tilts its own way and rides a little
   higher or lower than its neighbour. The pattern is cyclic (6n+k), so unlike the
   washing line nothing here is derived from the count: add or remove a print and
   the rest still holds.

   Geometry lives here, never in a style="" attribute: the site enforces a
   nonce-based CSP with no 'unsafe-inline', so inline styles never apply. */
.vo-event__print {
    flex: 0 0 auto;
    width: clamp(200px, 21vw, 240px);
    max-width: none;
    margin-top: var(--offset, 0);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.vo-event__print:nth-of-type(6n+1) { --rot: -3.2deg; --offset: 14px; }
.vo-event__print:nth-of-type(6n+2) { --rot: 2.4deg;  --offset: 52px; }
.vo-event__print:nth-of-type(6n+3) { --rot: -1.4deg; --offset: 0; }
.vo-event__print:nth-of-type(6n+4) { --rot: 3.6deg;  --offset: 40px; }
.vo-event__print:nth-of-type(6n+5) { --rot: -2.6deg; --offset: 18px; }
.vo-event__print:nth-of-type(6n+6) { --rot: 1.8deg;  --offset: 58px; }

.vo-event__print:hover {
    z-index: 3;
    transform: rotate(0deg) translateY(-6px) scale(1.03);
}

/* ==========================================================================
   Le déroulé
   ========================================================================== */

.vo-event__steps {
    padding-block: clamp(70px, 8vw, 110px);
}

.vo-event__steps-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 44px);
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.vo-event__step {
    padding-top: 22px;
    border-top: 2px solid color-mix(in srgb, var(--vo3-accent) 45%, transparent);
}

.vo-event__step-index {
    font-family: var(--vo-font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--vo3-accent);
}

.vo-event__step-title {
    font-family: var(--vo-font-serif);
    font-weight: 500;
    font-size: 23px;
    margin: 8px 0 10px;
}

.vo-event__step-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--vo-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .vo-event__capacity-grid,
    .vo-event__steps-list {
        grid-template-columns: 1fr;
    }

    /* The vertical offsets were a desktop composition; on a narrow strip they
       just push half the prints off the top of the fold. */
    .vo-event__print {
        --offset: 0;
        width: 200px;
    }
}