/**
 * @package     TemplinTech Calendar
 * @author      Dr. Yordan Balabanov, representing TemplinTech
 * @copyright   Copyright (C) 2026 Dr. Yordan Balabanov.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

/* =========================================================
   TemplinTech Calendar — base
   ========================================================= */

.templintech_calendar {
    --templintech_calendar-accent: #8c571d;
    --templintech_calendar-accent-alt: #a57036;
    --templintech_calendar-text: #333333;
    --templintech_calendar-muted: #707070;
    --templintech_calendar-rule: #dedede;
    --templintech_calendar-soft: #faf7f3;
    --templintech_calendar-event-bg: #fff8f0;
    --templintech_calendar-surface: #ffffff;
    --templintech_calendar-radius: 0;
    --templintech_calendar-shadow: none;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
    color: var(--templintech_calendar-text);
}

.templintech_calendar *,
.templintech_calendar *::before,
.templintech_calendar *::after {
    box-sizing: border-box;
}

.templintech_calendar__message,
.templintech_calendar__empty {
    margin: 0;
    padding: .75rem 0;
    color: var(--templintech_calendar-muted);
}

.templintech_calendar__message--error {
    border-left: 3px solid var(--templintech_calendar-accent);
    padding-left: .85rem;
}

/* =========================================================
   Skin 1 — Executive
   ========================================================= */

.templintech_calendar--skin-executive {
    --templintech_calendar-accent: #8c571d;
    --templintech_calendar-accent-alt: #a57036;
    --templintech_calendar-text: #333333;
    --templintech_calendar-muted: #707070;
    --templintech_calendar-rule: #dedede;
    --templintech_calendar-soft: #faf7f3;
    --templintech_calendar-event-bg: #fff8f0;
    --templintech_calendar-surface: #ffffff;
}

/* =========================================================
   Skin 2 — Editorial
   ========================================================= */

.templintech_calendar--skin-editorial {
    --templintech_calendar-accent: #1f1f1f;
    --templintech_calendar-accent-alt: #8c571d;
    --templintech_calendar-text: #1f1f1f;
    --templintech_calendar-muted: #666666;
    --templintech_calendar-rule: #d4d0cb;
    --templintech_calendar-soft: #f6f4f1;
    --templintech_calendar-event-bg: #f9f6f1;
    --templintech_calendar-surface: #ffffff;
}

.templintech_calendar--skin-editorial .templintech_calendar__month-heading,
.templintech_calendar--skin-editorial .templintech_calendar__event-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
}

.templintech_calendar--skin-editorial .templintech_calendar__navigation {
    border-top: 1px solid var(--templintech_calendar-text);
    border-bottom-width: 1px;
}

/* =========================================================
   Skin 3 — Minimal
   ========================================================= */

.templintech_calendar--skin-minimal {
    --templintech_calendar-accent: #4b4b4b;
    --templintech_calendar-accent-alt: #222222;
    --templintech_calendar-text: #2f2f2f;
    --templintech_calendar-muted: #777777;
    --templintech_calendar-rule: #e7e7e7;
    --templintech_calendar-soft: #fafafa;
    --templintech_calendar-event-bg: #fafafa;
    --templintech_calendar-surface: #ffffff;
}

.templintech_calendar--skin-minimal .templintech_calendar__navigation {
    border-bottom-width: 1px;
}

.templintech_calendar--skin-minimal .templintech_calendar__cell-event {
    border-left-width: 1px;
    background: transparent;
}

/* =========================================================
   Upcoming / month list
   ========================================================= */

.templintech_calendar__list {
    display: grid;
    gap: 0;
}

.templintech_calendar__event {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--templintech_calendar-rule);
}

.templintech_calendar__event:first-child {
    border-top: 2px solid var(--templintech_calendar-accent-alt);
}

.templintech_calendar__event-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1;
}

.templintech_calendar__event-day {
    color: var(--templintech_calendar-text);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.templintech_calendar__event-month {
    margin-top: .25rem;
    color: var(--templintech_calendar-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.templintech_calendar__event-title {
    margin: 0 0 .35rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.templintech_calendar__event-title a {
    color: var(--templintech_calendar-text);
    text-decoration: none;
}

.templintech_calendar__event-title a:hover,
.templintech_calendar__event-title a:focus-visible {
    color: var(--templintech_calendar-accent-alt);
}

.templintech_calendar__event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    color: var(--templintech_calendar-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.templintech_calendar__time-range {
    font-variant-numeric: tabular-nums;
}

.templintech_calendar__timezone {
    margin-left: .08rem;
    color: var(--templintech_calendar-accent-alt);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .035em;
    white-space: nowrap;
}

.templintech_calendar__separator {
    color: #b5b5b5;
}

.templintech_calendar__event-status {
    margin-top: .45rem;
    color: var(--templintech_calendar-accent);
    font-size: .78rem;
    font-weight: 650;
}

.templintech_calendar__event-status--cancelled {
    color: #9c2f2f;
}

.templintech_calendar__event-status--postponed {
    color: #886300;
}

.templintech_calendar__event-status--past {
    color: var(--templintech_calendar-muted);
}

.templintech_calendar__registration {
    display: inline-block;
    margin-top: .6rem;
    color: var(--templintech_calendar-accent-alt);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
}

.templintech_calendar__registration:hover,
.templintech_calendar__registration:focus-visible {
    color: var(--templintech_calendar-accent);
    text-decoration: underline;
}

.templintech_calendar__panel[hidden] {
    display: none !important;
}

/* =========================================================
   Month navigation
   ========================================================= */

.templintech_calendar__navigation {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid var(--templintech_calendar-accent);
}

.templintech_calendar__month-heading {
    margin: 0;
    padding: .78rem .35rem;
    color: var(--templintech_calendar-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.templintech_calendar__navigation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--templintech_calendar-accent-alt);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.templintech_calendar__navigation-link:hover,
.templintech_calendar__navigation-link:focus-visible {
    background: var(--templintech_calendar-soft);
    color: var(--templintech_calendar-accent);
}

.templintech_calendar__navigation-link--disabled,
.templintech_calendar__navigation-link:disabled {
    color: var(--templintech_calendar-muted);
    cursor: default;
    opacity: .32;
    pointer-events: none;
    user-select: none;
}

.templintech_calendar__navigation-link--disabled:hover,
.templintech_calendar__navigation-link--disabled:focus-visible {
    background: transparent;
    color: var(--templintech_calendar-muted);
}

/* =========================================================
   True seven-column month calendar
   ========================================================= */

.templintech_calendar__frame {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.templintech_calendar__grid {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--templintech_calendar-surface);
}

.templintech_calendar__grid th {
    width: 14.285714%;
    padding: .5rem .18rem;
    border-bottom: 1px solid var(--templintech_calendar-rule);
    color: var(--templintech_calendar-muted);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}

.templintech_calendar__cell {
    width: 14.285714%;
    height: 5rem;
    padding: .34rem;
    vertical-align: top;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid var(--templintech_calendar-rule);
    background: var(--templintech_calendar-surface);
    overflow: hidden;
}

.templintech_calendar__grid tr .templintech_calendar__cell:last-child {
    border-right: 0;
}

.templintech_calendar__cell--empty {
    background: var(--templintech_calendar-soft);
}

.templintech_calendar__cell--events {
    background: var(--templintech_calendar-event-bg);
}

.templintech_calendar__cell--today {
    box-shadow: inset 0 0 0 1px var(--templintech_calendar-accent-alt);
}

.templintech_calendar__day {
    display: block;
    margin: 0 0 .22rem;
    color: var(--templintech_calendar-text);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.templintech_calendar__cell--today .templintech_calendar__day {
    color: var(--templintech_calendar-accent-alt);
    font-weight: 750;
}

.templintech_calendar__cell-events {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.templintech_calendar__cell-event {
    display: block;
    min-width: 0;
    padding: .18rem .2rem;
    overflow: hidden;
    border-left: 2px solid var(--templintech_calendar-accent-alt);
    background: rgba(255, 255, 255, .72);
    color: var(--templintech_calendar-accent);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1.18;
    text-decoration: none;
}

.templintech_calendar__cell-event:hover,
.templintech_calendar__cell-event:focus-visible {
    background: #ffffff;
    color: var(--templintech_calendar-accent-alt);
    text-decoration: none;
}

.templintech_calendar__cell-event-time {
    display: block;
    margin-bottom: .08rem;
    color: var(--templintech_calendar-muted);
    font-size: .61rem;
    font-weight: 550;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.templintech_calendar__cell-event-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.templintech_calendar__cell-event--past {
    opacity: .62;
    border-left-color: #a9a9a9;
    color: var(--templintech_calendar-muted);
}

.templintech_calendar__cell-event--past:hover,
.templintech_calendar__cell-event--past:focus-visible {
    opacity: .86;
}

.templintech_calendar__cell-event--cancelled .templintech_calendar__cell-event-title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.templintech_calendar__cell-event--postponed {
    border-left-style: dashed;
}

.templintech_calendar__more {
    display: inline-block;
    color: var(--templintech_calendar-muted);
    font-size: .62rem;
    line-height: 1;
}

.templintech_calendar__event-dot {
    display: block;
    width: .35rem;
    height: .35rem;
    margin: .2rem auto 0;
    border-radius: 50%;
    background: var(--templintech_calendar-accent-alt);
}

.templintech_calendar__month-list {
    margin-top: 1.5rem;
}

.templintech_calendar__month-list-title {
    margin: 0 0 .5rem;
    color: var(--templintech_calendar-text);
    font-size: 1rem;
    font-weight: 700;
}

/* =========================================================
   Narrow module positions
   ========================================================= */

@container (max-width: 420px) {
    .templintech_calendar__navigation {
        grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    }

    .templintech_calendar__month-heading {
        padding: .68rem .15rem;
        font-size: .88rem;
    }

    .templintech_calendar__navigation-link {
        min-height: 2.15rem;
        font-size: .95rem;
    }

    .templintech_calendar__grid th {
        padding: .38rem .02rem;
        font-size: .58rem;
        letter-spacing: 0;
    }

    .templintech_calendar__cell {
        height: 3.65rem;
        padding: .2rem .12rem;
    }

    .templintech_calendar__day {
        margin-bottom: .14rem;
        font-size: .68rem;
        text-align: center;
    }

    .templintech_calendar__cell-event {
        padding: .12rem .08rem;
        border-left-width: 1px;
        font-size: .52rem;
        line-height: 1.05;
        text-align: center;
    }

    .templintech_calendar__cell-event-time {
        display: none;
    }

    .templintech_calendar__more {
        display: block;
        margin-top: .08rem;
        font-size: .52rem;
        text-align: center;
    }
}

@container (max-width: 290px) {
    .templintech_calendar__grid th {
        font-size: .54rem;
    }

    .templintech_calendar__cell {
        height: 3.35rem;
        padding: .16rem .08rem;
    }

    .templintech_calendar__day {
        font-size: .64rem;
    }

    .templintech_calendar__cell-event {
        font-size: .48rem;
    }
}

@media (max-width: 575px) {
    .templintech_calendar__event {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: .75rem;
    }

    .templintech_calendar__event-day {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .templintech_calendar * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}