/*
 * Tourila Public – the composition of the theme pages (start page, pages, magazine). Every value from the tokens of
 * Tourila UI (plugin: assets/css/tourila-ui.css); components (header, footer, cards, tiles, chips, search field) are
 * never restyled here – they look the same on the travel page and in the Studio preview.
 */

/* Start page: claim, the search, up to three real covers. */
.tu-hero {
  padding-block: clamp(32px, 6vw, 88px) var(--tu-space-4);
}
.tu-hero__grid {
  align-items: center;
  display: grid;
  gap: var(--tu-space-12);
}
.tu-hero__grid.has-collage {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.tu-hero__title {
  font-size: var(--tu-title-display);
  font-weight: var(--tu-weight-heavy);
  letter-spacing: var(--tu-tracking-display);
  line-height: 0.98;
  margin-bottom: var(--tu-space-6);
  max-width: 13ch;
}
.tu-hero__lead {
  color: var(--tu-text);
  font-size: clamp(17px, 0.6vw + 14px, 21px);
  margin: 0 0 var(--tu-space-8);
  max-width: 46ch;
}
.tu-hero__facts {
  color: var(--tu-muted);
  font-size: var(--tu-text-sm);
  margin: var(--tu-space-6) 0 0;
}
.tu-hero__collage {
  aspect-ratio: 1 / 1;
  display: grid;
  gap: var(--tu-space-3);
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.tu-hero__collage img {
  border-radius: var(--tu-radius-xl);
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.tu-hero__collage img:first-child {
  grid-row: span 2;
}
.tu-hero__collage img:only-child {
  grid-column: span 2;
}
.tu-hero__collage img:nth-child(2):last-child {
  grid-row: span 2;
}
/* How Tourila works – three sentences, no icons needed. */
.tu-steps {
  counter-reset: step;
  display: grid;
  gap: var(--tu-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.tu-steps li {
  background: var(--tu-mist);
  border-radius: var(--tu-radius-xl);
  counter-increment: step;
  display: grid;
  gap: var(--tu-space-2);
  padding: var(--tu-space-6);
}
.tu-steps li::before {
  color: var(--tu-brand);
  content: counter(step);
  font-size: var(--tu-text-lg);
  font-weight: var(--tu-weight-heavy);
}
.tu-steps b {
  color: var(--tu-ink);
  font-size: var(--tu-text-lg);
}
.tu-steps span {
  color: var(--tu-muted);
  font-size: var(--tu-text-md);
}
.tu-post h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
}
.tu-home > .tu-section:last-child {
  padding-bottom: 0;
}
/* Pages and posts */
.tu-page__head--wide {
  max-width: none;
}
.tu-page__cover {
  margin: 0 auto var(--tu-space-10);
  max-width: 1040px;
}
.tu-page__cover img {
  border-radius: var(--tu-radius-xl);
  display: block;
  width: 100%;
}
.tu-pager:empty {
  display: none;
}
.tu-pager .page-numbers {
  border-radius: var(--tu-radius-pill);
  color: var(--tu-ink);
  min-width: var(--tu-control-h);
  padding: var(--tu-space-2) var(--tu-space-3);
  text-align: center;
  text-decoration: none;
}
.tu-pager .page-numbers.current {
  background: var(--tu-ink);
  color: #fff;
}
@media (max-width: 1099px) {
  .tu-hero__grid.has-collage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: var(--tu-space-8);
  }
}
@media (max-width: 759px) {
  .tu-hero__grid.has-collage {
    grid-template-columns: 1fr;
  }
  .tu-hero__collage {
    display: none;
  }
  .tu-hero__title {
    margin-bottom: var(--tu-space-4);
  }
  .tu-hero__lead {
    margin-bottom: var(--tu-space-6);
  }
}