/* TelosCMS modules: gallery (tg), carousel (tc) and side menu (sidemenu). Plain and themeable: change the variables or override the classes. */

/* ---------- Gallery ---------- */
.tg { --tg-gap: .75rem; --tg-radius: .5rem; }
.tg--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--tg-gap); }
.tg--grid .tg__item { aspect-ratio: 1 / 1; }
.tg--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--tg-gap); }
.tg--wide .tg__item { aspect-ratio: 3 / 2; }
.tg--mosaic { column-width: 14rem; column-gap: var(--tg-gap); }
.tg--mosaic .tg__item { break-inside: avoid; margin-bottom: var(--tg-gap); }
.tg__item { position: relative; display: block; overflow: hidden; border-radius: var(--tg-radius); background: rgba(127, 127, 127, .15); color: inherit; text-decoration: none; }
.tg__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tg--mosaic .tg__item img { height: auto; }
.tg__item:hover img, .tg__item:focus-visible img { transform: scale(1.04); }
.tg__item:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.tg__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .7rem .55rem; font-size: .9rem; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }

/* The enlarged picture */
.tg-lightbox { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; color: #fff; }
.tg-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.tg-lightbox__stage { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 4rem; }
.tg-lightbox__img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: .25rem; }
.tg-lightbox__cap { margin-top: .8rem; min-height: 1.5rem; text-align: center; font-size: 1rem; }
.tg-lightbox__count { position: fixed; top: 1.2rem; left: 1.3rem; font-size: .9rem; opacity: .85; }
.tg-lightbox__btn { position: fixed; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.tg-lightbox__btn:hover, .tg-lightbox__btn:focus-visible { background: rgba(255, 255, 255, .32); outline: none; }
.tg-lightbox__close { top: 1rem; right: 1rem; }
.tg-lightbox__prev { left: .8rem; top: 50%; transform: translateY(-50%); }
.tg-lightbox__next { right: .8rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) { .tg-lightbox__stage { padding: 3.5rem .5rem 2rem; } .tg-lightbox__prev, .tg-lightbox__next { top: auto; bottom: 1rem; transform: none; } }

/* ---------- Carousel ---------- */
.tc { --tc-ratio: 16 / 9; --tc-radius: .75rem; position: relative; overflow: hidden; border-radius: var(--tc-radius); background: rgba(127, 127, 127, .15); }
.tc:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.tc__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tc__track::-webkit-scrollbar { display: none; }
.tc__slide { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: var(--tc-ratio); scroll-snap-align: center; }
.tc__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.2rem 2.2rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .68)); }
.tc__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 4rem 2.6rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.tc__heading { margin: 0 0 .3rem; font-size: 1.6rem; color: inherit; }
.tc__para { margin: 0 0 .8rem; max-width: 40rem; }
.tc__btn { display: inline-block; padding: .45rem 1.1rem; border-radius: 2rem; background: #fff; color: #111; font-weight: 600; text-decoration: none; }
.tc__btn:hover, .tc__btn:focus-visible { background: #e8e8e8; color: #000; }
.tc__text ~ .tc__cap, .tc__cap:has(~ .tc__text) { display: none; }
.tc__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; padding: 0 0 .15rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.tc__nav:hover, .tc__nav:focus-visible { background: rgba(0, 0, 0, .7); outline: none; }
.tc__prev { left: .6rem; }
.tc__next { right: .6rem; }
.tc__dots { position: absolute; left: 0; right: 0; bottom: .7rem; display: flex; justify-content: center; gap: .45rem; pointer-events: none; }
.tc__dot { width: .7rem; height: .7rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); cursor: pointer; pointer-events: auto; }
.tc__dot[aria-current="true"] { background: #fff; transform: scale(1.3); }
/* Fade (needs the script; without it the pictures simply scroll sideways) */
.tc--js.tc--fade .tc__track { display: block; position: relative; overflow: hidden; aspect-ratio: var(--tc-ratio); }
.tc--js.tc--fade .tc__slide { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.tc--js.tc--fade .tc__slide.is-active { opacity: 1; pointer-events: auto; }
/* Cards: the next picture peeks in at each side */
.tc--cards { background: none; border-radius: 0; }
.tc--cards .tc__track { padding: 0 10%; scroll-padding: 0 10%; }
.tc--cards .tc__slide { flex-basis: 80%; padding: 0 .4rem; }
.tc--cards .tc__slide img { border-radius: var(--tc-radius); }
.tc--cards .tc__cap { left: .4rem; right: .4rem; border-radius: 0 0 var(--tc-radius) var(--tc-radius); }

/* ---------- Media player ---------- */
.tp { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(128, 128, 128, .3); border-radius: .6rem; }
.tp__heading { margin: 0 0 .5rem; font-size: 1.15rem; }
.tp__now { margin: 0 0 .5rem; font-weight: 600; }
.tp__media { display: block; width: 100%; }
video.tp__media { max-height: 70vh; background: #000; }
.tp__list { margin: .75rem 0 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; counter-reset: tp; }
.tp__list li { counter-increment: tp; }
.tp__track { display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: .35rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tp__track::before { content: counter(tp) ". "; opacity: .6; }
.tp__track:hover, .tp__track:focus-visible { background: rgba(128, 128, 128, .18); outline: none; }
.tp__track.is-active { font-weight: 700; background: rgba(128, 128, 128, .25); }

/* ---------- Embeds ---------- */
.te { margin: 1rem 0; }
.te__heading { margin: 0 0 .5rem; font-size: 1.15rem; }
.te__box { padding: 1.25rem; border: 1px dashed rgba(128, 128, 128, .5); border-radius: .6rem; text-align: center; }
.te__note { margin: 0 0 .75rem; font-size: .9rem; opacity: .8; }
.te__go { padding: .45rem 1.1rem; border: 0; border-radius: 2rem; background: #0d6efd; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.te__go:hover, .te__go:focus-visible { background: #0b5ed7; }
.te__link { margin-left: .5rem; font-size: .9rem; }
.te__frame { display: block; width: 100%; max-width: 100%; border: 0; border-radius: .6rem; }

/* ---------- Race results (its own classes, so they never touch ordinary tables; restyle by setting the --rr- variables) ---------- */
.race-results-wrap { overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
table.race-results { --rr-venue-bg: #5b4a85; --rr-venue-fg: #fff; --rr-head-bg: #1f2733; --rr-row-a: #2d3646; --rr-row-b: #3a4455; --rr-fg: #fff; --rr-line: rgba(255, 255, 255, .12);
  width: 100%; min-width: 34rem; border-collapse: collapse; color: var(--rr-fg); font-variant-numeric: tabular-nums; background: var(--rr-row-a); }
table.race-results th, table.race-results td { padding: .6rem .5rem; text-align: center; border: 1px solid var(--rr-line); color: var(--rr-fg); font-weight: 400; }
table.race-results th.race-results__venue { background: var(--rr-venue-bg); color: var(--rr-venue-fg); text-align: left; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: .75rem .9rem; }
table.race-results .race-results__date { margin-left: .75rem; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; }
table.race-results tr.race-results__formula th { background: var(--rr-head-bg); font-weight: 600; }
table.race-results tr.race-results__formula th:first-child, table.race-results tr.race-results__race th { text-align: left; padding-left: .9rem; white-space: nowrap; }
table.race-results tr.race-results__race th { font-weight: 400; background: transparent; }
table.race-results tbody tr.race-results__race:nth-of-type(even) { background: var(--rr-row-b); }
table.race-results tbody tr.race-results__race:nth-of-type(odd) { background: var(--rr-row-a); }

/* ---------- Side menu ---------- */
.sidemenu { font-size: .95rem; }
.sidemenu__title { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; }
.sidemenu__title a { color: inherit; text-decoration: none; }
.sidemenu__title a:hover { text-decoration: underline; }
.sidemenu__list { list-style: none; margin: 0; padding: 0; }
.sidemenu__list--2, .sidemenu__list--3, .sidemenu__list--4 { margin: .15rem 0 .3rem .45rem; padding-left: .9rem; border-left: 2px solid rgba(127, 127, 127, .3); }
.sidemenu__item > a { display: block; padding: .32rem .6rem; border-radius: .4rem; color: inherit; text-decoration: none; }
.sidemenu__item > a:hover { background: rgba(127, 127, 127, .16); }
.sidemenu__item.is-trail > a { font-weight: 600; }
.sidemenu__item.is-active > a { font-weight: 700; background: rgba(127, 127, 127, .22); }

@media (prefers-reduced-motion: reduce) {
    .tg__item img, .tc--js.tc--fade .tc__slide { transition: none; }
    .tg__item:hover img, .tg__item:focus-visible img { transform: none; }
}

/* A picture linked to a YouTube or Vimeo video: click-to-play, with a play badge over the picture (script: telos-modules.js). */
.tv-link { position: relative; display: block; cursor: pointer; }
.tv-link::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .65); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); transition: transform .15s, background .15s; z-index: 1; }
.tv-link::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; z-index: 2; }
.tv-link:hover::before, .tv-link:focus-visible::before { transform: scale(1.1); background: rgba(0, 0, 0, .8); }
.tv-link:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.tv-frame { display: block; width: 100%; max-width: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .tv-link::before { transition: none; } }