/* ============================================================
   ITs Photobooth: Open dates (dark, like the landing)
   The page's body also has .page-landing, so landing.css gives it
   the --lp-* tokens, the dark topbar and footer, the squared
   buttons, the gold eyebrow and the Anton title. This file adds
   the page and the calendar. Loaded after landing.css, on
   /availability only.
   Day states: open (mint dot), reserved (solid gold), on hold
   (dashed gold), unavailable (grey, hatched), past (dimmed, no
   fill), today (gold ring). Every label is 4.5:1 or more on its
   own background; the phone bars are 3:1 or more.
   ============================================================ */

.page-dates {
    --dt-cell: #141c25;                      /* day tile, on the --lp-bg-2 panel */
    --dt-open: #7fd6c2;                      /* mint, 10:1 on the tile */
    --dt-res: rgba(230, 199, 127, .45);      /* reserved tile edge */
    --dt-hold: rgba(230, 199, 127, .6);      /* on hold tile edge, dashed */
    --dt-grey: #232b35;                      /* unavailable label fill, solid */
    --dt-hatch: rgba(255, 255, 255, .05);
    --dt-gap: 10px;
}

/* the nav link for this page */
.page-dates .topnav a[href$="/availability"] { color: var(--lp-gold); }
@media (min-width: 861px) {
    .page-dates .topnav a[href$="/availability"] { color: var(--lp-text); text-decoration: underline 2px var(--lp-gold); text-underline-offset: 9px; }
}

/* ---------- page ---------- */

.dt {
    position: relative; overflow: hidden; overflow: clip;
    padding: clamp(32px, 4.4vw, 60px) 0 clamp(72px, 9vw, 120px);
    background:
        radial-gradient(760px 420px at 50% 0%, rgba(230, 199, 127, .12), transparent 70%),
        radial-gradient(900px 600px at 0% 100%, rgba(47, 90, 140, .13), transparent 60%),
        var(--lp-bg);
}
/* the month, outlined, behind the title (like the landing's giant words) */
.dt__word {
    position: absolute; left: 50%; top: clamp(4px, 1.5vw, 20px); transform: translateX(-50%);
    font-family: var(--lp-poster); font-size: clamp(5.5rem, 19vw, 17rem); line-height: .8; text-transform: uppercase; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .045);
    pointer-events: none; user-select: none;
}
.dt .wrap { position: relative; }
.dt__head { margin-bottom: clamp(26px, 3vw, 38px); }

/* ---------- calendar panel ---------- */

.cal-wrap { max-width: 1040px; margin: 0 auto; }
.cal {
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: 14px; background: var(--lp-bg-2); border: 1px solid var(--lp-line-2);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95);
}

.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cal-nav__month {
    font-family: var(--lp-poster); font-weight: 400; font-synthesis: none;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.cal-nav__month span { color: var(--lp-gold); }
.cal-nav__btns { display: flex; gap: 10px; }
.cal-nav a, .cal-nav .disabled {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--lp-line-2); background: rgba(255, 255, 255, .03); color: var(--lp-text);
    transition: border-color .2s ease, color .2s ease;
}
.cal-nav svg { width: 20px; height: 20px; }
.cal-nav a:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.cal-nav a:focus-visible { border-radius: 50%; }
.cal-nav .disabled { opacity: .3; }

.cal-legend {
    display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 22px; padding: 16px 0 0; list-style: none;
    border-top: 1px solid var(--lp-line);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 9px; color: var(--lp-text-2); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.cal-legend i { position: relative; width: 16px; height: 16px; border-radius: 4px; }
.lg-open { background: var(--dt-cell); box-shadow: inset 0 0 0 1px var(--lp-line-2); }
.lg-open::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--dt-open); }
.lg-res { background: var(--lp-gold); }
.lg-hold { border: 1px dashed var(--lp-gold); }
.lg-blk { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 4px) var(--dt-grey); box-shadow: inset 0 0 0 1px #6b7480; }
.lg-today { box-shadow: inset 0 0 0 1.5px var(--lp-gold); }

/* ---------- grid ---------- */

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--dt-gap); }
.cal__dow { margin-bottom: 10px; }
.cal__dow span { padding-inline: 13px; color: var(--lp-text-3); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }

/* the label sits right under the date, so a time that wraps never moves it:
   every label in a week lines up */
.cal__cell {
    position: relative; min-width: 0; min-height: 94px; padding: 12px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    border-radius: 6px; background: var(--dt-cell); border: 1px solid var(--lp-line);
}
.cal__cell--blank { background: transparent; border-color: transparent; }
.cal__num { margin-bottom: 4px; font-family: var(--lp-poster); font-size: 1.45rem; line-height: 1; color: var(--lp-text); font-variant-numeric: tabular-nums; }
.cal__today { position: absolute; top: 14px; right: 12px; color: var(--lp-gold); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }

.cal__pill {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    padding: 5px 7px; border-radius: 4px; border: 1px solid transparent;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.cal__pill--open { padding-inline: 0; color: var(--dt-open); }
.cal__pill--open::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cal__pill--reserved { background: var(--lp-gold); color: var(--lp-bg); }
.cal__pill--pending { border: 1px dashed var(--lp-gold); color: var(--lp-gold); }
.cal__pill--blocked { background: var(--dt-grey); color: var(--lp-text-2); }
.cal__meta { color: var(--lp-text-2); font-size: .72rem; font-weight: 600; line-height: 1.25; }

/* the tile follows its day's state */
.cal__cell:has(.cal__pill--reserved) { border-color: var(--dt-res); background: linear-gradient(180deg, rgba(230, 199, 127, .1), transparent 62%) var(--dt-cell); }
.cal__cell:has(.cal__pill--pending) { border: 1px dashed var(--dt-hold); }
.cal__cell:has(.cal__pill--blocked) { background: repeating-linear-gradient(135deg, var(--dt-hatch) 0 1px, transparent 1px 10px) var(--dt-cell); }
.cal__cell:has(.cal__pill--blocked) .cal__num { color: var(--lp-text-2); }

/* past days recede: no fill, dim number, any booking label turns to a plain outline */
.cal__cell--past { background: transparent; border-color: rgba(255, 255, 255, .05); }
.cal__cell--past .cal__num, .cal__cell--past .cal__meta { color: var(--lp-text-3); }
.cal__cell.cal__cell--past:has(.cal__pill) { background: transparent; border: 1px solid rgba(255, 255, 255, .05); }
.cal__cell--past .cal__pill { background: transparent; border: 1px solid var(--lp-line-2); color: var(--lp-text-3); }

.cal__cell--today { border-color: var(--lp-gold); box-shadow: inset 0 0 0 1px var(--lp-gold); }
.cal__cell--today .cal__num { color: var(--lp-gold); }
.cal__cell.cal__cell--today:has(.cal__pill--pending) { border-style: solid; border-color: var(--lp-gold); }

/* ---------- call to action ---------- */

.cal-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px;
    margin-top: 24px; padding: clamp(22px, 3vw, 32px);
    border-radius: 14px; border: 1px solid rgba(230, 199, 127, .35);
    background: radial-gradient(520px 220px at 0% 50%, rgba(230, 199, 127, .1), transparent 70%), var(--lp-bg-2);
}
.cal-cta__title { font-family: var(--lp-poster); font-weight: 400; font-synthesis: none; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.cal-cta p { margin-top: 10px; color: var(--lp-text-2); }
.cal-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- tablet ---------- */

@media (max-width: 1000px) {
    .page-dates { --dt-gap: 6px; }
    .cal { padding: 18px 14px; }
    .cal__cell { min-height: 86px; padding: 9px 6px; }
    .cal__dow span { padding-inline: 7px; letter-spacing: .1em; }
    .cal__num { font-size: 1.3rem; }
    .cal__today { top: 11px; right: 6px; font-size: .56rem; letter-spacing: .08em; }
    .cal__pill { padding: 4px; font-size: .58rem; letter-spacing: .03em; }
    .cal__pill--open { padding-inline: 0; gap: 5px; }
    .cal__meta { font-size: .66rem; }
}

/* ---------- phone: labels become marks, the legend explains them ---------- */

@media (max-width: 760px) {
    .page-dates { --dt-gap: 4px; }
    .cal { padding: 16px 10px 12px; }
    .cal-nav { margin-inline: 6px; }
    .cal-nav__month { font-size: clamp(1.3rem, 6.4vw, 1.7rem); }
    .cal-nav a, .cal-nav .disabled { width: 44px; height: 44px; }
    .cal-legend { gap: 12px 18px; margin: 16px 6px 18px; padding-top: 14px; }
    .cal-legend li { font-size: .66rem; letter-spacing: .12em; }
    .cal__dow span { padding: 0; text-align: center; font-size: .62rem; letter-spacing: .06em; }
    .cal__cell { min-height: clamp(54px, 10vw, 66px); padding: 8px 0 7px; align-items: center; gap: 0; }
    .cal__num { margin: 0 0 auto; font-size: 1.05rem; }
    /* the words stay for screen readers */
    .cal__today, .cal__meta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .cal__pill { display: block; width: calc(100% - 12px); height: 5px; padding: 0; border: 0; border-radius: 3px; font-size: 0; color: transparent; overflow: hidden; }
    .cal__pill--open { width: 6px; height: 6px; background: var(--dt-open); }
    .cal__pill--open::before { content: none; }
    .cal__pill--reserved { background: var(--lp-gold); }
    .cal__pill--pending { background: repeating-linear-gradient(90deg, var(--lp-gold) 0 5px, transparent 5px 8px); }
    .cal__pill--blocked { background: #6b7480; }
    .cal__cell--past .cal__pill { border: 0; background: #5f6873; }
}

@media (max-width: 640px) {
    .cal-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .cal-cta__actions { flex-direction: column; }
    .cal-cta__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cal-nav a { transition: none; }
}