/* ── Availability Calendar – Frontend Styles ──────────────────── */

.availability-calendar {
    --blocked: #fcbab2;
    /*--available: #f0f0ee;*/
    --available: #ffffff;
    --today: #c1a057;
    --opacity-blocked: 0.4;
    --availability-gap:32px;
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--availability-gap);
    row-gap: calc(2 * var(--availability-gap));

}

.availability-calendar p:last-child {
    margin-bottom:0;
}


.availability-calendar__intro {
    display: grid;
    gap:22px;
    width:calc(70% - (var(--availability-gap) / 2));
}

.availability-calendar__intro .eyebrow {
    font-size:18px;
    margin-bottom:0;
}

.availability-calendar__legend {
    width:calc(30% - (var(--availability-gap) / 2));
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
}

.availability-calendar__legend-title {
    font-family: var(--sans);
    color:var(--gold);
    display: block;
    width:100%;
    margin-bottom:10px;
    font-size:12px;
    letter-spacing: 2px;
    text-transform: uppercase;

}

.availability-calendar__legend ul {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 8px 20px;
    flex-wrap: wrap;
    font-size: .9rem;
    width: 100%;
    list-style: none;
    padding-left:0;
    margin-bottom:0;
}


.availability-calendar__legend-item {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 8px;
}

.availability-calendar__legend-item {
    width:24px;
    height:24px;
    border: 1px solid #ccc;
}

.availability-calendar__legend-item--available {
    background: var(--available);
}

.availability-calendar__legend-item--blocked {
    background: var(--blocked);
    opacity: var(--opacity-blocked);
}

.availability-calendar__legend-item--today {
    background: var(--today);
}

.availability-calendar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--availability-gap);
    width: 100%;
}

.availability-calendar__month {
    min-width: 0;
}

.availability-calendar__month-title {
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    text-transform: capitalize;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.availability-calendar__month-title  .month {
    font-family: var(--serif);
    color:var(--clay);
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
}

.availability-calendar__month-title .year {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.availability-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.availability-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    border-radius: 4px;
    background: var(--available);
}

.availability-calendar__day--header {
    background: transparent;
    font-weight: 700;
    font-size: .7rem;
    color: #888;
    aspect-ratio: unset;
    padding-bottom: 4px;
}

.availability-calendar__day--empty {
    background: transparent;
}

.availability-calendar__day--blocked {
    background: var(--blocked);
    /*color: #fff;*/
    font-weight: 600;
    opacity: var(--opacity-blocked);
}

.availability-calendar__day--today {
    outline: 2px solid #a29583;
    outline-offset: -2px;
    background-color: var(--today);
}

.availability-calendar__day--past {
    opacity: .4;
}

@media (max-width: 768px) {
    .availability-calendar {
        row-gap: var(--availability-gap);
    }

    .availability-calendar__intro {
        width:100%;
    }

    .availability-calendar__legend {
        width:100%;
    }
}

@media (max-width: 480px){
    .availability-calendar__grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}