/* İkonik tourism home: picking a destination recolours the page in that destination's theme. */

body { transition: background-color var(--t-slow) var(--ease); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--primary); color: var(--on-primary);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { top: 16px; }

/* shared transitions on theme change */
.btn--primary, .hero__stage, .chip-card, .contact, .nav__link, .step__num {
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background-color var(--t-slow) var(--ease);
}
.header__inner { height: 72px; display: flex; align-items: center; gap: var(--s-8); }
.nav { display: flex; gap: var(--s-6); margin-left: auto; }
.nav__link { font-size: 15px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.nav__link:hover { color: var(--primary); }
.nav__link.is-tucked { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .header__cta { margin-left: auto; }
}
@media (max-width: 420px) {
  .header .wordmark__img { height: 36px; }
  .header .lg { --lg-h: 36px; }
}

/* ---------- hero ---------- */
.hero { padding-block: var(--s-12) var(--s-16); }
.hero__grid {
  display: grid; gap: var(--s-6) var(--s-12);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "text   stage"
    "picker stage"
    "go     stage";
  grid-template-rows: auto auto 1fr;
}
.hero__text { grid-area: text; display: grid; gap: var(--s-4); }
.hero__text .t-display { color: var(--ink); }
.hero__lead { font-size: 18px; line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }

/* destination picker */
.picker { grid-area: picker; display: grid; gap: var(--s-2); }
.pick {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-lg); border: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pick:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pick[aria-pressed="true"] {
  background: var(--surface-raised); border-color: var(--border);
  box-shadow: var(--shadow-md), var(--highlight);
}
.pick__swatch {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.pick__swatch .i { font-size: 22px; }
.pick__img { display: none; }
.pick__name { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.pick__countries { display: block; font-size: 13px; color: var(--ink-muted); }
.pick__meta { font-size: 13px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.pick[aria-pressed="true"] .pick__meta { color: var(--primary-deep); }
.pick__soon {
  font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary-deep);
}

.hero__go { grid-area: go; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; align-self: start; padding-left: var(--s-3); }

/* preview stage */
.hero__stage {
  grid-area: stage; position: relative;
  min-height: 600px; border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 50% 45%, var(--surface-raised) 0%, transparent 70%),
    linear-gradient(170deg, var(--tint), var(--primary-soft));
  box-shadow: var(--shadow-md), var(--highlight);
  overflow: hidden;
}
.hero__arts { position: absolute; inset: 40px 0 0; }
.hero__art {
  position: absolute; left: 50%; top: 50%;
  width: min(118%, 820px); height: auto; max-width: none;
  transform: translate(-50%, -46%) scale(.94);
  opacity: 0;
  transition: opacity 600ms var(--ease), transform 900ms var(--ease);
}
.hero__art.is-on { opacity: 1; transform: translate(-50%, -48%) scale(1); }
.hero__art--cutout { width: min(94%, 700px); filter: drop-shadow(0 24px 30px rgba(74, 52, 24, .22)); }
.hero__art--scene {
  width: auto; height: calc(100% - 64px); max-height: none;
  transform: translate(-50%, -50%) scale(.96);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero__art--scene.is-on { transform: translate(-50%, -50%) scale(1); }

.chip-card {
  position: absolute; z-index: 2;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--highlight);
  padding: var(--s-4) var(--s-5);
}
.chip-card--climate {
  top: var(--s-6); right: var(--s-6);
  color: var(--on-primary);
  display: flex; gap: var(--s-3); align-items: center;
}
.chip-card--climate .wx { --wx-size: 52px; margin: -8px -2px -8px -6px; }
.chip-card--climate b { display: block; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.chip-card--climate span { font-size: 12px; opacity: .85; }
.chip-card--price { left: var(--s-6); bottom: var(--s-6); display: grid; gap: 2px; }
.chip-card--price b { font-size: 22px; letter-spacing: -0.01em; }
.chip-card--price span { font-size: 12px; color: var(--ink-muted); }

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "stage" "picker" "go";
    grid-template-rows: none;
  }
  .hero__stage { min-height: 0; aspect-ratio: 5 / 4; }
}
@media (max-width: 560px) {
  .hero { padding-top: var(--s-8); }
  .hero__stage { aspect-ratio: 1 / 1; }
  .hero__arts { inset: 56px 0 0; }
  .chip-card { padding: var(--s-3) var(--s-4); }
  .chip-card--climate { top: var(--s-3); right: var(--s-3); }
  .chip-card--climate b { font-size: 22px; }
  .chip-card--price { left: var(--s-3); bottom: var(--s-3); }
}

/* ---------- tours ---------- */
@media (min-width: 900px) { .tour-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- event tickets ----------
   The backdrop is darker than the page so it does not merge with the tours; soft edges fade into the section padding,
   so the card perforation cut-outs always sit on a flat --bg-deep. */
.events {
  background: linear-gradient(180deg, transparent, var(--bg-deep) var(--s-16), var(--bg-deep) calc(100% - var(--s-16)), transparent);
}
.ev-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-note { margin-top: var(--s-6); max-width: 64ch; }

.evt {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), var(--highlight);
  container-type: inline-size; container-name: evt;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.evt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--highlight); }

.evt__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: linear-gradient(170deg, var(--stub-from), var(--stub-to));
}
.evt__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.evt:hover .evt__photo { transform: scale(1.03); }
.evt__when {
  position: absolute; left: var(--s-3); top: var(--s-3);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 var(--s-3); border-radius: var(--r-full);
  background: rgba(255, 253, 249, .92); color: var(--ink);
  font-size: 12px; font-weight: 800; box-shadow: var(--shadow-sm);
}
.evt__when .i { color: var(--primary); }

.evt__body { flex: 1; display: grid; gap: var(--s-1); align-content: start; padding: var(--s-5) var(--s-6) var(--s-5); }
.evt__body .t-eyebrow { margin-bottom: var(--s-1); }
.evt .evt__body .t-h2 { font-size: 22px; }
.evt__text {
  margin-top: var(--s-2); font-size: 14px; line-height: 1.5; color: var(--ink-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3em;
}

/* seat categories: a price list row with a dotted leader */
.seats { display: grid; gap: 10px; margin-top: var(--s-4); }
.seat { display: flex; align-items: baseline; gap: var(--s-2); font-size: 14px; }
.seat__lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; align-self: center; }
.seat__lvl i { width: 4px; border-radius: 1px; background: var(--border); }
.seat__lvl i:nth-child(1) { height: 5px; }
.seat__lvl i:nth-child(2) { height: 8px; }
.seat__lvl i:nth-child(3) { height: 12px; }
.seat__lvl i.is-on { background: var(--primary); }
.seat__name { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat__dots { flex: 1; min-width: var(--s-4); border-bottom: 2px dotted var(--border); transform: translateY(-4px); }
.seat__price { flex: none; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seat__price small { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* stub: perforation with semicircular cut-outs at the edges */
.evt__buy {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-6) var(--s-5);
  border-top: 2px dashed var(--border);
}
.evt__buy::before, .evt__buy::after {
  content: ""; position: absolute; top: -1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-deep); transform: translateY(-50%);
}
.evt__buy::before { left: -10px; box-shadow: inset -2px 0 3px rgba(74, 52, 24, .08); }
.evt__buy::after { right: -10px; box-shadow: inset 2px 0 3px rgba(74, 52, 24, .08); }
.evt__range { font-size: 15px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }
.evt__range b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.evt__buy .btn { flex: none; }

/* narrow card: full-width button below the price */
@container evt (max-width: 420px) {
  .evt__body { padding-inline: var(--s-5); }
  .evt__buy { flex-wrap: wrap; padding-inline: var(--s-5); }
  .evt__buy .btn { width: 100%; }
  .evt__range b { font-size: 20px; }
}

/* phone: events scroll sideways, like the destination cards */
@media (max-width: 720px) {
  .ev-grid {
    display: flex; gap: var(--s-4);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) var(--s-6);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .ev-grid::-webkit-scrollbar { display: none; }
  .evt { flex: 0 0 86%; scroll-snap-align: start; }
  .evt:hover { transform: none; }
  .ev-note { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .evt, .evt__photo { transition: none; }
  .evt:hover, .evt:hover .evt__photo { transform: none; }
}

/* ---------- how to book ---------- */
.how .t-h1 { margin-bottom: var(--s-12); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); position: relative; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: 28px; right: 33%;
  border-top: 2px dashed var(--border);
}
.step { position: relative; display: grid; gap: var(--s-3); align-content: start; max-width: 340px; }
.step__num {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-raised); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), var(--highlight);
  font-size: 20px; font-weight: 800; color: var(--primary);
  margin-bottom: var(--s-2);
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: var(--s-6); }
  .steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; border-top: 0; border-left: 2px dashed var(--border); }
  .step { grid-template-columns: 56px 1fr; column-gap: var(--s-5); }
  .step__num { grid-row: span 2; margin: 0; }
}

/* ---------- request ---------- */
.contact {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center;
  padding: var(--s-12);
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.18);
}
.contact__text { display: grid; gap: var(--s-4); }
.contact__text .t-body { opacity: .92; max-width: 48ch; }
.contact__actions { display: grid; gap: var(--s-4); justify-items: start; }
.btn--light { background: var(--surface-raised); color: var(--primary-deep); box-shadow: var(--shadow-md); }
.btn--light:hover { background: #fff; }
.contact__link { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; opacity: .92; }
.contact__link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; padding: var(--s-8) var(--s-6); }
}

/* ---------- phone: destinations as app cards ---------- */
@media (max-width: 860px) {
  .header__cta { display: none; }
}
@media (max-width: 720px) {
  .hero { padding-block: var(--s-6) var(--s-8); }
  .hero__grid { grid-template-areas: "text" "picker"; gap: var(--s-6); }
  .hero__stage, .hero__go { display: none; }
  .hero__lead { font-size: 16px; }

  .picker {
    display: flex; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) var(--s-4);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .picker::-webkit-scrollbar { display: none; }
  .picker > li { flex: 0 0 78%; scroll-snap-align: start; display: flex; }
  .pick, .pick[aria-pressed="true"] {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 2px var(--s-3);
    align-content: start; padding: var(--s-3) var(--s-3) var(--s-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-md), var(--highlight);
  }
  .pick__img {
    display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
    margin-bottom: var(--s-3); padding: var(--s-2);
    border-radius: var(--r-lg);
    background: radial-gradient(80% 70% at 50% 40%, var(--surface-raised), transparent 75%), linear-gradient(170deg, var(--tint), var(--primary-soft));
    filter: drop-shadow(0 10px 12px rgba(74, 52, 24, .16));
  }
  .pick__swatch { display: none; }
  .pick > span:not([class]) { padding-left: var(--s-1); }
  .pick__name { font-size: 18px; }
  .pick__meta, .pick__soon { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; color: var(--primary-deep); }
  .pick__soon { font-size: 10.5px; }
}

/* language switcher in the header */
.header__lang { margin-left: calc(-1 * var(--s-4)); }
@media (max-width: 860px) {
  .header__lang { margin-left: auto; }
}

/* glass weather chip: background from .glass-water, not the general .chip-card background */
.chip-card.glass-water { background: var(--glass-bg); border-color: rgba(255, 255, 255, .45); }

/* weather chip: time on the left, weather on the right */
.chip-card__wx { display: flex; gap: var(--s-3); align-items: center; }