/* LBS-SPORT x SALOMON contest landing.
   Design tokens taken from lbs-sport.cz (custom.css). */

:root {
  --black: #1f1f1f;
  --yellow: #ffd938;
  --yellow-dark: #f0c800;
  --blue: #07598e;
  --bg: #f4f4f4;
  --white: #ffffff;
  --grey-line: #d8d8d8;
  --grey-text: #6b6b6b;
  --error: #c02718;
  --ok: #1e7a3c;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 68rem;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 8px 24px rgba(0, 0, 0, .06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--black);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
/* height:auto is required, otherwise the HTML height attribute beats aspect-ratio on the hero */
img { height: auto; }

/* The hidden attribute must beat our own display rules (e.g. .preview{display:flex}) */
[hidden] { display: none !important; }

a { color: var(--blue); }

h1, h2, h3 { line-height: 1.1; letter-spacing: -.01em; margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 50;
  background: var(--yellow); color: var(--black); font-weight: 700;
  padding: .6rem 1rem; border-radius: var(--radius); transition: top .15s;
}
.skip-link:focus { top: .5rem; }

:where(a, button, input, select, label.dropzone):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- header ---------- */

.site-header { background: var(--white); border-bottom: 1px solid var(--grey-line); }
.site-header__inner { display: flex; align-items: center; gap: .75rem; height: 4rem; }
.logo-lbs { height: 2rem; width: auto; }
.logo-x { color: var(--grey-text); font-size: 1rem; }
.logo-salomon {
  font-weight: 800; font-size: 1.05rem; letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- hero ----------
   Geometrie prevzata z klicoveho vizualu zmerenim po pixelech: hlavni zluty
   pruh vede od 59,8 % nahore k 36 % dole (sklon 0,238 % sirky na 1 % vysky),
   kratke akcenty u horni a dolni hrany, rohovy klin je trojuhelnik od rohu.
   Rozdil proti vizualu je, ze fotka je skutecna a text je v HTML - da se
   precist prectecem obrazovky a meni se bez prekreslovani grafiky.
   Na mobilu se skladba sklada pod sebe, stejne jako vizual 9:16. */

.hero { position: relative; background: var(--black); color: var(--white); isolation: isolate; overflow: hidden; }

/* Mobil: fotka nahore, cerny panel s textem pod ni. Sikme prvky se nekresli. */
.hero__media { display: block; }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.hero__panel, .hero__bar { display: none; }

.hero__text { position: relative; z-index: 2; padding: 1.5rem 1.25rem 1.75rem; border-top: 6px solid var(--yellow); }
.hero__claim {
  font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.025em; line-height: .98;
}
.hero__sub { margin: 1rem 0 0; color: #cfcfcf; font-size: 1rem; line-height: 1.45; }
.hero__sub br { display: none; }
.hero__lockup {
  margin: 1.5rem 0 0; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: #9a9a9a;
}
.hero__lockup b { color: var(--white); font-weight: 800; letter-spacing: .1em; }

/* ---------- desktop: rekonstrukce puvodniho klicoveho vizualu ----------
   Vsechny sikme prvky jsou obdelniky se stejnym zkosenim (skewX), takze
   uhel diagonaly je 23,07 stupne bez ohledu na to, jak je sekce siroka
   nebo vysoka. Cisla jsou odmerena z podklady/grafika/kv-lcd-web-16x9.png:
   prava hrana cerneho panelu je u horni hrany na 59,84 % sirky a klesa
   doleva, hlavni zluty pruh lezi presne ve spare mezi panelem a fotkou. */

@media (min-width: 768px) {
  .hero {
    --tilt: -23.07deg;
    --edge: 59.84%;
    --w-main: clamp(2.2rem, 3.5vw, 3.6rem);
    --w-thin: clamp(.7rem, 1.1vw, 1.15rem);
    --w-foot: clamp(1.05rem, 1.75vw, 1.8rem);
    min-height: clamp(28rem, 46vw, 42rem);
    display: grid;
  }
  .hero > * { grid-area: 1 / 1; }

  /* Fotka jde pres celou plochu, levou cast prekryje cerny panel. */
  .hero__media { height: 100%; }
  .hero__img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 66% 26%; }

  .hero__panel, .hero__bar {
    display: block; position: absolute; top: 0; bottom: 0; z-index: 1;
    transform-origin: 0 0; transform: skewX(var(--tilt)); pointer-events: none;
  }
  .hero__panel { left: -60%; right: calc(100% - var(--edge)); background: var(--black); }
  .hero__bar { background: var(--yellow); }

  /* Hlavni pruh ve spare mezi panelem a fotkou. */
  .hero__bar--main { left: var(--edge); width: var(--w-main); }

  /* Klin v levem hornim rohu: zkoseny pruh se sam "zavre" na leve hrane. */
  .hero__bar--corner { left: 0; width: 6.64%; }

  /* Kratky akcent u horni hrany, vlevo od hlavniho pruhu.
     Spodni konec je zaskrizeny kolmo k pruhu (odtud koeficient 1,1737). */
  .hero__bar--thin {
    left: calc(var(--edge) - 1.2% - var(--w-thin)); width: var(--w-thin); bottom: 77.5%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.1737 * var(--w-thin)));
  }

  /* Dvojice kratkych akcentu u dolni hrany - jeden na panelu, druhy na fotce. */
  .hero__bar--foot-l, .hero__bar--foot-r {
    top: 82.5%;
    clip-path: polygon(0 0, 100% calc(1.1737 * var(--w-foot)), 100% 100%, 0 100%);
  }
  .hero__bar--foot-l { left: calc(var(--edge) - 2% - var(--w-foot)); width: var(--w-foot); }
  .hero__bar--foot-r { left: calc(var(--edge) + var(--w-main) + 1.7%); width: var(--w-foot); }

  .hero__text {
    border-top: 0; display: flex; flex-direction: column; max-width: 48%;
    padding: clamp(2rem, 5vw, 4.6rem) 0 clamp(1.6rem, 4vw, 3.4rem) clamp(1.5rem, 6.1vw, 6rem);
  }
  .hero__claim { font-size: clamp(2.4rem, 5.75vw, 5.6rem); }
  .hero__sub {
    font-size: clamp(1rem, 1.8vw, 1.7rem); color: #d4d4d4;
    margin-top: clamp(1.2rem, 2.6vw, 2.6rem);
  }
  .hero__sub br { display: inline; }
  .hero__lockup { margin-top: auto; padding-top: 2rem; font-size: .82rem; }
}

.hero__cta { background: var(--yellow); }
.hero__cta .btn {
  display: flex; width: 100%; justify-content: center;
  border-radius: 0; padding-block: 1.5rem;
}

/* Hlavni vyzva na strance - zamerne vetsi nez ostatni tlacitka. */
.btn--hero { font-size: 1.25rem; letter-spacing: .06em; gap: .7rem; }
.btn__arrow { flex: none; animation: nudge 2.4s ease-in-out infinite; }

@keyframes nudge {
  0%, 82%, 100% { transform: translateY(0); }
  88% { transform: translateY(4px); }
  94% { transform: translateY(0); }
}

@media (min-width: 640px) {
  .btn--hero { font-size: 1.4rem; }
  .hero__cta .btn { padding-block: 1.7rem; }
}

/* ---------- plovouci CTA ---------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(31, 31, 31, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
  transform: translateY(100%);
  transition: transform .25s ease-out;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { font-size: 1.02rem; padding-block: .95rem; }

/* ---------- podminka ucasti ----------
   Hned pod hero CTA, aby ji nesel prehlednout nikdo, kdo prisel ze skenu QR. */

.condition { background: var(--black); color: var(--white); padding-block: 1.1rem; }
.condition__inner { border-left: 5px solid var(--yellow); padding-left: 1rem; }
.condition__main { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.condition__main strong { background: var(--yellow); color: var(--black); padding: .1rem .35rem; border-radius: 3px; }
.condition__sub { margin: .4rem 0 0; font-size: .88rem; color: #b8b8b8; }

@media (min-width: 640px) {
  .condition__main { font-size: 1.15rem; }
}

/* ---------- facts ---------- */

.facts {
  display: grid; gap: 1rem; padding-block: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem; border-left: 5px solid var(--yellow);
}
.fact__label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-text);
}
.fact__value { display: block; font-size: 1.1rem; margin-block: .25rem .15rem; }
.fact__note { display: block; font-size: .88rem; color: var(--grey-text); }

/* ---------- steps ---------- */

.steps { padding-bottom: 2.5rem; }
.steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.step__num {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: var(--black); color: var(--yellow);
  font-weight: 800; font-size: 1.1rem; border-radius: var(--radius);
  margin-bottom: .6rem;
}
.step__title {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .3rem;
}
.step__text { margin: 0; color: var(--grey-text); font-size: .95rem; }

/* ---------- form ---------- */

.form-section { background: var(--black); color: var(--white); padding-block: 2.5rem 3rem; }
.form-section__title {
  font-size: clamp(1.5rem, 5vw, 2rem); text-transform: uppercase; letter-spacing: -.01em;
}
.form-section__title::after {
  content: ""; display: block; width: 3.5rem; height: 5px;
  background: var(--yellow); margin-top: .7rem;
}
.form-section__lead { color: #c9c9c9; margin: .9rem 0 1.75rem; max-width: 42rem; }

.form {
  background: var(--white); color: var(--black);
  border-radius: var(--radius); padding: 1.5rem 1.25rem 1.75rem;
  max-width: 40rem;
}
@media (min-width: 640px) { .form { padding: 2rem; } }

.field { margin-bottom: 1.15rem; }
.field__label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .35rem; }
.req { color: var(--error); }

.field__input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--black);
  background: var(--white);
  padding: .75rem .9rem; border: 2px solid var(--grey-line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.field__input::placeholder { color: #a8a8a8; }
.field__input:focus { border-color: var(--black); outline: none; box-shadow: 0 0 0 3px rgba(255, 217, 56, .55); }

.field__input--select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-right: 2.6rem; }

.field.is-invalid .field__input { border-color: var(--error); }
.field.is-valid .field__input { border-color: var(--ok); }

.field__msg { margin: .35rem 0 0; font-size: .85rem; min-height: 1.1em; color: var(--error); }
.field__msg--hint { color: var(--grey-text); }
.field__hint { margin: .5rem 0 0; font-size: .84rem; color: var(--grey-text); line-height: 1.45; }
.field__msg--hint button {
  font: inherit; font-weight: 700; color: var(--blue); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

/* dropzone + preview */

.dropzone {
  display: flex; align-items: center; gap: .9rem; cursor: pointer;
  padding: 1.1rem; border: 2px dashed var(--grey-line); border-radius: var(--radius);
  background: #fafafa; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--black); background: #f2f2f2; }
.dropzone__icon { color: var(--black); flex: none; }
.dropzone__text { font-size: .9rem; color: var(--grey-text); line-height: 1.4; }
.dropzone__text strong { color: var(--black); font-size: .98rem; }
.field.is-invalid .dropzone { border-color: var(--error); }

.preview-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }

.preview {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .75rem; border: 2px solid var(--ok); border-radius: var(--radius); background: #f6fbf7;
}
.preview__img {
  width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--radius);
  background: var(--grey-line); flex: none;
}
.preview__meta { flex: 1; min-width: 0; font-size: .86rem; }
.preview__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview__size { color: var(--grey-text); }
.preview__remove {
  flex: none; width: 2rem; height: 2rem; font: inherit; font-size: 1.35rem; line-height: 1;
  color: var(--grey-text); background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.preview__remove:hover { color: var(--error); background: #fdecea; }

.btn--add { width: 100%; margin-bottom: .5rem; font-size: .88rem; padding-block: .7rem; }

/* consents */

.consents { margin: 1.5rem 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--grey-line); }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .92rem; }
.check + .check { margin-top: 1rem; }
.check--optional { padding-top: 1rem; border-top: 1px dashed var(--grey-line); }
.check__box { flex: none; width: 1.25rem; height: 1.25rem; margin: .12rem 0 0; accent-color: var(--black); }
.check__text em { color: var(--grey-text); font-style: normal; display: block; font-size: .85rem; }
.check[data-field].is-invalid .check__text { color: var(--error); }

.turnstile { margin-bottom: 1rem; }

/* buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 800; font-size: .98rem;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  padding: .85rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background .15s, transform .1s, opacity .15s;
}
.btn--primary { background: var(--yellow); color: var(--black); }
.btn--primary:hover:not(:disabled) { background: var(--yellow-dark); }
.btn--primary:active:not(:disabled) { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--white); }
.btn--block { width: 100%; }
.btn--sm { padding: .5rem .9rem; font-size: .82rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* progress + errors */

.progress { margin-top: 1rem; }
.progress__bar {
  height: 6px; width: 0%; background: var(--yellow); border-radius: 3px;
  transition: width .2s ease-out;
}
.progress__text { display: block; font-size: .85rem; color: var(--grey-text); margin-top: .4rem; }

.form__error {
  margin: 0 0 1rem; padding: .8rem 1rem; font-size: .92rem;
  background: #fdecea; border-left: 4px solid var(--error); color: #7d1a10;
}
.form__footnote { margin: 1.25rem 0 0; font-size: .82rem; color: var(--grey-text); }

/* success */

.success {
  /* Without an explicit color it would inherit white from .form-section - white on white. */
  background: var(--white); color: var(--black); border-radius: var(--radius);
  padding: 2.5rem 1.5rem; text-align: center; max-width: 40rem;
}
.success__check { margin: 0 auto 1rem; }
.success__circle { stroke: var(--ok); stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .5s ease-out forwards; }
.success__mark { stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .3s .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.success__title { font-size: 1.5rem; text-transform: uppercase; }
.success__ref { font-size: 1.15rem; margin: .75rem 0 .25rem; }
.success__ref strong { background: var(--yellow); padding: .15rem .5rem; border-radius: var(--radius); }
.success__text { color: var(--grey-text); margin: 0 0 1.5rem; }

/* ---------- footer ---------- */

.site-footer { background: var(--black); color: #b8b8b8; padding-block: 2rem; font-size: .88rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }
.site-footer__links a { color: var(--white); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.site-footer__links a:hover { color: var(--yellow); }
.site-footer__meta, .site-footer__disclaimer { margin: .35rem 0 0; }
.site-footer__disclaimer { color: #8a8a8a; font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn__arrow { animation: none; }
  .sticky-cta { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .success__circle, .success__mark { stroke-dashoffset: 0; }
}

/* ---------- text pages (pravidla, gdpr, 404) ---------- */

.doc { padding-block: 2.5rem 3.5rem; max-width: 48rem; }
.doc__badge {
  display: inline-block; background: var(--yellow); color: var(--black);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--radius); margin-bottom: 1rem;
}
.doc h1 { font-size: clamp(1.6rem, 6vw, 2.25rem); text-transform: uppercase; }
.doc h1::after { content: ""; display: block; width: 3.5rem; height: 5px; background: var(--yellow); margin-top: .8rem; }
.doc h2 { font-size: 1.15rem; margin-top: 2.25rem; text-transform: uppercase; letter-spacing: .02em; }
.doc h3 { font-size: 1rem; margin-top: 1.5rem; }
.doc p, .doc li { color: #3c3c3c; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin-bottom: .4rem; }
.doc__meta { color: var(--grey-text); font-size: .88rem; }
.doc__back { display: inline-block; margin-top: 2.5rem; }

/* ---------- galerie z Nového Města ----------
   Fotky od Salomonu z reálných závodů. Načítají se odloženě a mají pevný poměr
   stran, takže se stránka pod nimi nehýbe a Lighthouse skóre neklesá. */

.gallery {
  padding-block: 2.5rem 3rem;
  /* Prohlížeč nemusí řešit rozvržení sekce, dokud se k ní nedoscrolluje. */
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.gallery__title {
  font-size: clamp(1.4rem, 5vw, 1.9rem); text-transform: uppercase; letter-spacing: -.01em;
}
.gallery__title::after {
  content: ""; display: block; width: 3.5rem; height: 5px;
  background: var(--yellow); margin-top: .7rem;
}
.gallery__lead { margin: .9rem 0 1.5rem; color: var(--grey-text); max-width: 42rem; }

.gallery__grid {
  /* margin-block, ne margin - jinak by se prepsalo margin-inline: auto
     z .wrap a mrizka by se prilepila k levemu okraji. */
  list-style: none; margin-block: 0; padding-inline: 1.25rem;
  display: grid; gap: .75rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  /* Nejsilnější snímek dostane dvojnásobnou šířku i výšku. Ve třech sloupcích
     vedle něj vyjdou dvě dlaždice na sebe a spodní řada tři - mřížka zůstane
     zaplněná bez děr. */
  .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--black);
  aspect-ratio: 3 / 2;
}
@media (min-width: 960px) {
  .gallery__item:first-child { aspect-ratio: auto; }
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease-out;
}
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.04); }
}

.gallery__credit { margin-block: 1rem 0; font-size: .8rem; color: var(--grey-text); }

/* Nabíhání při scrollování - čistě v CSS, bez JavaScriptu. Prohlížeče, které to
   neumí, prostě ukážou fotky rovnou. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gallery__item {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }
  }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- prohlizec fotek ---------- */

.gallery__open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.gallery__open:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: rgba(15, 15, 15, .96);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(15, 15, 15, .9); }
.lightbox[open] { display: grid; place-items: center; }

.lightbox__img {
  max-width: min(96vw, 1600px); max-height: 84dvh;
  width: auto; height: auto; object-fit: contain; border-radius: var(--radius);
}

.lightbox__close,
.lightbox__nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  font: inherit; color: var(--white); background: rgba(0, 0, 0, .55);
  border: 0; border-radius: 999px; cursor: pointer; line-height: 1;
}
.lightbox__close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.9rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2.2rem; }
.lightbox__nav--prev { left: .75rem; }
.lightbox__nav--next { right: .75rem; }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--yellow); color: var(--black); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.lightbox__counter {
  position: absolute; bottom: 1.1rem; left: 0; right: 0; margin: 0;
  text-align: center; color: #c2c2c2; font-size: .85rem;
}

@media (min-width: 640px) {
  .lightbox__nav { width: 3.5rem; height: 3.5rem; }
  .lightbox__nav--prev { left: 1.5rem; }
  .lightbox__nav--next { right: 1.5rem; }
}