/*
  McCord's Candy Cane Tours — page styles
  ----------------------------------------
  Built on the site's brand system (styles.css): bold ink borders, hard
  offset shadows, Lobster display type, pale-yellow text on dark. Kept
  season-neutral — the page is up all year.
*/
.cct-page { background: var(--warm-cream); }
.cct { color: var(--ink); overflow-x: clip; --ease-out: cubic-bezier(.22, .8, .2, 1); }
.cct-wide { width: min(1400px, calc(100% - 48px)); margin: 0 auto; }
.cct-h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 44px;
}

/* 1 · HERO — full-bleed photo, copy floating over it ----------------------- */
.cct-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 84vh, 880px);
  padding: 120px 0 clamp(56px, 8vw, 104px);
  overflow: hidden;
  background: var(--near-black);
  color: var(--butter-pale);
  border-bottom: var(--line);
  isolation: isolate;               /* the scrim's blend mode only mixes with the hero media */
}
.cct-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
/* The hero video shares .cct-hero-bg, so it uses the exact same box, fit and
   crop as the still it sits on. If it never loads (reduced motion, data saver,
   error, autoplay blocked) the still underneath is what shows. */
.cct-hero-video {
  border: 0;
  background: transparent;
  pointer-events: none;
  /* Starts invisible and fades in over the still once real frames are
     playing (the page script adds .is-ready), so it never snaps in. */
  opacity: 0;
  transition: opacity 1200ms ease;
}
.cct-hero-video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cct-hero-video { display: none; }
}
.cct-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 36%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 45%);
}
/* Desktop: blend the shade into the footage (like Photoshop's Overlay mode)
   instead of laying flat black over it — the left side gets deeper and
   richer, not grey. Phones keep the plain shade: the copy sits right over
   the busiest part of the picture there and needs the solid contrast. */
@media (min-width: 761px) {
  .cct-hero-scrim { mix-blend-mode: overlay; }
}
/* ...plus a plain colour shade on top (the original shadow, at about half
   strength) so the copy side reads a touch darker. Desktop only — phones
   already use the plain shade above. */
.cct-hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 36%, rgba(0, 0, 0, 0) 68%);
}
@media (max-width: 760px) {
  .cct-hero-shade { display: none; }
}
.cct-hero-copy { position: relative; z-index: 1; }
.cct-title {
  max-width: 11ch;
  margin: 0 0 18px;
  font-size: clamp(3.2rem, 7vw, 6.6rem);
  line-height: 0.98;
  color: var(--butter-pale);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.cct-lede {
  max-width: 34rem;
  margin: 0 0 30px;
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.cct-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* 2 · THE EXPERIENCE ------------------------------------------------------- */
.cct-story { padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 9vw, 110px); }
/* Long section titles follow the homepage pattern: capped width + balanced
   wrapping, so this one always sits on two even lines on desktop. */
.cct-story .cct-h2 { max-width: 760px; text-wrap: balance; }
.cct-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.cct-step {
  display: flex;
  flex-direction: column;
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.cct-step-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--line); background: var(--aged-paper); }
.cct-step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cct-step-copy { position: relative; padding: 32px 24px 26px; }
.cct-step-num {
  position: absolute;
  top: -24px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: var(--line);
  border-radius: 50%;
  background: var(--candy-red);
  color: var(--butter-pale);
  font-weight: 950;
  box-shadow: var(--shadow-sm);
}
.cct-step h3 { font-size: 1.6rem; line-height: 1.1; margin: 0 0 10px; }
.cct-step p { margin: 0; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }

/* Dress code: a hang tag, punched hole and all. The outline is drawn with
   stacked drop-shadows so it follows the tag's cut shape and the hole. */
.cct-tag-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(56px, 7vw, 80px);
  filter:
    drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink))
    drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink));
}
.cct-tag {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 820px;
  padding: 22px 34px 22px 82px;
  background: var(--gold);
  clip-path: polygon(46px 0, 100% 0, 100% 100%, 46px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 9px at 36px 50%, transparent 97%, #000 100%);
          mask: radial-gradient(circle 9px at 36px 50%, transparent 97%, #000 100%);
}
.cct-tag-label {
  flex: 0 0 auto;
  font-family: 'Lobster', Georgia, serif;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
}
.cct-tag p { margin: 0; font-weight: 700; line-height: 1.45; color: var(--ink); }

/* 3 · PICK YOUR TOUR -------------------------------------------------------
   Desktop: a horizontal track in a fixed order. The open ticket widens (its
   details slide out from under it like a drawer) and the track glides so it
   sits at the left; the others are pushed aside — off-screen, or still in
   view on very wide screens. Pure CSS transitions: nothing is re-ordered and
   nothing is re-rendered, so nothing flashes.
   Phones (and Live Edit): stacked tickets; the details button itself grows
   into a card that holds the details. */
.cct-types {
  --cct-section: var(--emerald);
  --stub-h: 92px;
  container-type: inline-size;
  padding: clamp(72px, 9vw, 110px) 0 clamp(64px, 8vw, 96px);
  background: var(--cct-section);
  color: var(--butter-pale);
  scroll-margin-top: 90px;
}
.cct-types .cct-h2 { color: var(--butter-pale); }
.cct-track-viewport {
  --gap: 24px;
  --cw: min(1400px, calc(100cqw - 48px));
  --card-w: calc((var(--cw) - 2 * var(--gap)) / 3);
  --open-w: min(calc(var(--cw) - 190px), 1120px);
  --pad: 26px;
  overflow-x: clip;
  padding: 4px 0 18px;              /* room for the hard shadows */
}
.cct-tickets {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: max-content;
  padding-left: calc((100cqw - var(--cw)) / 2);
  /* Slide so the open ticket sits at the left edge — but never past the end
     of the track, so the last ticket opens with its neighbour peeking on the
     left instead of empty space on the right. */
  --max-shift: calc(2 * var(--card-w) + 2 * var(--gap) + var(--open-w) - var(--cw));
  --peek: 170px;                    /* how much of the ticket before the open one stays in view */
  transform: translateX(calc(-1 * min(max(var(--open-index, 0) * (var(--card-w) + var(--gap)) - var(--peek), 0px), var(--max-shift))));
  transition: transform 640ms var(--ease-out);
}
.cct-ticket {
  --ticket-bg: var(--candy-red);
  --ticket-ink: var(--butter-pale);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  color: var(--ink);
  --sh: 10px;                       /* hard-shadow offset */
  --notch-y: calc(var(--stub-h) + 0.75px);  /* centre of the dashed tear line */
  isolation: isolate;               /* keeps the shadow layer (z-index -1) inside the ticket */
  transition: flex-basis 640ms var(--ease-out), width 640ms var(--ease-out), transform 180ms ease, opacity 480ms ease;
}
/* The hard shadow is its own layer so the punched holes go clean through it
   too: the holes are cut at the SAME spot on the page as the ticket's, so
   looking through a notch always shows plain section colour — never a sliver
   of the ticket's own shadow. */
.cct-ticket::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--radius-lg);
  background: #000;
  transform: translate(var(--sh), var(--sh));
  pointer-events: none;
  transition: transform 180ms ease;
  -webkit-mask-image:
    radial-gradient(circle 15px at calc(-1 * var(--sh)) calc(var(--notch-y) - var(--sh)), transparent 97%, #000 100%),
    radial-gradient(circle 15px at calc(100% - var(--sh)) calc(var(--notch-y) - var(--sh)), transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 15px at calc(-1 * var(--sh)) calc(var(--notch-y) - var(--sh)), transparent 97%, #000 100%),
    radial-gradient(circle 15px at calc(100% - var(--sh)) calc(var(--notch-y) - var(--sh)), transparent 97%, #000 100%);
  mask-composite: intersect;
}
/* Everything inside is clipped to the ticket shape (so the drawer can hide
   under the edge), while the ticket itself stays unclipped so the punched
   notches can sit on its edge. */
.cct-ticket-clip {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1.5px solid #000;
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  /* The notches are real holes: the ticket (border and all) is masked away,
     so the section shows through and the shadow takes the same shape. */
  -webkit-mask-image:
    radial-gradient(circle 15px at 0 var(--notch-y), transparent 97%, #000 100%),
    radial-gradient(circle 15px at 100% var(--notch-y), transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 15px at 0 var(--notch-y), transparent 97%, #000 100%),
    radial-gradient(circle 15px at 100% var(--notch-y), transparent 97%, #000 100%);
  mask-composite: intersect;
}
/* Punched notches: an ink ring tracing the edge of each hole. It is painted
   INSIDE the masked clip layer (not as separate pseudo-elements on the
   ticket), so ring, border and hole are rasterised together and can never
   drift apart by a sub-pixel while the track slides — no hairlines, no bumps. */
.cct-ticket-clip { position: relative; }
.cct-ticket-clip::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -1.5px;                    /* cover the border box, same as the mask */
  pointer-events: none;
  background:
    radial-gradient(circle at 0 var(--notch-y), transparent 14.5px, #000 15px, #000 16.2px, transparent 16.7px),
    radial-gradient(circle at 100% var(--notch-y), transparent 14.5px, #000 15px, #000 16.2px, transparent 16.7px);
}
.cct-ticket--private { --ticket-bg: var(--near-black); }
.cct-ticket--student { --ticket-bg: var(--gold); --ticket-ink: var(--ink); }
.cct-ticket.is-open { flex-basis: var(--open-w); width: var(--open-w); }
/* Tickets that stepped aside fade back — the further from the open one
   (i.e. the closer to the screen edge), the fainter. */
.has-open .cct-ticket:not(.is-open) { cursor: pointer; opacity: 0.5; }
.has-open .cct-ticket[data-dist="2"] { opacity: 0.25; }
.has-open .cct-ticket:not(.is-open):hover { opacity: 0.85; transform: translate(-3px, -3px); --sh: 13px; }

.cct-ticket-stub {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: var(--stub-h);
  padding: 0 var(--pad);
  position: relative;
  background: var(--ticket-bg);
  color: var(--ticket-ink);
  border-bottom: 1.5px solid transparent; /* room for the tear line below */
}
/* The dashed tear line. Drawn (instead of a dashed border) so the dashes are
   spaced evenly and stop just short of each notch ring on every width —
   a border's dashes can land on the ring and read as a black lump. */
.cct-ticket-stub::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 14px;                      /* 22px, minus the trailing gap of the last tile */
  bottom: -1.5px;
  height: 1.5px;
  /* one tile = 10px dash + 8px gap; "round" stretches the tiles a hair so a
     whole number fits, so both ends always finish the same way */
  background: linear-gradient(90deg, #000 10px, transparent 10px) 0 0 / 18px 1.5px round;
  pointer-events: none;
}
.cct-ticket-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cct-ticket h3 {
  margin: 0;
  font-size: clamp(1.9rem, 2.6vw, 2.3rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--ticket-ink);
}

/* Body: column 1 = the ticket as you first see it; column 2 = the drawer.
   Column 1 never changes width, so its text never reflows while opening. */
.cct-ticket-body {
  flex: 1;
  display: grid;
  --col-gap: 76px;
  position: relative;
  grid-template-columns: calc(var(--card-w) - 3px - 2 * var(--pad)) calc(var(--open-w) - var(--card-w) - var(--col-gap));
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--col-gap);
  row-gap: 12px;
  padding: var(--pad);
}
.cct-ticket-lead { grid-column: 1; grid-row: 1; margin: 0 0 12px; font-weight: 700; font-size: 1.06rem; line-height: 1.55; }
.cct-more { display: contents; }
.cct-ticket-toggle { grid-column: 1; grid-row: 3; }
.cct-ticket-cta { grid-column: 1; grid-row: 4; width: 100%; }
.cct-more-panel {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  opacity: 0;
  transition: opacity 280ms ease;
}
.cct-ticket.is-open .cct-more-panel { opacity: 1; transition-delay: 200ms; }
/* The divider: same length on every ticket (top to bottom of the body,
   inside its padding) and centred in the gap, so it never touches the
   buttons or the text on either side. */
.cct-ticket-body::before {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity 280ms ease;
  top: calc(var(--pad) + 4px);
  bottom: calc(var(--pad) + 4px);
  left: calc(var(--pad) + var(--card-w) - 3px - 2 * var(--pad) + var(--col-gap) / 2 - 0.75px);
  border-left: 1.5px dashed rgba(41, 32, 24, 0.28);
  pointer-events: none;
}
.cct-ticket.is-open .cct-ticket-body::before { opacity: 1; transition-delay: 200ms; }

.cct-ticket-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: var(--line);
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  font-size: 0.97rem;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.cct-ticket-toggle:hover { background: var(--butter-pale); }
.cct-toggle-close { display: none; }
/* Same +/x as the FAQ (size, line weight, turn), in the button's ink colour */
.cct-toggle-icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; transition: transform 360ms ease; }
.cct-toggle-icon::before,
.cct-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}
.cct-toggle-icon::after { transform: rotate(90deg); }
.cct-ticket.is-open .cct-toggle-open { display: none; }
.cct-ticket.is-open .cct-toggle-close { display: inline; }
.cct-ticket.is-open .cct-toggle-icon { transform: rotate(45deg); }

.cct-more-inner p { margin: 0 0 12px; font-weight: 600; line-height: 1.55; }
.cct-more-inner p:last-child { margin-bottom: 0; }
.cct-dates-label {
  margin: 4px 0 8px !important;
  font-weight: 900 !important;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--candy-red-dark);
}
.cct-dates { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.cct-dates li {
  padding: 9px 14px;
  border-left: 5px solid var(--candy-red);
  border-radius: 0 10px 10px 0;
  background: var(--warm-cream);
  font-weight: 750;
  line-height: 1.4;
}

/* ---- Stacked layout: phones, and Live Edit on any screen ---------------- */
:is(html.cct-narrow, html.mc-edit) .cct-track-viewport { overflow: visible; padding: 0; }
:is(html.cct-narrow, html.mc-edit) .cct-tickets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: min(640px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0;
  transform: none;
}
html.mc-edit .cct-tickets { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); width: min(1400px, calc(100% - 48px)); }
:is(html.cct-narrow, html.mc-edit) .cct-ticket { width: auto; flex: none; opacity: 1 !important; --sh: 7px; }
:is(html.cct-narrow, html.mc-edit) .cct-ticket-body::before { display: none; }
:is(html.cct-narrow, html.mc-edit) .cct-ticket-body { display: flex; flex-direction: column; gap: 14px; }
:is(html.cct-narrow, html.mc-edit) .cct-ticket-lead { margin: 0 0 4px; }
:is(html.cct-narrow, html.mc-edit) .cct-more {
  display: block;
  border: var(--line);
  border-radius: 26px;           /* same radius closed and open: one continuous shape */
  background: #fff;
  overflow: hidden;
}
:is(html.cct-narrow, html.mc-edit) .cct-ticket-toggle {
  width: 100%;
  border: 0;
  border-bottom: 1.5px dashed transparent;
  border-radius: 0;
  background: transparent;
  transition: border-color 240ms ease;
}
:is(html.cct-narrow, html.mc-edit) .cct-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  transform: none;
  transition: grid-template-rows 380ms var(--ease-out);
}
:is(html.cct-narrow, html.mc-edit) .cct-more-inner { min-height: 0; overflow: hidden; padding: 0 20px; }
/* Vertical breathing room lives INSIDE the clipped area (as margins), so
   it is revealed by the same smooth height animation instead of popping
   in the moment the ticket opens. */
:is(html.cct-narrow, html.mc-edit) .cct-more-inner > :first-child { margin-top: 16px; }
:is(html.cct-narrow, html.mc-edit) .cct-more-inner > :last-child { margin-bottom: 20px; }
html.cct-narrow .cct-ticket.is-open .cct-more-panel,
html.mc-edit .cct-more-panel { grid-template-rows: 1fr; }
html.cct-narrow .cct-ticket .cct-more-panel { transition-delay: 0s; }   /* no desktop drawer delay here */
html.cct-narrow .cct-ticket.is-open .cct-ticket-toggle,
html.mc-edit .cct-ticket-toggle { border-bottom-color: rgba(41, 32, 24, 0.22); }
html.mc-edit .cct-toggle-close { display: inline; opacity: 0.55; }

/* 4 · FAQ — reads like a manual: rules, no boxes, on soft charcoal -------- */
.cct-faq {
  padding: clamp(72px, 9vw, 110px) 0;
  background: #221d19;
  color: var(--butter-pale);
}
.cct-faq .cct-h2 { color: var(--butter-pale); }
.cct-faq-inner { max-width: 880px; }
.cct-faq-list { border-top: 1.5px solid rgba(255, 240, 184, 0.7); }
.cct-faq-item { border-bottom: 1.5px solid rgba(255, 240, 184, 0.18); }
.cct-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2px;
  cursor: pointer;
  font-weight: 750;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #fbeec4;
}
.cct-faq-item summary::-webkit-details-marker { display: none; }
.cct-faq-item summary:hover .cct-q { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cct-faq-icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; transition: transform 360ms ease; }
.cct-faq-icon::before,
.cct-faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: var(--gold);
}
.cct-faq-icon::after { transform: rotate(90deg); }
.cct-faq-item[open] .cct-faq-icon { transform: rotate(45deg); }   /* + turns just far enough to be an x */
.cct-faq-a { padding: 0 48px 22px 2px; }
.cct-faq-a p { margin: 0 0 10px; font-weight: 500; line-height: 1.7; color: rgba(255, 240, 184, 0.78); }
.cct-faq-a p:last-child { margin-bottom: 0; }

/* Smooth open/close for <details> where supported (others snap). */
@supports (interpolate-size: allow-keywords) {
  .cct { interpolate-size: allow-keywords; }
  .cct details::details-content {
    height: 0;
    overflow: clip;
    transition: height 320ms ease, content-visibility 320ms allow-discrete;
  }
  .cct details[open]::details-content { height: auto; }
}

/* Blank edits disappear from the public page */
html:not(.mc-edit) .cct-faq-item:has(.cct-q:empty) { display: none; }
html:not(.mc-edit) .cct-faq-a p:empty,
html:not(.mc-edit) .cct-more-inner p:empty,
html:not(.mc-edit) .cct-dates li:empty { display: none; }

/* Mobile sticky booking bar */
.cct-sticky { display: none; }
@media (max-width: 760px) {
  .cct-sticky {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
    visibility: hidden;
    transform: translateY(160%);
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), visibility 280ms;
  }
  .cct-sticky.is-on { transform: none; visibility: visible; }
  .cct-sticky .button { width: 100%; box-shadow: 6px 6px 0 #000; }
  html.mc-edit .cct-sticky { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cct-tickets, .cct-ticket, .cct-more, .cct-more-panel, .cct-sticky, .cct-faq-icon, .cct-toggle-icon { transition: none !important; }
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cct-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 760px) {
  .cct-hero { min-height: min(86svh, 720px); padding-top: 90px; }
  .cct-hero-bg { object-position: 70% 40%; }
  .cct-hero-scrim {
    background: linear-gradient(0deg, rgba(23, 20, 17, 0.9) 0%, rgba(23, 20, 17, 0.6) 45%, rgba(23, 20, 17, 0.1) 80%);
  }
  .cct-hero-actions .button { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .cct-wide { width: calc(100% - 32px); }
  .cct-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cct-h2 { margin-bottom: 32px; font-size: clamp(2rem, 9vw, 2.4rem); }
  .cct-tag { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 24px 20px 72px; }
  .cct-faq-item summary { font-size: 1.02rem; }
  .cct-faq-a { padding-right: 8px; }
}

/* Booking buttons while that tour type's ticket sales are switched off
   (Admin → Candy Cane Tours). Text comes from Admin too. */
.button.is-sales-closed {
  background: #7a3f39;
  border-color: #000;
  color: #efe3cf;
  cursor: not-allowed;
  box-shadow: var(--shadow-sm);
  transform: none !important;
  pointer-events: none;
}

/* Live Edit: booking buttons stay clickable so they can explain themselves */
html.mc-edit .button.is-sales-closed { pointer-events: auto; cursor: help; }
.cct .button { text-align: center; line-height: 1.25; }

/* Live Edit: the FAQ is managed in Admin once it has been saved there */
html.mc-edit .cct-faq-list[data-faq-managed]::before {
  content: "Questions & answers are edited in Admin \2192  Candy Cane Tours";
  display: block;
  margin: 14px 0;
  padding: 10px 14px;
  border: 1.5px dashed rgba(255, 240, 184, 0.6);
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--gold);
}