/*
 * Public availability calendar — the visitors' view of the shared calendar.
 *
 * Follows the client calendar of the mockups (docs/design, screens 1a and 2b):
 * a bordered cream card, circled month arrows, a Playfair month label, and an
 * unavailable day greyed and struck through. Two states and no more, free or
 * taken; the motif behind a taken day is not in the markup, so it cannot be in
 * the design either.
 *
 * The strike matters as much as the grey: a state carried by colour alone is
 * invisible to a colour-blind visitor and to anyone printing the page.
 *
 * The classes are shared with the date picker
 * (assets/controllers/datepicker_controller.js), which draws the same grid
 * client-side wherever a date is entered — that is the point: one calendar,
 * learnt once.
 */

.vo-avail {
    display: block;
    padding: 18px;
    border: 1px solid rgba(33, 28, 23, .12);
    border-radius: 16px;
    background: var(--vo-cream);
    color: var(--vo-ink);
}

/* ==========================================================================
   Month header
   ========================================================================== */

.vo-avail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vo-avail__month {
    flex: 1;
    margin: 0;
    font-family: var(--vo-font-serif);
    font-size: 16px;
    text-align: center;
}

/* IntlDateFormatter returns « septembre 2026 »: the capital belongs to the
   sentence, not to the data. */
.vo-avail__month::first-letter {
    text-transform: uppercase;
}

/* The mockups draw a 30px hairline circle. Kept as a circle, but filled and
   with a firmer edge: a hairline outline holding a thin glyph on a cream card
   was the one control on the page nobody could see. */
.vo-avail__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(33, 28, 23, .2);
    border-radius: 50%;
    background: #fff;
    color: var(--vo-ink);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.vo-avail__step:hover {
    background: var(--vo3-accent, var(--vo-terracotta));
    border-color: transparent;
    color: var(--vo-cream);
}

/* Keeps the month label centred where there is no month to step to. */
.vo-avail__step--off {
    visibility: hidden;
}

/* ==========================================================================
   Month grid
   ========================================================================== */

/* `table-layout: fixed` is what keeps the seven columns equal and stops a
   cell's content from setting the table's width on a narrow phone. */
.vo-avail__grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}

.vo-avail__grid th {
    padding: 4px 0;
    color: var(--vo-muted-light);
    font-size: 10.5px;
    font-weight: 600;
}

.vo-avail__grid abbr {
    text-decoration: none;
}

.vo-avail__day {
    /* 40px touch target at every size (CLAUDE.md); table cells centre their
       content vertically by default, kept explicit for the datepicker's
       client-drawn grid, which shares this class. */
    min-height: 40px;
    padding: 9px 0;
    border-radius: 10px;
    font-size: 12.5px;
    text-align: center;
    vertical-align: middle;
}

/* Past days, and the days the grid borrows from the neighbouring months: both
   are dates a visitor cannot have, and the mockups grey them the same way. The
   strike is reserved for a date someone else has taken. */
/* The legend swatch is a struck-through sample date, so it shares the rule
   rather than restating it. */
.vo-avail__day--past,
.vo-avail__day--outside,
.vo-avail__day--busy,
.vo-avail__key {
    color: var(--vo-unavailable);
}

.vo-avail__day--busy {
    text-decoration: line-through;
}

.vo-avail__day--free {
    font-weight: 600;
}

.vo-avail__day--today {
    box-shadow: inset 0 0 0 1.5px var(--vo3-accent, var(--vo-terracotta));
}

/* Range-picking states, applied by datepicker_controller.js to the grid it
   draws. The server-rendered calendar of /sejour is read-only and never gets
   them. */
.vo-avail__day--selected {
    background: color-mix(in srgb, var(--vo3-accent, var(--vo-terracotta)) 18%, var(--vo-cream));
}

.vo-avail__day--range-start,
.vo-avail__day--range-end {
    background: var(--vo-ink);
    color: var(--vo-cream);
    font-weight: 700;
}

td[data-date][role='button'] {
    cursor: pointer;
}

td[data-date][role='button']:focus-visible {
    outline: 2px solid var(--vo3-accent, var(--vo-terracotta));
    outline-offset: -2px;
}

/* ==========================================================================
   Legend and count
   ========================================================================== */

.vo-avail__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
    margin-top: 12px;
    color: var(--vo-muted);
    font-size: 11.5px;
}

.vo-avail__legend,
.vo-avail__count {
    margin: 0;
}

.vo-avail__key {
    font-weight: 600;
    text-decoration: line-through;
}

/* ==========================================================================
   Placements
   ========================================================================== */

/* The séjour page's own section. */
.vo-avail-section {
    padding-block: clamp(70px, 8vw, 110px);
}

.vo-avail-section .vo-avail {
    max-width: 520px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    box-shadow: 0 24px 44px -30px rgba(33, 28, 23, .5);
}

@media (max-width: 769px) {
    /* Comfortable enough to tap; the mockups' size is a desktop one. */
    .vo-avail__step {
        width: 44px;
        height: 44px;
    }

    .vo-avail__day {
        padding: 11px 0;
    }

    .vo-avail__foot {
        justify-content: center;
        text-align: center;
    }
}