/* Story of Lights v45 -- homepage sections. Loaded after sol.css.
 *
 * MOBILE-FIRST, same as sol.css: the base rules are the 360px artboard,
 * `min-width: 768px` and `min-width: 1280px` layer the wider ones on top.
 *
 * Artboard pixel values are converted to fractions of their own container
 * wherever they sit inside a box that scales (hero, grid, cards). At 360px the
 * fractions resolve back to the exact artboard numbers; at 320 or 430 nothing
 * overflows, which fixed pixels would.
 */

/* ------------------------------------------------------------------ hero */

/* Hero per HLAVICKA_HERO_SPEC.md (Claude Design handoff 28. 8. večer):
 * the map is ONE baked graphic (background, ribbon, network, dots, names),
 * the code adds only gradients, invisible hotspots, compass and text. */
.sol-hero { background: var(--sol-black); }

.sol-hero__map {
  position: relative;
  background: var(--sol-black);   /* no flash before the map arrives */
  width: 100%;
  aspect-ratio: 360 / 475;        /* the mobile artboard's hero box */
  overflow: hidden;
}

/* On desktop the clip is the 1280x489 map window inside the 538 stack --
 * the compass is cropped at the map's bottom edge exactly like the spec. */
.sol-hero__clip { position: absolute; inset: 0; overflow: hidden; }

/* KV comment 29. 8.: the whole mobile map (art + hotspots) rides 45px lower
 * so Praha's baked label clears the claim -- spec's -30px shift +45px down. */
.sol-hero__img {
  position: absolute;
  left: 0;
  top: 3.15%;                     /* was -6.32% (spec -30px), now +15px */
  width: 100%;
  height: auto;
}

.sol-hero__markers { position: absolute; inset: 0; z-index: 1; transform: translateY(9.47%); }

/* Invisible 26px hotspots over the baked dots; coordinates come inline as
 * custom properties (--ml/--mt mobile canvas 360x475, --dl/--dt desktop
 * canvas 1280x489). */
.sol-hot {
  position: absolute;
  left: var(--ml);
  top: var(--mt);
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.sol-hero__fade { position: absolute; pointer-events: none; display: none; }
/* spec mobile: only the top blend under the header, 96px */
.sol-hero__fade--t {
  display: block;
  left: 0; right: 0; top: 0;
  height: 96px;
  background: linear-gradient(to bottom, #0a0908 0%, rgba(10, 9, 8, .7) 38%, rgba(10, 9, 8, 0) 100%);
}

/* Real reels in the CD phone-frame cards (CTO 27. 8.): thumbnail + handle +
 * views on the card, the real reel plays in a dark overlay on tap. */
.sol-ig__media { position: relative; display: block; }
.sol-ig__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(10, 9, 8, .55);
  pointer-events: none;
}
.sol-ig__play::after {
  content: "";
  position: absolute;
  left: 13px; top: 9px;
  border-left: 12px solid var(--sol-gold-light);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
/* real counts in the card bar: hearts left, plays right */
.sol-ig__bar span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sol-ig__vw { color: var(--sol-gold); }

/* No wash over the map: CD draws none. Both map images fade to pure black at
 * their own edges, so the header melts into them by itself -- an extra
 * gradient only muddied the top of the artwork (CTO 27. 8.). */
.sol-hero__markers { z-index: 1; }

/* spec mobile: 253px hanging -90px off the left edge; kept below Norimberk's
 * baked label per CTO 28. 8. večer (the spec's 150px top would cover it) */
.sol-hero__compass {
  position: absolute;
  left: -25%;
  top: 52%;
  width: 70.28%;
  height: auto;
  pointer-events: none;
}

/* One box spanning the hero: the headline sits at its top-left corner and the
 * buttons are pushed to the bottom with margin-top:auto, which is how the
 * artboard has them (title top-left, CTAs centred at the bottom). Keeping them
 * in one flex column instead of two absolutely-positioned blocks means the
 * spacing survives a longer headline in Hungarian. */
.sol-hero__text {
  position: absolute;
  inset: 22px 24px 16px 28px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.sol-hero__h1 {
  margin: 0;
  font-size: clamp(34px, 11.9vw, 43px);
  line-height: 1.093;
  font-weight: 500;
  color: var(--sol-white);
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.sol-hero__sub {
  margin: 4px 0 0;
  font-size: clamp(13px, 4.2vw, 15px);
  font-weight: 200;
  color: var(--sol-grey-3);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .75);
}
.sol-hero__cta {
  margin: 0;
  margin-top: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* spec mobile: both CTAs 224x44 (min-width, not width: hu/de labels are
 * longer than the artboard's Czech) */
.sol-hero__cta .sol-btn { width: auto; min-width: 224px; max-width: 100%; height: 44px; }
.sol-hero__cta .sol-btn--soon { font-size: 16px; }
.sol-hero__cta .sol-btn--ghost { font-size: 13px; border-width: .25px; }

/* v7 bakes the animated route into the map artwork; the SVG only draws the
 * static Krumlov connector, so the marching-ants animation is gone with it. */

/* City click targets are the invisible .sol-hot circles defined in the hero
 * block above -- the baked map carries the visible dots and labels. */

/* ------------------------------------------------------------- park grid */

.sol-parks {
  background: var(--sol-white);
  padding: 30px 0 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* The stars are decoration, so they live in CSS rather than in the markup.
 * `display:none` on an <img> hides it but still downloads it -- the left-hand
 * spray is desktop-only and was costing every phone 136 kB for something it
 * never showed. A background on a display:none pseudo-element is never
 * requested at all. */
.sol-parks::before,
.sol-parks::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.sol-parks::before {
  right: -60px;
  top: 0;
  width: 250px;
  height: 250px;
  background-image: url("../assets/hvezdy-2.webp");
}
.sol-parks::after { display: none; }
.sol-parks > * { position: relative; z-index: 1; }

.sol-parks .sol-lead { margin-left: var(--sol-pad); margin-right: var(--sol-pad); }
.sol-parks__sub {
  margin: 12px var(--sol-pad) 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  color: var(--sol-grey-2);
}
.sol-parks__sub b { font-weight: 600; }

.sol-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px auto 0;
  width: min(312px, calc(100% - 16px));
}
.sol-filter__btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--sol-grey-2);
  background: transparent;
  border: 0;
  border-radius: 1px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.sol-filter__btn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.sol-filter > .sol-filter__btn { flex: none; width: auto; min-width: 41px; padding: 0 8px; }
.sol-filter > .sol-filter__btn.is-active {
  background: var(--sol-gold);
  color: var(--sol-white);
  font-weight: 500;
}
.sol-filter__flags {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 20px;
  border: .25px solid var(--sol-grey-2);
  border-radius: 1px;
}
.sol-filter__flag { display: inline-flex; align-items: center; gap: 3px; }
.sol-filter__flag svg {
  width: 16px;
  height: 11px;
  border: .25px solid var(--sol-grey-2);
  border-radius: 1px;
}
.sol-filter__flag.is-active { color: var(--sol-gold); font-weight: 600; }

/* 2 x 153 + 6 = 312, which is 360 minus the 24px margins. */
/* Variant A (SYNC 2026-08-27, production): two 152px columns, gap 8. */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: min(312px, calc(100% - 30px));
  margin: 14px auto 0;
}
.sol-grid__empty { margin: 34px auto 0; font-size: 12px; }

/* The country filter hides cards via the `hidden` attribute. An author
 * `display:flex` beats the browser's own `[hidden] { display:none }`, so
 * without this line the filter toggles state and nothing disappears. */
.sol-card[hidden] { display: none; }

.sol-card {
  border: .25px solid #d9d5cd;
  border-radius: 1px;
  background: var(--sol-white);
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 12px;
}
.sol-card__media { display: block; background: var(--sol-black-2); }
/* height:auto is load-bearing. The <img> carries width/height attributes so the
 * browser can reserve the box before the file lands; those attributes also give
 * it a definite height, and aspect-ratio only fills in a dimension that is
 * auto -- without this the tile silently kept the attribute's 204px. */
.sol-card__media img { width: 100%; height: auto; aspect-ratio: 152 / 132; object-fit: cover; }
.sol-card__body {
  padding: 9px 10px 0 11px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sol-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
/* The city is the primary line and the season's theme is the secondary one --
 * that is the artboard's hierarchy, and it is what a visitor scans for. */
.sol-card__city {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sol-card__city a { color: var(--sol-gold); }
.sol-card__country {
  margin: 0;
  font-size: 8px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sol-grey-2);
  white-space: nowrap;
}
/* the country is a small flag now (CTO 29. 8.), the name stays for readers;
 * the component frames it: .25px #d9d5cd hairline, radius 1 */
.sol-card__country svg {
  display: block;
  margin-top: 2px;
  width: 18px;
  height: 12px;
  border: .25px solid #d9d5cd;
  border-radius: 1px;
}
.sol-card__name {
  margin: 0;
  font-size: 11.5px;
  line-height: 17px;
  font-weight: 600;
  color: var(--sol-grey-2);
}
/* Opening hours carry the row's surplus height (flex:1) so price, EARLY BIRD
 * and the buttons align across the whole row -- SYNC 29. 8. equal-height rule. */
.sol-card__hours {
  margin: 0;
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 400;
  color: var(--sol-grey-2);
  flex: 1;
}
/* EARLY BIRD sits on its own line above the price (component order);
 * the badge row carries the top gap, the price row hugs it at 3px */
.sol-card__badge-row {
  display: flex;
  margin: 10px 0 0;
}
.sol-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px 7px;
  margin: 3px 0 0;
  flex-wrap: wrap;
}
.sol-card__from { font-size: 10.5px; line-height: 20px; font-weight: 400; color: var(--sol-grey-2); }
.sol-card__amount { font-size: 15.5px; line-height: 20px; font-weight: 500; color: var(--sol-gold); }
/* The label has no descenders, so a geometrically centred line box leaves more
 * gold under the word than over it (measured: 2px above, 3px below). Height and
 * line-height are set apart and the text nudged down half a pixel so the two
 * gaps read as equal, with the badge grown to give the word more room. */
.sol-card__badge {
  height: 17px;
  padding: 1px 6px 0;     /* nudges the centred text down half a pixel */
  background: var(--sol-gold);
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 400;
  color: var(--sol-white);
  letter-spacing: .06em;
  white-space: nowrap;
}
/* SYNC 29. 8.: a missing price renders as a framed gold box, never plain text;
 * the 152px card shows the short label, wider variants the full sentence. */
.sol-card__price--tba { margin-top: 3px; }
.sol-card__tba {
  box-sizing: border-box;
  height: 17px;
  padding: 0 6px;
  border: .25px solid var(--sol-gold);
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--sol-gold);
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
}
.sol-card__tba-full { display: none; }
.sol-card__tba-short { display: inline; }
/* SYNC 29. 8.: VSTUPENKY (or the single-word ghost) first, PARK second,
 * stacked on the 152px card, 36px tall. */
.sol-card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 7px 0 0;
}
.sol-card__actions a.sol-btn--ghost:hover { color: var(--sol-white); }
/* Component button set (audit 29. 8.): w400, .25px hairlines, PARK without
 * letter-spacing/padding, sale + ghost may wrap to two lines at 152px. */
.sol-btn--sm {
  width: auto;
  height: 36px;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  border-width: .25px;
  letter-spacing: 0;
}
.sol-card__actions .sol-btn--soon,
.sol-card__actions .sol-btn--tickets {
  font-size: 10.5px;
  padding: 0 12px;
  white-space: normal;
  line-height: 1.15;
}
.sol-card__actions .sol-btn--tickets { letter-spacing: .04em; font-weight: 500; }
.sol-card__actions .sol-btn--soon { letter-spacing: .02em; }

/* -------------------------------------------------------------- season pass */

.sol-pass {
  background: var(--sol-beige-pass);
  padding: 26px var(--sol-pad) 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sol-pass > * { width: 100%; }
/* The artboard runs this line above the heading as an eyebrow; the heading
 * stays first in the DOM so the document outline is still right. */
.sol-pass__sub { order: -1; margin: 0 0 4px; font-size: 11px; font-weight: 300; }
.sol-pass__row { margin-top: 14px; }
.sol-pass__row img {
  width: 209px;
  height: 140px;
  object-fit: cover;
  border-radius: 13px;
  margin: 0 auto;
}
.sol-pass__text {
  margin-top: 14px;
  text-align: left;
  font-size: 11px;
  line-height: 17px;
}
.sol-pass__text { font-weight: 300; }
.sol-pass__text p { margin: 0 0 8px; }
.sol-pass__text > p:last-child { margin: 8px 0 0; font-size: 9px; }
.sol-pass__text ul { margin: 8px 0; padding-left: 14px; line-height: 18px; }
.sol-pass__text li { margin-bottom: 2px; }
.sol-pass__text b { font-weight: 600; }
.sol-pass__choose { margin: 16px 0 8px; font-size: 12px; font-weight: 300; }
.sol-pass__cta { margin: 0; }

/* --------------------------------------------------------------- challenge */

.sol-challenge {
  background: var(--sol-white);
  padding: 26px var(--sol-pad) 34px;
  text-align: center;
}
.sol-challenge__prize { margin: 10px 0 0; font-size: 12px; line-height: 18px; font-weight: 300; }
.sol-challenge__prize b { font-weight: 600; }
.sol-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 18px 0 16px;
  padding: 0;
  list-style: none;
}
/* min-height rather than a fixed 112px square: at 320px the tile is narrower
 * than the artboard's and the copy would be clipped by overflow:hidden. */
.sol-step {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border-radius: 1px;
  text-align: left;
}
.sol-step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-step__body { position: relative; padding: 8px 8px 10px; }
.sol-step__num { margin: 0; font-size: 15px; font-weight: 700; color: var(--sol-gold-light); }
.sol-step__t { margin: 2px 0 0; font-size: 10px; line-height: 13px; font-weight: 400; color: var(--sol-gold-light); }
.sol-step__p { margin: 4px 0 0; font-size: 8px; line-height: 11px; font-weight: 300; color: var(--sol-grey-3); }

/* --------------------------------------------------------------- carousels */

/* Shared by the Instagram row, the video row and the photo strip.
 *
 * Native overflow scrolling with scroll-snap rather than a JS transform: on a
 * phone the thumb is the primary control and swiping has to work. The arrows
 * from the artboard stay and drive the same scroller. */
.sol-carousel { position: relative; }
.sol-carousel__track {
  display: flex;
  gap: 10px;
  /* 1px/2px vertical padding: overflow-x:auto also clips vertically, and the
   * cards' fractional border landed exactly on the clip edge (beta 28. 8.) */
  padding: 1px var(--sol-pad) 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  list-style: none;
}
.sol-carousel__track::-webkit-scrollbar { display: none; }
.sol-carousel__track > * { scroll-snap-align: center; flex: none; }

.sol-carousel__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 46px;
  pointer-events: none;
  z-index: 1;
}
.sol-carousel__fade--l { left: 0; background: linear-gradient(to right, var(--sol-white) 30%, rgba(255, 255, 255, 0)); }
.sol-carousel__fade--r { right: 0; background: linear-gradient(to left, var(--sol-white) 30%, rgba(255, 255, 255, 0)); }

.sol-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: 300;
  color: var(--sol-gold);
  cursor: pointer;
}
.sol-carousel__btn--prev { left: 0; }
.sol-carousel__btn--next { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .sol-carousel__track { scroll-behavior: auto; }
}

/* A full-width hr already separates these sections; their own border-top
 * would draw a second hairline right under it. */
.sol-rule + .sol-some,
.sol-rule + .sol-videos,
.sol-rule + .sol-numbers { border-top: 0; }

/* ------------------------------------------------------------------ social */

.sol-some {
  background: var(--sol-white);
  text-align: center;
  padding: 0 var(--sol-pad) 30px;
  border-top: .25px solid var(--sol-grey-2);
}
.sol-some .sol-h2 { margin-top: 26px; }
.sol-some__lead { margin: 14px 0 0; font-size: 12px; line-height: 19px; font-weight: 300; }
.sol-hash { font-weight: 600; color: var(--sol-gold); }

.sol-some .sol-carousel { margin: 16px calc(var(--sol-pad) * -1) 0; }

.sol-ig {
  width: 117px;
  border: .25px solid var(--sol-gold);
  border-radius: 8px;
  overflow: hidden;
  background: var(--sol-white);
  text-align: left;
}
.sol-ig__head {
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sol-ig__who { display: flex; align-items: center; gap: 5px; }
.sol-ig__who img { width: 14px; height: auto; }
.sol-ig__who span { font-size: 7px; font-weight: 400; color: var(--sol-grey-2); }
.sol-ig__dots { display: flex; flex-direction: column; gap: 1.5px; width: 9px; }
.sol-ig__dots span { display: block; height: .5px; background: var(--sol-gold); }
.sol-ig__dots span:nth-child(2) { width: 6px; }
.sol-ig__dots span:nth-child(3) { width: 3px; }
.sol-ig__media { height: 126px; overflow: hidden; background: var(--sol-black-2); }
.sol-ig__media img { width: 100%; height: 100%; object-fit: cover; }
.sol-ig__bar {
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  line-height: 11px;
  color: var(--sol-gold);
}
.sol-ig__bar span { display: flex; align-items: center; gap: 7px; }

/* ------------------------------------------------------------------ videos */

.sol-videos {
  background: var(--sol-white);
  text-align: center;
  padding: 0 var(--sol-pad) 30px;
  border-top: .25px solid var(--sol-grey-2);
}
.sol-videos .sol-h2 { margin-top: 26px; }
.sol-videos__lead { margin: 10px 0 0; font-size: 12px; line-height: 18px; font-weight: 300; }
.sol-videos__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}
.sol-video { width: 100%; max-width: 312px; text-align: left; }
.sol-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 312 / 156;
  background: #000;
  overflow: hidden;
  display: block;
}
/* The artboard leaves a 26px black band at the top of the frame for the
 * channel row, so the still starts below it rather than filling the box. */
.sol-video__frame img { position: absolute; left: 0; top: 16.7%; width: 100%; height: 83.3%; object-fit: cover; }
.sol-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sol-video__who { position: absolute; left: 8px; top: 6px; display: flex; align-items: center; gap: 8px; }
.sol-video__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sol-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.sol-video__avatar img { position: static; width: 22px; height: auto; }
.sol-video__name { display: block; font-size: 12px; font-weight: 400; color: var(--sol-white); }
.sol-video__chan { display: block; font-size: 8px; font-weight: 400; color: #d5d5d5; }
.sol-video__play {
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  width: 46px; height: 32px;
  border-radius: 7px;
  background: #ff0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sol-video__play span {
  width: 0; height: 0;
  border-left: 12px solid var(--sol-white);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  display: block;
}
.sol-video__bar { background: var(--sol-gold-bar); padding: 8px 10px 9px; }
.sol-video__t { margin: 0; font-size: 12px; font-weight: 400; color: var(--sol-ink); }
.sol-video__m { margin: 2px 0 0; font-size: 8px; font-weight: 400; color: #4a4335; }

/* ----------------------------------------------------------------- numbers */

.sol-numbers {
  background: var(--sol-white);
  text-align: center;
  padding: 0 var(--sol-pad) 34px;
  border-top: .25px solid var(--sol-grey-2);
}
.sol-numbers .sol-h2 { margin-top: 26px; }
.sol-numbers__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.sol-num__v { margin: 0; font-size: 23px; line-height: 28px; font-weight: 600; color: var(--sol-grey-2); }
.sol-num__l { margin: 6px 0 0; font-size: 10px; line-height: 15px; font-weight: 300; }

/* -------------------------------------------------------------- photostrip */

.sol-photostrip {
  position: relative;
  background: var(--sol-black);
  height: 163px;
  overflow: hidden;
  border-top: .25px solid var(--sol-white);
  border-bottom: .25px solid var(--sol-white);
}
.sol-photostrip .sol-carousel { height: 100%; }
.sol-photostrip .sol-carousel__track {
  gap: 0;
  padding: 26px var(--sol-pad) 0;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
}
.sol-photostrip img { width: 117px; height: 112px; object-fit: cover; }
.sol-photostrip .sol-carousel__fade { width: 80px; }
.sol-photostrip .sol-carousel__fade--l { background: linear-gradient(to right, var(--sol-black) 40%, rgba(10, 9, 8, 0)); }
.sol-photostrip .sol-carousel__fade--r { background: linear-gradient(to left, var(--sol-black) 40%, rgba(10, 9, 8, 0)); }
.sol-photostrip .sol-carousel__btn--prev { left: 8px; }
.sol-photostrip .sol-carousel__btn--next { right: 8px; }

/* ====================================================== tablet -- 768 up */

@media (min-width: 768px) {
  /* DESKTOP layer (v9): one 1280 artboard from 768 up; the page
   * wrapper zooms it below 1280 (see the zoom band in sol.css). */

  /* Titulka: the artwork starts at the very top of the page and runs UNDER
   * the contact bar and menu (CTO 28. 8.) -- the bars go transparent and the
   * body carries the background, so the header black IS the artwork's black
   * and there is no seam above the hero. */
  /* Only the image goes on the body -- its colour must stay the default
   * white: sections below the artwork keep gaps (e.g. .sol-pass margin-top)
   * and a black body painted stripes into them (CTO 28. 8. večer). */
  /* Desktop hero: 1280x489 map band, header melts in through the 118px top
   * gradient. No black strip below and no bottom fade -- the media partners
   * bar cuts the compass right at the map's bottom edge (CTO 29. 8.,
   * supersedes the spec's 538 stack with its bottom blend). */
  .sol-hero__map {
    aspect-ratio: 1280 / 489;
    max-width: 1280px;
    margin: 0 auto;
  }
  .sol-hero__clip { inset: 0; height: auto; }
  .sol-hero__img { top: 0; width: 100%; height: 100%; object-fit: cover; }
  .sol-hero__markers { transform: none; }   /* the 45px ride-down is mobile-only */

  .sol-hot { left: var(--dl); top: var(--dt); }
  /* KV 31. 8.: no hover halo around the dots -- the artwork's own glow is
   * enough, hover feedback lives on the city label (underline). Keyboard
   * focus keeps a thin ring for accessibility. */
  .sol-hot:focus-visible { outline: 1px solid rgba(255, 205, 115, .6); outline-offset: 2px; }

  /* fades: left/right 150px, 118px top; NO bottom fade (compass is cut by
   * the media bar, CTO 29. 8.) */
  .sol-hero__fade { display: block; }
  .sol-hero__fade--t {
    height: 24.13%;               /* 118/489 */
    background: linear-gradient(to bottom, #0a0908 0%, rgba(10, 9, 8, .72) 34%, rgba(10, 9, 8, 0) 100%);
  }
  .sol-hero__fade--l {
    left: 0; top: 0;
    width: 11.72%;
    height: 100%;
    background: linear-gradient(to right, #0a0908, rgba(10, 9, 8, 0));
  }
  .sol-hero__fade--r {
    right: 0; top: 0;
    width: 11.72%;
    height: 100%;
    background: linear-gradient(to left, #0a0908, rgba(10, 9, 8, 0));
  }
  .sol-hero__fade--b { display: none; }

  .sol-hero__text {
    inset: auto;
    left: 16.8%;                  /* 215/1280 */
    top: 26.18%;                  /* 128/489 */
    max-width: none;
    display: block;
  }
  .sol-hero__h1 { font-size: 60px; line-height: 64px; white-space: nowrap; }
  .sol-hero__sub { margin-top: 25px; font-size: 20px; color: var(--sol-gold-light); }
  /* Still stacked here, not in a row. Side by side the pair is ~300px wide and
   * runs under the compass, where gold-on-gold is unreadable. The row returns
   * at 1280, where the compass starts far enough right to clear it. */
  .sol-hero__cta {
    margin: 24px 0 0;
    align-self: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  /* min-width:0 kills the mobile 168px floor -- on desktop the buttons hug
   * their text (v9: pill by content, ghost 139px), clear of the compass */
  .sol-hero__cta .sol-btn { width: auto; min-width: 0; height: 22px; font-size: 12px; padding: 0 14px; }
  .sol-hero__cta .sol-btn--soon,
  .sol-hero__cta .sol-btn--ghost { height: 22px; font-size: 12px; border-width: .5px; }

  .sol-parks { padding: 48px 24px 56px; }
  .sol-parks .sol-lead,
  .sol-parks__sub { margin-left: auto; margin-right: auto; }
  .sol-filter { width: auto; gap: 10px; margin-top: 22px; }
  .sol-filter > .sol-filter__btn { width: auto; min-width: 40px; padding: 0 10px; height: 18px; font-size: 10px; }
  .sol-filter__flags { flex: none; gap: 14px; padding: 0 12px; height: 18px; justify-content: center; }
  .sol-filter__flag { gap: 5px; font-size: 10px; }
  .sol-filter__flag svg { width: 14px; height: 10px; }

  /* card values live in the single desktop block further down (batch 29. 8.) */

  .sol-pass { padding: 44px 24px 52px; }
  .sol-pass__sub { font-size: 14px; margin-bottom: 6px; }
  .sol-pass__row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 34px;
    margin-top: 28px;
    text-align: left;
    flex-wrap: wrap;
  }
  .sol-pass__row img { width: 280px; height: auto; border-radius: 8px; }
  .sol-pass__text { margin-top: 0; max-width: 420px; font-size: 12px; line-height: 1.6; }
  .sol-pass__choose { margin: 28px 0 12px; font-size: 15px; }

  .sol-challenge { padding: 48px 24px 52px; }
  .sol-challenge__prize { font-size: 13px; line-height: 1.6; margin-top: 14px; }
  .sol-steps { gap: 18px; margin: 26px 0 24px; }
  .sol-step { min-height: 160px; }
  .sol-step__body { padding: 14px 12px 14px; }
  .sol-step__num { font-size: 22px; font-weight: 500; color: var(--sol-white); }
  .sol-step__t { font-size: 12px; line-height: 1.3; color: var(--sol-gold); }
  .sol-step__p { font-size: 9px; line-height: 1.5; color: #c9c9c9; }

  .sol-some, .sol-videos, .sol-numbers { padding-bottom: 48px; }
  .sol-some .sol-carousel { margin-left: 0; margin-right: 0; }
  .sol-some__lead, .sol-videos__lead { font-size: 13px; line-height: 1.6; }
  .sol-carousel__track { justify-content: center; padding: 0; gap: 18px; }
  .sol-ig { width: 168px; }
  .sol-ig__media { height: 180px; }

  .sol-videos__list { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 20px; }
  .sol-video { width: 300px; }

  .sol-numbers__list { grid-template-columns: repeat(4, 1fr); gap: 24px 12px; }
  .sol-num__v { font-size: 30px; line-height: 1.2; color: var(--sol-grey-1); }
  .sol-num__l { font-size: 11px; line-height: 1.5; }

  .sol-photostrip { height: 200px; }
  .sol-photostrip .sol-carousel__track { padding-top: 30px; }
  .sol-photostrip img { width: 150px; height: 150px; }


  /* --- former 1280 layer, now part of the single desktop layer --- */

  .sol-marker { padding: 6px; }

  .sol-hero__h1, .sol-hero__sub { text-shadow: none; }
  .sol-hero__sub { margin-top: 35px; }
  .sol-hero__cta {
    margin-top: 28px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }

  .sol-parks { padding: 64px 24px 70px; }
  .sol-parks::before { right: 0; top: 0; width: 560px; height: 560px; }
  .sol-parks::after {
    display: block;
    left: -160px;
    top: 150px;
    width: 430px;
    height: 430px;
    opacity: .7;
    background-image: url("../assets/hvezdy-1.webp");
  }
  .sol-parks__sub { font-size: 12.5px; margin-top: 26px; }

  /* Compact and centred per the v7 artboard. This drops the older Task B
   * stretch (filter as wide as the grid) -- CTO 26. 8.: the wide row is wrong. */
  .sol-filter { gap: 10px; margin-top: 26px; width: auto; }
  .sol-filter__btn { font-size: 9.5px; }
  .sol-filter > .sol-filter__btn { width: auto; min-width: 34px; height: 18px; padding: 0 6px; }
  .sol-filter > .sol-filter__btn.is-active { font-weight: 400; }
  .sol-filter__flag { gap: 4px; }
  .sol-filter__flag svg { width: 13px; height: 9px; }
  .sol-filter__flags { flex: none; justify-content: center; gap: 9px; padding: 0 10px; }

  .sol-grid {
    grid-template-columns: repeat(4, var(--sol-card));
    justify-content: center;
    align-items: stretch;
    gap: var(--sol-gap);
    width: var(--sol-grid);
    max-width: 100%;
    margin-top: 34px;
  }
  /* the artboard wraps with centred justification, so the lone 13th card
   * sits centred under the grid instead of flush left */
  .sol-grid .sol-card:last-child:nth-child(4n + 1) { grid-column: 2 / 4; justify-self: center; width: var(--sol-card); }
  /* desktop card, 284px per the Karta parku component (batch 29. 8.) */
  .sol-card { border-color: var(--sol-grey-2); padding-bottom: 0; }
  .sol-card__media img { aspect-ratio: 1; }
  .sol-card__body { padding: 14px 16px 18px 18px; }
  .sol-card__city { font-size: 19px; line-height: 25px; }
  .sol-card__country svg { width: 22px; height: 15px; margin-top: 3px; }
  .sol-card__name { font-size: 13.5px; line-height: 19px; }
  .sol-card__hours { font-size: 11.5px; line-height: 17px; }
  .sol-card__badge-row { margin-top: 12px; }
  .sol-card__price { margin-top: 3px; }
  .sol-card__from { font-size: 11.5px; line-height: 22px; }
  .sol-card__amount { font-size: 16px; line-height: 22px; }
  .sol-card__badge { height: 22px; padding: 1px 9px 0; font-size: 10px; }
  .sol-card__tba { height: 22px; padding: 0 9px; font-size: 10px; }
  .sol-card__tba-full { display: inline; }
  .sol-card__tba-short { display: none; }
  .sol-card__actions { flex-direction: row; gap: 10px; margin-top: 10px; }
  .sol-card__actions .sol-btn--sm { flex: 1; height: 36px; padding: 0; }
  .sol-card__actions .sol-btn--ghost { font-size: 12px; }
  .sol-card__actions .sol-btn--soon,
  .sol-card__actions .sol-btn--tickets { font-size: 11px; padding: 0 12px; }

  /* KV comment 29. 8.: the white gap above the cream block must equal the
   * block's own inner top padding (50px) -- the grid's padding-bottom
   * provides it, so no extra margin here */
  .sol-pass { margin-top: 0; padding: 50px 24px 56px; background: #fbf4ea; }
  .sol-pass .sol-h2 { font-size: 40px; }
  /* desktop artboard: H2 first, subtitle under it (the eyebrow is mobile-only) */
  .sol-pass__sub { order: 0; font-size: 21px; margin: 14px 0 0; }
  .sol-pass__row {
    width: 880px;
    max-width: 100%;
    margin: 34px auto 0;
    justify-content: space-between;
    gap: 64px;
  }
  .sol-pass__row img { width: 300px; height: 196px; border-radius: 13px; }
  .sol-pass__text { max-width: none; flex: 1; font-size: 14px; line-height: 1.65; }
  .sol-pass__text ul { margin-top: 18px; padding-left: 18px; line-height: 1.9; }
  .sol-pass__text > p:last-child { margin: 16px 0 0; }
  .sol-pass__choose { margin: 36px 0 14px; font-size: 19px; }
  .sol-pass__cta .sol-btn {
    width: 210px;
    height: 30px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
  }

  .sol-challenge { padding: 64px 24px 0; }
  .sol-challenge__prize { margin-top: 16px; }
  .sol-steps { display: flex; justify-content: center; gap: 26px; margin: 30px 0 26px; flex-wrap: wrap; }
  .sol-step { width: 174px; min-height: 178px; text-align: center; }
  .sol-step__body { padding: 18px 14px 16px; }
  .sol-step__num { font-size: 26px; }
  .sol-step__t { font-size: 12.5px; font-weight: 500; }
  .sol-step__p { font-size: 8px; line-height: 1.55; }
  .sol-challenge .sol-lead { max-width: 660px; margin-top: 20px; }

  .sol-some, .sol-videos { padding: 0 24px; border-top: 0; }
  .sol-some .sol-h2, .sol-videos .sol-h2, .sol-numbers .sol-h2 { margin-top: 0; }
  .sol-some__lead { margin-top: 18px; }
  .sol-videos__lead { margin-top: 16px; }

  /* v7 desktop Instagram: full cards at 236px, four in view, arrows in the
   * side margins driving the same scroller the thumb uses elsewhere. */
  .sol-some .sol-carousel { width: 1010px; max-width: 100%; margin-left: auto; margin-right: auto; }
  /* flex-start, not center: a centred track with overflow clips its own start
   * and the first card can never be scrolled into view. */
  .sol-carousel__track { gap: 22px; padding: 0; justify-content: flex-start; }
  .sol-carousel__fade { display: none; }
  .sol-carousel__btn { font-size: 30px; line-height: 30px; }
  .sol-carousel__btn--prev { left: -65px; }
  .sol-carousel__btn--next { right: -65px; }
  .sol-ig { width: 236px; border-radius: 12px; border-width: .5px; }
  .sol-ig__head { height: 44px; padding: 0 12px; }
  .sol-ig__who { gap: 8px; }
  .sol-ig__who img { width: 24px; }
  .sol-ig__who span { font-size: 11px; }
  .sol-ig__dots { width: 15px; gap: 2.5px; }
  .sol-ig__dots span { height: 1px; }
  .sol-ig__dots span:nth-child(2) { width: 10px; }
  .sol-ig__dots span:nth-child(3) { width: 5px; }
  .sol-ig__media { height: 256px; }
  .sol-ig__bar { height: 46px; padding: 0 12px; font-size: 16px; line-height: 16px; }
  .sol-ig__bar span { gap: 11px; }

  /* The photo strip keeps its own centred, arrow-less desktop row. */
  .sol-photostrip .sol-carousel { width: auto; }
  .sol-photostrip .sol-carousel__btn { display: none; }

  .sol-videos__list { gap: 26px; margin: 28px 0 26px; }
  /* CTO 27. 8.: "ty youtube okna by si zasloužily zvětšit" -- 252 -> 380 */
  .sol-video { width: 380px; }
  .sol-video__frame { aspect-ratio: 252 / 142; }
  /* 35px channel band above a 107px still, per the v7 frame */
  .sol-video__frame > img:first-child { top: 24.65%; height: 75.35%; }
  .sol-video__who { left: 9px; top: 7px; }
  .sol-video__avatar { width: 26px; height: 26px; }
  .sol-video__avatar img { width: 19px; }
  .sol-video__name { font-size: 10px; }
  .sol-video__chan { font-size: 7px; }
  .sol-video__play { width: 44px; height: 31px; }
  .sol-video__bar { border-radius: 1px; margin-top: 6px; padding: 5px 10px; background: #d3af62; }
  .sol-video__t { font-size: 10px; font-weight: 600; }
  .sol-video__m { font-size: 7px; font-weight: 300; color: #3f3a30; }

  .sol-numbers { padding: 0 24px 90px; border-top: 0; }
  .sol-numbers__list { display: flex; justify-content: center; gap: 74px; margin-top: 38px; flex-wrap: wrap; }
  .sol-num__v { font-size: 40px; font-weight: 500; color: #9b9c9c; }
  .sol-num__l { font-size: 12.5px; }

  .sol-photostrip { height: auto; padding: 34px 0; border: 0; }
  .sol-photostrip .sol-carousel__track { padding: 0; gap: 18px; height: auto; align-items: center; }
  .sol-photostrip img { width: 196px; height: 186px; }

}


/* ================================================================== v9 == */
/* Homepage deltas of the final responsive package (9). */

/* City labels over the label-free map artwork (PSD extraction 31. 8.):
 * clickable, localized per mutation. Desktop only -- the mobile banner map
 * still carries baked labels until its own layered source arrives. */
.sol-maplabel {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  transform: translateX(-50%);
  font-size: var(--lfs);
  line-height: 1.08;
  font-weight: 500;
  color: #f4efe4;
  text-align: center;
  text-shadow: 0 1px 6px rgba(10, 9, 8, .7);
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
}
.sol-maplabel:hover { color: #ffffff; text-decoration: underline; }
@media (max-width: 767px) {
  .sol-maplabel { display: none; }
}

/* keyframes for the rotating compass rose */
@keyframes solKompas { to { transform: rotate(360deg); } }

/* ------------------------------------------------- hero: compass layers */
/* The wrapper must own its height: with only absolute children it collapses
 * to 0 and the layers' inset:0 + height:auto becomes over-constrained --
 * Chrome 148 resolved it from the image ratio, Chrome 152 (CTO's S24) does
 * not, which tore the compass apart. aspect-ratio pins the box everywhere. */
.sol-hero__compass { display: block; aspect-ratio: 1; }
.sol-hero__compass-frame,
.sol-hero__compass-rose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sol-hero__compass-rose {
  transform-origin: 50% 50%;
  animation: solKompas 96s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sol-hero__compass-rose { animation: none; }
}

/* v9 mobile hero CTAs: both gold ghost, radius 4 */
.sol-hero__cta .sol-btn--soon {
  border: 0.5px solid var(--sol-gold);
  border-radius: 4px;
  color: var(--sol-gold);
}
.sol-hero__cta .sol-btn--ghost { border-radius: 4px; }
/* Batch 29. 8.: the hero has ONE solid gold CTA -- VYBRAT PARK, black label.
 * Mobile 224x44 radius 4 per the Hero mapa mobil component. */
.sol-hero__cta .sol-btn--select {
  background: var(--sol-gold);
  border: 0.5px solid var(--sol-gold);
  border-radius: 4px;
  color: var(--sol-black);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
.sol-hero__cta .sol-btn--select:hover {
  background: #b18f38;
  border-color: #b18f38;
  color: var(--sol-black);
}

/* low displays (e.g. iPhone SE): shorter hero, compass up, CTAs closer */
@media (max-width: 767px) and (max-height: 699px) {
  .sol-hero__map { aspect-ratio: auto; height: 404px; }
  /* The fixed 404 box no longer scales with width: the image and the hotspot
   * layer anchor to the full 475-canvas (width-driven) so the spec's box
   * coordinates keep pointing at the baked dots; the box just crops lower. */
  .sol-hero__img { top: calc(100vw * 15 / 360); }
  .sol-hero__markers {
    inset: 0 0 auto 0;
    height: calc(100vw * 475 / 360);
  }
  .sol-hero__compass { top: 47%; }           /* CLAUDE.md: kompas o ~34px výš */
  .sol-hero__cta { gap: 9px; }
  .sol-hero__text { inset: 22px 24px 10px 28px; }
}

@media (min-width: 768px) {
  /* spec desktop: compass 270px at 470/322 inside the 1280x489 map clip,
   * cropped at the map's bottom edge */
  .sol-hero__compass { left: 36.72%; top: 65.85%; width: 21.09%; }
  .sol-hero__sub { margin-top: 25px; }
  .sol-hero__cta .sol-btn--soon {
    background: var(--sol-gold);
    border: 0.25px solid var(--sol-gold);
    border-radius: 1px;
    color: var(--sol-black);
    height: 22px;
    font-size: 12px;
    padding: 0 12px;
  }
  .sol-hero__cta .sol-btn--ghost {
    width: 139px;
    height: 22px;
    border-radius: 1px;
    border-width: 0.25px;
    font-size: 12px;
    padding: 0;
  }
  /* desktop hero CTA -- KV comment 29. 8.: bigger than the 22px chip,
   * with real inner padding */
  .sol-hero__cta .sol-btn--select {
    height: 30px;
    border-radius: 1px;
    border-width: 0.25px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
    padding: 0 24px;
  }

  /* v9 parks section rhythm. Card + grid values live in the single desktop
   * block above -- batch 29. 8. replaced the old 174px flex grid with the
   * 284px component card on the 1196 grid. */
  .sol-parks { padding: 44px 0 50px; }

  /* v9 permanentka rhythm */
  .sol-pass { padding: 50px 24px 44px; }
}
/* Batch 29. 8.: grid 1196 = 4 x 284 + 3 x 20. The SYNC's five-per-row band
 * (1500 from 1700 real px) is NOT implementable here: per CTO 26. 8. the
 * layout viewport is always the 1280 artboard and big monitors zoom UP, so
 * the artboard never reaches 1500 CSS px -- flagged back to the designers.
 * The 768-999 zoom band steps down to three per row. */
@media (min-width: 768px) and (max-width: 999px) {
  .sol-grid { grid-template-columns: repeat(3, var(--sol-card)); width: 892px; }
}

/* opening-date badge on the tile (v9) */
.sol-card__media { position: relative; }
.sol-card__open {
  position: absolute;
  left: 0;
  top: 9px;
  background: var(--sol-gold);
  color: var(--sol-white);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 0 2px 2px 0;
  white-space: nowrap;
  z-index: 2;
}
@media (min-width: 768px) {
  .sol-card__open { top: 12px; font-size: 11px; padding: 4px 11px; }
}

/* VŠE chip: v9 state colours (inactive = white with grey hairline) */
.sol-filter > .sol-filter__btn {
  background: var(--sol-white);
  border: .25px solid var(--sol-grey-2);
  color: var(--sol-grey-2);
}
.sol-filter > .sol-filter__btn.is-active {
  background: var(--sol-gold);
  border-color: var(--sol-gold);
  color: var(--sol-white);
}

/* mobile: only the featured video renders; desktop shows all three */
.sol-video { display: none; }
.sol-video--featured { display: block; }
@media (min-width: 768px) {
  .sol-video { display: block; }
}

/* v9 VAT line */
.sol-vat {
  margin: 6px var(--sol-pad) 0;
  font-size: 9px;
  line-height: 14px;
  font-weight: 300;
  color: #9b9c9c;
}
@media (min-width: 768px) {
  .sol-vat { margin: 8px 0 0; font-size: 10.5px; }
}