/* =====================================================================
   home.css — home page (/it/home, /en/home)

   Ported from the old Assets/CSS/main/home.css (minified) + videos.css. Tokens,
   .rx-btn*, .rx-section-* come from site.css; only home-specific rules live here.

   Sections: 1 page shell & mobile order · 2 hero · 3 why-ride · 4 tours section
             5 filter bar (desktop pills) · 6 inline calendar · 7 popover controls
             8 mobile toolbar & filter dialog · 9 tour cards · 10 videos · 11 CTA
   ===================================================================== */

/* ===== 1. Page shell =====
   Source order since 2026-11-02 (owner): hero → tours → what is a tuk-tuk → features → videos → FAQ → CTA; phones keep it. */
.rx-home { background: #fff; overflow-x: clip; }
@media (max-width: 991.98px) {
  .rx-home { display: flex; flex-direction: column; }
  .rx-home > .rx-hero { order: 1; }
  .rx-home > .rx-tours { order: 2; }
  .rx-home > .rx-explain { order: 3; }
  .rx-home > .rx-features { order: 4; }
  .rx-home > .rcine { order: 4; }    /* ties with features: source order keeps it after */
  .rx-home > .rx-faq { order: 5; }
  .rx-home > .rx-custom-cta { order: 5; }  /* ties with the FAQ: source order keeps it after */
}

/* ===== 2. Hero =====
   Full-bleed photo that starts UNDER the header (pulled up by the wide header height), so
   the header's transparent gradient sits on the picture (site.css §5). */
.rx-hero {
  position: relative;
  margin-top: calc(-1 * var(--rx-header-h-wide));
  min-height: min(calc(720px + var(--rx-header-h-wide)), 92vh);
  padding: calc(var(--rx-header-h-wide) + clamp(3rem, 7vw, 5.5rem)) var(--rx-gutter) clamp(4.5rem, 9vw, 6rem);
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; background-color: #0e2418;
  isolation: isolate; overflow: hidden;
}
@media (max-width: 992px) {
  .rx-hero { padding-top: calc(var(--rx-header-h-wide) + clamp(2rem, 6vw, 4rem)); }
}
.rx-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  transform: scale(1.05); pointer-events: none;
}
.rx-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(47, 140, 98, .11), transparent 65%),
    linear-gradient(160deg, rgba(10, 25, 18, .64) 0%, rgba(10, 25, 18, .13) 55%, rgba(10, 25, 18, .69) 100%);
}
.rx-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; width: 100%; text-align: left; }
.rx-hero-title {
  font-family: var(--rx-font-head); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 1.25rem; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.rx-hero-title-line { display: block; }
.rx-hero-title-em { display: block; font-style: italic; font-weight: 500; color: #fff; }
.rx-hero-title-em-line2 { display: block; margin-top: .06em; }
.rx-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 400; line-height: 1.6;
  color: #fff; max-width: 540px; margin: 0 0 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .32);
}
.rx-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 3rem; }
/* ≥ 768px: text + buttons in the lower right corner. The title keeps the middle of the hero's column
   (auto margins share the free space above it and below it), the aside sits at the bottom, pushed right,
   right-aligned, on a dark radial gradient growing out of that corner. Phones: unchanged, under the title. */
@media (min-width: 768px) {
  /* exactly one screen: the hero starts under the transparent header (pulled up by its height),
     so the full viewport height includes the navbar. svh = the height with the browser bars shown. */
  .rx-hero {
    min-height: 100vh; min-height: 100svh;
    /* paddings follow the screen height, so title + corner block fit even a 720px-high laptop */
    padding-top: calc(var(--rx-header-h-wide) + clamp(1.5rem, 4vh, 3.5rem));
    padding-bottom: clamp(3.5rem, 8vh, 6rem);
  }
  .rx-hero-inner { margin-top: auto; }
  .rx-hero-aside {
    margin-top: auto; align-self: flex-end; max-width: 480px; padding-top: 2rem;
    /* its right edge lines up with the right edge of .rx-hero-inner (the title's centred 1100px column),
       mirroring the title's left margin (owner 2026-10-22; was a 1680px frame, too far right) */
    margin-right: max(0px, calc((100% - 1100px) / 2)); text-align: right;
  }
  .rx-hero-aside .rx-hero-sub { margin: 0 0 1.5rem auto; }
  .rx-hero-aside .rx-hero-ctas { justify-content: flex-end; margin-bottom: 0; }
  .rx-hero-scrim {
    background:
      radial-gradient(ellipse 72% 88% at 100% 100%, rgba(6, 14, 10, .88) 0%, rgba(6, 14, 10, .54) 35%, rgba(6, 14, 10, .42) 65%, rgba(6, 14, 10, 0) 100%),
      radial-gradient(1200px 600px at 15% 20%, rgba(47, 140, 98, .11), transparent 65%),
      linear-gradient(160deg, rgba(10, 25, 18, .64) 0%, rgba(10, 25, 18, .13) 55%, rgba(10, 25, 18, .53) 100%);
  }
}

/* Light beam running around the hero buttons */
@property --rx-beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.rx-hero-ctas .rx-btn { position: relative; }
.rx-hero-ctas .rx-btn::before {
  content: ""; position: absolute; inset: -2px; border-radius: var(--rx-pill); padding: 3px;
  background: conic-gradient(from var(--rx-beam-angle),
    transparent 0deg, transparent 225deg, rgba(255, 255, 255, 0) 235deg, rgba(255, 255, 255, .35) 252deg,
    rgba(255, 255, 255, .85) 264deg, #fff 270deg, rgba(255, 255, 255, .85) 276deg,
    rgba(255, 255, 255, .35) 288deg, rgba(255, 255, 255, 0) 305deg, transparent 305deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(1.5px); z-index: 1; pointer-events: none;
  animation: rx-beam-spin 3.8s linear infinite;
}
.rx-hero-ctas .rx-btn-primary::before { animation-delay: -2.85s; }
.rx-hero-ctas .rx-btn-ghost::before {
  animation-delay: -.95s;
  background: conic-gradient(from var(--rx-beam-angle),
    transparent 0deg, transparent 225deg, rgba(255, 220, 120, 0) 235deg, rgba(255, 220, 120, .4) 252deg,
    rgba(255, 220, 120, .9) 264deg, rgba(255, 255, 200, 1) 270deg, rgba(255, 220, 120, .9) 276deg,
    rgba(255, 220, 120, .4) 288deg, rgba(255, 220, 120, 0) 305deg, transparent 305deg);
}
@keyframes rx-beam-spin { from { --rx-beam-angle: 0deg; } to { --rx-beam-angle: 360deg; } }

.rx-hero-scroll {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: block; width: 22px; height: 38px;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 12px; z-index: 2;
}
.rx-hero-scroll-line {
  display: block; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 2px; height: 8px; border-radius: 2px; background: #fff;
  animation: rx-scroll 1.9s ease-in-out infinite;
}
@keyframes rx-scroll {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { transform: translate(-50%, 14px); opacity: 0; }
}
@media (max-width: 767.98px) {
  .rx-hero { min-height: 88vh; text-align: center; }
  .rx-hero-inner { text-align: center; }
  .rx-hero-title { font-size: clamp(2rem, 8vw, 4.5rem); line-height: 1.2; padding-top: clamp(.65rem, 2.4vw, 1.35rem); }
  .rx-hero-sub { margin-left: auto; margin-right: auto; }
  .rx-hero-ctas {
    flex-direction: column; align-items: stretch; justify-content: center;
    width: fit-content; max-width: 100%; margin: 5.75rem auto 3rem;
  }
  .rx-hero-ctas .rx-btn { width: 100%; white-space: normal; }
  .rx-hero-scroll { display: none; }
}

/* ===== 3. Why ride with us — the marble relief (relief.js) =====
   The relief fills the section (cropped like a cover background), white text on it. relief.js runs only
   with a fine hovering pointer and no reduced motion; everyone else sees the lit still (<picture> in home.php).
   Darker bands behind the heading and the four points keep the text readable wherever the light is. */
.rx-features {
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: min(88vh, 860px); background: #0b0b0c; color: #fff; touch-action: pan-y;
}
.rx-relief { position: absolute; inset: 0; z-index: -1; }
.rx-relief picture, .rx-relief img, .rx-relief canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rx-relief img { object-fit: cover; object-position: 50% 75%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.rx-relief canvas { opacity: 0; transition: opacity .6s ease; }
.rx-relief.is-live canvas { opacity: 1; }
.rx-relief::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* light veil (owner 2026-10-22: the lab's "velatura" .25 = a quarter of the old .62 / .72) */
  background: linear-gradient(180deg, rgba(0, 0, 0, .155) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .18) 100%);
}
/* the lit still (phones, tablets, reduced motion): text can sit anywhere on it, so veil it all */
@media not all and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rx-relief::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .74) 100%);
  }
}
.rx-features-inner {
  width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.rx-features-head { margin-bottom: 0; }
.rx-features .rx-section-eyebrow { color: #fff; background: rgba(255, 255, 255, .14); }
.rx-features .rx-section-title { color: #fff; }
.rx-features .rx-section-sub { color: rgba(255, 255, 255, .82); }
.rx-features-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
/* Reveal on scroll: home.js adds .is-reveal (only when it can also reveal) */
.rx-features-points.is-reveal > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: calc(var(--col-i, 0) * 130ms);
}
.rx-features-points.is-reveal > .is-visible { opacity: 1; transform: none; }
.rx-why-text {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; align-self: start; column-gap: .7rem; padding: 0 .15rem;
}
.rx-why-pin { grid-column: 1; grid-row: 1 / -1; align-self: center; font-size: 1.55rem; color: #fff; opacity: .9; line-height: 1; }
.rx-why-pin .i { display: block; }
.rx-why-title {
  grid-column: 2; grid-row: 1;
  font-family: var(--rx-font-head); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 700;
  color: #fff; margin: 0 0 .2rem; letter-spacing: -.018em; line-height: 1.18;
}
.rx-why-desc { grid-column: 2; grid-row: 2; font-size: .88rem; line-height: 1.58; color: rgba(255, 255, 255, .78); margin: 0; }
.rx-why-title, .rx-why-desc { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
@media (max-width: 991.98px) {
  .rx-features-points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
}
@media (max-width: 540px) {
  .rx-features-points { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .rx-why-text { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 78%; margin: 0 auto; }
  .rx-why-pin { margin-bottom: .35rem; }
}
/* ===== 4. Tours section ===== */
.rx-tours { padding: 3rem 0 clamp(3rem, 8vw, 6rem); background: #fff; scroll-margin-top: var(--rx-header-h-compact); }
/* TEST: owner's "Ancient Rome minimalist decorations" (square, decorations around the edges, empty centre)
   behind the tours: full width, repeated downwards so the side decorations always show; the paper colour
   fills the rest. 1024px file under 768px. */
.rx-tours { position: relative; isolation: isolate; background: #f8f9f4; }
.rx-tours::before {   /* the decorations at 20% (a background image cannot be faded on its own) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background: url("../img/tours-bg-ancient-2048.webp") center top / 100% auto repeat-y;
}
@media (max-width: 767.98px) { .rx-tours::before { background-image: url("../img/tours-bg-ancient-1024.webp"); } }
/* A soft halo in the paper colour behind the heading: the decorations fade out around the title
   instead of running through it (no box, the edges dissolve). */
.rx-tours .rx-section-head { position: relative; }
.rx-tours .rx-section-head::before {
  content: ''; position: absolute; inset: -3rem -7rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, #f8f9f4 0%, rgba(248, 249, 244, .94) 42%, rgba(248, 249, 244, .6) 58%, rgba(248, 249, 244, 0) 74%);
}
@media (max-width: 767.98px) { .rx-tours .rx-section-head::before { inset: -2rem -1.5rem; } }
.rx-tours .rx-section-head { margin-bottom: 2rem; }
.rx-grid-section-title__line2 { display: inline; }
@media (max-width: 991.98px) {
  .rx-grid-section-title__line2 { display: block; margin-top: .12em; }
}
.ret-filter-empty { text-align: center; color: var(--rx-muted); padding: 3rem 1rem; margin: 0; }
.ret-filter-empty[hidden] { display: none; }
.ret-empty { text-align: center; padding: 5rem 1rem; color: var(--rx-muted); }
.ret-empty .i { font-size: 3rem; display: block; margin: 0 auto 1rem; opacity: .35; }

/* ===== 5. Filter bar (desktop pills, ≥ 992px) ===== */
.rx-filter-bar-wrap { position: relative; z-index: 20; margin-bottom: 2rem; padding: .6rem 0; }   /* no backing: the section background shows */
.rx-filter-bar { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: nowrap; max-width: 1180px; margin: 0 auto; }
.rx-filter-bar-host { flex: 1 1 auto; min-width: 0; }
.rx-filter-form {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  background:
    radial-gradient(700px 240px at 92% 18%, rgba(232, 168, 75, .22), transparent 65%),
    radial-gradient(500px 200px at 8% 110%, rgba(45, 149, 163, .18), transparent 65%),
    linear-gradient(135deg, var(--rx-brand-deeper) 0%, var(--rx-brand-dark) 65%, var(--rx-brand) 100%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--rx-pill);
  padding: .35rem .45rem;
  box-shadow: 0 8px 24px rgba(20, 60, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.rx-filter-form::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .12) 70%, transparent 100%);
}
.rx-filter-form > * { position: relative; z-index: 1; }
.rx-filter-pill { position: relative; flex: 0 0 auto; }
.rx-filter-trigger {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; border: 1.5px solid transparent; border-radius: var(--rx-pill);
  padding: .5rem .95rem; color: #fff; text-align: left; max-width: 280px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rx-filter-trigger:hover { background: rgba(255, 255, 255, .10); }
.rx-filter-trigger:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 2px; }
.rx-filter-pill[data-field="location"] .rx-filter-trigger { max-width: 235px; }
.rx-filter-pill[data-field="location"] .rx-filter-trigger-value { max-width: 135px; }
.rx-filter-pill.is-active .rx-filter-trigger { background: rgba(232, 168, 75, .18); border-color: rgba(232, 168, 75, .42); }
.rx-filter-pill.is-open .rx-filter-trigger { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(232, 168, 75, .35); }
.rx-filter-trigger-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1rem;
  transition: background .18s ease, color .18s ease;
}
.rx-filter-pill.is-active .rx-filter-trigger-icon { background: var(--rx-accent); color: var(--rx-brand-deeper); }
.rx-filter-pill.is-open .rx-filter-trigger-icon { background: var(--rx-brand); color: #fff; }
.rx-filter-trigger-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.rx-filter-trigger-label { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.rx-filter-pill.is-active .rx-filter-trigger-label { color: #f6d79b; }
.rx-filter-pill.is-open .rx-filter-trigger-label { color: var(--rx-brand-dark); }
.rx-filter-trigger-value {
  font-size: .88rem; font-weight: 600; color: #fff; margin-top: .12rem;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rx-filter-pill.is-open .rx-filter-trigger-value { color: var(--rx-ink); }
.rx-filter-trigger-chev { font-size: .75rem; color: rgba(255, 255, 255, .65); transition: transform .2s ease, color .2s ease; }
.rx-filter-pill.is-open .rx-filter-trigger-chev { transform: rotate(180deg); color: var(--rx-brand); }

/* Popovers: one clean white menu — options are plain rows (hover tint, green tick when chosen),
   never boxes inside the box. */
.rx-filter-pop {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 50;
  min-width: 260px; max-width: calc(100vw - 2rem);
  background: #fff; border: 1px solid rgba(15, 30, 22, .06); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 30, 22, .16), 0 2px 6px rgba(15, 30, 22, .05);
  padding: .4rem;
  display: flex; flex-direction: column; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.rx-filter-pill.is-open .rx-filter-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.rx-filter-pop--dates { min-width: 312px; padding: .95rem 1rem .8rem; }
.rx-filter-pop--location { min-width: 320px; padding: .6rem; }
.rx-filter-pop--time, .rx-filter-pop--sort { min-width: 250px; }
.rx-filter-pop--cats { min-width: 290px; }
.rx-filter-pill[data-field="cats"] .rx-filter-pop,
.rx-filter-pill[data-field="sort"] .rx-filter-pop { left: auto; right: 0; }
.rx-filter-pop-head { display: none; }
/* Desktop bar: inline calendar, not the native date input */
.rx-filter-pop--dates .hf-date-native { display: none; }
/* The trigger already says what the menu is: the location field needs no label above it */
.rx-filter-pop--location .ret-filter-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.rx-filter-pop--location .ret-filter-control {
  border-radius: 11px; border-color: var(--rx-line); background-color: #f6f7f5;
  padding: .62rem .85rem .62rem 2.35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7a72' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .85rem center; background-size: 15px;
}
.rx-filter-pop--location .ret-filter-control:focus { background-color: #fff; }

/* Reset + count "notch" centred under the bar */
.rx-filter-bar-notch { display: flex; justify-content: center; margin: .55rem 0 1.25rem; }
.rx-filter-bar-notch-inner {
  display: inline-flex; align-items: center; justify-content: space-between; min-width: 200px;
  background:
    radial-gradient(300px 80px at 90% 0%, rgba(232, 168, 75, .22), transparent 70%),
    linear-gradient(135deg, var(--rx-brand-deeper) 0%, var(--rx-brand-dark) 100%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--rx-pill); padding: .2rem .35rem;
  box-shadow: 0 6px 18px rgba(20, 60, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.rx-filter-notch-reset {
  display: inline-flex; align-items: center; gap: .38rem; padding: .32rem .75rem;
  background: transparent; border: 0; border-radius: var(--rx-pill);
  color: rgba(255, 255, 255, .82); font-size: .78rem; font-weight: 600; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.rx-filter-notch-reset:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.rx-filter-notch-sep { display: block; width: 1px; height: 16px; background: rgba(255, 255, 255, .22); flex-shrink: 0; margin: 0 .15rem; }
.rx-filter-notch-count { display: inline-flex; align-items: center; padding: .32rem .75rem; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .92); margin: 0; white-space: nowrap; }

@media (max-width: 1199.98px) {
  .rx-filter-trigger { padding: .5rem .75rem; }
  .rx-filter-trigger-value { max-width: 140px; font-size: .85rem; }
  .rx-filter-trigger-label { font-size: .62rem; }
  .rx-filter-trigger-icon { width: 28px; height: 28px; }
}

/* ===== 6. Inline calendar (desktop dates popover) ===== */
.ret-inline-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.ret-inline-calendar-month { font-size: .82rem; font-weight: 700; color: var(--rx-ink); text-transform: capitalize; }
.ret-inline-calendar-nav { display: flex; gap: .3rem; }
.ret-inline-calendar-nav-btn {
  width: 28px; height: 28px; border-radius: var(--rx-pill); border: 0;
  background: rgba(47, 140, 98, .08); color: var(--rx-brand-dark);
  line-height: 1; font-size: .95rem; font-weight: 700; transition: background .15s, color .15s;
}
.ret-inline-calendar-nav-btn:hover { background: var(--rx-brand); color: #fff; }
.ret-inline-calendar-weekdays, .ret-inline-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.ret-inline-calendar-weekdays { margin-bottom: .25rem; }
.ret-inline-calendar-weekdays span { font-size: .6rem; font-weight: 700; color: var(--rx-muted); text-align: center; text-transform: uppercase; padding-bottom: .35rem; }
.ret-inline-calendar-day {
  position: relative; border: 0; border-radius: 8px; min-height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 500; background: #fff; color: var(--rx-ink);
  padding: .18rem .05rem; transition: background .12s, color .12s;
}
.ret-inline-calendar-day:hover { background: rgba(47, 140, 98, .12); color: var(--rx-brand-dark); }
.ret-inline-calendar-day.is-muted { color: #8b969c; }
.ret-inline-calendar-day:disabled { color: #c3cbc7; cursor: not-allowed; background: transparent; }
.ret-inline-calendar-day.is-today { box-shadow: inset 0 0 0 1.5px var(--rx-brand); }
.ret-inline-calendar-day.is-selected { background: var(--rx-brand); color: #fff; font-weight: 700; }
.ret-inline-calendar-day.is-selected.is-today { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95); }

/* ===== 7. Popover controls (also used inside the mobile dialog) ===== */
.rx-filter-choices, .ret-filter-cats { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ret-filter-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rx-muted); margin-bottom: .1rem; }
.ret-filter-control {
  display: block; width: 100%; min-width: 0;
  font-size: .9rem; color: var(--rx-ink); background-color: #fff;
  border: 1px solid var(--rx-line-strong); border-radius: var(--rx-radius-sm);
  padding: .58rem .8rem; line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ret-filter-control:focus { border-color: var(--rx-brand); outline: 0; box-shadow: 0 0 0 3px rgba(47, 140, 98, .18); }

.rx-filter-radio { display: block; position: relative; cursor: pointer; margin: 0; }
.rx-filter-radio input { position: absolute; opacity: 0; pointer-events: none; }
/* Single choice (time of day, sort): menu rows, the chosen one green with a tick on the right */
.rx-filter-radio-body {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border-radius: 10px; background: transparent;
  font-size: .9rem; font-weight: 500; color: var(--rx-ink);
  transition: background .12s ease, color .12s ease;
}
.rx-filter-radio-body::after {
  content: ''; flex-shrink: 0; width: 14px; height: 14px; margin-left: auto; opacity: 0;
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232F8C62' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' stroke='%232F8C62' stroke-width='.8'/%3E%3C/svg%3E");
  transition: opacity .12s ease;
}
.rx-filter-radio:hover .rx-filter-radio-body { background: #f3f6f4; }
.rx-filter-radio input:checked + .rx-filter-radio-body { color: var(--rx-brand-deeper); font-weight: 650; background: rgba(47, 140, 98, .08); }
.rx-filter-radio input:checked + .rx-filter-radio-body::after { opacity: 1; }
.rx-filter-radio input:focus-visible + .rx-filter-radio-body { outline: 2px solid var(--rx-brand); outline-offset: -2px; }
.rx-filter-radio-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #7c8a82; font-size: .95rem; flex-shrink: 0; }
.rx-filter-radio input:checked + .rx-filter-radio-body .rx-filter-radio-icon { color: var(--rx-brand); }
.rx-filter-radio-text { flex: 1 1 auto; }

/* Dates: quick pick as a soft chip, reset as a plain link, under a hairline */
.ret-filter-date-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between;
  margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--rx-line);
}
.ret-filter-btn {
  display: inline-block; font-size: .82rem; font-weight: 600; text-align: center;
  border-radius: var(--rx-pill); padding: .4rem .9rem;
  border: 0; background: rgba(47, 140, 98, .09); color: var(--rx-brand-dark);
  transition: background .15s, color .15s;
}
.ret-filter-btn:hover { background: rgba(47, 140, 98, .16); color: var(--rx-brand-deeper); }
#hf-dates-reset { background: transparent; color: var(--rx-muted); padding-inline: .4rem; }
#hf-dates-reset:hover { color: var(--rx-ink); text-decoration: underline; }

/* Multiple choice (categories): menu rows with a checkbox on the left */
.ret-filter-check-grid { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.ret-filter-check { display: block; position: relative; cursor: pointer; margin: 0; min-width: 0; }
.ret-filter-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ret-filter-check span {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem; border-radius: 10px; background: transparent;
  font-size: .9rem; font-weight: 500; color: var(--rx-ink); line-height: 1.35;
  transition: background .12s ease, color .12s ease;
}
.ret-filter-check span::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid rgba(15, 30, 22, .25); background: #fff no-repeat center;
  transition: background-color .12s ease, border-color .12s ease;
}
.ret-filter-check:hover span { background: #f3f6f4; }
.ret-filter-check:hover span::before { border-color: var(--rx-brand); }
.ret-filter-check input:checked + span { color: var(--rx-brand-deeper); font-weight: 650; }
.ret-filter-check input:checked + span::before {
  background-color: var(--rx-brand); border-color: var(--rx-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='.8' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.ret-filter-check input:focus-visible + span { outline: 2px solid var(--rx-brand); outline-offset: -2px; }

/* ===== 8. Mobile toolbar & filter dialog (< 992px) ===== */
.rx-filter-mobile { display: none; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; }
.rx-filter-mobile-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--rx-brand-dark); color: #fff; border: 0; border-radius: var(--rx-pill);
  padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem;
  box-shadow: 0 6px 16px rgba(47, 140, 98, .32); transition: background .15s ease, transform .15s ease;
}
.rx-filter-mobile-btn:hover { background: var(--rx-brand-deeper); transform: translateY(-1px); }
.ret-tour-count {
  display: inline-block; width: fit-content; flex-shrink: 0; white-space: nowrap; margin: 0;
  font-size: .76rem; font-weight: 600; color: #fff; padding: .28rem .75rem;
  background: linear-gradient(135deg, var(--rx-brand-deeper) 0%, var(--rx-brand-dark) 100%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--rx-pill);
  box-shadow: 0 4px 12px rgba(20, 60, 42, .22);
}
.ret-tour-count--toolbar { max-width: calc(100% - 9rem); overflow: hidden; text-overflow: ellipsis; }
.ret-tour-count--modal { font-size: .75rem; }

@media (max-width: 991.98px) {
  .rx-filter-bar, .rx-filter-bar-notch { display: none; }
  .rx-filter-mobile { display: flex; }
}

.ret-filter-modal {
  width: min(520px, calc(100vw - 1.2rem)); max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; background: transparent; color: var(--rx-ink);
  overflow: visible;
}
.ret-filter-modal::backdrop { background: rgba(8, 18, 12, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ret-filter-modal[open] { display: flex; }
.ret-filter-modal-content {
  display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 2rem); min-height: 0;
  background: #fff; border-radius: 20px; border: 1px solid var(--rx-line);
  overflow: hidden; box-shadow: var(--rx-shadow-lg);
}
.ret-filter-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-shrink: 0;
  border-bottom: 1px solid var(--rx-line); padding: 1rem 1.1rem .9rem; background: #fff;
}
.ret-filter-modal-title-block { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.ret-filter-modal-title { font-size: 1.22rem; margin: 0; line-height: 1.2; flex-shrink: 0; }
.ret-modal-close {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid #d9dcd9; background: #ebedeb; border-radius: var(--rx-pill); color: #5a635c; font-size: 1rem;
  transition: background .15s, border-color .15s, color .15s;
}
.ret-modal-close:hover { background: #dfe2df; border-color: #c8ccc8; color: var(--rx-ink); }
.ret-filter-modal-body {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 1.1rem 1.1rem 1.2rem; background: #fff;
}
.ret-filter-modal-footer {
  display: flex; flex-shrink: 0; gap: .65rem;
  padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rx-line); background: #fff; box-shadow: 0 -6px 20px rgba(17, 28, 34, .06);
}
.ret-filter-modal-footer .rx-btn { flex: 1 1 0; min-width: 0; padding: .75rem .85rem; font-size: .9rem; border-radius: var(--rx-radius-sm); }
html.hf-dialog-open { overflow: hidden; }

/* The filter form, moved into the dialog: stacked sections, popovers shown inline */
.ret-filter-modal-body .rx-filter-form {
  display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.ret-filter-modal-body .rx-filter-form::before { display: none; }
.ret-filter-modal-body .rx-filter-pill { display: block; width: 100%; padding: 0 0 .35rem; }
.ret-filter-modal-body .rx-filter-trigger { display: none; }
.ret-filter-modal-body .rx-filter-pop {
  position: static; opacity: 1; visibility: visible; transform: none;
  min-width: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: .6rem;
}
.ret-filter-modal-body .rx-filter-pop-head {
  display: block; margin: 0 0 .2rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: #000; padding: .55rem .85rem; border-radius: 10px;
}
.ret-filter-modal-body .hf-cal { display: none; }
.ret-filter-modal-body .hf-date-native { display: block; }
.ret-filter-modal-body .ret-filter-label { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.ret-filter-modal-body .ret-filter-date-actions { margin-top: .25rem; padding-top: 0; border-top: 0; }
.ret-filter-modal-body .ret-filter-date-actions .ret-filter-btn,
.ret-filter-modal-body #hf-dates-reset { flex: 1 1 calc(50% - .25rem); padding: .55rem .85rem; border-radius: var(--rx-radius-sm); background: var(--rx-brand); color: #fff; text-decoration: none; }
.ret-filter-modal-body .ret-filter-date-actions .ret-filter-btn:hover,
.ret-filter-modal-body #hf-dates-reset:hover { background: var(--rx-brand-dark); color: #fff; }
.ret-filter-modal-body .rx-filter-radio-body { background: #f6f7f5; }
.ret-filter-modal-body .rx-filter-choices { gap: .35rem; }
.ret-filter-modal-body .ret-filter-check-grid { flex-direction: row; flex-wrap: wrap; gap: .5rem; max-height: none; overflow: visible; padding: 0; }
.ret-filter-modal-body .ret-filter-check { display: inline-flex; }
.ret-filter-modal-body .ret-filter-check span {
  display: inline-flex; padding: .6rem 1rem; border-radius: var(--rx-pill); min-height: 42px; line-height: 1.2;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.ret-filter-modal-body .ret-filter-check span { border: 1.5px solid var(--rx-line); background: #fff; }
.ret-filter-modal-body .ret-filter-check span::before { display: none; }
.ret-filter-modal-body .ret-filter-check input:checked + span {
  background: var(--rx-brand); border-color: var(--rx-brand); color: #fff; box-shadow: 0 4px 12px rgba(47, 140, 98, .25);
}

/* ===== 9. Tour cards — "immersive": full photo, text on the picture =====
   With a mouse the description is always shown and hover only zooms the photo and recolours
   "Prenota ora"; on touch screens home.js adds .is-near to the card crossing the middle of the
   screen, so the description opens while scrolling by (tablets; phones hide it and say "Prenota"). Category pill + price badge are dark glass
   (backdrop-filter on those two only: blur on the chips too made the photo zoom lag).
   Previous layouts: _archive/home-grid-2026-10-14 (old cards), _archive/home-grid-options-2026-10-14. */
/* Horizontal cards, 2 per row (1 under 768px). 3:2, 4:3 under 1200px so the text on the photo
   keeps its room. The tall 3-per-row version stays testable locally: /it/home?cards=tall
   (home-cards-lab.css). */
.ret-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 767.98px) { .ret-grid { grid-template-columns: 1fr; gap: 1rem; } }
/* Wide monitors (1600px+, e.g. 1920): a 1440px section, still 2 cards per row, a bit bigger and with a wide
   5rem gap ("Orizzontali B", owner 2026-10-22). Lab alternatives (3 per row, vertical, list): home-cards-lab.css. */
@media (min-width: 1600px) {
  .rx-tours .rx-section-inner { max-width: 1440px; }
  .ret-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; }
  .ret-card-name { font-size: 1.5rem; }
}
.ret-card[hidden] { display: none; }
.ret-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 2; overflow: hidden; text-decoration: none; color: #fff;
  background: #10241a; border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 30, 22, .18);
}
.ret-card:hover, .ret-card:focus-visible { color: #fff; }
.ret-card:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: 3px; }
@media (max-width: 1199.98px) { .ret-card { aspect-ratio: 4 / 3; } }
.ret-card-media { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, var(--rx-brand-deeper), var(--rx-brand)); }
.ret-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--rx-ease); }
.ret-card:hover .ret-card-img { transform: scale(1.06); }
.ret-card-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: rgba(255, 255, 255, .5); }
.ret-card-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 18, 12, .35) 0%, transparent 24%, transparent 34%, rgba(8, 18, 12, .6) 60%, rgba(8, 18, 12, .92) 100%);
}
.ret-card-cat {   /* small gold label above the title */
  grid-area: cat; justify-self: start; margin-bottom: -.15rem;
  font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #f6d79b;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* Watermark number, top left: counts the cards as shown (filters and sorting renumber them) */
.ret-grid { counter-reset: tour; }
.ret-card:not([hidden]) { counter-increment: tour; }
.ret-card::before {
  content: counter(tour); position: absolute; top: .55rem; left: 1.1rem; z-index: 1; pointer-events: none;
  font-family: var(--rx-font-head); font-weight: 600; font-size: clamp(4rem, 6.5vw, 6.25rem); line-height: 1;
  color: rgba(255, 255, 255, .14); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
@media (max-width: 767.98px) { .ret-card::before { font-size: 3.6rem; top: .45rem; left: .9rem; } }
.ret-card-price-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  background: rgba(12, 22, 17, .62); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: .45rem .85rem; border-radius: var(--rx-radius-md); line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .2);
}
.ret-card-price-from { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.ret-card-price-num { font-family: var(--rx-font-head); font-weight: 600; font-size: 1.15rem; color: #fff; letter-spacing: -.01em; margin-top: .08rem; }
.ret-card-body {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat cat" "name name" "desc desc" "meta cta"; align-items: end; gap: .5rem 1rem; padding: 1.4rem 1.4rem 1.35rem;
}
.ret-card-name {
  grid-area: name; font-weight: 600; font-size: 1.5rem; line-height: 1.18; margin: 0; letter-spacing: -.018em; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em;
  text-decoration-color: rgba(255, 255, 255, .5); transition: text-decoration-color .25s ease;
}
.ret-card:hover .ret-card-name, .ret-card:focus-visible .ret-card-name { text-decoration-color: #f6d79b; }
@media (max-width: 767.98px) { .ret-card-name { font-size: 1.3rem; } .ret-card-body { padding: 1.1rem 1.1rem 1.05rem; } }
/* phones: chips and "Prenota ora" stay on one line */
@media (max-width: 479.98px) {
  .ret-card-body { column-gap: .6rem; }
  .ret-card .ret-card-meta { gap: .3rem; }   /* chips wrap only if they really do not fit (one tour, phones < ~370px) */
  .ret-card .ret-chip { padding: .28rem .5rem; font-size: .72rem; }
  .ret-card .ret-card-cta { padding: .5rem .7rem; font-size: .8rem; }
  .ret-card .ret-card-cta { gap: .3rem; }
}
.ret-card-desc {
  grid-area: desc; font-size: .94rem; line-height: 1.55; color: rgba(255, 255, 255, .86); margin: -.5rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .45s var(--rx-ease), opacity .3s ease, margin .3s ease;
}
.ret-card:hover .ret-card-desc, .ret-card:focus-visible .ret-card-desc, .ret-card.is-near .ret-card-desc { max-height: 3.2em; opacity: 1; margin-top: 0; }
@media (hover: none) {          /* no JS / no IntersectionObserver on a touch screen: just show it */
  .ret-grid:not(.js-near) .ret-card-desc { max-height: 3.2em; opacity: 1; margin-top: 0; }
}
@media (hover: hover) {         /* with a mouse it is simply always there */
  .ret-card-desc { max-height: 3.2em; opacity: 1; margin-top: 0; transition: none; }
}
/* phones (one card per row): no description at all, and "Prenota" instead of "Prenota ora" so the
   chips and the button share one line */
.ret-card-cta-short, .ret-card-cta-chev { display: none; }
@media (max-width: 767.98px) {
  .ret-card-body { grid-template-areas: "cat cat" "name name" "meta cta"; }
  .ret-card .ret-card-desc { display: none; }
  .ret-card-cta-long, .ret-card-cta-arrow { display: none; }
  .ret-card-cta-chev { display: inline-block; }   /* "Prenota ›" (owner 2026-10-22) */
  .ret-card-cta-short { display: inline; }
}
.ret-card-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .45rem; }
.ret-chip {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--rx-pill);
  padding: .32rem .8rem; font-size: .78rem; font-weight: 600; color: #fff;
}
.ret-chip .i { color: #9fe0bd; font-size: .95em; }
/* Same trick as the nav icons (site.css): the sprite glyphs are fill-only and look hairline this
   small; a thin stroke in their own colour gives them the weight of the text. */
.ret-chip .i, .ret-card-cta .i { overflow: visible; stroke: currentColor; stroke-width: .5px; paint-order: stroke; }
.ret-chip--night { background: linear-gradient(135deg, #1e2a4a 0%, #2d3a5f 100%); border-color: transparent; }
.ret-chip--night .i { color: #f6d36a; }
@media (max-width: 640px) {
  .ret-chip--night { width: 2rem; height: 2rem; justify-content: center; padding: 0; }
  .ret-chip--night .ret-chip-label--night {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .ret-chip--night .i { font-size: .98rem; }
}
.ret-card-cta {
  grid-area: cta; justify-self: end; align-self: end;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .55rem 1.05rem; border-radius: var(--rx-pill);
  background: #fff; color: var(--rx-brand-deeper); font-weight: 700; font-size: .86rem; letter-spacing: .01em;
  transition: background .25s ease;
}
.ret-card:hover .ret-card-cta, .ret-card:focus-visible .ret-card-cta { background: #f6d79b; }
.ret-card-cta .i { transition: transform .25s ease; }
.ret-card:hover .ret-card-cta .i, .ret-card:focus-visible .ret-card-cta .i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .ret-card-img, .ret-card-desc, .ret-card-cta, .ret-card-cta .i, .ret-card-name { transition: none; }
}

/* ===== 10. Videos "Vivi Roma con noi" — Cinema =====
   Full-width dark band: blurred backdrop of the current clip, clip list (partials/video-chapters,
   home.js [data-rc]) + one .rp player (partials/player.php, site.css). Chosen 2026-10-15 from three
   layouts; the others stay in the local lab (?reel=1|3, home-reel-lab.css). Old dark panel:
   _archive/home-videos-panel-2026-10-15. */
.rcine { position: relative; overflow: hidden; background: #0b120e; color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
/* Background layer: the blurred cover and its shade together, clipped to the section. The image is
   scaled up (transform, not oversizing the box) so the blur's soft edges never show. */
.rcine-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rcine-ambient {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(56px) saturate(1.25); transform: scale(1.3); opacity: .85; transition: opacity .6s ease;
}
.rcine-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 14, 10, .93) 0%, rgba(8, 14, 10, .72) 45%, rgba(8, 14, 10, .4) 100%); }
.rcine-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rcine-stage { display: flex; justify-content: center; align-items: center; }
/* the player always fits the screen height (header + breathing room), centred in the band */
.rcine-stage .rp { flex: 0 0 auto; width: min(100%, 340px, calc((100svh - 190px) * 9 / 16)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -24px rgba(0, 0, 0, .8); }

/* Chapters (Cinema + Telefono) */
.rc-chapters { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-width: 520px; }
.rc-chapter {
  width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: .85rem 1rem; border: 0; border-radius: 14px; background: transparent; color: inherit;
  transition: background .2s ease;
}
.rc-chapter-n { flex: 0 0 auto; font-family: var(--rx-font-head); font-size: 1.05rem; font-weight: 600; opacity: .45; font-variant-numeric: tabular-nums; }
.rc-chapter-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rc-chapter-copy strong { font-size: 1rem; font-weight: 650; }
.rc-chapter-copy small { font-size: .82rem; opacity: .7; line-height: 1.35; }
.rc-chapter-time { flex: 0 0 auto; font-size: .8rem; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
.rcine .rc-chapter:hover { background: rgba(255, 255, 255, .07); }
.rcine .rc-chapter.is-active { background: rgba(255, 255, 255, .12); box-shadow: inset 3px 0 0 var(--rx-accent); }
.rcine .rc-chapter.is-active .rc-chapter-n { opacity: 1; color: var(--rx-accent); }
@media (max-width: 991.98px) {
  .rcine-inner { grid-template-columns: 1fr; }
  .rcine-stage { order: -1; }
  .rcine-stage .rp { width: min(78%, 320px, calc((100svh - 190px) * 9 / 16)); }
  .rcine-bg::after { background: linear-gradient(180deg, rgba(8, 14, 10, .45) 0%, rgba(8, 14, 10, .9) 60%); }
}

/* ===== 11. Custom-tour CTA ===== */
.rx-custom-cta { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 1.5rem); background: #fff; content-visibility: auto; contain-intrinsic-size: auto 480px; }
.rx-custom-cta-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background:
    radial-gradient(900px 400px at 90% 20%, rgba(232, 168, 75, .28), transparent 60%),
    linear-gradient(135deg, var(--rx-brand-deeper) 0%, var(--rx-brand) 100%);
  border-radius: var(--rx-radius-lg); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  color: #fff;
}
.rx-custom-cta-card::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none;
}
.rx-custom-cta-copy { position: relative; flex: 1 1 420px; max-width: 640px; }
.rx-custom-cta-copy .rx-section-title { margin-bottom: .6rem; }
.rx-custom-cta-copy .rx-section-sub { max-width: none; }
.rx-custom-cta-card .rx-btn { position: relative; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .rx-hero-bg { transform: none; }
  .rx-features-points.is-reveal > * { opacity: 1; transform: none; }
  .ret-card:hover, .ret-card:focus-visible { transform: none; }
  .ret-card:hover .ret-card-img { transform: none; }
}

/* ===== What is a tuk-tuk? (SEO plan phase 1) =====
   Most visitors have never heard the word: photo + one-line explanation + three facts + a link to the long article. */
.rx-explain { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: #fff; }
.rx-explain-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.rx-explain-media { border-radius: var(--rx-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--rx-shadow-md); background: var(--rx-cream-warm); }
.rx-explain-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-explain-copy .rx-section-title { margin-bottom: .9rem; }
.rx-explain-text { margin: 0 0 1.2rem; font-size: 1.05rem; line-height: 1.7; color: var(--rx-ink-soft); max-width: 58ch; }
.rx-explain-points { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rx-explain-points li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: var(--rx-pill); background: var(--rx-cream-warm); font-size: .88rem; font-weight: 600; color: var(--rx-ink); }
.rx-explain-points .i { color: var(--rx-brand); }
.rx-explain-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--rx-brand-dark); text-decoration: none; }
.rx-explain-link:hover { text-decoration: underline; text-decoration-color: var(--rx-accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.rx-explain-link .i { transition: transform .2s ease; }
.rx-explain-link:hover .i { transform: translateX(3px); }
@media (max-width: 767.98px) {
  .rx-explain-inner { grid-template-columns: minmax(0, 1fr); }
  .rx-explain-media { aspect-ratio: 16 / 10; }
}