/* Točna „Zastávka" (DIRECTION.md §3.5): olive grounds, white pages, the kiosk held whole, its window
   panel standing on the hero (VENUE-HERO-2.md). The group system (tokens, header, sheet, hero frame,
   controls, menu block, footer) is group.css, linked before this file; this file sets Točna's brand
   and composes its own sections on the 12-column grid. Gopher reads, Courier Prime writes. */

:root {
  --brand: #6a7c51;
  --brand-lift: #556341;               /* filled hover on white: the olive 8 % darker (white text keeps 6:1) */
  --font-write: "Courier Prime", "Courier New", monospace;
  --label-weight: 700;
  --quiet: 1;                          /* white on olive is 4.55:1 at full strength; quieter fails */
  --current-underline: underline;
  --rule: var(--ink);
  --dots: rgba(16, 32, 27, .35);
}

.sg-lead, .sg-body, .sg-small { text-wrap: pretty; }
html:not(.js) [data-departures-link] { display: none; }

/* ---------- 1. the kiosk's window panel (VENUE-HERO-2.md, operator 6 Nov) ----------
   The script „Točna" and the lit window are the photograph's subjects. */
.card-tocna { --hero-object-padding: 1.25rem; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem;
  background: #10201b; color: #fff; }
.card-tocna__mark { grid-column: 1; grid-row: 1; margin: 0; align-self: start; }
.card-tocna__badge { display: block; width: 5rem; height: 5rem; border-radius: 50%; }
.card-tocna__hours { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.card-tocna__week { font-family: var(--font-write); font-size: .875rem; line-height: 1.35; font-weight: 400; }
.card-tocna__week > span { white-space: nowrap; }
.card-tocna__state { margin-top: .5rem; font-family: var(--font-read); font-size: 1.25rem; line-height: 1.2; font-weight: 500; color: #fff; text-wrap: pretty; }
.card-tocna__offer { grid-column: 1 / -1; max-width: none; font-family: var(--font-read); font-size: 1rem; line-height: 1.4; font-weight: 400; text-wrap: pretty; }
.card-tocna__actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem;
  font-family: var(--font-read); font-size: 1rem; font-weight: 500; line-height: 1.25; }
.card-tocna .sg-btn { height: 3rem; padding-inline: 1.5rem; background: #fff; color: #10201b; border-color: #fff;
  font: 500 .9375rem/1 var(--font-read); letter-spacing: 0; }
.card-tocna .sg-btn:hover { background: #6a7c51; border-color: #6a7c51; color: #fff; }
.card-tocna :focus-visible { outline-color: #fff; }
.card-tocna .sg-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-decoration: underline; }
.card-tocna .sg-link:hover { color: #fff; text-decoration-thickness: 2px; }
@media (min-width: 48rem) {
  .card-tocna { --hero-object-padding: 1.5rem; grid-template-columns: 5.5rem minmax(0, 1fr); }
  .card-tocna__badge { width: 5.5rem; height: 5.5rem; }
}
@media (max-width: 47.99rem) {
  /* phones: the 4:5 frame fills a 1:2 window by height, so a board standing on it would cover the
     script and the window; it takes the hero's last row and overlaps the photograph's foot by 8rem */
  :root { --stand-lift: 8rem; }
  .sg-hero__stand { grid-area: 2 / 1; }
}
@media (min-width: 64rem) {
  .sg-hero__stand > .card-tocna { grid-column: 1 / 7; }
  .card-tocna { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; }
  .card-tocna__badge { width: 6rem; height: 6rem; }
  .card-tocna__week { font-size: .9375rem; }
  .card-tocna__state { font-size: 1.5rem; }
  .card-tocna__offer { font-size: 1.0625rem; line-height: 1.45; }
  .sg-hero__photo { --focal-wide: 50% 100%; }
}
@media (min-width: 100rem) {
  .sg-hero__photo { --focal-wide: 50% 84%; }
}
@media (min-width: 64rem) and (max-width: 89.999rem) and (min-height: 801px) {
  /* Leave the wrap baseline clear at 1387×900 while retaining the covered 100% crop. */
  .sg-hero__stand { --stand-padding-bottom: 2rem; }
}
@media (min-width: 64rem) and (max-height: 800px) {
  .sg-hero__photo { --focal-wide: 50% 85%; }
  .sg-hero__stand { --stand-padding-bottom: 16px; }
  .card-tocna { --hero-object-padding: 1.25rem; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .card-tocna__badge { width: 5rem; height: 5rem; }
  .card-tocna__state { font-size: 1.25rem; }
  .card-tocna__offer { font-size: 1rem; line-height: 1.4; }
}

/* ---------- sections: one pad between them, the last one closes onto the footer ---------- */
main { padding-bottom: var(--section-pad); }

/* ---------- 2. the departures board ---------- */
.board__grid { row-gap: var(--head-gap); }
.board__head, .board__rows { grid-column: 1 / -1; }
.board__note { margin-top: 1rem; max-width: 28rem; color: var(--ink-60); text-wrap: pretty; }
.board__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); font-family: var(--font-write); font-variant-numeric: tabular-nums; }
.board__row { display: grid; grid-template-columns: 4.25rem 3rem minmax(0, 1fr); grid-template-areas: "time line stop" "time line to" "time line in"; column-gap: .75rem; align-items: baseline;
  padding: .875rem 0; border-bottom: 1px solid var(--hairline); }
.board__time { grid-area: time; font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.board__line { grid-area: line; align-self: start; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 1.875rem; padding: 0 .375rem;
  border: 1px solid var(--rule); font-weight: 700; font-size: 1rem; line-height: 1; }
.board__to { grid-area: to; font-size: 1rem; line-height: 1.35; }
.board__stop { grid-area: stop; font-size: .875rem; line-height: 1.35; color: var(--ink-60); }
.board__in { grid-area: in; margin-top: .125rem; font-size: .875rem; line-height: 1.35; color: var(--ink-60); white-space: nowrap; }
@media (min-width: 48rem) {
  .board__row { grid-template-columns: 5rem 3.5rem minmax(0, 1fr) auto; grid-template-areas: "time line stop in" "time line to in"; column-gap: 1rem; align-items: center; }
  .board__line { align-self: center; }
  .board__in { margin: 0; font-size: 1rem; color: var(--ink); justify-self: end; }
}
@media (min-width: 64rem) {
  .board__head { grid-column: 1 / 6; }
  .board__rows { grid-column: 7 / 13; }
  .board__row { grid-template-columns: 6rem 4rem minmax(0, 1fr) auto; padding: 1.25rem 0; }
  .board__time { font-size: 1.5rem; }
}

/* ---------- 3. Točna kafe a svačina: Tomáš's text and the window ---------- */
.story__title { margin-bottom: var(--head-gap); }
.story__photo { position: relative; margin-top: 1.5rem; }
.story__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.story__photo .sg-chip { left: 1rem; }
.story__body { margin-top: 1.5rem; }
.story__body .sg-body { margin: 0; }
.story__body .sg-body + .sg-body { margin-top: 1rem; }
@media (min-width: 48rem) {
  .story__grid { grid-template-rows: auto auto minmax(0, 1fr); }
  .story__title { grid-row: 1; }
  .story__lead { grid-row: 2; }
  .story__body { grid-row: 3; align-self: start; margin-top: 1.5rem; }
  .story__photo { grid-row: 1 / 4; align-self: start; margin: 0; }
}

/* ---------- 4. Do tašky: two columns of what goes in the bag ---------- */
.bag__title { grid-column: 1 / -1; margin-bottom: var(--head-gap); }
.bag__list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; }
.bag__item { padding: .625rem 0; border-top: 1px solid var(--hairline); font-family: var(--font-write); font-size: 1.125rem; line-height: 1.4; }
.bag__item:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 48rem) {
  .bag__list { grid-column: 1 / 12; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--grid-gap); }
  .bag__item:nth-child(-n+3) { grid-column: 1 / 6; }
  .bag__item:nth-child(n+4) { grid-column: 7 / 12; }
  .bag__item:nth-child(3n+1) { grid-row: 1; }
  .bag__item:nth-child(3n+2) { grid-row: 2; }
  .bag__item:nth-child(3n) { grid-row: 3; }
  .bag__item { padding: .875rem 0; font-size: 1.25rem; }
  .bag__item:nth-child(3) { border-bottom: 1px solid var(--hairline); }
}

/* ---------- 5. Nabídka: the published offer, only when Točna publishes one ---------- */
.offer__block { grid-column: 1 / -1; }
.offer__menu { margin-top: var(--head-gap); }
.offer__menu > .sg-menu__section:first-of-type { margin-top: 1.5rem; }
.offer__menu .menu-sample { margin-top: 1.5rem; color: var(--ink-60); }
@media (min-width: 64rem) { .offer__block { grid-column: 1 / 8; } }

/* ---------- 6. Kdy jsme u okénka: the week as the printed menu sets prices, on dotted leaders ---------- */
.week__title { grid-column: 1 / -1; margin-bottom: var(--head-gap); }
.week__rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.week__row { display: flex; align-items: baseline; gap: .625rem; }
.week__dots { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 2px dotted var(--dots); }
.week__time { white-space: nowrap; }
.week__row[aria-current] { font-weight: 700; }
.week__place { grid-column: 1 / -1; margin-top: 2rem; }
.week__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; font-size: var(--body); line-height: 1.4; }
@media (min-width: 48rem) {
  .week__rows { grid-column: 1 / 7; gap: .75rem; }
  .week__place { grid-column: 8 / 13; margin-top: 0; }
}
@media (min-width: 64rem) {
  .week__rows { grid-column: 1 / 6; }
  .week__place { grid-column: 7 / 12; }
}