/* Cascais Routes — Activity Detail (Phase 3c-1 redesign · approved mock-3 "Immersive Photo-led")
 * Scoped to body.cr-activity (12 adults activity-detail pages).
 * Brand: yellow #ffde01 + near-black + warm off-white + real photography. Mohave display.
 *
 * HOOKS (this Elementor install does NOT render container `_css_classes`, so we use):
 *   - `_element_id` on native sections  -> #cr-hero #cr-intro #cr-scenes #cr-scene-1..3
 *                                          #cr-quote #cr-book-head #cr-book #cr-content
 *   - literal classes inside html widgets (.btn .reviews .card .faq .cr-band ...)
 *   - Elementor base widget classes (.elementor-heading-title, .elementor-widget-image, ...)
 *   - body class + tpl-* (element accent = var(--element-action), e.g. water #0e7490)
 * Scene/related photos stay NATIVE image widgets (client-editable); full-bleed look is CSS.
 */

/* ============================================================
   0. Brand tokens (scoped; tokens.css supplies --ink/--surface/--white/--element-*)
   ============================================================ */
body.cr-activity {
  --yellow: #ffde01;
  --yellow-deep: #e6c400;
  --warm: #faf6f0;
  --warm-2: #f3ece1;
  --line: #e7e0d4;
  --ink-2: #17181a;
  --fh: var(--font-heading);
  --fb: var(--font-body);
  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --shadow: 0 24px 60px -24px rgba(12, 12, 13, .35);
  --texture-url: url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png');
}

/* ============================================================
   1. Canvas — light resting state (kill the global dark Kit body texture)
   ============================================================ */
body.cr-activity {
  background-color: var(--surface) !important;
  background-image: none !important;
  font-family: var(--fb);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.cr-activity .elementor-heading-title { font-family: var(--fh); }

/* BASE content colour: the original pages authored text white (old dark theme),
   invisible on the light canvas. Default native content text to dark; hero / scenes /
   dark bands re-whiten with !important below. (html-widget sections set their own.) */
body.cr-activity .elementor-heading-title { color: var(--ink); }
body.cr-activity .elementor-widget-text-editor,
body.cr-activity .elementor-widget-text-editor p,
body.cr-activity .elementor-widget-text-editor li { color: var(--ink-soft); }

/* Generic content typography (hero + scenes re-whitened below) */
body.cr-activity #cr-intro .elementor-heading-title { color: var(--ink); }
body.cr-activity #cr-intro .elementor-widget-text-editor,
body.cr-activity #cr-intro .elementor-widget-text-editor p {
  font-family: var(--fb); color: var(--ink-soft); line-height: 1.7;
}

/* ============================================================
   2. Buttons (literal .btn in html widgets)
   ============================================================ */
body.cr-activity .btn {
  font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.6em;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
}
body.cr-activity .btn--primary { background: var(--yellow); color: var(--ink); }
body.cr-activity .btn--primary:hover { background: var(--ink); color: var(--yellow); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(0,0,0,.4); }
body.cr-activity .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
body.cr-activity .btn--ghost:hover { background: var(--white); color: var(--ink); }
body.cr-activity .btn--dark { background: var(--ink); color: var(--white); }
body.cr-activity .btn--dark:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
body.cr-activity .btn .arr { transition: transform .25s; }
body.cr-activity .btn:hover .arr { transform: translateX(4px); }

/* eyebrow (literal in html widgets) */
body.cr-activity .eyebrow {
  font-family: var(--fh); font-weight: 700; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--element-action); display: inline-block;
}

/* shared section-head (html-widget sections) */
body.cr-activity .section-head { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
body.cr-activity .section-head--center { margin-inline: auto; text-align: center; }
body.cr-activity .section-head h2 {
  font-family: var(--fh); font-weight: 800; text-transform: none; letter-spacing: -.01em;
  line-height: .98; font-size: clamp(2rem, 4.5vw, 3.6rem); margin: .4rem 0 0; text-wrap: balance;
}

/* ============================================================
   3. HERO (#cr-hero) — classic bg-image container (photo editable); cinematic full-bleed
   ============================================================ */
body.cr-activity #cr-hero {
  position: relative;
  /* full viewport (header is a fixed overlay → 100vh already includes it);
     dvh tracks the live mobile viewport, vh = fallback */
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;   /* single photo, no tiling */
  padding: 0 !important;
}
/* the inner container (#5839702) carries the background SLIDESHOW (rotating photos)
   + the content. Position the text/buttons block bottom-LEFT. The slideshow's own
   dark overlay (in data) is the legibility veil — no extra ::after scrim, which would
   paint above the content. */
/* intermediate hero wrappers (nesting varies per page) collapse to pass-through */
body.cr-activity #cr-hero .e-con:not(#cr-hero-stage) { padding: 0 !important; min-height: 0; width: 100%; }
/* #cr-hero-stage = the container that actually carries the slideshow + content,
   wherever it nests. Drives the hero height + bottom-left content placement. */
body.cr-activity #cr-hero-stage {
  min-height: 100vh !important; min-height: 100dvh !important; width: 100%;
  justify-content: flex-end !important;   /* content sits low */
  align-items: flex-start !important;     /* content sits left */
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2)) !important;
  padding-block: 0 clamp(2.5rem, 5vw, 4.5rem) !important;
  text-align: left;
  row-gap: 0 !important; /* kill Elementor gap — spacing is margin-controlled */
}
/* kill Elementor widget bottom margins inside hero column */
body.cr-activity #cr-hero-stage > .elementor-element { margin-bottom: 0 !important; }
body.cr-activity #cr-hero-stage > .e-con-inner { row-gap: 0 !important; }
/* legibility veil on the slideshow itself (Elementor's own overlay isn't emitted here).
   It darkens the slide images; the text/buttons paint above the whole slideshow, so they
   stay clear. Bottom-weighted because the content sits in the lower-left. */
body.cr-activity #cr-hero .elementor-background-slideshow::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,13,.15) 0%, rgba(12,12,13,.38) 45%, rgba(12,12,13,.72) 100%);
}
body.cr-activity #cr-hero .eyebrow--hero { color: var(--yellow); margin-bottom: .6rem; }
body.cr-activity #cr-hero .elementor-heading-title {
  color: var(--white) !important; font-weight: 800; letter-spacing: -.02em; line-height: .98;
  text-transform: none; font-size: clamp(2.6rem, 6.5vw, 6rem); max-width: 16ch;
  text-align: left !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.7); text-wrap: balance; margin: 0;
}
/* Gold Standard: yellow underline on hero H1 */
body.cr-activity #cr-hero .elementor-heading-title::after {
  content: ""; display: block; width: clamp(60px, 9vw, 100px); height: 5px; border-radius: 2px;
  background: var(--yellow); margin: clamp(.5rem, 1.2vw, .9rem) auto 0 0;
}
body.cr-activity #cr-hero .elementor-widget-text-editor,
body.cr-activity #cr-hero .elementor-widget-text-editor p {
  color: #fff !important; font-family: var(--fb); text-align: left !important;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 52ch; margin-top: .5rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
body.cr-activity #cr-hero .hero__cta { margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
body.cr-activity #cr-hero .hero__meta {
  display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap;
  font-family: var(--fh); text-transform: uppercase; color: var(--white);
}
body.cr-activity #cr-hero .hero__meta div { border-left: 3px solid var(--yellow); padding-left: .8rem; }
body.cr-activity #cr-hero .hero__meta b { display: block; font-size: 1.5rem; font-weight: 800; }
body.cr-activity #cr-hero .hero__meta span { font-size: .75rem; letter-spacing: .1em; opacity: .85; }

/* ============================================================
   4. INTRO (#cr-intro) — editorial 2-col band (rentals-inspired). A real
   descriptive HEADLINE + activity-colour keyline (left) sits beside the lead
   paragraph (right), replacing the lifeless centred eyebrow+lead. Each
   activity's authored headline is recovered into the DB (the old per-page 2nd
   heading, restored from prod where the clone dropped it). The "why choose us?"
   eyebrow is retired — its reason-cards already live in the scenes, and the
   rentals intro it mirrors carries no eyebrow.
   Source order is [lead, heading, eyebrow]: heading -> col 1, lead -> col 2,
   eyebrow dropped. Container is e-con-full (234) OR e-con-boxed (239/254…).
   ============================================================ */
body.cr-activity #cr-intro {
  background: var(--warm);
  padding-block: clamp(3.5rem, 8vw, 7rem) !important;
  text-align: left;
}
body.cr-activity #cr-intro.e-con-boxed {
  display: flex !important; flex-direction: column; align-items: stretch;
  padding-inline: var(--pad) !important;
}
/* e-con-full: the band itself IS the grid — inset content to a centred max-width */
body.cr-activity #cr-intro.e-con-full {
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2)) !important;
}
/* the 2-col grid lives on whichever element directly holds the widgets */
body.cr-activity #cr-intro.e-con-full,
body.cr-activity #cr-intro.e-con-boxed > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.2rem;
  align-items: start;
  width: 100%;
}
body.cr-activity #cr-intro.e-con-boxed > .e-con-inner {
  max-width: var(--maxw); margin-inline: auto;
}
/* HEADLINE (recovered heading) — left column */
body.cr-activity #cr-intro .elementor-widget-heading {
  display: block !important;
  grid-column: 1; grid-row: 1; align-self: start; margin: 0; max-width: none;
}
body.cr-activity #cr-intro .elementor-heading-title {
  font-family: var(--fh); font-weight: 800; color: var(--ink);
  text-transform: none; letter-spacing: -.01em; line-height: 1.04; text-align: left;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); text-wrap: balance; margin: 0;
}
body.cr-activity #cr-intro .elementor-widget-heading .elementor-heading-title::after {
  content: ""; display: block; width: clamp(54px, 6vw, 72px); height: 5px; border-radius: 2px;
  background: var(--element-action); margin: 1.3rem 0 0;
}
/* LEAD paragraph — right column (source first node) */
body.cr-activity #cr-intro > .elementor-element:first-child,
body.cr-activity #cr-intro > .e-con-inner > .elementor-element:first-child {
  grid-column: 2; grid-row: 1; width: 100%; max-width: none;
}
body.cr-activity #cr-intro > .elementor-element:first-child .elementor-widget-text-editor,
body.cr-activity #cr-intro > .elementor-element:first-child p,
body.cr-activity #cr-intro > .e-con-inner > .elementor-element:first-child .elementor-widget-text-editor,
body.cr-activity #cr-intro > .e-con-inner > .elementor-element:first-child p {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--ink-soft) !important;
  line-height: 1.75; max-width: 60ch; margin: 0; text-align: left !important;
}
/* retire the "why choose us?" eyebrow (source last node) */
body.cr-activity #cr-intro > .elementor-element:last-child:not(.elementor-widget-heading),
body.cr-activity #cr-intro > .e-con-inner > .elementor-element:last-child:not(.elementor-widget-heading) { display: none !important; }
/* mobile: stack — headline above lead */
@media (max-width: 860px) {
  body.cr-activity #cr-intro.e-con-full,
  body.cr-activity #cr-intro.e-con-boxed > .e-con-inner {
    grid-template-columns: 1fr; row-gap: 1.4rem;
  }
  body.cr-activity #cr-intro .elementor-widget-heading { grid-column: 1; grid-row: 1; }
  body.cr-activity #cr-intro > .elementor-element:first-child,
  body.cr-activity #cr-intro > .e-con-inner > .elementor-element:first-child { grid-column: 1; grid-row: 2; }
}

/* ============================================================
   5. SCENES (#cr-scenes) — 3 stacked full-bleed cinematic photo bands.
   Native image widget stays editable; CSS makes it the full-bleed background.
   ============================================================ */
/* scenes are e-con-full: children render directly in .e-con (no .e-con-inner) */
body.cr-activity #cr-scenes { counter-reset: scene; --margin-block-end: 0px !important; margin-bottom: 0 !important; }
body.cr-activity #cr-scenes,
body.cr-activity #cr-scenes > .e-con-inner {
  max-width: none !important; width: 100% !important; padding: 0 !important; gap: 0 !important;
  flex-direction: column !important; flex-wrap: nowrap !important;
}
body.cr-activity [id^="cr-scene-"] {
  position: relative; min-height: 76vh; overflow: hidden; color: var(--white);
  max-width: none !important; width: 100% !important;
  padding: 0 !important; counter-increment: scene;
  justify-content: center;   /* vertical centering of the stacked text widgets */
  align-items: stretch;
}
/* native image widget -> full-bleed cover layer (stays editable in the editor) */
body.cr-activity [id^="cr-scene-"] > .elementor-widget-image {
  position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; width: 100%; height: 100%;
}
body.cr-activity [id^="cr-scene-"] > .elementor-widget-image > .elementor-widget-container,
body.cr-activity [id^="cr-scene-"] > .elementor-widget-image figure,
body.cr-activity [id^="cr-scene-"] > .elementor-widget-image a { height: 100%; margin: 0; }
body.cr-activity [id^="cr-scene-"] .elementor-widget-image img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block; max-width: none;
}
/* scrim for AA legibility of white type — kept >=.7 across the whole text half
   so white body copy clears 4.5:1 even over a bright photo region */
body.cr-activity [id^="cr-scene-"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,12,13,.9) 0%, rgba(12,12,13,.72) 48%, rgba(12,12,13,.15) 100%);
}
body.cr-activity #cr-scene-2::after {
  background: linear-gradient(270deg, rgba(12,12,13,.9) 0%, rgba(12,12,13,.72) 48%, rgba(12,12,13,.15) 100%);
}
/* text widgets (direct children) sit above the scrim, boxed for readable measure */
body.cr-activity [id^="cr-scene-"] > .elementor-widget-heading,
body.cr-activity [id^="cr-scene-"] > .elementor-widget-text-editor {
  position: relative; z-index: 2; width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto;
  padding-inline: var(--pad);
}
body.cr-activity [id^="cr-scene-"] > .elementor-widget-heading { margin-top: clamp(3rem, 7vw, 6rem); }
body.cr-activity [id^="cr-scene-"] > .elementor-widget-text-editor { margin-bottom: clamp(3rem, 7vw, 6rem); }
body.cr-activity [id^="cr-scene-"] .elementor-heading-title {
  color: var(--white) !important; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  line-height: 1; font-size: clamp(2rem, 5vw, 3.8rem); max-width: 18ch; text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
body.cr-activity [id^="cr-scene-"] .elementor-widget-text-editor,
body.cr-activity [id^="cr-scene-"] .elementor-widget-text-editor p {
  color: #fff !important; font-family: var(--fb);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 46ch; margin-top: 1rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
/* scene 2 mirrors to the right */
body.cr-activity #cr-scene-2 > .elementor-widget-heading,
body.cr-activity #cr-scene-2 > .elementor-widget-text-editor { text-align: right; }
body.cr-activity #cr-scene-2 .elementor-heading-title { margin-left: auto; }
body.cr-activity #cr-scene-2 .elementor-widget-text-editor p { margin-left: auto; }
/* the "01 / 02 / 03" ordered sequence marker */
body.cr-activity [id^="cr-scene-"] .elementor-heading-title::before {
  content: "0" counter(scene); display: block; font-family: var(--fh); font-weight: 800;
  color: var(--yellow); line-height: 1; font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: .3rem;
}
@media (max-width: 760px) {
  body.cr-activity [id^="cr-scene-"]::after,
  body.cr-activity #cr-scene-2::after {
    background: linear-gradient(180deg, rgba(12,12,13,.55) 0%, rgba(12,12,13,.9) 100%);
  }
  body.cr-activity #cr-scene-2 > .elementor-widget-heading,
  body.cr-activity #cr-scene-2 > .elementor-widget-text-editor { text-align: left; }
  body.cr-activity #cr-scene-2 .elementor-heading-title,
  body.cr-activity #cr-scene-2 .elementor-widget-text-editor p { margin-left: 0; }
}

/* ============================================================
   6. QUOTE (#cr-quote) — full-bleed manifesto interstitial: brand rock
   texture under a near-black scrim faintly tinted toward the page's
   element-deep hue. Oversized Mohave declaration, yellow key word.
   Scrim alpha must stay ~.55–.68 or the texture crushes to flat black.
   ============================================================ */
body.cr-activity #cr-quote {
  background-color: #14130f;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--element-deep) 20%, rgb(10 10 10 / .30)),
      color-mix(in srgb, var(--element-deep) 12%, rgb(12 12 13 / .50))),
    var(--texture-url);
  background-size: cover;
  background-position: center;
  padding-block: clamp(5rem, 10vw, 8.5rem) !important;
  text-align: center;
}
body.cr-activity #cr-quote > .e-con-inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  min-height: clamp(360px, 48vh, 540px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  row-gap: 1rem;
}
body.cr-activity .cr-quote {
  margin: 0 auto; max-width: 17ch; font-family: var(--fh); font-weight: 800; text-transform: none;
  font-size: clamp(2.4rem, 6vw, 5.25rem); line-height: 1.04; letter-spacing: -.015em;
  color: var(--white); text-wrap: balance;
}
body.cr-activity .cr-quote__hl { color: var(--yellow); }
body.cr-activity .cr-quote__cta {
  margin-top: clamp(1.4rem, 2.5vw, 1.8rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
/* editorial sub-line — ::before fallback; .cr-quote__sub if a text widget exists in markup */
body.cr-activity .cr-quote__cta::before {
  content: "Since 2014 · Sintra-Cascais";
  display: block;
  font-family: var(--fb); font-size: 1rem; font-weight: 400;
  color: rgba(255,255,255,.7); line-height: 1.5;
  max-width: 38ch; text-wrap: balance;
}
body.cr-activity .cr-quote__sub {
  font-family: var(--fb); font-size: 1rem; font-weight: 400;
  color: rgba(255,255,255,.7); line-height: 1.5;
  max-width: 38ch; text-wrap: balance; margin: 0;
}
body.cr-activity #cr-quote .btn--dark {
  background: var(--yellow); color: var(--ink);
  padding: .72rem 2rem; border-radius: 999px;
  font-size: .82rem; letter-spacing: .08em;
}
body.cr-activity #cr-quote .btn--dark:hover {
  background: var(--white); color: var(--ink);
  transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
}

/* reduced motion: quote band */
@media (prefers-reduced-motion: reduce) {
  body.cr-activity #cr-quote .btn--dark { transition: none; }
}

/* ============================================================
   7. BOOKING (#cr-book-head + #cr-book) — Camps-style clean cards
      (matches kids.css #cr-ages-grid pattern). Photo top → title →
      description → CTA pill. Subtle card lift + button-only colour
      shift on hover (element-action → element-deep).
      Markup NEVER touched: Bokun id/data-src/onclick preserved.
   ============================================================ */
/* one continuous LIGHT warm band (head + cards). margin:0 kills the seam. */
body.cr-activity #cr-book-head,
body.cr-activity #cr-book {
  background: var(--warm) !important;
  background-image: none !important;
  color: var(--ink); margin: 0 !important;
}
body.cr-activity #cr-book-head { padding-block: clamp(3rem, 6vw, 4.5rem) 0 !important; text-align: center; }
body.cr-activity #cr-book { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem) !important; }
body.cr-activity #cr-book-head > .e-con-inner { padding-block: 0 !important; }
body.cr-activity #cr-book-head .elementor-heading-title {
  color: var(--element-action) !important; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}
body.cr-activity #cr-book-head .cr-book__lead {
  color: var(--ink-soft); font-family: var(--fb); max-width: 60ch; margin: 1rem auto 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
}

/* grid: 2-col flex-wrap, stretch children */
body.cr-activity #cr-book > .e-con-inner { max-width: var(--maxw); margin-inline: auto; gap: 1.5rem; align-items: stretch; }
body.cr-activity #cr-book > .e-con { flex: 0 0 calc(50% - .75rem) !important; min-width: 0; }
body.cr-activity #cr-book .elementor-widget-call-to-action,
body.cr-activity #cr-book .elementor-widget-call-to-action > .elementor-widget-container { height: 100%; }

/* ── CARD — white, rounded, photo-top, clean body (matches camps age-card) ── */
body.cr-activity #cr-book .elementor-cta {
  display: flex !important; flex-direction: column; min-height: 360px; height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 24px -14px rgba(12,12,13,.25);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
/* subtle card lift — same translateY as camps, softer neutral shadow */
body.cr-activity #cr-book .elementor-cta:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px -22px rgba(12,12,13,.35);
}

/* photo — fixed-height top banner, no zoom on hover (clean) */
body.cr-activity #cr-book .elementor-cta__bg-wrapper {
  position: relative !important; inset: auto !important; height: 186px; flex: none; width: 100%; overflow: hidden;
}
body.cr-activity #cr-book .elementor-cta__bg { position: absolute; inset: 0; }
body.cr-activity #cr-book .elementor-cta__bg-overlay { display: none; }

/* white body — title → description → CTA, left-aligned */
body.cr-activity #cr-book .elementor-cta__content {
  position: relative !important; flex: 1; background: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: .75rem; padding: 1.5rem 1.5rem 1.6rem; text-align: left;
}

/* ── TITLE (all cards) — element-colour, bold, no-caps (authored case) ── */
body.cr-activity #cr-book .elementor-cta__button-wrapper { order: 1; margin: 0; width: 100%; }
body.cr-activity #cr-book .elementor-cta__button {
  background: transparent !important; color: var(--element-action) !important; border: 0 !important;
  padding: 0 !important; box-shadow: none;
  font-family: var(--fh) !important; font-weight: 800 !important; text-transform: none !important;
  letter-spacing: -.01em !important; font-size: clamp(1.2rem, 1.9vw, 1.55rem) !important;
  line-height: 1.05 !important; text-align: left !important;
}
body.cr-activity #cr-book .elementor-cta:has(button[id^="bokun_"]) .elementor-cta__button { pointer-events: none; }

/* ── METADATA sub-line — matches camps .age__years ── */
body.cr-activity #cr-book .elementor-cta__title {
  order: 2; margin: 0; width: 100%;
  font-family: var(--fh); font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
  font-size: .82rem; line-height: 1.3;
}
body.cr-activity #cr-book .elementor-cta__title:empty { display: none; }

/* ── DESCRIPTION — matches camps .age__txt when text exists ── */
body.cr-activity #cr-book .elementor-cta__description {
  order: 3; margin: 0 !important; width: 100%;
  font-family: var(--fb); font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}
/* Bokun embed lives inside the description wrapper — pin to bottom */
body.cr-activity #cr-book .elementor-cta__description:has(button[id^="bokun_"]) { margin-top: auto !important; }

/* ── CTA BUTTON (Bokun) — full-width element-colour pill.
      Subtle hover: action → deep (matches camps amber → deep shift) ── */
body.cr-activity #cr-book .elementor-cta__description button[id^="bokun_"] {
  display: block !important; width: 100% !important;
  background: var(--element-action) !important; color: #fff !important;
  border: 2px solid var(--element-action) !important; border-radius: 999px !important;
  font-family: var(--fh) !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: .05em; font-size: .9rem !important; line-height: 1.2 !important;
  padding: .8em 1.5em !important; transition: background .25s, border-color .25s; cursor: pointer;
  margin-top: .75rem !important;
}
body.cr-activity #cr-book .elementor-cta__description button[id^="bokun_"]:hover {
  background: var(--element-deep) !important; border-color: var(--element-deep) !important; color: #fff !important;
}

/* ── CTA (native, no Bokun) — CSS "Book Now" pill, same treatment ── */
body.cr-activity #cr-book .elementor-cta:not(:has(button[id^="bokun_"])) .elementor-cta__content::after {
  content: "Book Now"; order: 4; margin-top: auto; width: 100%; box-sizing: border-box;
  background: var(--element-action); color: #fff; border: 2px solid var(--element-action); border-radius: 999px;
  font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem;
  line-height: 1.2; padding: .8em 1.5em; text-align: center; transition: background .25s, border-color .25s;
}
body.cr-activity #cr-book .elementor-cta:not(:has(button[id^="bokun_"])):hover .elementor-cta__content::after {
  background: var(--element-deep); border-color: var(--element-deep); color: #fff;
}

/* reduced motion: book cards */
@media (prefers-reduced-motion: reduce) {
  body.cr-activity #cr-book .elementor-cta,
  body.cr-activity #cr-book .elementor-cta__content::after,
  body.cr-activity #cr-book .elementor-cta__description button[id^="bokun_"] { transition: none; }
}

/* stack the cards on small screens */
@media (max-width: 640px) {
  body.cr-activity #cr-book > .e-con-inner { flex-direction: column; }
  body.cr-activity #cr-book > .e-con { flex: 0 0 100% !important; width: 100%; }
}

/* ============================================================
   8. CONTENT bands (#cr-content) — reviews / related / faq as full-width bands.
   Single html widget; we de-box the container so .cr-band runs edge-to-edge.
   ============================================================ */
body.cr-activity #cr-content { padding: 0 !important; }
body.cr-activity #cr-content > .e-con-inner { max-width: none !important; width: 100% !important; padding: 0 !important; }
body.cr-activity #cr-content .elementor-widget-html,
body.cr-activity #cr-content .elementor-widget-html > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }

body.cr-activity .cr-band { padding-block: clamp(3rem, 7vw, 6.5rem); }
body.cr-activity .cr-band__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
body.cr-activity .cr-band--warm { background: var(--warm); }
body.cr-activity .cr-band--white { background: var(--white); }
body.cr-activity .cr-band--texture {
  background-color: #0c0c0d;
  background-image: linear-gradient(rgba(12,12,13,.64), rgba(12,12,13,.64)), var(--texture-url);
  background-size: cover; background-position: center; color: var(--white);
}
body.cr-activity .cr-band--texture .section-head h2,
body.cr-activity .cr-band--texture h2, body.cr-activity .cr-band--texture h3 { color: #fff; }
body.cr-activity .cr-band--texture .eyebrow { color: rgba(255,255,255,.85); }

/* ---- reviews ---- */
body.cr-activity .reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
body.cr-activity .review { background: var(--white); border-radius: 20px; padding: 1.8rem; border: 1px solid var(--line); margin: 0; display: flex; flex-direction: column; }
body.cr-activity .stars { color: var(--yellow); font-size: 1rem; letter-spacing: 2px; margin-bottom: .6rem; }
body.cr-activity .review__title { font-family: var(--fh); font-weight: 700; text-transform: uppercase; font-size: 1rem; color: var(--ink); margin-bottom: .55rem; line-height: 1.25; }
body.cr-activity .review p { font-style: italic; font-size: .97rem; margin: 0 0 1.2rem; color: var(--ink); flex: 1; }
body.cr-activity .review b { font-family: var(--fh); text-transform: uppercase; font-size: .9rem; color: var(--ink); }
body.cr-activity .review span { display: block; font-size: .73rem; color: var(--ink-soft); margin-top: .2rem; }
body.cr-activity .cr-reviews-ta { text-align: center; margin-top: 2.5rem; margin-bottom: 0; }
body.cr-activity .cr-reviews-ta a {
  font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .85rem; color: var(--element-action); text-decoration: none;
}
body.cr-activity .cr-reviews-ta a:hover { text-decoration: underline; }

/* ---- related cards (NATIVE Elementor: editable thumbnails) ---- */
/* category label text per element family (related = same family as the page) */
body.tpl-water     { --rel-cat: "Water"; }
body.tpl-climb     { --rel-cat: "Climb"; }
body.tpl-trail     { --rel-cat: "Trail"; }
body.tpl-wheels    { --rel-cat: "Cycling"; }
body.tpl-tour      { --rel-cat: "Tours"; }
body.tpl-kids      { --rel-cat: "Kids"; }
body.tpl-lifestyle { --rel-cat: "Lifestyle"; }

body.cr-activity #cr-related {
  background-color: #0c0c0d;
  background-image: linear-gradient(rgba(12,12,13,.64), rgba(12,12,13,.64)), var(--texture-url);
  background-size: cover; background-position: center; color: var(--white);
  padding-block: clamp(3rem, 7vw, 6.5rem) !important;
}
body.cr-activity #cr-related .section-head h2 { color: #fff; }
body.cr-activity #cr-related .eyebrow { color: rgba(255,255,255,.85); }
/* grid of cards */
body.cr-activity #cr-rel-grid,
body.cr-activity #cr-rel-grid > .e-con-inner {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem !important; max-width: var(--maxw); width: 100%;
  margin-inline: auto !important; padding-inline: var(--pad) !important;
}
/* card = white, photo top, body below */
body.cr-activity #cr-rel-1,
body.cr-activity #cr-rel-2,
body.cr-activity #cr-rel-3 {
  background: var(--white); border: 1px solid rgba(255,255,255,.92);
  border-radius: 20px; overflow: hidden; padding: 0 !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
body.cr-activity #cr-rel-1:hover,
body.cr-activity #cr-rel-2:hover,
body.cr-activity #cr-rel-3:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
body.cr-activity #cr-related .elementor-widget-image { margin: 0; }
body.cr-activity #cr-related .elementor-widget-image a { display: block; }
body.cr-activity #cr-related .elementor-widget-image img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s;
}
body.cr-activity [id^="cr-relbody-"] .elementor-heading-title a { color: inherit; text-decoration: none; }
body.cr-activity #cr-rel-1:hover .elementor-widget-image img,
body.cr-activity #cr-rel-2:hover .elementor-widget-image img,
body.cr-activity #cr-rel-3:hover .elementor-widget-image img { transform: scale(1.05); }
/* kill the card-inner top padding + gap so the photo is flush to the card top */
body.cr-activity #cr-rel-1 > .e-con-inner,
body.cr-activity #cr-rel-2 > .e-con-inner,
body.cr-activity #cr-rel-3 > .e-con-inner { padding: 0 !important; gap: 0 !important; }
/* card body (heading widget) + CSS label + discover affordance.
   .e-con padding owns the inset so the ::before label aligns with the title. */
body.cr-activity [id^="cr-relbody-"] {
  background: var(--white); padding: 1.3rem 1.4rem 1.5rem !important;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  cursor: pointer; /* JS (bokun-popup.js) wires the click to the heading link */
}
body.cr-activity [id^="cr-relbody-"] > .e-con-inner { padding: 0 !important; width: 100%; }
body.cr-activity [id^="cr-relbody-"] .elementor-heading-title {
  font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: 1.5rem;
  color: var(--ink) !important; line-height: 1; margin: 0; text-align: left;
}
/* no category label (removed per feedback). "Discover ->" is the element blue. */
body.cr-activity [id^="cr-relbody-"]::after {
  content: "Discover \2192"; display: inline-block; font-family: var(--fh); font-weight: 700;
  text-transform: uppercase; font-size: .8rem; color: var(--element-action); transition: transform .25s;
}
body.cr-activity #cr-rel-1:hover [id^="cr-relbody-"]::after,
body.cr-activity #cr-rel-2:hover [id^="cr-relbody-"]::after,
body.cr-activity #cr-rel-3:hover [id^="cr-relbody-"]::after { transform: translateX(4px); }
/* single card: keep 2-card width, center it */
body.cr-activity #cr-rel-grid > .e-con-inner:has(> .e-con:only-child) {
  grid-template-columns: calc(50% - 0.75rem);
  justify-content: center;
}

/* ---- faq ---- */
body.cr-activity .faq { max-width: 820px; margin-inline: auto; }
body.cr-activity .faq details { border-bottom: 1px solid var(--line); }
body.cr-activity .faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--fh); font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1rem, 1.6vw, 1.15rem); padding: 1.3rem 0; color: var(--ink);
}
body.cr-activity .faq summary::-webkit-details-marker { display: none; }
body.cr-activity .faq summary::after {
  content: ""; width: 11px; height: 11px; border-right: 2px solid var(--element-action);
  border-bottom: 2px solid var(--element-action); transform: rotate(45deg); transition: transform .25s; flex: none;
}
body.cr-activity .faq details[open] summary::after { transform: rotate(-135deg); }
body.cr-activity .faq p { padding: 0 0 1.3rem; color: var(--ink-soft); max-width: 68ch; margin: 0; }

/* ============================================================
   9. Motion / reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.cr-activity .btn, body.cr-activity .card, body.cr-activity .faq summary::after,
  body.cr-activity .card__media img { transition: none; }
}


/* ============================================================
   TITLE-CASE SWEEP — word-count rule: titles > 3 words must not be
   ALL-CAPS (incl. hero). Titles <= 3 words may keep caps. CSS cannot
   count words, so the long instances are de-capped per page/zone here.
   Globals (quote, card titles, section-head) were flipped to none in
   place above; these are the page-specific long captions.
   ============================================================ */
/* scene captions that run long (source is title-case -> pure CSS de-cap;
   short scenes on these + other pages keep their caps). ID beats the
   scene rule's specificity, so no !important needed. */
body.page-id-244 #cr-scene-2 .elementor-heading-title,
body.page-id-244 #cr-scene-3 .elementor-heading-title,
body.page-id-274 #cr-scene-2 .elementor-heading-title { text-transform: none; }
/* 2083 booking head "Book Your E-Bike Tour" (4 words). Other pages'
   book-heads are <= 3 words ("Book with us") and keep caps. Ties the
   base rule on specificity, so !important wins it by intent. */
body.page-id-2083 #cr-book-head .elementor-heading-title { text-transform: none !important; }