/* ===================================================================
   Courtney Lewis - Calendar pages
   (calendar/index.html, calendar/past-events.html)
   Load AFTER responsive.css. 
   1. Up Next          (#events, calendar/index.html)
   2. Season lists     season title + event cards
   3. Past events      intro + season jump menu
====================================================================== */

.calendar-page {
    --cal-bg: #0d0c0b;
    --cal-card-bg: #151311;
    --cal-accent: #d1e3e3;                   /* same tint as press / watch */
    --cal-text: #ece9e5;
    --cal-muted: rgba(236, 233, 229, .58);
    --cal-rule: rgba(255, 255, 255, .12);
}

/* shared: small letter-spaced label */
.calendar-page #events .alt-font,
.calendar-page .calendar-text .content div.text-uppercase,
.cal-eyebrow {
    display: block;
    margin: 0 0 14px !important;
    font-family: futura-pt, sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cal-accent) !important;
}

/* shared: thin outline button (replaces the grey block buttons) */
.calendar-page .calendar-text .btn,
.calendar-page #events .btn,
.calendar-page .cal-more .btn {
    display: inline-block;
    margin: 6px 10px 0 0 !important;
    padding: 12px 24px !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 0;
    background: transparent !important;
    font-family: futura-pt, sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase;
    color: #fff !important;
    transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.calendar-page .calendar-text .btn:hover,
.calendar-page #events .btn:hover,
.calendar-page .cal-more .btn:hover {
    border-color: var(--cal-accent) !important;
    background: rgba(209, 227, 227, .1) !important;
    color: var(--cal-accent) !important;
}


/* -------------------------------------------------------------------
   1. Up Next
---------------------------------------------------------------------- */
.calendar-page #events { background: var(--cal-card-bg) !important; }
.calendar-page #events > .container-fluid > .row > .col:first-child {
    min-height: 520px;
    background-position: center 30%;
}
.calendar-page #events .col.text-white {
    display: flex;
    align-items: center;
}
.calendar-page #events .col.text-white > .col {
    width: 100%;
    text-align: left !important;
}
.calendar-page #events h1 {                  /* "UP NEXT" */
    margin: 0 0 30px;
    font-family: futura-pt, sans-serif;
    font-weight: 400 !important;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: .14em !important;
    color: var(--cal-accent) !important;   /* light blue, like the labels */
}
.calendar-page #events h6 {                  /* orchestra + date */
    margin: 0 0 24px;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.25;
    text-transform: none;
    color: #fff !important;
}
.calendar-page #events h6 a {
    display: inline-block;
    margin-top: 12px;
    font-family: futura-pt, sans-serif;
    font-weight: 500 !important;
    font-size: 21px;
    letter-spacing: .08em;
    color: #fff !important;
    transition: color .3s ease;
}
.calendar-page #events h6 a:hover { color: var(--cal-accent) !important; }
.calendar-page #events p {
    margin: 0 0 26px;
    padding-top: 20px;
    border-top: 1px solid var(--cal-rule);
    font-size: 18px;
    line-height: 1.7;
    color: var(--cal-text);
}
.calendar-page #events p strong { font-weight: 400; letter-spacing: .08em; color: #fff; }
.calendar-page #events p + p {               /* performers etc. (filled in by js/calendar-upnext.js) */
    margin-top: -12px;
    padding-top: 0;
    border-top: 0;
    font-size: 16px;
    color: var(--cal-muted);
}


/* -------------------------------------------------------------------
   2. Season lists
---------------------------------------------------------------------- */
.calendar-page #current {
    overflow: visible;                       /* theme sets hidden; needed for the sticky season menu */
    overflow-x: clip;
    background: var(--cal-bg) !important;
    color: var(--cal-text);
}
.calendar-page #current main > h2 {          /* "2026-2027 Season" */
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 44px;
    font-family: futura-pt, sans-serif;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--cal-accent) !important;
}
.calendar-page #current main > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cal-rule);
}
/* Past Events: season titles ("2025-2026 Season" ...) a little bigger, since they divide a long page */
.calendar-page #current .cal-season main > h2 { font-size: 19px; letter-spacing: .24em; margin-bottom: 48px; }
.calendar-page #current .cal-season main > h2::after { content: none; }   /* no thin line after the title */

/* event card: photo | details, side by side, no overlap */
.calendar-page .calendar-post-content {
    display: grid !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    margin: 0 0 32px !important;
    padding: 0 !important;
    border: 1px solid transparent;
    background: var(--cal-card-bg);
    transition: border-color .6s ease;
}
.calendar-page .calendar-post-content > .calendar-image,
.calendar-page .calendar-post-content > .calendar-text {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
/* photo fills the full height of the card (cropped to fit) */
.calendar-page .calendar-image {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
.calendar-page .calendar-image a,
.calendar-page .calendar-image img {
    display: block;
    width: 100%;
    height: 100%;
}
.calendar-page .calendar-image img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: .82;
    transition: opacity .6s ease !important;
}
/* hover: no zoom - the photo gently brightens and a hairline frames the card */
.calendar-page .calendar-post-content:hover { border-color: rgba(209, 227, 227, .28); }
.calendar-page .calendar-post-content:hover .calendar-image img { opacity: 1; }

.calendar-page .calendar-text {
    background: transparent !important;
    display: flex;
    align-items: center;
}
.calendar-page .calendar-text .content {
    width: 100%;
    margin: 0 !important;
    padding: 46px 48px 44px !important;
}

/* orchestra name + dates */
.calendar-page .calendar-text h6 {
    margin: 0 0 24px;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.25;
    text-transform: none;
    color: #fff !important;
}
.calendar-page .calendar-text h6 a,
.calendar-page .calendar-text h6 span {
    display: inline-block;
    margin: 10px 0 0 !important;
    font-family: futura-pt, sans-serif;
    font-weight: 500 !important;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: .08em;
    color: #fff !important;
    transition: color .3s ease;
}
.calendar-page .calendar-text h6 a:hover { color: var(--cal-accent) !important; }
.calendar-page .calendar-text h6 div.text-uppercase {   /* venue lines inside h6 (old markup) */
    margin: 18px 0 0 !important;
    color: var(--cal-muted) !important;
}

/* several performances at different venues (e.g. Paris):
   <div class="cal-stop"> venue label + date, one block each */
.calendar-page .cal-stop { margin: 0 0 22px; }
.calendar-page .cal-stop div.text-uppercase { margin: 0 0 6px !important; }
.calendar-page .cal-stop__date {
    display: inline-block;
    font-family: futura-pt, sans-serif;
    font-weight: 500 !important;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff !important;
    transition: color .3s ease;
}
.calendar-page .cal-stop__date:hover { color: var(--cal-accent) !important; }
.calendar-page #events .cal-stop__date { font-size: 21px; }
.calendar-page .cal-stop:last-of-type { margin-bottom: 26px; }

/* programme, then performers / description in a softer tone */
.calendar-page .calendar-text p {
    margin: 0 0 18px !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cal-muted);
}
.calendar-page .calendar-text h6 + p,
.calendar-page .calendar-text .cal-stop + p {
    padding-top: 20px;
    border-top: 1px solid var(--cal-rule);
    font-size: 17px;
    color: var(--cal-text);
}
.calendar-page .calendar-text p strong { font-weight: 400; letter-spacing: .08em; color: #fff; }
.calendar-page .calendar-text p:last-of-type { margin-bottom: 26px !important; }
.calendar-page .calendar-text .content > p:last-child { margin-bottom: 0 !important; }

/* "Past Performances + Events" / "Current Season" */
.calendar-page .cal-more,
.calendar-page main > .col-12.text-center {
    padding-top: 30px;
    text-align: center;
}
.calendar-page main > .col-12.text-center .btn {
    padding: 16px 34px !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    background: transparent !important;
    font-family: futura-pt, sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    letter-spacing: .24em !important;
    color: #fff !important;
    transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.calendar-page main > .col-12.text-center .btn:hover {
    border-color: var(--cal-accent) !important;
    background: rgba(209, 227, 227, .1) !important;
    color: var(--cal-accent) !important;
}
/* calendar/index.html: "Past Performances + Events" a little larger */
.calendar-page main > .col-12.text-center .btn[href="past-events.html"] {
    padding: 20px 46px !important;
    font-size: 15px !important;
}
@media (max-width: 767px) {
    .calendar-page main > .col-12.text-center .btn[href="past-events.html"] {
        padding: 18px 22px !important;
        font-size: 14px !important;
        letter-spacing: .16em !important;
    }
}


/* -------------------------------------------------------------------
   Photo credit (optional, any event photo or the Up Next photo)
   Put it right after the image link, inside the image column:
     <span class="cal-credit">Photo credit &copy;Name Surname</span>
   Shows on phones too (bottom right of the photo).
---------------------------------------------------------------------- */
.cal-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    max-width: 100%;
    padding: 6px 10px 5px 16px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 18%);
    font-family: futura-pt, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .08em;
    color: rgba(236, 233, 229, .75);
    pointer-events: none;
}
.calendar-page #events > .container-fluid > .row > .col:first-child { position: relative; }


/* -------------------------------------------------------------------
   3. Past events: intro + season jump menu (same as the Insight page)
---------------------------------------------------------------------- */
.cal-intro {
    padding: 170px 15px 56px;                /* clears the fixed logo bar */
    text-align: center;
}
.cal-intro .cal-eyebrow { margin-bottom: 18px !important; font-size: 13px !important; letter-spacing: .28em; }
.cal-intro h1 {
    margin: 0;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.cal-seasons {
    position: sticky;
    top: 0;
    z-index: 20;                             /* under the logo bar (99) */
    margin: 0 0 20px;
    background: rgba(13, 12, 11, .94);
    border-top: 1px solid var(--cal-rule);
    border-bottom: 1px solid var(--cal-rule);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cal-seasons__list {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
    padding: 0 15px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.cal-seasons__list::-webkit-scrollbar { display: none; }
.cal-seasons__list li { flex: none; margin: 0; }
.cal-seasons__list a {
    position: relative;
    display: block;
    padding: 20px 22px 19px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .2em;
    white-space: nowrap;
    color: var(--cal-muted);
    transition: color .3s ease;
}
.cal-seasons__list a::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 1px;
    background: var(--cal-accent);
    transform: scaleX(0);
    transition: transform .4s ease;
}
.cal-seasons__list a:hover { color: #fff; }
.cal-seasons__list a.is-current { color: var(--cal-accent); }
.cal-seasons__list a.is-current::after { transform: scaleX(1); }

.calendar-page .cal-season { scroll-margin-top: 90px; }


/* -------------------------------------------------------------------
   Tablet
---------------------------------------------------------------------- */
@media (max-width: 991px) {
    .calendar-page #events h1 { font-size: 42px; }
    .calendar-page #events > .container-fluid > .row > .col:first-child { min-height: 420px; }
    .calendar-page .calendar-text .content { padding: 36px 34px !important; }
    .cal-intro { padding-top: 150px; }
    .cal-intro h1 { font-size: 46px; }
}


/* phones and tablets (where the photo would stack on top):
   no photo beside "Up Next", the details stand alone */
@media (max-width: 991px) {
    .calendar-page #events > .container-fluid > .row > .col:first-child { display: none !important; }
}

/* -------------------------------------------------------------------
   Mobile: photo on top, details underneath
---------------------------------------------------------------------- */
@media (max-width: 767px) {
    .calendar-page #events h1 { font-size: 26px; margin-bottom: 20px; }   /* page titles stay smaller than the logo on phones */
    .calendar-page #events h6 { font-size: 23px; }
    .calendar-page #events h6 a { font-size: 18px; }
    .calendar-page #events p { font-size: 17.5px; line-height: 1.65; }

    .calendar-page #current main > h2 { margin-bottom: 30px; font-size: 12px; }
    .calendar-page #current .cal-season main > h2 { margin-bottom: 32px; font-size: 16.5px; letter-spacing: .2em; }

    .calendar-page .calendar-post-content { grid-template-columns: 1fr; margin-bottom: 28px !important; }
    .calendar-page .calendar-image { aspect-ratio: 3 / 2; min-height: 0; }
    .calendar-page .calendar-text .content { padding: 28px 22px 30px !important; }
    .calendar-page .calendar-text h6 { font-size: 22px; }
    .calendar-page .calendar-text h6 a,
    .calendar-page .calendar-text h6 span { font-size: 17px; }
    .calendar-page .calendar-text h6 + p,
    .calendar-page .calendar-text .cal-stop + p { font-size: 17.5px; line-height: 1.65; }
    .calendar-page .cal-stop__date,
    .calendar-page #events .cal-stop__date { font-size: 17px; }
    .calendar-page .calendar-text p { font-size: 16.5px; line-height: 1.65; }
    .calendar-page .calendar-text .btn { margin-top: 4px !important; }

    .cal-intro { padding: 120px 15px 40px; }
    .cal-intro h1 { font-size: 26px; }
    .cal-seasons__list {
        justify-content: flex-start;
        gap: 0;
        padding: 0 6px;
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }
    .cal-seasons__list.is-end { -webkit-mask-image: none; mask-image: none; }
    .cal-seasons__list a { padding: 18px 14px 17px; font-size: 13px; letter-spacing: .14em; }
    .cal-seasons__list a::after { left: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-page .calendar-image img,
    .calendar-page .calendar-post-content { transition: none !important; }
}