/*
 * The site loads Titillium Web only in its light weight, so bold text looks the same as normal text.
 * Concert texts are written with bold in /admin, so they get a real bold weight (self-hosted, OFL).
 */
@font-face {
    font-family: "Titillium Web Bold";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/titillium-web-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Titillium Web Bold";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/titillium-web-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.timeline {
    /* px rather than em, so the "danas" marker with its smaller font lines up with the line */
    --label-height: 136px;
    --dot-row: 26px;
    --past-color: #b5b5b5;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    width: 95%;
    padding: 26px 0 6px;
    list-style: none;
    overflow-x: auto;
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--label-height) + var(--dot-row) / 2 - 1.5px);
    height: 3px;
    background-color: var(--past-color);
}

.timeline-item:first-child::before {
    left: 50%;
}

.timeline-item:last-child::before {
    right: 50%;
}

.timeline-upcoming::before {
    background-color: var(--main-color);
}

.timeline-link {
    display: grid;
    grid-template-rows: var(--label-height) var(--dot-row) var(--label-height);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 0 8px;
    color: black;
    text-align: center;
    text-decoration: none;
}

.timeline-dot {
    grid-row: 2;
    align-self: center;
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--past-color);
    background-color: white;
    transition: transform 0.2s ease-in-out;
}

.timeline-upcoming .timeline-dot {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.timeline-label {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    padding-bottom: 6px;
    line-height: 1.25;
}

.timeline-item:nth-child(even) .timeline-label {
    grid-row: 3;
    justify-content: flex-start;
    padding: 6px 0 0;
}

.timeline-label time {
    font-weight: bold;
    color: #777;
}

.timeline-upcoming .timeline-label time {
    color: var(--main-color);
}

.timeline-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 18px;
    font-weight: bold;
}

.timeline-place {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #555;
}

.timeline-link:hover .timeline-dot,
.timeline-link:focus-visible .timeline-dot {
    transform: scale(1.35);
}

.timeline-link:hover .timeline-title {
    color: var(--main-color);
}

.timeline-link:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
    border-radius: 6px;
}

.timeline-today {
    position: absolute;
    z-index: 2;
    left: 0;
    top: calc(var(--label-height) + var(--dot-row) / 2);
    transform: translate(-50%, -50%);
    padding: 0 6px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--main-color);
    background-color: white;
    border: 2px solid var(--main-color);
    border-radius: 10px;
}

.timeline-all {
    margin-top: 10px;
}

.timeline-year {
    position: absolute;
    left: 0;
    top: -26px;
    bottom: 0;
    padding-left: 6px;
    border-left: 2px dashed #d5d5d5;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    color: var(--main-color);
    pointer-events: none;
}

.timeline-item:first-child .timeline-year {
    border-left-color: transparent;
}

/* all concerts page */

.timeline-scroll {
    position: relative;
    width: 95%;
}

.timeline-scroll .timeline {
    grid-auto-columns: 190px;
    width: 100%;
    scrollbar-width: thin;
}

.timeline-scroll .timeline {
    cursor: grab;
}

.timeline-scroll .timeline.timeline-dragging {
    cursor: grabbing;
    user-select: none;
}

.timeline-dragging .timeline-link {
    cursor: grabbing;
}

/* homepage: the whole timeline with arrows on computers, the short list on phones */

.timeline-phone {
    display: none;
}

.timeline-arrow {
    position: absolute;
    z-index: 3;
    top: calc(26px + var(--label-height, 136px) + 13px);
    transform: translateY(-50%);
    width: 40px;
    height: 56px;
    font-size: 24px;
    font-weight: bold;
    color: black;
    background-color: rgba(238, 238, 238, 0.9);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.timeline-arrow:hover {
    color: white;
    background-color: var(--main-color);
}

.timeline-back {
    left: -10px;
}

.timeline-forward {
    right: -10px;
}

/* concert page */

.concert > * {
    width: 90%;
    max-width: 900px;
}

.concert-back {
    margin-top: 10px;
}

.concert-back a {
    font-weight: bold;
    text-decoration: none;
}

.concert-title {
    margin-bottom: 0;
}

.concert-meta {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    color: #555;
}

/* the arrows sit beside the photo, like the ones on the homepage */
.concert > .concert-slideshow {
    max-width: calc(900px + 2 * 60px);
}

.concert-stage {
    position: relative;
}

.concert-stage-arrows {
    padding: 0 60px;
}

.concert-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgb(27, 26, 18);
}

.concert-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.concert-slide[hidden] {
    display: none;
}

.concert-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 56px;
    font-size: 24px;
    font-weight: bold;
    color: black;
    background-color: rgb(231, 231, 231);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}

.concert-arrow:hover {
    color: white;
    background-color: var(--main-color);
}

.concert-prev {
    left: 0;
}

.concert-next {
    right: 0;
}

.concert-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* A 12px dot with room around it, so it's big enough to tap with a finger. */
.concert-dot {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 50%;
    border: none;
    background-color: #ccc;
    background-clip: content-box;
    cursor: pointer;
}

.concert-dot[aria-current="true"] {
    background-color: var(--main-color);
}

.concert-text {
    max-width: 760px;
    margin: 30px 0 20px;
    font-size: 19px;
}

.concert-text > * + * {
    margin-top: 0.8em;
}

.concert-text strong,
.concert-text h3 {
    font-family: "Titillium Web Bold", "Titillium Web", sans-serif;
    font-weight: 600;
}

.concert-text h3 {
    font-size: 25px;
    color: var(--main-color);
}

.concert-text ul,
.concert-text ol {
    padding-left: 1.5em;
}

.concert-text ul li {
    list-style-type: disc;
}

.concert-text ol li {
    list-style-type: decimal;
}

.concert-text a {
    color: var(--main-color);
}

.concert-more {
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: bold;
}

.concert-more a {
    text-decoration: none;
}

.concert-text blockquote {
    padding-left: 1em;
    border-left: 4px solid var(--main-color);
    font-style: italic;
}