/* ============================================================================
   Cascais Routes — Hub / landing pages (CTA-card grids). Phase 3c-7.
   Approved direction (impeccable mockup, affordance "C"):
     · compact unified intro: eyebrow + Mohave title + yellow keyline + 1 sub line
     · smaller photo cards sized to fit one viewport (2 rows visible / no long scroll)
     · clickability WITHOUT a button — a corner arrow disc + a hover "Explore →"
       reveal + image zoom + lift, all CSS-only over the NATIVE cover-skin CTA so
       the photo stays an editable Elementor widget.
   Scoped to body.cr-hub + _element_id hooks (#cr-hub-hero / #cr-hub-intro /
   #cr-hub-grid). Neutralisation is scoped to the page-content wrapper
   (.elementor:not(.elementor-144):not(.elementor-189)) so header/footer chrome
   is never touched.   Hubs: 27 · 37 · 62 · 32 · 57.
   ============================================================================ */

body.cr-hub {
  --cr-yellow: #ffde01;
  --cr-ink: #0a0a0a;
  --cr-warm: #faf7f2;
  --cr-soft: #404040;
  --cr-maxw: 1240px;
  --cr-pad: clamp(1.25rem, 4vw, 2.5rem);
  --cr-card-h: clamp(190px, 22vw, 244px);
  background-color: var(--cr-warm) !important;
  background-image: none !important;
}

/* neutralise legacy dark section backgrounds / overlays — PAGE CONTENT ONLY,
   keep the 62 hero photo. */
body.cr-hub .elementor:not(.elementor-144):not(.elementor-189) > .e-con.e-parent:not(#cr-hub-hero) {
  background-color: transparent !important;
  background-image: none !important;
}
body.cr-hub .elementor:not(.elementor-144):not(.elementor-189) .e-con:not(#cr-hub-hero) > .elementor-background-overlay {
  opacity: 0 !important;
}

/* ════════════════════════ HERO (62 only) ════════════════════════ */
body.cr-hub #cr-hub-hero {
  position: relative; overflow: hidden;
  min-height: clamp(300px, 40vh, 440px);
  display: flex; align-items: center; justify-content: center;
}
body.cr-hub #cr-hub-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.46) 0%, rgba(10,10,10,.34) 50%, rgba(10,10,10,.66) 100%);
}
body.cr-hub #cr-hub-hero > .e-con-inner { position: relative; z-index: 1; text-align: center; }
body.cr-hub #cr-hub-hero .elementor-widget-image img {
  max-width: 72px; height: auto; margin: 0 auto .6rem; display: block;
}
body.cr-hub #cr-hub-hero .elementor-heading-title {
  font-family: var(--font-heading) !important; font-weight: 800 !important; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1.02; color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important; margin: 0; text-wrap: balance;
}

/* ════════════════════════ COMPACT UNIFIED INTRO ════════════════════════
   Two providers of the same look:
   (a) literal-HTML intro (.hub-eyebrow / .hub-h1 / .hub-sub) injected on 27/37/57/62
   (b) the legacy heading-pair intro on 32 (kept — user approved Camps) */
body.cr-hub #cr-hub-intro {
  max-width: 780px; margin-inline: auto; text-align: center;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.1rem, 2.4vw, 1.7rem);
  padding-inline: var(--cr-pad);
}
body.cr-hub #cr-hub-intro > .e-con-inner { max-width: none; padding-inline: 0; }
/* 37: kill the inline 41vh min-height on the intro — it forced the text block tall and
   vertically-centred it, leaving ~157px dead space above/below. Hugging the content pulls
   the 2×2 grid up so the whole page sits inside one viewport. */
body.page-id-37 #cr-hub-intro { min-height: 0 !important; }
/* an in-grid intro cell (32/57) spans the full row */
body.cr-hub #cr-hub-grid #cr-hub-intro { flex: 1 1 100%; max-width: 100%; }

/* eyebrow (literal class + legacy 32 first heading) */
body.cr-hub #cr-hub-intro .hub-eyebrow,
body.cr-hub #cr-hub-intro .elementor-widget-heading:first-child .elementor-heading-title {
  font-family: var(--font-body) !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.74rem, 1.4vw, .82rem) !important; color: var(--cr-soft) !important;
  margin: 0 0 .5rem !important; line-height: 1.3;
}
/* title (literal class + legacy 32 last heading) */
body.cr-hub #cr-hub-intro .hub-h1,
body.cr-hub #cr-hub-intro .elementor-widget-heading:last-child .elementor-heading-title {
  font-family: var(--font-heading) !important; font-weight: 800 !important;
  text-transform: none; letter-spacing: -.02em; line-height: .98; /* authored case across all hubs — all-caps title block read as shouting */
  color: var(--cr-ink) !important; font-size: clamp(2rem, 5vw, 3.3rem) !important;
  margin: 0 !important; text-wrap: balance;
}
body.cr-hub #cr-hub-intro .hub-h1::after,
body.cr-hub #cr-hub-intro .elementor-widget-heading:last-child .elementor-heading-title::after {
  content: ""; display: block; width: clamp(54px, 7vw, 80px); height: 5px; border-radius: 2px;
  background: var(--cr-yellow); margin: .9rem auto 0;
}
/* (the per-page-32 sentence-case override is now redundant — the shared rule above is authored-case) */
/* sub line */
body.cr-hub #cr-hub-intro .hub-sub {
  font-family: var(--font-body) !important; color: var(--cr-soft) !important;
  font-weight: 400 !important; text-transform: none !important;
  font-size: clamp(1rem, 1.4vw, 1.12rem) !important; line-height: 1.5;
  margin: 1rem auto 0 !important; max-width: 56ch;
}
/* belt-and-braces: neutralise legacy text-editor settings (ALL-CAPS transform +
   justified alignment from the old Tours copy) so every intro centres alike */
body.cr-hub #cr-hub-intro .elementor-widget-text-editor,
body.cr-hub #cr-hub-intro .elementor-widget-text-editor * { text-transform: none !important; }
body.cr-hub #cr-hub-intro .elementor-widget-text-editor,
body.cr-hub #cr-hub-intro .hub-eyebrow,
body.cr-hub #cr-hub-intro .hub-h1,
body.cr-hub #cr-hub-intro .hub-sub { text-align: center !important; }

/* ════════════════════════ CARD GRID ════════════════════════
   Flex-wrap + centre; cards sized so two rows sit inside one viewport. */
body.cr-hub #cr-hub-grid { padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3rem); }
body.cr-hub #cr-hub-grid:has(> .e-con > .elementor-widget-call-to-action) {
  max-width: var(--cr-maxw); margin-inline: auto; padding-inline: var(--cr-pad);
}
body.cr-hub #cr-hub-grid > .e-con-inner {
  max-width: var(--cr-maxw); margin-inline: auto; padding-inline: var(--cr-pad); padding-block: 0;
}
body.cr-hub #cr-hub-grid:has(> .e-con > .elementor-widget-call-to-action),
body.cr-hub #cr-hub-grid > .e-con-inner {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-content: flex-start; gap: clamp(.8rem, 1.5vw, 1.2rem);
}
/* each card-container = a flex item */
body.cr-hub #cr-hub-grid .e-con:has(> .elementor-widget-call-to-action) {
  flex: 1 1 290px; max-width: 404px; min-width: 0; padding: 0 !important;
  display: flex; align-self: stretch;
}
body.cr-hub #cr-hub-grid .e-con:has(> .elementor-widget-call-to-action) > .elementor-widget-call-to-action {
  flex: 1 1 auto; width: 100%;
}
/* 37 → 3-col grid with School Break Camps (first card) featured across two
   card-widths, mirroring the 57 "surf" featured model. 5 cards fill two rows:
   SBC(span 2)+Kids-Weekend / After-School+Birthday+SAR — no orphan.
   37's grid parent is .e-con-inner (not e-con-full like 27/57), so the grid
   display + featured-span target the inner wrapper. !important beats the shared
   flex rule's :has() specificity. */
body.page-id-37 #cr-hub-grid > .e-con-inner {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  align-content: start; gap: clamp(.8rem, 1.5vw, 1.2rem);
  max-width: var(--cr-maxw);
}
body.page-id-37 #cr-hub-grid > .e-con-inner > .e-con:has(> .elementor-widget-call-to-action) {
  width: 100% !important; max-width: none !important;
}
body.page-id-37 #cr-hub-grid > .e-con-inner > .e-con:first-child { grid-column: span 2; }
@media (max-width: 900px) {
  body.page-id-37 #cr-hub-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
  /* SBC featured stays span 2 → full width over the 2-col grid */
}
@media (max-width: 560px) {
  body.page-id-37 #cr-hub-grid > .e-con-inner { grid-template-columns: 1fr; }
  body.page-id-37 #cr-hub-grid > .e-con-inner > .e-con { grid-column: auto !important; }
}

/* ════ 27 + 57 — featured-card grid (rentals model) ════
   Card count not a multiple of 3 → the centred flex grid left an orphan row.
   Switch ONLY these two pages to a 3-col CSS grid and promote the first card to
   span two card-widths so every row fills. Both grids are e-con-full → #cr-hub-grid
   IS the grid parent (no .e-con-inner); on 57 the intro is the grid's first child
   and spans the full width. !important because the shared flex rules carry :has()
   specificity (1,3,1) that outranks body.page-id-N (1,1,1). */
body.page-id-27 #cr-hub-grid,
body.page-id-57 #cr-hub-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr);
  align-content: start; gap: clamp(.8rem, 1.5vw, 1.2rem);
}
/* fill the grid track: the CTA content layer is position:absolute (no intrinsic
   width) so the e-flex card would otherwise shrink to its label; the old flex-basis
   used to give it width. width:100% (not justify-self:stretch, which Elementor's
   pinned width blocks) sizes each card to its cell — featured to its 2-col span. */
body.page-id-27 #cr-hub-grid > .e-con:has(> .elementor-widget-call-to-action),
body.page-id-57 #cr-hub-grid > .e-con:has(> .elementor-widget-call-to-action) {
  width: 100% !important; max-width: none !important;
}
/* 57: in-grid intro spans the full row above the cards */
body.page-id-57 #cr-hub-grid > #cr-hub-intro { grid-column: 1 / -1; width: 100% !important; }
/* feature the first card (each hub's gateway) across two card-widths */
body.page-id-27 #cr-hub-grid > .e-con:first-child,
body.page-id-57 #cr-hub-grid > #cr-hub-intro + .e-con { grid-column: span 2; }
@media (max-width: 900px) {
  body.page-id-27 #cr-hub-grid,
  body.page-id-57 #cr-hub-grid { grid-template-columns: repeat(2, 1fr); }
  /* featured stays span 2 → full width over the 2-col grid */
}
@media (max-width: 560px) {
  body.page-id-27 #cr-hub-grid,
  body.page-id-57 #cr-hub-grid { grid-template-columns: 1fr; }
  body.page-id-27 #cr-hub-grid > .e-con,
  body.page-id-57 #cr-hub-grid > .e-con { grid-column: auto !important; }
}

/* ════ THE CARD — cover-skin photo card, label-only + affordance C ════
   Height is driven by the WIDGET; the legacy inline min-height on .elementor-cta
   (≈344px) is killed so its content layer matches the card and the bottom label
   isn't clipped by overflow:hidden. The photo zoom is Elementor's own native
   `bg-transform-zoom-in` (already on these widgets) — don't add a competing one. */
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
  height: 100%; min-height: var(--cr-card-h); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(10,10,10,.16);
}
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action:hover {
  transform: translateY(-6px); box-shadow: 0 22px 48px rgba(10,10,10,.26);
}
body.cr-hub #cr-hub-grid .elementor-cta {
  position: relative; height: 100% !important; min-height: 0 !important; border-radius: 16px; overflow: hidden;
}
body.cr-hub #cr-hub-grid .elementor-cta__bg-overlay {
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.44) 62%, rgba(10,10,10,.85) 100%) !important;
  opacity: 1 !important;
}
/* content layer (topmost child → its pseudos are reliably on top) */
body.cr-hub #cr-hub-grid .elementor-cta__content {
  position: absolute; inset: 0; height: 100%; min-height: 0 !important;   /* kill legacy min-height (≈344) so the label isn't clipped */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 1.25rem 1.3rem 2.5rem; text-align: left;
}
body.cr-hub #cr-hub-grid .elementor-cta__title:empty { display: none; }
/* the label (title-skin = 62, button-skin = others) */
body.cr-hub #cr-hub-grid .elementor-cta__title,
body.cr-hub #cr-hub-grid .elementor-cta__button {
  font-family: var(--font-heading) !important; font-weight: 800 !important; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.04; color: #fff !important;
  font-size: clamp(1.1rem, 1.55vw, 1.4rem) !important; margin: 0;
}
body.cr-hub #cr-hub-grid .elementor-cta__button-wrapper { margin: 0 !important; }
body.cr-hub #cr-hub-grid .elementor-cta__button {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; display: inline-block;
}
/* yellow keyline under the label, grows on hover */
body.cr-hub #cr-hub-grid .elementor-cta__title:not(:empty)::after,
body.cr-hub #cr-hub-grid .elementor-cta__button:not(:empty)::after {
  content: ""; display: block; width: 30px; height: 4px; border-radius: 2px;
  background: var(--cr-yellow); margin-top: .6rem; transition: width .35s cubic-bezier(.2,.7,.2,1);
}
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action:hover .elementor-cta__title:not(:empty)::after,
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action:hover .elementor-cta__button:not(:empty)::after { width: 52px; }

/* affordance C — corner arrow disc (persistent) */
body.cr-hub #cr-hub-grid .elementor-cta__content::before {
  content: "\2197"; /* ↗ */ position: absolute; top: 13px; right: 13px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: grid; place-items: center; color: #fff; font-size: 16px; line-height: 1; font-weight: 700;
  font-family: var(--font-body);
  transition: background .3s, color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action:hover .elementor-cta__content::before {
  background: var(--cr-yellow); color: var(--cr-ink); transform: scale(1.08);
}
/* affordance C — "Explore →" reveal on hover (bottom, in reserved space) */
body.cr-hub #cr-hub-grid .elementor-cta__content::after {
  content: "Explore \2192"; /* → */ position: absolute; left: 1.3rem; bottom: 1.05rem; z-index: 3;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: .72rem; color: var(--cr-yellow);
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
body.cr-hub #cr-hub-grid .elementor-widget-call-to-action:hover .elementor-cta__content::after {
  opacity: 1; transform: translateY(0);
}
body.cr-hub #cr-hub-grid .elementor-cta__ribbon { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.cr-hub #cr-hub-grid .elementor-widget-call-to-action,
  body.cr-hub #cr-hub-grid .elementor-cta__bg,
  body.cr-hub #cr-hub-grid .elementor-cta__title::after,
  body.cr-hub #cr-hub-grid .elementor-cta__button::after,
  body.cr-hub #cr-hub-grid .elementor-cta__content::before,
  body.cr-hub #cr-hub-grid .elementor-cta__content::after { transition: none; }
}

@media (max-width: 560px) {
  body.cr-hub #cr-hub-grid .e-con:has(> .elementor-widget-call-to-action),
  body.page-id-37 #cr-hub-grid .e-con:has(> .elementor-widget-call-to-action) { flex-basis: 100%; max-width: 100%; }
  body.cr-hub #cr-hub-grid .elementor-cta { min-height: clamp(220px, 56vw, 300px); }
}