/* ============================================================
   CLUB TOUR CARD
   The tour video as a tap-to-play card: MH's photo of the tree
   table as the cover, a play button and a "Club tour" label on
   top. Nothing is written on the photo itself; the label is page
   text. Used on the homepage and /early. shared/js/tour.js
   swaps the cover for the playing video on tap.
   ============================================================ */
.tour {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  background: var(--deep-0);
  box-shadow: 0 1px 0 rgba(1, 31, 35, .06), 0 18px 40px -18px rgba(1, 31, 35, .45);
}
.tour__play {
  all: unset; box-sizing: border-box; position: absolute; inset: 0; cursor: pointer;
  display: block;
}
.tour__play:focus-visible { outline: 3px solid var(--aperitivo-0); outline-offset: 3px; }
.tour__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
/* A soft shade behind the title, so it reads over any part of the photo. */
.tour__play::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 45% at 50% 50%, rgba(1, 31, 35, .55) 0%, rgba(1, 31, 35, .18) 70%, rgba(1, 31, 35, .08) 100%);
}
/* Big "Club tour" title with the play button under it, centred on the card.
   Page text, not part of the photo (per MH). */
.tour__badge {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 6%, 30px); padding: 0 14px;
  color: var(--open-0); text-align: center;
}
.tour__label {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 23cqw, 92px); line-height: .88; letter-spacing: .03em;
  text-transform: uppercase; max-width: 6.5ch;
  text-shadow: 0 3px 0 rgba(1, 31, 35, .55), 0 10px 28px rgba(1, 31, 35, .45);
}
.tour { container-type: inline-size; }
.tour__icon {
  position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--aperitivo-0); color: var(--open-0);
  box-shadow: 0 6px 18px -6px rgba(1, 31, 35, .55);
  transition: transform .25s ease, background-color .25s ease;
}
.tour__icon svg { width: 26px; height: 26px; margin-left: 4px; }
/* The pulse: a ring that swells off the button and fades, on a loop. */
.tour__icon::before, .tour__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--aperitivo-0); opacity: 0;
  animation: tourpulse 2.2s ease-out infinite;
}
.tour__icon::after { animation-delay: 1.1s; }
@keyframes tourpulse {
  0%   { transform: scale(1);    opacity: .85; }
  100% { transform: scale(1.75); opacity: 0; }
}
@media (hover: hover) {
  .tour__play:hover .tour__icon { transform: scale(1.07); background: var(--aperitivo-1); }
  .tour__play:hover .tour__poster { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .tour__poster, .tour__icon { transition: none; }
  .tour__icon::before, .tour__icon::after { animation: none; }
}
.tour video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--deep-0);
}


/* ============================================================
   TOUR BAND, stylized (MH, Oct 12: "much more cool, stand out
   from the FAQ"). A teal card inset like the footer, the copy and
   a row of "jump to" stops on the left, the video card tilted on
   the right like a photo taped to the wall. Stacks on phones.
   ============================================================ */
.tourband {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 10px 10px; border-radius: 28px;
  background: var(--flow-0); color: var(--open-0);
  padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px);
  text-align: left;
}
.tourband__glow {
  position: absolute; inset: auto -10% -40% auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(244, 108, 55, .28), rgba(244, 108, 55, 0));
  pointer-events: none;
}
.tourband__ast {
  position: absolute; pointer-events: none; color: var(--aperitivo-0);
  width: clamp(70px, 9vw, 130px); height: clamp(70px, 9vw, 130px);
  top: clamp(22px, 4vw, 54px); left: clamp(-30px, -1vw, -10px);
  animation: tourspin 26s linear infinite;
}
.tourband__ast--2 {
  color: var(--ground-1); width: clamp(44px, 5vw, 70px); height: clamp(44px, 5vw, 70px);
  top: auto; left: auto; right: clamp(16px, 4vw, 60px); bottom: clamp(18px, 3vw, 40px);
  animation-duration: 34s; animation-direction: reverse;
}
@keyframes tourspin { to { transform: rotate(360deg); } }
.tourband__grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.tourband__script {
  display: block; font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(28px, 22px + 1.2vw, 40px); line-height: 1.1; color: var(--aperitivo-0);
  margin: 0 0 8px; transform: rotate(-3deg); transform-origin: left center;
}
.tourband__title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(72px, 11vw, 150px); line-height: .84; letter-spacing: .01em;
  text-transform: uppercase; color: var(--open-0);
}
.tourband__title span { color: var(--ground-2); }
.tourband__sub {
  font-size: clamp(16px, 15px + .35vw, 20px); line-height: 1.5; color: var(--open-1);
  opacity: .88; max-width: 28em; margin: 22px 0 0;
}
.tourband__stops-k {
  display: block; margin: 30px 0 12px;
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ground-1);
}
.tourband__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tourband__stops button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid rgba(248, 239, 229, .28); color: var(--open-0);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tourband__stops button i {
  font-style: normal; font-size: 11.5px; letter-spacing: .04em; color: var(--ground-1);
  font-variant-numeric: tabular-nums;
}
.tourband__stops button:hover { background: var(--aperitivo-0); border-color: var(--aperitivo-0); }
.tourband__stops button:hover i { color: var(--open-0); }
.tourband__stops button:focus-visible { outline: 3px solid var(--aperitivo-0); outline-offset: 3px; }

/* The card: a cream photo border, a strip of tape, a slight tilt. */
.tourband__frame {
  position: relative; margin: 0 auto; width: min(100%, 360px);
  padding: 10px; background: var(--open-0); border-radius: 16px;
  transform: rotate(2.5deg);
  box-shadow: 0 2px 0 rgba(1, 31, 35, .15), 0 30px 60px -20px rgba(0, 0, 0, .55);
  transition: transform .4s ease;
}
.tourband__frame::before {
  content: ""; position: absolute; top: -14px; left: 50%; z-index: 3;
  width: 120px; height: 30px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(215, 187, 169, .78);
  border-left: 2px dashed rgba(248, 239, 229, .5); border-right: 2px dashed rgba(248, 239, 229, .5);
  box-shadow: 0 1px 3px rgba(1, 31, 35, .2);
}
@media (hover: hover) { .tourband__frame:hover { transform: rotate(0deg) scale(1.01); } }
.tourband__frame .tour { max-width: none; border-radius: 9px; box-shadow: none; }

/* Phones: one column, and the video comes straight after the headline so it
   is on screen with it. The copy block dissolves (display: contents) so its
   pieces can be ordered around the card: title, line, video, then the stops
   right under the video they control. */
@media (max-width: 809px) {
  .tourband { text-align: center; padding: 56px 18px 44px; }
  .tourband__grid { grid-template-columns: 1fr; gap: 0; }
  .tourband__copy { display: contents; }
  .tourband__script { order: 1; transform-origin: center; font-size: 26px; }
  .tourband__title { order: 2; font-size: clamp(64px, 21vw, 92px); }
  .tourband__sub { order: 3; margin: 16px auto 0; font-size: 15.5px; max-width: 24em; }
  .tourband__grid > .rise:last-child { order: 4; margin-top: 34px; }
  .tourband__stops-k { order: 5; margin: 30px 0 12px; }
  .tourband__stops { order: 6; justify-content: center; gap: 7px; }
  .tourband__stops button { padding: 8px 12px 8px 11px; font-size: 13.5px; }
  .tourband__frame { transform: rotate(1.5deg); width: min(78vw, 300px); padding: 8px; }
  .tourband__frame::before { width: 96px; height: 26px; top: -12px; }
  .tour__label { font-size: clamp(54px, 22cqw, 72px); }
  .tour__icon { width: 66px; height: 66px; }
  .tourband__ast { width: 64px; height: 64px; top: 18px; left: -14px; }
  .tourband__ast--2 { width: 40px; height: 40px; top: auto; left: auto; right: 14px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tourband__ast { animation: none; }
  .tourband__frame { transition: none; }
}
.tourband__ast {
  background: currentColor;
  -webkit-mask: url("../svg/Asterisk3.svg") center / contain no-repeat;
          mask: url("../svg/Asterisk3.svg") center / contain no-repeat;
}
.tourband__ast--2 {
  -webkit-mask-image: url("../svg/Asterisk1.svg"); mask-image: url("../svg/Asterisk1.svg");
}
/* The homepage and /early lift every direct child of a section to
   position:relative / z-index:2 (their decoration layering rule). These two
   are decoration, so they opt out. */
.tourband > .tourband__glow, .tourband > .tourband__ast { position: absolute !important; z-index: 0 !important; }
.tourband > .tourband__grid { position: relative; z-index: 2; }
.tourband__cta { margin: 30px 0 0; }
@media (max-width: 809px) { .tourband__cta { order: 7; } }

/* Desktop: the whole band fits one screen under the nav (MH, Oct 12). The card
   is sized off the viewport height, and everything else is shorter than it. */
@media (min-width: 810px) {
  .tourband { padding-block: clamp(36px, 6vh, 64px); }
  .tourband__frame { width: min(360px, calc((100svh - 240px) * 9 / 16)); }
  .tourband__title { font-size: clamp(72px, min(11vw, 17vh), 150px); }
  .tourband__ast:not(.tourband__ast--2) { top: 8px; width: clamp(60px, 7vw, 100px); height: clamp(60px, 7vw, 100px); }
}