/* Story of Lights v45 -- park detail page.
 * Geometry from Praha.dc.html; the same sheet serves all thirteen parks, so
 * anything Praha-specific (boat table, reviews) is driven by data, not CSS.
 */

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

.sol-phero { background: var(--sol-black); }

.sol-phero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 456px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
/* Prague's v7 hero is a painted 1280x500 backdrop with the route loop baked
 * in, and the KV poster runs taller than it (528). The 528 inner height is the
 * poster's, not the backdrop's. */
/* KV comment 29. 8.: shorter hero so the media-partner strip stays in the
 * first fold on big monitors (zoom-up architecture, ~650 artboard px fold) */
.sol-phero--bg .sol-phero__inner { min-height: 460px; }
/* CD keeps no top wash: the painted backdrop starts pure black, so the header
 * melts into it by itself. What DOES cut hard is the photo's bottom edge --
 * it stops mid-content 96px above the box floor (CTO 27. 8.: "useklé pozadí a
 * šedý pruh"). The image now covers the whole box and a bottom wash melts the
 * last of it into the black that carries on into the media strip. */
@media (min-width: 768px) {
  .sol-phero--bg .sol-phero__inner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(10, 9, 8, 0) 0%, var(--sol-black) 92%);
    pointer-events: none;
  }
}
.sol-phero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;          /* fill the whole hero box -- no naked strip below the photo */
  object-fit: cover;
  object-position: 50% 0;
}
/* Header melts into the hero photo exactly like the homepage does (CTO
 * 29. 8.): the same 118px gradient over the top edge of the backdrop.
 * Hidden on phones together with the backdrop itself. */
.sol-phero__fade-t {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 118px;
  background: linear-gradient(to bottom, #0a0908 0%, rgba(10, 9, 8, .72) 34%, rgba(10, 9, 8, 0) 100%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .sol-phero__fade-t { display: block; }
}

/* The route loop bleeds to the right edge, the KV poster sits on top of its
 * left side -- that overlap is the design, not a mistake. */
.sol-phero__map {
  position: absolute;
  right: 0;
  top: 0;
  width: 26.5%;
  height: 456px;
  object-fit: cover;
  object-position: 62% 40%;
}
.sol-phero__kv {
  position: absolute;
  left: 50.4%;
  top: 0;
  height: 456px;
  width: auto;
}
.sol-phero--bg .sol-phero__kv { height: 528px; }

/* Boat hero 20. 9.: the park KV is a poster, so its hard edges read as one.
 * A film frame cut off mid-page does not -- the footage dissolves into the
 * hero background on the three sides that face it instead. */
.sol-phero__kv--video {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 16%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* KV comment 30. 8.: rotating compass rose over the disc baked into the KV
 * (same layered asset as the homepage hero, 96 s/turn). The wrapper takes
 * over the KV's absolute slot so the rose can ride the img box with %
 * coordinates -- values come inline from the generator, per crop. */
.sol-phero__kvwrap { position: absolute; left: 50.4%; top: 0; display: block; line-height: 0; }
/* SYNC 31. 8.: mobile-only readability scrim; desktop has its own washes */
.sol-phero__scrim { display: none; }
.sol-phero__kvwrap .sol-phero__kv,
.sol-phero--bg .sol-phero__kvwrap .sol-phero__kv { position: static; }
.sol-phero__rose {
  position: absolute;
  left: var(--rose-x);
  top: var(--rose-y);
  width: var(--rose-w);
  height: auto;
  pointer-events: none;
  animation: solKompasRose 96s linear infinite;
}
@keyframes solKompasRose { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sol-phero__rose { animation: none; } }

.sol-phero__text {
  position: relative;
  z-index: 1;
  width: 372px;
  max-width: 100%;
  margin: 62px 0 48px 17.2%;
}

.sol-phero__h1 {
  margin: 0;
  font-size: 34px;
  line-height: 38px;
  font-weight: 500;
  color: var(--sol-white);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sol-phero__addr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 11px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--sol-gold-light);
}
.sol-phero__addr img { width: 19px; height: 17px; }
.sol-phero__perex {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.85;
  font-weight: 300;
  color: #d6d1c6;
}
.sol-phero__open {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sol-white);
}
.sol-phero__hours {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--sol-gold-light);
}
.sol-phero__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 15px 0 0;
  flex-wrap: wrap;
}
.sol-phero__from { font-size: 11px; font-weight: 300; color: #d6d1c6; }
.sol-phero__value { font-size: 27px; line-height: 27px; font-weight: 600; color: var(--sol-gold); }
/* The badge is the podklady artwork (assets/ikony/predprodej.svg) inlined by
 * the generator so its text uses the site font and the localized word. */
/* KV comment 30. 8.: the frame hugs the type (~5 px air) and the badge's
 * bottom edge sits on the price baseline -- the row participates in the
 * flex baseline alignment, so no align-self override. The -3px pulls the
 * svg down past its own transparent margin below the stroke. */
/* KV comment 31. 8.: half-size badge, type clear of the frame */
.sol-phero__badge { margin: 0 0 -3px; width: 52px; height: 38px; }
.sol-phero__price--tba { font-size: 15px; color: var(--sol-hero-text); font-weight: 300; }
.sol-phero__note {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.75;
  font-weight: 300;
  color: #c8c3b8;
}
.sol-phero__note b { color: var(--sol-gold); font-weight: 600; }
.sol-phero__cta { display: flex; gap: 12px; margin: 22px 0 0; flex-wrap: wrap; }
.sol-phero__cta .sol-btn {
  height: 28px;
  padding: 0 18px;
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .04em;
}

/* v7 gives the strip under the park hero more air than the homepage one. */
@media (min-width: 1280px) {
  .sol-phero + .sol-media { min-height: 68px; }
}

/* ----------------------------------------------------------------- story */

.sol-story { background: var(--sol-white); padding: 58px 24px 0; text-align: center; }
.sol-story__p {
  margin: 20px auto 0;
  max-width: 700px;
  font-size: 12.5px;
  line-height: 1.75;
  font-weight: 300;
}
.sol-story__p b { font-weight: 600; }

/* ---------------------------------------------------------------- prices */

.sol-prices { background: var(--sol-white); padding: 0 24px; text-align: center; }
.sol-prices__hours {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--sol-grey-2);
}
.sol-prices__hours b { font-weight: 600; color: var(--sol-grey-4); }
.sol-prices__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 26px;
  width: 1100px;
  max-width: 100%;
  margin: 30px auto 0;
}
.sol-prices__pass { width: 1100px; max-width: 100%; margin: 34px auto 0; }
/* Side products (Godollo: castle combo, Ferris wheel). Two cards side by side from 900px,
   stacked below it -- each keeps its own frame so its conditions stay with its prices. */
.sol-prices__extras { width: 1100px; max-width: 100%; margin: 34px auto 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .sol-prices__extras { grid-template-columns: 1fr 1fr; align-items: start; } }

.sol-tab {
  height: 100%;
  border: .5px solid var(--sol-gold-rule);
  border-radius: 2px;
  padding: 14px 20px 16px;
  text-align: left;
  background: var(--sol-white);
  border-collapse: collapse;
  width: 100%;
  display: block;
}
.sol-tab caption {
  font-size: 14px;
  font-weight: 600;
  color: var(--sol-gold);
  letter-spacing: .04em;
  text-align: left;
  padding-bottom: 4px;
}
/* CTO 27. 8.: number columns align right, labels keep left */
.sol-tab thead th {
  font-size: 7.5px;
  font-weight: 400;
  color: #9b9c9c;
  letter-spacing: .06em;
  text-align: right;
  padding: 8px 0 4px;
}
.sol-tab thead th:first-child { text-align: left; }
.sol-tab thead th:last-child { color: var(--sol-gold); font-weight: 600; text-align: right; }
.sol-tab tbody th,
.sol-tab tbody td {
  font-size: 10.5px;
  border-top: .25px solid var(--sol-rule);
  padding: 9px 0;
  text-align: right;
}
/* The card is the <table> itself with display:block (padding + caption inside
 * the border). That leaves the anonymous inner table shrink-to-fit, which is
 * why the rows hugged the left edge of a wide card (CTO 26. 8.). Making thead
 * and tbody their own full-width fixed tables stretches the columns across
 * the whole card, matching the CD flex proportions 1.5/1/1/1. */
.sol-tab thead,
.sol-tab tbody { display: table; width: 100%; table-layout: fixed; }
/* the caption must follow suit: as display:table-caption it forms its own
 * shrink-to-fit anonymous table and wraps word-by-word */
.sol-tab caption { display: block; width: 100%; }
.sol-tab thead th:nth-child(2),
.sol-tab thead th:nth-child(3) { width: 22%; }
.sol-tab tbody th {
  font-weight: 500;
  color: var(--sol-grey-5);
  text-align: left;
  width: 34%;
}
.sol-tab thead th:first-child { width: 34%; }
.sol-tab tbody td { font-weight: 300; color: var(--sol-grey-2); }
/* KV 1. 9.: the box-office price carries the comparison -- it is what the
 * presale discount is measured against, so it stops rendering as the lightest
 * number in the row. Pass tables have a single price column and keep it.
 * KV 2. 9.: "odstranit tucnost v tomto sloupecku napric parky" -- the darker
 * ink still separates the column from the light body text, the bold weight
 * was competing with the gold presale price next to it. */
.sol-tab:not(.sol-tab--pass) tbody td:nth-child(2) {
  color: var(--sol-grey-4);
}
/* KV 31. 8.: ".sol-tab tbody td" outguns a lone class -- the presale price
 * rendered grey/light everywhere; the compound selector wins it back */
.sol-tab__presale,
.sol-tab tbody td.sol-tab__presale {
  font-weight: 600;
  color: var(--sol-gold);
  text-align: right;
}
.sol-tab__save {
  display: block;
  font-size: 7px;
  font-weight: 300;
  color: var(--sol-gold-save);
}
.sol-tab--pass tbody th,
.sol-tab--pass thead th:first-child { width: 75%; }
.sol-tab--pass tbody td,
.sol-tab--pass thead th:last-child { text-align: right; }

.sol-prices__note {
  margin: 10px auto 0;
  max-width: 620px;
  font-size: 9px;
  line-height: 1.6;
  font-weight: 300;
  color: #9b9c9c;
}
.sol-prices__note--wide { font-size: 12.5px; margin-top: 30px; color: var(--sol-grey-2); }
.sol-gold { color: var(--sol-gold); font-weight: 600; }
.sol-prices__fine {
  margin: 14px auto 0;
  max-width: 620px;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 300;
  color: #9b9c9c;
}
.sol-prices__fine + .sol-prices__fine { margin-top: 6px; }
/* The VAT/consent line was styled only in home.css, so park pages rendered it
 * at the section's 16px -- the "third font size" from the beta review. One
 * 11px block per the CD file, same as the fine print above it. */
/* KV 3. 9.: "ustrelene do leva, vypadlo vystredeni". A regression from this
   morning: park detail started loading home.css for the video component, and
   home.css's own .sol-vat (margin: 6px var(--sol-pad) 0 -- no auto) loads
   after park.css and won on source order. Two classes beat one, so the park
   rule wins regardless of load order. */
.sol-prices .sol-vat,
.sol-vat {
  margin: 6px auto 16px;
  max-width: 620px;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 300;
  color: #9b9c9c;
}
.sol-prices__more { margin: 8px 0 0; font-size: 10px; font-weight: 300; }
.sol-prices__tba {
  margin: 30px auto 0;
  max-width: 620px;
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 300;
}
.sol-prices__closing {
  margin: 30px auto 0;
  max-width: 620px;
  font-size: 12.5px;
  line-height: 1.75;
  font-weight: 300;
}
.sol-prices__closing b { font-weight: 600; }

/* ------------------------------------------------------------------ info */

.sol-info { background: var(--sol-beige-info); text-align: center; padding: 52px 24px 56px; }
.sol-info__sub { margin: 10px 0 0; font-size: 12px; font-weight: 300; color: #9b968a; }
/* v7 rows: the opening-hours card runs full width, the two ticket cards share
 * a row, everything else flows in thirds. Built on a 6-track grid so the three
 * row shapes coexist. */
.sol-info__grid {
  width: 1100px;
  max-width: 100%;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  /* stretch: cards in a row share one height, so the section reads as neat
   * table rows (Martina, 28. 8. -- "drzet se tabulek dle navrhu") */
}
/* a lone trailing card (flow position 3n+1) gets the full row instead of
 * leaving a ragged orphan */
.sol-info__card:nth-child(3n+1):last-child { grid-column: 1 / -1; }
/* Venue orientation map (CTO 10. 9. 2026) -- a full-width strip under the
 * cards, not a card. The artwork is ~1.87:1 with baked-in labels, so squeezing
 * it into a grid column would make "TRAM ZASTÁVKA DVORCE" unreadable. Same
 * 1100px measure as the card grid so the section keeps one left edge. */
/* CTO 11. 9.: "tu mapu arealu zmensi trochu ne je to jak posrana pest na oko". Puvodnich
   1100 px delalo z podkladu dominantu cele sekce -- mapa ma byt orientacni pomucka pod
   kartami, ne druhy hero. 720 px je sirka, kde popisky v rastru (1407x752) jeste ctes
   a blok uz nepreklici karty nad sebou. */
/* 21. 9.: 720px was set before any park actually had a map. Prague's is a
 * 2.4:1 panorama of the whole grounds -- at 720 its baked-in labels (entrance,
 * box office) render around 7px and cannot be read. */
.sol-info__map {
  width: 1100px;
  max-width: 100%;
  margin: 20px auto 0;
}
.sol-info__map img {
  width: 100%;
  height: auto;
  display: block;
  border: .5px solid var(--sol-gold-card);
  border-radius: 2px;
  background: var(--sol-white);
}
.sol-info__map figcaption {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sol-gold);
  text-align: left;
}
.sol-info__mapsrc {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 300;
  color: #9b968a;
}

/* 21. 9.: on the cruise page the map answers one question the text cannot --
 * where you board. The marker sits at the end of the lit path that runs down
 * past the boar to the pier; the wrapper exists so the % coordinates are the
 * image's, not the figure's (which also holds the caption). The map is wider
 * here than on a park page: at 720px its labels are unreadable. */
/* CTO 21. 9.: the map sits on cream inherited from the info cards above it,
 * and the artwork's own black rectangle cut a step into that band. On white
 * the drawing reads as its own block instead of a notch in the section. */
.sol-info--maponly {
  padding-top: 52px;
  background: var(--sol-white);
}
.sol-info__mapwrap { position: relative; display: block; line-height: 0; }
.sol-info__pin {
  position: absolute;
  left: 53.5%;
  top: 82.8%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--sol-gold);
  box-shadow: 0 0 0 2px rgba(10, 9, 8, .55);
}
.sol-info__pin::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--sol-gold);
  animation: solPinPulse 2.6s ease-out infinite;
}
@keyframes solPinPulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-info__pin::after { animation: none; opacity: .5; }
}

/* ------------------------------------------------- cruise price + gallery */

/* One product, one price, one card -- the grid would otherwise stretch that
 * single card across the full width and push its two values to the edges. */
/* The shared .sol-prices has no vertical padding: on a park page the section
 * above it (.sol-story) carries it. The cruise page has no story, so the
 * heading sat flush against the partner strip (CTO 21. 9.: "srovnej paddingy").
 * These are the park's own numbers, not new ones. */
.sol-prices--solo { padding: 52px 24px 56px; }
.sol-prices__grid--solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
.sol-prices__solocta { margin: 26px 0 0; }
/* One measure for every line of prose in the block. Single-line paragraphs were
 * stretching to the full 1371px while the lead sat at 720 and the note at 698 --
 * three different column widths stacked on top of each other. */
.sol-prices--solo .sol-prices__lead,
.sol-prices--solo .sol-prices__hours,
.sol-prices--solo .sol-prices__note {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
/* Same type as .sol-story__p, which is the paragraph this one replaces. */
.sol-prices__lead {
  margin-top: 20px;
  font-size: 12.5px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--sol-grey-4);
}
.sol-prices__sub {
  margin: 44px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sol-gold);
}
.sol-prices__sub + .sol-prices__hours { margin-top: 10px; }
.sol-prices--solo .sol-prices__grid { margin-top: 26px; }
.sol-prices--solo .sol-prices__note--wide { margin-top: 26px; }
@media (max-width: 767px) {
  .sol-prices--solo { padding: 38px 24px 44px; }
  .sol-prices__sub { margin-top: 34px; font-size: 14.5px; }
}

.sol-boatgal {
  background: var(--sol-white);
  padding: 52px 0 56px;
  text-align: center;
}
/* Desktop shows all four at once -- a horizontal scrollbar under the photos
 * was the only thing on the page that looked like a browser control rather
 * than design. The swipe strip stays for phones, where it belongs. */
.sol-boatgal__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 1100px;
  max-width: calc(100% - 48px);
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
}
.sol-boatgal__strip li { margin: 0; }
.sol-boatgal__strip img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
@media (max-width: 767px) {
  .sol-boatgal { padding: 38px 0 44px; }
  .sol-boatgal__strip {
    display: flex;
    gap: 12px;
    width: auto;
    max-width: none;
    margin: 22px 0 0;
    padding: 0 24px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sol-boatgal__strip::-webkit-scrollbar { display: none; }
  .sol-boatgal__strip li { flex: 0 0 86%; scroll-snap-align: center; }
  .sol-info__map--pin { width: 100%; }
}
/* Rozvrzeni karet uz neurcuje poradi v HTML, ale trida z generatoru. Drive to delal
   :nth-child(1..3), takze pridani karty na zacatek prohodilo sirky vsem ostatnim --
   presne to, co se stalo, kdyz mela k oteviraci dobe pribyt lod (CTO 11. 9.). */
.sol-info__card { grid-column: span 2; }          /* tretina radku */
.sol-info__card--half { grid-column: span 3; }    /* pulka radku */
/* Bez lodi zustava oteviraci doba pres celou sirku jako dosud. */
.sol-info__card:nth-child(1):not(.sol-info__card--half) { grid-column: 1 / -1; }
.sol-info__card {
  border: .5px solid var(--sol-gold-card);
  border-radius: 2px;
  padding: 14px 18px;
  text-align: left;
}
.sol-info__card h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sol-gold);
}
/* 21. 9.: park cards only ever held <p>, so only <p> was styled. The boat page
 * is the first one with bullet lists in a card, and they inherited prose.css's
 * 16px article type -- 1.7x the text beside them, which grew those two cards
 * from 100px tall to 442px (CTO: "informace pro zakazniky jsou obludne velke"). */
.sol-info__card p,
.sol-info__card li {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.7;
  font-weight: 300;
  color: #8d8783;
}
.sol-info__card ul {
  margin: 0;
  padding-left: 14px;
}
.sol-info__card li + li { margin-top: 5px; }
.sol-info__card li::marker { color: var(--sol-gold-card); }
/* KV 1. 9.: below 1280 the whole artboard is zoomed DOWN (see sol.css), so a
 * 9.5px paragraph lands at 7.6 physical px on a 1024 laptop -- unreadable.
 * The steps below cancel the shrink for this text alone, holding it near
 * 11 physical px across the band. Above 1280 the artboard scales up and the
 * default is already comfortable, so it is left untouched. */
@media (min-width: 1152px) and (max-width: 1279px) {
  .sol-info__card p,
  .sol-info__card li { font-size: 11.5px; }
}
@media (min-width: 1024px) and (max-width: 1151px) {
  .sol-info__card p,
  .sol-info__card li { font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sol-info__card p,
  .sol-info__card li { font-size: 15px; }
}
.sol-info__card b { font-weight: 600; color: var(--sol-grey-4); }
.sol-info__card a b { color: inherit; }
.sol-info__strong { font-weight: 600; color: var(--sol-grey-4); }

/* ------------------------------------------------------------- questions */

/* Heading sits right under the hairline, same gap as [Řekli o nás]. */
.sol-questions { background: var(--sol-white); text-align: center; padding: 44px 24px 0; }
/* right under a hairline the gap is the rule's own 28px -- no double space */
.sol-rule + .sol-questions { padding-top: 0; }
.sol-questions__p {
  margin: 16px 0 20px;
  font-size: 12px;
  line-height: 1.9;
  font-weight: 300;
}
.sol-questions__p a { font-weight: 600; }

/* --------------------------------------------------------------- reviews */

.sol-reviews { background: var(--sol-white); text-align: center; padding: 0 24px 64px; }
.sol-reviews__rating { margin: 18px auto 0; }
.sol-reviews__note { margin: 14px 0 0; font-size: 11px; font-weight: 300; }
.sol-reviews__gmaps { font-weight: 600; }
.sol-reviews__list {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.sol-review {
  width: 380px;
  max-width: 100%;
  border: .5px solid var(--sol-gold-rule);
  border-radius: 2px;
  padding: 16px 20px;
  text-align: left;
  margin: 0;
}
.sol-review__stars { margin: 0; color: var(--sol-gold); font-size: 15px; letter-spacing: 2px; }
.sol-review blockquote {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--sol-grey-5);
  quotes: "„" "“";
}
.sol-review blockquote::before { content: open-quote; }
.sol-review blockquote::after { content: close-quote; }
.sol-review figcaption { margin-top: 10px; font-size: 9px; font-weight: 300; color: #9b9c9c; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 767px) {
  .sol-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-info__card { grid-column: auto; }
  .sol-info__card:nth-child(1) { grid-column: 1 / -1; }
  .sol-info__card:nth-child(2),
  .sol-info__card:nth-child(3) { grid-column: auto; }
}

@media (max-width: 767px) {
  .sol-phero__inner { min-height: 0; flex-direction: column; }
  .sol-phero--bg .sol-phero__inner { min-height: 0; }
  /* SYNC 31. 8.: text-first hero. The backdrop stays as atmosphere at the
   * right edge (the reference's `background: right -60px top 40px / auto
   * 300px`) under a scrim that keeps the copy readable -- the glowing map
   * must never sit under text. */
  .sol-phero__bg,
  .sol-phero--bg .sol-phero__bg {
    display: block;
    left: auto;
    /* CTO 3. 9. (mobile): "pozadi na detailu parku je prilis vpravo a neni
       poznat co to je, proc tam je a ze je to mapa Evropy". It sat 60px off
       the right edge at 300px tall, so a sliver of the map peeked in and read
       as an artefact. Anchored to the edge and taller, it reads as the map;
       the scrim below still carries the text contrast. */
    right: 0;
    top: 32px;
    width: auto;
    height: 380px;
    object-fit: contain;
  }
  .sol-phero__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a0908 0%, #0a0908 52%, rgba(10, 9, 8, .72) 76%, rgba(10, 9, 8, .15) 100%);
    pointer-events: none;
  }
  /* the portrait poster sits below the CTAs: 200 px, centered, above scrim.
   * left/top: desktop pins the KV at 50.4% -- without this reset the poster
   * of every park WITHOUT the rose wrapper shifts 50% right and gets cut
   * (KV screenshot 31. 8., Pardubice; same family as the Samsung report) */
  .sol-phero__kv,
  .sol-phero--bg .sol-phero__kv {
    position: relative;
    left: 0;
    top: 0;
    width: 200px;
    height: auto;
    margin: 24px auto 26px;
  }
  .sol-phero__map { display: none; }
  .sol-phero__kvwrap { position: relative; left: 0; width: 200px; margin: 24px auto 26px; }
  .sol-phero__kvwrap .sol-phero__kv { margin: 0; }
  /* 200 px is a portrait poster's width. The boat carries a 16:9 film frame
   * instead, and at 200 px it shrinks to a 113 px strip lost in the column. */
  .sol-phero__kvwrap--video { width: min(100%, 340px); }
  .sol-phero__kvwrap--video .sol-phero__kv--video { width: 100%; height: auto; }
  .sol-phero__text { width: 100%; margin: 26px 0 0; padding: 0 24px; }

  .sol-prices__grid { grid-template-columns: 1fr; gap: 16px; }
  .sol-prices__note--wide { font-size: 11px; }
  .sol-tab { padding: 12px 14px 14px; }
  .sol-tab caption { font-size: 13px; }
  /* KV 31. 8.: 40% label column keeps the reduced-tariff hint on two lines */
  .sol-tab tbody th { width: 40%; font-size: 10px; }
  .sol-tab tbody td { font-size: 10px; }

  .sol-info { padding: 40px 16px 44px; }
  .sol-info__grid { grid-template-columns: 1fr; gap: 14px; }
  .sol-info__card,
  .sol-info__card:nth-child(1),
  .sol-info__card:nth-child(2),
  .sol-info__card:nth-child(3) { grid-column: auto; }
  .sol-info__card p { font-size: 10.5px; }

  .sol-story { padding: 40px 24px 0; }
  .sol-story__p { font-size: 11px; }
  .sol-questions { padding: 44px 24px 0; }
  .sol-reviews { padding-bottom: 44px; }
  .sol-review { width: 100%; }
}

/* ================================================================== v9 == */

/* Desktop park hero: full-width stage, backdrop pinned right, KV from the
 * centre, text column anchored to the content axis. */
@media (min-width: 768px) {
  .sol-phero__inner { max-width: none; }
  /* KV comment 29. 8.: shorter hero so the partner strip makes the first
   * fold on big monitors -- 596 -> 520, KV cover and text rhythm follow */
  .sol-phero--bg .sol-phero__inner { min-height: 490px; }
  /* height stays 100%: the photo covers the whole stage, the bottom wash
   * melts its cut edge into black (CTO 27. 8.: no naked strip) */
  .sol-phero__bg { left: auto; right: 0; width: 1280px; }
  /* KV 31. 8.: poster 20px lower, and optically centred in the space between
   * the text column (ends ~592 artboard px) and the right edge -- the old
   * centre pin read as "shoved left" against the right-anchored backdrop.
   * Desktop geometry is 1280-artboard px (body zoom scales it), so this is
   * the only knob; viewport media queries never see the real layout width. */
  .sol-phero--bg .sol-phero__kv { left: calc(50% + 130px); top: 20px; height: 440px; }
  .sol-phero--bg .sol-phero__kvwrap { left: calc(50% + 130px); top: 20px; }
  .sol-phero__text { width: 372px; margin: 32px 0 28px calc(50% - 420px); }
  .sol-phero__addr img { width: 26px; height: 24px; }
  /* KV 31. 8.: badge sits 5px lower against the price baseline */
  .sol-phero__badge { margin-bottom: -8px; }
}

/* Mobile park hero (SYNC 31. 8.): copy-first, poster below the CTAs.
 * H1 40, gold-framed address icon, opening date under the perex, white
 * price, stacked 200px buttons. Hours stay out of the hero (they live in
 * the price section and the info cards). */
@media (max-width: 767px) {
  .sol-phero__h1 { margin-top: 0; font-size: 40px; line-height: 42px; letter-spacing: .01em; }
  .sol-phero__addr { margin-top: 14px; gap: 10px; font-size: 15px; }
  .sol-phero__addr img {
    width: 13px;
    height: 13px;
    padding: 6px;
    border: 1px solid var(--sol-gold);
    border-radius: 6px;
    box-sizing: content-box;
  }
  .sol-phero__perex { margin-top: 22px; font-size: 10px; line-height: 1.85; text-wrap: pretty; }
  .sol-phero__open { margin: 9px 0 0; font-size: 10px; font-weight: 600; color: var(--sol-white); }
  .sol-phero__hours { display: none; }
  .sol-phero__price { gap: 12px; margin-top: 22px; }
  .sol-phero__from { font-size: 10px; }
  .sol-phero__value { font-size: 28px; line-height: 28px; color: var(--sol-white); }
  .sol-phero__badge { align-self: center; margin: 0; width: 48px; height: 35px; }
  .sol-phero__badge rect { stroke-width: 5px; }
  .sol-phero__note { margin-top: 18px; font-size: 9.5px; line-height: 1.8; }
  .sol-phero__note b { color: var(--sol-white); }
  .sol-phero__cta { flex-direction: column; align-items: center; gap: 11px; margin-top: 24px; }
  /* 20. 9.: 200px was a fixed width, and the park CTAs ("Vstupenky", "Celý
   * ceník") fit it. The boat sells a combined ticket, so its label is three
   * times longer and, with nowrap, it printed outside its own button on
   * mobile. The park buttons keep their size; only longer labels grow. */
  .sol-phero__cta .sol-btn {
    flex: none;
    min-width: 200px;
    width: auto;
    max-width: 100%;
    height: 32px;
    border-radius: 5px;
    font-size: 12px;
  }
  .sol-phero__cta .sol-btn--tickets,
  .sol-phero__cta .sol-btn--soon {
    height: 40px;
    font-size: 15px;
    font-weight: 500;
  }
}

/* v9 price cards: corner badge on ticket/boat tables, radius 4 on mobile */
.sol-tab { position: relative; }
/* KV comment 29. 8. večer: the sticker's right edge lines up with the number
 * column (the card's inner padding), not a loose 14px offset */
.sol-tab__flag {
  position: absolute;
  right: 20px;
  top: 12px;
  background: var(--sol-gold);
  color: var(--sol-white);
  font-size: 8px;
  font-weight: 500;
  border-radius: 1px;
  padding: 3px 7px;
  letter-spacing: 0;
}
.sol-tab--pass .sol-tab__flag { display: none; }
/* who-qualifies claim under the reduced tariff, lighter face (CTO 29. 8.) */
.sol-tab__hint {
  display: block;
  font-size: 8px;
  font-weight: 300;
  color: var(--sol-grey-2);
  white-space: nowrap;
}
/* KV 31. 8.: on phones the hint wraps inside its column instead of running
 * into the price columns (defined here, AFTER the base rule, or it loses) */
@media (max-width: 767px) {
  .sol-tab__hint { white-space: normal; }
}
.sol-prices__boat { width: 1100px; max-width: 100%; margin: 34px auto 0; }
/* CTO 3. 9. (board): "vycentrovat na střed" -- one button left in this block
 * after the combined ticket moved up to the park CTA, so it is centred rather
 * than left-aligned under a table that spans the whole card. */
.sol-prices__boatcta { text-align: center; margin: 14px 0 0; }

/* Boat + pass notes are part of the white card in the CD file, not a loose
 * paragraph under it: the wrapper carries the border and the table goes bare. */
.sol-prices__boat,
.sol-prices__extra,
.sol-prices__pass {
  border: .5px solid var(--sol-gold-rule);
  border-radius: 2px;
  background: var(--sol-white);
  padding: 14px 20px 16px;
}
.sol-prices__boat .sol-tab,
.sol-prices__extra .sol-tab,
.sol-prices__pass .sol-tab { border: 0; border-radius: 0; padding: 0; background: transparent; }
.sol-prices__boat .sol-prices__note,
.sol-prices__extra .sol-prices__note,
.sol-prices__pass .sol-prices__note { max-width: none; margin: 10px 0 0; }
.sol-prices__boat .sol-tab__flag { right: 0; top: -2px; }
.sol-red { color: #c0392b; }
@media (max-width: 767px) {
  .sol-tab { border-radius: 4px; padding: 12px 13px 13px; }
  .sol-tab__flag { right: 12px; top: 11px; font-size: 7px; padding: 3px 6px; }
  .sol-tab caption { font-size: 12px; letter-spacing: .03em; padding-right: 78px; }
  .sol-tab thead th { font-size: 6.5px; letter-spacing: .05em; }
  .sol-tab tbody th, .sol-tab tbody td { font-size: 9px; padding: 7px 0; }
  .sol-tab__save { font-size: 6.5px; }
  .sol-info__card { border-radius: 4px; }
  .sol-prices__hours { font-size: 10.5px; }
  .sol-reviews__rating { height: 38px; }
}

/* v9 kompas band numbers */
@media (max-width: 767px) {
  .sol-compass__inner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 26px 24px 30px;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }
  .sol-compass__img {
    position: absolute;
    left: -96px;
    top: 24px;
    width: 230px;
    height: 230px;
    margin: 0;
  }
  .sol-compass__inner > div { padding-left: 118px; width: 100%; }
  .sol-compass__h { font-size: 19px; line-height: 1.3; }
  .sol-compass__sub { margin-top: 6px; font-size: 10px; }
  /* KV 31. 8. (Trakoscan): the -118px pull-back ran the city lists under
   * the compass art -- they stay on the heading's indent instead */
  .sol-compass__cities {
    flex-direction: row;
    gap: 22px;
    margin-top: 22px;
    font-size: 11px;
    line-height: 2;
    text-align: left;
  }
  .sol-compass__cities ul { flex: 1; }
  .sol-compass--wide .sol-compass__inner { justify-content: flex-start; }
  .sol-compass--wide .sol-compass__img { position: absolute; width: 230px; height: 230px; margin: 0; }
}

/* per-park partners section (#partneri-parku), target of the strip link */
/* breathing room between the white surface and the heading matches the other
 * park sections (Martina, 28. 8. -- "dodrzet mezery mezi plochou a textem") */
.sol-park-partners { background: var(--sol-white); padding: 52px 24px 48px; text-align: center; }
.sol-park-partners ul {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.sol-park-partners li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sol-park-partners img { height: calc(var(--h, 16px) * 2.2); width: auto; max-width: 220px; }
.sol-park-partners li span { font-size: 11px; font-weight: 300; color: var(--sol-grey-2); }

/* Mayoral patronage (Praha 4, carried over from last season's site): the
 * official wording beside the borough coat of arms, as the old web had it. */
.sol-zastita {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.sol-zastita__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--sol-grey-2);
  text-align: left;
}
/* .sol-park-partners img (the roster row) must not size the coat of arms */
.sol-park-partners .sol-zastita__logo { height: 92px; width: auto; max-width: none; }

/* Street address of the venue, linked to Google Maps (CTO 27. 8.) */
.sol-story__addr {
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
}
.sol-story__addr a { color: var(--sol-grey-2); text-decoration: underline; text-underline-offset: 3px; }
.sol-story__addr a:hover { color: var(--sol-gold); }

/* KV comments 29. 8.: address deep-links to Google Maps in the address tint */
.sol-phero__addr-link { color: inherit; }
.sol-phero__addr-link:hover { color: var(--sol-gold); }

/* KV comment 29. 8. večer: italic second fine-print line breaks the block up */
.sol-prices__fine + .sol-prices__fine { font-style: italic; }

/* past-seasons photo strip under the reviews (KV comment 29. 8. večer) */
.sol-park-history { background: var(--sol-white); padding: 44px 24px 56px; text-align: center; }
/* right under a hairline the gap is the rule's own margin -- no double space
 * (same fix as .sol-rule + .sol-questions; missed here, CTO comment 7. 9.) */
.sol-rule + .sol-park-history { padding-top: 0; }
/* KV 2. 9.: "udelat z toho slideshow do stran kdyz jich bude vice". The strip
   is a scroller, not a grid -- but `justify-content: center` on an overflowing
   flex row makes the items that stick out to the LEFT unreachable in every
   browser. Centring is done with auto margins on a fit-content box instead, so
   a short strip still sits in the middle and a long one scrolls from its
   first photo. */
/* A park with no season behind it says so here instead of leaving a hole. */
.sol-park-history--premiera .sol-park-history__years {
  max-width: 560px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 23px;
}
.sol-park-history__years {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--sol-grey-2);
}
.sol-park-history__strip {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 26px auto 0;
  padding: 0 0 6px;
  list-style: none;
  width: fit-content;
  max-width: 1100px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sol-park-history__strip li { flex: none; scroll-snap-align: start; }
.sol-park-history > p { margin: 22px 0 0; }
.sol-park-history__strip img {
  width: 196px;
  height: 147px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
@media (max-width: 767px) {
  .sol-park-history { padding: 34px 16px 40px; }
  .sol-park-history__strip { justify-content: flex-start; }
  .sol-park-history__strip img { width: 150px; height: 112px; }
}

/* 15s boat spot above the boat price table (KV comment 29. 8. večer) */
.sol-boat__video {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 14px;
}
/* KV 31. 8.: the spot no longer dwarfs the boat card -- on desktop it sits
 * smaller on the left with the price table and note to its right */
/* The grid holds exactly two children: the spot and .sol-boat__body with
 * everything else. It used to place each child into a named cell instead
 * ("video table" / "video note" / "video cta"), which held only while the
 * block had one table and one note -- when the combo table arrived on
 * 10. 9. 2026 both tables were assigned the same cell and printed over each
 * other on production. Named cells cannot express "however many follow". */
@media (min-width: 768px) {
  .sol-prices__boat--video {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
    column-gap: 24px;
  }
  .sol-prices__boat--video .sol-boat__video {
    height: 100%;
    max-height: none;
    margin-bottom: 0;
  }
}

/* The cruise page ends with one .sol-prose block. That class is the article
 * layout -- left-aligned in a 760px column -- so after a page of centred
 * product sections the last heading jumped to the left edge. */
.sol-prose--centred { text-align: center; padding-top: 44px; }
/* 20px is the article heading; on a product page it read as a leftover from
 * another template. 26px is what the closing compass block uses -- clearly a
 * closing note, not a section on a par with the price list. */
.sol-prose--centred h2 { font-size: 26px; margin-top: 0; }
@media (max-width: 767px) {
  /* .sol-h2--sub drops to 20px on mobile, so a fixed 26 here made the closing
     note louder than the section above it. */
  .sol-prose--centred { padding-top: 34px; }
  .sol-prose--centred h2 { font-size: 17px; }
}
.sol-prose--centred > * { margin-left: auto; margin-right: auto; }
.sol-prose--centred p { max-width: 700px; }

/* ---- cruise hero on the phone (CTO 22. 9. 00:56) ---------------------------
   "chceme dostat video do fieldu": on a phone the film sat below the buttons,
   so the first screen was all type. The order is now headline, address, lead,
   price, "50 minut na Vltave", VIDEO, then the buttons - the ticket link and
   CELY CENIK land under the film rather than pushing it off the screen.

   `display: contents` on the text block lets its children take part in the
   hero's own column, which is what makes the reordering possible at all. It
   also throws the box away, and with it EVERY non-inherited property that box
   carried: `padding: 0 24px`, `width: 100%` and -- the one that cost us the
   first version -- `position: relative; z-index: 1`. Without that pair the
   copy drops into the static layer, while `__bg` and `__scrim` are absolutely
   positioned, so they paint on top of it: the headline and the lead went
   invisible under the scrim (CTO 22. 9. 02:00). All three are restored per
   child below. Only the cruise hero is touched -- `sol-phero--boat` exists
   for exactly this. */
@media (max-width: 767px) {
  .sol-phero--boat .sol-phero__text { display: contents; }
  .sol-phero--boat .sol-phero__h1,
  .sol-phero--boat .sol-phero__addr,
  .sol-phero--boat .sol-phero__perex,
  .sol-phero--boat .sol-phero__price,
  .sol-phero--boat .sol-phero__note,
  .sol-phero--boat .sol-phero__cta {
    position: relative;   /* was on __text; not inherited through contents */
    z-index: 1;           /* keeps the copy above __bg and __scrim */
    align-self: stretch;  /* __inner is align-items: flex-start, so without
                             this each line shrinks to its own text width */
    padding-left: 24px;
    padding-right: 24px;
  }
  .sol-phero--boat .sol-phero__h1 { order: 1; margin-top: 16px; }
  .sol-phero--boat .sol-phero__addr { order: 2; }
  .sol-phero--boat .sol-phero__perex { order: 3; }
  .sol-phero--boat .sol-phero__price { order: 4; }
  .sol-phero--boat .sol-phero__note { order: 5; }
  .sol-phero--boat .sol-phero__kvwrap { order: 6; }
  .sol-phero--boat .sol-phero__cta { order: 7; }

  /* "PLAVBA SVETELNOU LODI" is three words where a park has one. At the shared
     34 px it wrapped to three lines and pushed everything below the fold. */
  .sol-phero--boat .sol-phero__h1 { font-size: 26px; line-height: 30px; }
  /* "50 minut na Vltave" belongs to the price, not to the buttons */
  .sol-phero--boat .sol-phero__note { margin-top: 4px; }
  .sol-phero--boat .sol-phero__cta { margin-top: 18px; }
  /* CTO 22. 9. 02:10 and 02:26: "to video taky posun nahoru, at je klidne za
     textem 50 minut na Vltave, je to cerne nicemu to nevadi" / "partneri nejsou
     ve viditelne zone takze jeste smrknout nahoru, klidne at tlacitko je trochu
     pres video".
     The frame is letterboxed into black on all four sides by the mask, so its
     top and bottom rows carry no picture. Sliding it under the line above and
     letting the buttons sit on its lower edge costs nothing visually and lifts
     the partner rule into the first screen -- which is the point. */
  .sol-phero--boat .sol-phero__kvwrap--video { margin: -26px auto -18px; }
  .sol-phero--boat .sol-phero__cta {
    margin-top: 0;
    padding-bottom: 18px;   /* air before the partner rule, but not a gap */
    z-index: 2;             /* the buttons overlap the film, not the reverse */
  }
  /* The shared rule pins the backdrop to the right edge at a fixed height and
     lets it run off the left -- right for a 1280x500 strip whose map sits on
     the right. The new master is the whole composition (1280x979), so cropping
     it that way would hide most of what CTO asked to see. Full width, height
     from the ratio: the map, the ribbon and its closing loop all fit. */
  .sol-phero--boat .sol-phero__bg {
    width: 100%;
    height: auto;
    top: 14px;
  }
}