/**
 * Season calendar. No surface of its own: text follows the row (light/dark).
 * The bar keeps its season colours. Typeface stays with the theme options.
 */

.graniteandgreen-season-calendar {
    color: inherit;
}

.graniteandgreen-season-calendar__year {
    margin-bottom: var(--graniteandgreen-spacing-xl);
    overflow-x: auto;
}

.graniteandgreen-season-calendar__months,
.graniteandgreen-season-calendar__bar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--graniteandgreen-spacing-base) * 0.33);
    min-width: calc(var(--graniteandgreen-spacing-base) * 60);
    margin: 0;
    padding: 0;
    list-style: none;
}

.graniteandgreen-season-calendar__month {
    margin: 0;
    padding-bottom: var(--graniteandgreen-spacing-sm);
    color: inherit;
    letter-spacing: 0.08em;
    line-height: var(--graniteandgreen-line-height-tight);
    text-align: center;
    text-transform: uppercase;
    opacity: 0.62;
}

.graniteandgreen-season-calendar__segment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--graniteandgreen-spacing-base) * 4.5);
    margin: 0;
    padding-inline: var(--graniteandgreen-spacing-sm);
    border: 0;
    border-radius: var(--graniteandgreen-border-radius-sm);
    background: rgba(var(--graniteandgreen-color-sand), 1);
    color: rgba(var(--graniteandgreen-color-dark), 1);
    font-weight: var(--graniteandgreen-font-weight-bold);
    text-align: left;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
}

.graniteandgreen-season-calendar__segment--closed {
    justify-content: center;
    padding-inline: var(--graniteandgreen-spacing-xs);
    background: repeating-linear-gradient(
        -45deg,
        rgba(var(--graniteandgreen-color-paper-2), 1) 0,
        rgba(var(--graniteandgreen-color-paper-2), 1) var(--graniteandgreen-spacing-xs),
        rgba(var(--graniteandgreen-color-hatch), 1) var(--graniteandgreen-spacing-xs),
        rgba(var(--graniteandgreen-color-hatch), 1) var(--graniteandgreen-spacing-md)
    );
    color: rgba(var(--graniteandgreen-color-ink-soft), 1);
    font-weight: var(--graniteandgreen-font-weight-normal);
    text-align: center;
    cursor: default;
}

button.graniteandgreen-season-calendar__segment:hover,
button.graniteandgreen-season-calendar__segment:focus-visible,
.graniteandgreen-season-calendar__segment--current {
    background: rgba(var(--graniteandgreen-color-copper), 1);
    color: rgba(var(--graniteandgreen-color-white), 1);
}

button.graniteandgreen-season-calendar__segment:focus-visible {
    outline: var(--graniteandgreen-border-width) solid rgba(var(--graniteandgreen-color-copper), 1);
    outline-offset: var(--graniteandgreen-spacing-xs);
}

.graniteandgreen-season-calendar__segment--early {
    grid-column: 1 / span 3;
}

.graniteandgreen-season-calendar__segment--start {
    grid-column: 4 / span 1;
}

.graniteandgreen-season-calendar__segment--spring {
    grid-column: 5 / span 2;
}

.graniteandgreen-season-calendar__segment--summer {
    grid-column: 7 / span 2;
}

.graniteandgreen-season-calendar__segment--autumn {
    grid-column: 9 / span 1;
}

.graniteandgreen-season-calendar__segment--late {
    grid-column: 10 / span 3;
}

.graniteandgreen-season-calendar__detail {
    display: none;
    grid-template-columns: 1fr;
    gap: var(--graniteandgreen-spacing-xl);
    align-items: start;
}

.graniteandgreen-season-calendar__detail--active {
    display: grid;
}

.graniteandgreen-season-calendar__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--graniteandgreen-border-radius-sm);
}

.graniteandgreen-season-calendar__when {
    margin: 0 0 var(--graniteandgreen-spacing-md);
    color: inherit;
    font-weight: var(--graniteandgreen-font-weight-bold);
    text-transform: none;
}

.graniteandgreen-season-calendar h3 {
    margin: 0 0 var(--graniteandgreen-spacing-md);
}

.graniteandgreen-season-calendar__text {
    margin: 0;
}

.graniteandgreen-season-calendar__tips {
    margin: var(--graniteandgreen-spacing-xl) 0 0;
    padding: 0;
    list-style: none;
    border-top: var(--graniteandgreen-border-width) solid color-mix(in srgb, currentColor 18%, transparent);
}

.graniteandgreen-season-calendar__tips li {
    display: flex;
    align-items: center;
    gap: var(--graniteandgreen-spacing-md);
    margin: 0;
    padding: var(--graniteandgreen-spacing-md) 0;
    border-bottom: var(--graniteandgreen-border-width) solid color-mix(in srgb, currentColor 18%, transparent);
}

.graniteandgreen-season-calendar__tips li::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: var(--graniteandgreen-spacing-md);
    height: var(--graniteandgreen-border-width);
    background: rgba(var(--graniteandgreen-color-copper), 1);
}

.graniteandgreen-season-calendar__note {
    max-width: 46em;
    margin: var(--graniteandgreen-spacing-2xl) 0 0;
    color: inherit;
    opacity: 0.72;
}

.graniteandgreen-season-calendar__note a {
    color: inherit;
    text-decoration: underline;
}

@media (min-width: 960px) {
    .graniteandgreen-season-calendar__detail {
        grid-template-columns: 1fr 1.05fr;
        gap: var(--graniteandgreen-spacing-3xl);
    }
}