/* ============================================================================
   OVERCROSS - Tourkalender: /{lang}/{calendar-slug}/{category-slug}-{year}
   ============================================================================

   One sheet for one template. Until 22.09.2026 the page had two of each:
   `LandingPage::frontend.calendar.*` for a desktop request and
   `...calendar_m.*` for a phone one, picked by `request()->get('device')` in
   `LandingPageController::tourCalendar()`. The two had drifted apart - the
   phone copy never got the location breadcrumbs, the empty-month skip or the
   preloaded location names, and the desktop copy never got the tour card or
   the tap-sized button. Both are merged here, and the device branch is gone.

   THE LADDER. 600 / 900 / 1200 and no other width, per characteristic 2 of
   `docs/design/mobile-concept.md`. Base styles are the phone; a wider screen
   ADDS through `min-width`. There is no `max-width` query in this file.

   The phone is the base in substance, not only in syntax: a tour row is the
   card the phone used to get (photo, title, date, price, one full-size
   button), and a wider screen unfolds that card onto one line rather than
   reaching for the four-column table the desktop used to get.

   Colours: #FF6A00 orange (CTA only), #111214 ink, #EDE3D5 milk. The tokens,
   the 48px touch helper and the safe-area insets come from `css/base.css`,
   which the shell loads before this file.
   ========================================================================= */


:root {
  /* The page ground. `--main-bg-color` is page.css's warm milk; the fallback
     is the house milk for the moment before that sheet lands. */
  --tk-ground: var(--main-bg-color, #EDE3D5);
  --tk-card: #F6F6F6;
  --tk-card-alt: #EBEBEB;
  --tk-rule: #DDDDDD;
  --tk-muted: #6B6B6B;
  --tk-orange-dark: #E65F00;

  /* The hero's share of the screen, by rung. A phone keeps the short hero it
     has today; the desktop keeps the tall one it has today. */
  --tk-hero-h: 30vh;

  /* The bar sits under the site header, whose height header.css publishes. */
  --tk-header-h: var(--oc-header-h, 80px);
}


/* --- 1. Hero -------------------------------------------------------------
   `dvh` with a `vh` fallback: on iOS Safari a hero sized in plain vh resizes
   under the reader's thumb as the toolbar collapses, which is a layout shift
   on the largest element of the page (base.css, section 7).  */

.tk-hero {
  position: relative;
  margin-top: 0;
}

.tk-hero-media {
  position: relative;
  height: var(--tk-hero-h);
  overflow: hidden;
}

.tk-hero-img {
  display: block;
  width: 100%;
  height: var(--tk-hero-h);
  object-fit: cover;
}

.tk-hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 100%;
  padding: 0 var(--oc-gutter, 20px);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(17, 18, 20, .55);
}

.tk-title {
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--oc-eyebrow-track, .18em);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tk-years {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--oc-touch-gap, 8px);
  margin-bottom: 8px;
}

/* A year is a real link and a real tap target: 48px with 8px between them. */
.tk-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oc-touch, 48px);
  min-width: 84px;
  padding: 0 14px;
  border: 2px solid #FFFFFF;
  border-radius: 0;
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}

.tk-year:hover,
.tk-year:focus-visible {
  background: rgba(17, 18, 20, .7);
  color: #FFFFFF;
}

.tk-year.is-current {
  background: var(--oc-orange, #FF6A00);
  color: #FFFFFF;
}

.tk-subtitle {
  margin-top: 4px;
  font-size: var(--oc-lead-size, 15px);
  font-weight: 500;
  line-height: 1.3;
}


/* --- 2. The page body ---------------------------------------------------- */

.tk-body {
  width: 100%;
  padding: 16px 0 32px;
  background: var(--tk-ground);
}

.tk-shell {
  width: 100%;
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 var(--oc-gutter, 20px);
}


/* --- 3. The filter bar ---------------------------------------------------
   Sticky under the header at every width. One column on the phone, three
   across from the tablet rung, which is where three 48px controls stop
   crowding each other.  */

.tk-filter {
  position: -webkit-sticky;
  position: sticky;
  top: var(--tk-header-h);
  z-index: 100;
  padding: 10px 0;
  background: var(--tk-ground);
}

.tk-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--oc-touch-gap, 8px);
}

.tk-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--oc-touch, 48px);
  padding: 0 12px;
  background: #FFFFFF;
  border: 2px solid #D7D2C8;
  border-radius: 7px;
}

.tk-field-label {
  color: var(--tk-muted);
  font-size: 12px;
  line-height: 1.2;
}

.tk-field-value {
  width: 100%;
  padding-right: 18px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--oc-orange, #FF6A00);
  /* 16px or more: iOS Safari zooms the whole page on focus below that. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tk-field-value option {
  color: var(--oc-ink, #111214);
}

.tk-field-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9E9E9E;
  font-size: 16px;
  pointer-events: none;
}

.tk-search {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oc-touch, 48px);
  padding: 0 16px;
  border: none;
  border-radius: 7px;
  background: var(--oc-orange, #FF6A00);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}

.tk-search:hover {
  background: var(--tk-orange-dark);
}

/* The country list. Collapsed is not absent: every country is rendered into
   `#tk-country-list` on the server and only shown or hidden from here. */
.tk-countries {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  width: 100%;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid #D7D2C8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 16px rgba(17, 18, 20, .07);
}

.tk-countries.is-open {
  display: block;
}

.tk-countries li {
  display: flex;
  align-items: center;
  min-height: var(--oc-touch, 48px);
  padding: 8px 12px;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}

.tk-countries li:hover,
.tk-countries li.is-active {
  background: var(--tk-card-alt);
  color: var(--oc-orange, #FF6A00);
}

.tk-countries li.tk-no-results {
  color: var(--tk-muted);
  cursor: default;
}

/* `[hidden]` is a UA rule and loses to the `display: flex` above, so the
   attribute has to be honoured here or a filtered-out country stays visible.
   Last in the section on purpose: it has the same specificity as the rule it
   has to beat. */
.tk-countries li[hidden] {
  display: none;
}


/* --- 4. A month ---------------------------------------------------------- */

.tk-month {
  /* The filter bar scrolls a month under itself, so the anchor has to clear
     the header and the bar together. */
  scroll-margin-top: calc(var(--tk-header-h) + 80px);
  margin-bottom: 24px;
}

.tk-month-title {
  margin-bottom: 8px;
  font-size: var(--oc-h2-size, clamp(24px, 5.5vw, 30px));
  font-weight: 700;
  color: var(--oc-ink, #111214);
  text-align: center;
}

.tk-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--tk-rule);
  background: var(--tk-card);
}


/* --- 5. A tour row -------------------------------------------------------
   The phone's card is the base: a 110px photo on the left, the text beside
   it, and the button on its own line underneath. The four parts are grid
   children in document order, so a wider screen only has to change the
   template - no reflow, no second markup.  */

.tk-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 10px;
  background: var(--tk-card-alt);
  border-top: 2px solid #FFFFFF;
}

.tk-row:first-child {
  border-top: none;
}

/* A row behind the month's expander. It is in the DOM at first paint and
   carries its own text; only its box is withheld until the reader asks. */
.tk-row--more {
  display: none;
}

.tk-list.is-open .tk-row--more {
  display: grid;
}

.tk-photo {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.tk-photo img {
  display: block;
  width: 110px;
  height: 82px;
  object-fit: cover;
  border-radius: 5px;
}

.tk-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.tk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.tk-crumb {
  color: var(--tk-muted);
  text-decoration: none;
  white-space: nowrap;
}

.tk-crumb:hover,
.tk-crumb:focus-visible {
  color: var(--oc-orange, #FF6A00);
  text-decoration: underline;
}

.tk-crumb-sep {
  color: #BBBBBB;
  font-size: 11px;
  line-height: 1;
}

.tk-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--oc-ink, #111214);
  text-decoration: none;
}

.tk-name:hover,
.tk-name:focus-visible {
  color: var(--oc-orange, #FF6A00);
  text-decoration: underline;
}

.tk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
}

.tk-date {
  color: var(--oc-ink, #111214);
  font-weight: 600;
}

.tk-price {
  color: var(--oc-orange, #FF6A00);
  font-weight: 700;
  white-space: nowrap;
}

.tk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-column: 2;
  grid-row: 3;
  min-height: var(--oc-touch, 48px);
  margin-top: 6px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--oc-orange, #FF6A00);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.tk-cta:hover,
.tk-cta:focus-visible {
  background: var(--tk-orange-dark);
  color: #FFFFFF;
}

.tk-cta svg {
  flex: 0 0 auto;
}

/* The country filter hides a row that does not match. `[hidden]` is a UA rule
   and loses to both `display: grid` declarations above, so it is restated
   here, last in the section and with the specificity to win. */
.tk-list .tk-row[hidden] {
  display: none;
}


/* --- 6. The month's own expander ----------------------------------------- */

.tk-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: var(--oc-touch, 48px);
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: var(--oc-ink, #111214);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.tk-more:hover {
  background: #2A2C30;
}

.tk-more--close,
.tk-list.is-open .tk-more--open {
  display: none;
}

.tk-list.is-open .tk-more--close {
  display: flex;
}


/* --- 7. From 600: the tablet --------------------------------------------- */

@media (min-width: 600px) {
  :root {
    --tk-hero-h: 50vh;
  }

  .tk-filter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
  }

  .tk-title {
    font-size: clamp(34px, 6vw, 48px);
  }

  .tk-subtitle {
    font-size: 18px;
  }

  .tk-row {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .tk-photo img {
    width: 140px;
    height: 100px;
  }

  .tk-name {
    font-size: 17px;
  }
}


/* --- 8. From 900: the laptop ---------------------------------------------
   The card unfolds onto one line: photo, name, dates and price, button. That
   is the reading order the desktop table had, without the table.  */

@media (min-width: 900px) {
  :root {
    --tk-hero-h: 65vh;
  }

  .tk-body {
    padding: 24px 0 40px;
  }

  .tk-filter-grid {
    gap: 18px;
  }

  .tk-title {
    font-size: clamp(48px, 5vw, 68px);
  }

  .tk-subtitle {
    font-size: 22px;
  }

  .tk-years {
    gap: 12px;
  }

  .tk-year {
    min-width: 140px;
    font-size: 26px;
  }

  .tk-month-title {
    font-size: 32px;
    text-align: left;
  }

  .tk-row {
    grid-template-columns: 150px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
  }

  .tk-photo {
    grid-row: 1;
  }

  .tk-photo img {
    width: 150px;
    height: 100px;
  }

  .tk-main {
    grid-column: 2;
    grid-row: 1;
  }

  .tk-meta {
    grid-column: 3;
    grid-row: 1;
    gap: 6px;
    flex-direction: column;
    align-items: flex-end;
    font-size: 15px;
  }

  .tk-cta {
    grid-column: 4;
    grid-row: 1;
    min-width: 170px;
    margin-top: 0;
  }
}


/* --- 9. From 1200: the desktop ------------------------------------------- */

@media (min-width: 1200px) {
  .tk-shell {
    padding: 0 32px;
  }

  .tk-row {
    grid-template-columns: 150px minmax(0, 1fr) 200px 200px;
  }

  .tk-meta {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 20px;
  }
}