/* ═══════════════════════════════════════════════════════════════════
   calendar.css — TengerpartiFoto availability calendar
   Paired with calendar.js (window.initCalendar). Uses the palette
   variables from styles.css (--night, --gold, --rose, --sand, --cream …).

   Each day shows up to two booked slots:
     • day    (daytime shoot, 11:00–15:00)  → gold dot
     • sunset (after 17:00)                 → rose/terracotta dot
═══════════════════════════════════════════════════════════════════ */

/* Section */
.availability { padding:clamp(80px,11vw,140px) 0 clamp(48px,6vw,80px); }
.avail-cal { max-width:880px; margin:56px auto 0; }

/* "Next free slot" summary chips */
.cal-summary { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.cal-stat {
    display:flex; align-items:center; gap:10px; padding:11px 18px;
    border:1px solid var(--border); border-radius:40px;
    background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.cal-stat .cal-slot { width:8px; height:8px; }
.cal-stat-k {
    font-family:"Jost",sans-serif; font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--faint);
}
.cal-stat-v { font-family:"Cormorant Garamond",serif; font-size:18px; color:var(--cream); line-height:1; }

/* Nav row */
.cal-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:28px;
}
.cal-nav-label {
    font-family:"Jost",sans-serif; font-size:10px; letter-spacing:.32em;
    text-transform:uppercase; color:var(--muted);
}
.cal-nav-btns { display:flex; gap:6px; }
.cal-nav-btn {
    background:none; border:1px solid var(--border);
    color:var(--muted); width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .25s,color .25s; flex-shrink:0;
}
.cal-nav-btn:hover { border-color:var(--gold); color:var(--gold); }
.cal-nav-btn:disabled { opacity:.22; cursor:default; pointer-events:none; }

/* Two months */
.cal-months { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cal-month {
    border:1px solid var(--border); border-radius:18px; padding:30px 26px;
    background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}

/* Month title */
.cal-month-title {
    font-family:"Cormorant Garamond",serif; font-size:22px;
    font-weight:500; letter-spacing:.02em; color:var(--cream);
    text-align:center; margin-bottom:20px; display:flex;
    align-items:baseline; justify-content:center; gap:.45em;
}
.cal-month-title-year { font-size:15px; color:var(--gold); font-weight:400; }

/* Day-names header */
.cal-daynames { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.cal-dayname {
    font-family:"Jost",sans-serif; font-size:9px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--faint);
    text-align:center; padding-bottom:8px;
}

/* Day grid */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }

/* Individual cell */
.cal-day {
    position:relative; aspect-ratio:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    font-family:"Jost",sans-serif; font-size:13px; font-weight:400;
    color:var(--sand); cursor:default; user-select:none; border-radius:12px;
    transition:background .25s;
}
.cal-day--empty { background:none; }

/* Number */
.cal-day-n {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; line-height:1;
}

/* Slot colours — complementary so the two are unmistakably different:
   daytime = cool teal (midday sky), sunset = warm amber-orange (golden hour) */
:root {
    --cal-day:    #34b3c9;   /* teal — daytime shoot */
    --cal-sunset: #f0902f;   /* amber-orange — sunset shoot */
}

/* Slot dots (rendered only for booked slots) */
.cal-day-slots { display:flex; gap:5px; height:9px; align-items:center; }
.cal-slot { width:9px; height:9px; border-radius:50%; }
.cal-slot--day    { background:var(--cal-day);    box-shadow:0 0 0 1px rgba(52,179,201,.4); }
.cal-slot--sunset { background:var(--cal-sunset); box-shadow:0 0 0 1px rgba(240,144,47,.4); }

/* ── Day states ── */
.cal-day--past { color:var(--faint); pointer-events:none; }
.cal-day--past .cal-slot { opacity:.4; }

.cal-day--today .cal-day-n { border:1px solid var(--gold); color:var(--gold); }

/* Available days: gentle hover */
.cal-day--available:not(.cal-day--past):hover { background:rgba(232,171,80,.08); }

/* A day with at least one booking gets a faint matching tint */
.cal-day--has-day    { background:rgba(52,179,201,.07); }
.cal-day--has-sunset { background:rgba(240,144,47,.07); }
.cal-day--has-day.cal-day--has-sunset {
    background:linear-gradient(135deg, rgba(52,179,201,.10) 0 50%, rgba(240,144,47,.10) 50% 100%);
}

/* Fully booked (both slots) — dim the number */
.cal-day--full .cal-day-n { color:var(--faint); }

/* Legend */
.cal-legend {
    display:flex; gap:26px; flex-wrap:wrap;
    margin-top:30px; padding-top:24px; border-top:1px solid var(--border);
    align-items:center; justify-content:center;
}
.cal-legend-item {
    display:flex; align-items:center; gap:9px;
    font-family:"Jost",sans-serif; font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.cal-legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; border:1px solid var(--border); }
.cal-legend-dot--day    { background:var(--cal-day);    border-color:rgba(52,179,201,.5); }
.cal-legend-dot--sunset { background:var(--cal-sunset); border-color:rgba(240,144,47,.5); }
.cal-legend-dot--available { background:transparent; }

/* Loading / error */
.cal-state {
    padding:52px 0; text-align:center;
    font-family:"Jost",sans-serif; font-size:10px;
    letter-spacing:.36em; text-transform:uppercase; color:var(--faint);
}
.cal-state--error { color:var(--rose); }

/* ── Responsive ── */
@media (max-width:760px) {
    .cal-months { grid-template-columns:1fr; gap:14px; }
    .cal-month { padding:24px 18px; }
}
@media (max-width:480px) {
    .cal-day { font-size:12px; border-radius:9px; }
    .cal-day-n { width:24px; height:24px; }
    .cal-dayname { font-size:8px; letter-spacing:.12em; }
    .cal-month-title { font-size:19px; }
    .cal-legend { gap:14px 18px; }
    .cal-slot, .cal-legend-dot { width:6px; height:6px; }
}