/* Raquel change-request mockup, 2026-09-22 (v2, post Nico design review).
   Scope: top phone bar, static header (nav always first), photo banner strip,
   2+2 real-media cards (trust section + schedule section), persistent Ralphie
   chat cue, mobile hero tightening. Additive; base layout files untouched. */

/* ── Original pill nav, converted from absolute (in-hero) to page flow ── */
.rq-nav-band {
  background: #fff;
  padding: 8px 0 0;
}
.rn-nav.rq-nav-flow {
  position: relative;
  left: auto;
  top: auto;
  width: 95.8%;
  height: auto;
  min-height: 68px;
  margin: 0 auto;
  padding-top: 6px;
  padding-bottom: 6px;
  z-index: 30;
  grid-template-columns: auto 1fr auto;
  box-shadow: 0 10px 28px rgba(6, 28, 57, .10);
}
/* keep menu links visible on real desktops (site default hides them <=1300px) */
@media (min-width: 1001px) {
  .rq-nav-flow .rn-nav-links { display: flex !important; }
  .rq-nav-flow .rn-burger { display: none !important; }
  .rq-nav-flow .rn-nav-actions > i { display: inline-block !important; }
}
/* brand sized to share the pill with the full link row */
.rq-nav-flow .rn-brand span { font-size: clamp(24px, 1.9vw, 34px); }
.rq-nav-flow .rn-brand img { height: clamp(34px, 2.6vw, 44px); }

/* ── Photo banner strip: floating cards over the hero sky. The strip band uses
      the exact sky blue and the hero tucks 80px underneath, so the cards read
      as floating on the illustration and the palm emerges from behind the
      right card (its clipped top edge in the source art stays hidden). ── */
.rq-photo-strip {
  overflow: hidden;
  position: relative;
  padding: clamp(8px, 0.8vw, 14px) 0 clamp(8px, 0.8vw, 14px);
  background: #fff;
  height: clamp(140px, 15vw, 200px);
  box-sizing: content-box;
}

.rq-fade-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: clamp(10px, 1vw, 16px);
  height: 100%;
}
.rq-photo-strip figure {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.3vw, 22px);
  box-shadow: 0 5px 14px rgba(10, 45, 68, .10);
  position: relative;
  height: 100%;
}
.rq-photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rq-photo-strip figure:nth-child(1) img { object-position: 42% 30%; }
.rq-photo-strip figure:nth-child(2) img { object-position: 50% 35%; }
.rq-photo-strip figure:nth-child(3) img { object-position: 55% 25%; }

/* mobile: single fading slot */
@media (max-width: 760px) {
  .rq-photo-strip { height: 52vw; padding: 8px 8px 0; }
  .rq-fade-grid { grid-template-columns: 1fr; }
  .rq-fade-slot[data-slot="1"], .rq-fade-slot[data-slot="2"] { display: none; }
}

/* ── Real-media cards (scoped hard: the base .rn-trust-grid img rule
      sets width 61% / contain and must lose to these) ── */
.rq-two-up .rq-card-media,
.rq-app-cards .rq-card-media {
  width: 100%;
  height: clamp(220px, 16vw, 290px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(10, 45, 68, .10);
  display: block;
}

/* Nico 2026-09-22: cards fill their space, image gets the extra room.
   flex-basis 0 + min-height 0 kills the intrinsic-image floor that otherwise
   inflates the row past the grid container (portrait screenshot = 513px floor) */
.rq-two-up .rq-card-media {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
.rq-two-up h3, .rq-two-up p { flex: 0 0 auto; }
.rq-two-up .rq-media-photo { object-position: 48% 42%; }
.rq-two-up .rq-media-tracking { object-position: 50% 12%; }

/* trust section, two-up: cards stretch to the grid area; media absorbs it */
.rq-two-up { align-items: stretch; }
.rq-two-up h3 { margin-top: 16px; }
.rq-two-up p  { margin-top: 8px; }

/* schedule section: the two remaining cards take the planner's slot */
.rq-app-cards {
  position: absolute;
  z-index: 4;
  left: 37.2%;
  top: 6%;
  width: 61%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 24px);
  font-family: "Pally", system-ui, sans-serif;
}
.rq-app-cards article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, .96);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(10, 45, 68, .12);
  padding: clamp(14px, 1.4vw, 22px);
}
.rq-app-cards .rq-card-media { height: clamp(340px, 27vw, 470px); }
.rq-app-cards h3 {
  margin: 12px 0 0;
  color: #0A2D44;
  font-size: clamp(19px, 1.5vw, 26px);
  line-height: 1.02;
  font-weight: 800;
}
.rq-app-cards p {
  margin: 8px 0 0;
  color: #33566d;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.35;
}

/* the planner's satellite tabs went with the planner (Nico: remove the calendar thing) */
.rn-schedule-tabs { display: none !important; }

/* booking screenshot is the smallest source: contain on a tinted band so it
   shows complete instead of blurry-cropped (placeholder until originals) */
.rq-app-cards .rq-media-contain {
  object-fit: contain;
  background: #EAF4FA;
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .rq-two-up article img.rq-card-media { height: 190px; }
  .rq-app-cards {
    left: 4%;
    width: 92%;
    top: 700px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rq-app-cards .rq-card-media { height: 180px; }
  /* two stacked cards need more room than the shared 1500px section height */
  .rn-schedule-section { min-height: 1640px !important; }
}
.rq-app-cards article:first-child .rq-card-media { object-position: 50% 30%; }

/* ── First-viewport fit (Nico): nav + strip + FULL hero (car bottom + launch
      pill) visible without scrolling. Hero shortened; art bottom-anchored so
      only sky is cropped. ── */
@media (min-width: 761px) {
  .rn-hero {
    aspect-ratio: auto !important;
    height: clamp(500px, 44vw, 600px);
    min-height: 0 !important;
  }
  .rn-hero-bg { object-position: 50% 100% !important; }
  .rn-hero-copy { top: 6% !important; }
  .rn-hero::before { top: 0 !important; }
  .rn-car { top: 22% !important; }
}

/* ── Ralphie spawns after one scroll (Nico): hidden at load, pops in when the
      sand section approaches ── */
body.rq-ralphie-wait #rn-ralphie-mascot {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(26px);
}
#rn-ralphie-mascot { transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1); }

/* ── Hero: tighten mobile height now the steps strip is gone ── */
@media (max-width: 760px) {
  .rn-hero { min-height: 690px !important; }
  .rn-car { top: 63% !important; left: 24% !important; width: 64% !important; }
}

/* ── Ralphie chat cue: label always visible (was first-idle only, hidden on phones) ── */
#rn-ralphie-mascot::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
@media (max-width: 520px) {
  #rn-ralphie-mascot::after { display: block !important; }
}

/* Nico declutter 2026-09-22: schedule section's bottom proof strip removed */
.rn-schedule-proof { display: none !important; }

/* ── Variant B: full-screen real-media landing (call decision 2026-09-22) ── */
.rqb-hero {
  position: relative;
  height: calc(100vh - 96px);
  min-height: 520px;
  overflow: hidden;
  background: #0A2D44;
}
.rqb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rqb-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,45,68,.05) 40%, rgba(10,45,68,.72) 100%);
}
.rqb-copy {
  position: absolute;
  left: clamp(20px, 5vw, 84px);
  right: clamp(20px, 5vw, 84px);
  bottom: clamp(28px, 7vh, 72px);
  color: #fff;
  font-family: "Pally", system-ui, sans-serif;
}
.rqb-copy h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.0;
  font-weight: 900;
  text-shadow: 0 2px 18px rgba(10,45,68,.45);
}
.rqb-copy p {
  margin: 14px 0 22px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  opacity: .95;
}
.rqb-cta {
  display: inline-block;
  background: #F27255;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(16px, 1.3vw, 20px);
  padding: 16px clamp(24px, 2.4vw, 38px);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(10,45,68,.35);
}
.rqb-cta b { margin-left: 8px; }
.rqb-cta:hover { filter: brightness(1.07); }

/* ── Variant B seam: the sand-top art itself has a feathered (blurred-alpha)
      top edge and overlaps the video, so the beach edge reads soft ── */
.rqb .rn-trust-section { margin-top: -54px; }


/* ── B hero rotation ── */
.rqb-rotation { position: absolute; inset: 0; cursor: pointer; }
.rqb-item {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.rqb-item.is-on { opacity: 1; }
.rqb-next {
  position: absolute; right: clamp(14px, 2vw, 34px); top: 50%;
  transform: translateY(-50%);
  z-index: 5; width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer; color: #0A2D44;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 22px rgba(10,45,68,.3);
  display: grid; place-items: center;
}
.rqb-next svg { width: 26px; height: 26px; }
.rqb-next:hover { background: #fff; }
.rqb-sound {
  position: absolute; top: 18px; right: clamp(14px, 2vw, 34px); z-index: 5;
  background: rgba(10,45,68,.55); color: #fff;
  font-family: "Pally", system-ui, sans-serif; font-size: 12px; font-weight: 700;
  padding: 7px 12px; border-radius: 999px;
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
body.rqb-video-on .rqb-sound { opacity: 1; }

/* ── Real app screens shown COMPLETE at no-upscale sizes (Nico 21:5xZ):
      uniform height, width follows each screen's true aspect, downscale-only ── */
.rq-screen-shot,
.rq-two-up .rq-screen-shot {
  display: block;
  height: clamp(360px, 29vw, 438px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  /* real app exports carry baked rounded corners + transparent outside;
     drop-shadow follows the alpha silhouette (a box-shadow would draw a
     rectangle halo behind the transparent corners at zoom) */
  filter: drop-shadow(0 6px 14px rgba(10, 45, 68, .16));
}
.rq-two-up .rq-screen-shot { width: auto; height: clamp(360px, 29vw, 438px); object-fit: contain; }
.rq-two-up .rq-media-photo { height: clamp(360px, 29vw, 438px); }

/* ── Natural sand edge + overlap scroll (v6, Nico 2026-09-23: "sand needs a
      natural sand edge like this component, not a straight line"; section
      slides up OVER the hero). Replaces the feathered straight seam. ── */
.rqb .rn-trust-section { margin-top: -42px; position: relative; z-index: 2; }
.rqb .rqb-hero { position: relative; z-index: 1; overflow: hidden; }
.rqb .rn-trust-section .rn-plx-sand-front {
  display: block; top: -2px; width: 100%; height: clamp(90px, 8vw, 140px);
  object-fit: cover; object-position: top; z-index: 2; opacity: 1;
}
.rqb .rn-trust-section .rn-plx-sand-back {
  display: block; top: clamp(-34px, -2vw, -14px); width: 100%;
  height: clamp(90px, 8vw, 140px);
  object-fit: cover; object-position: top; z-index: 1; opacity: 1;
}
/* the section's cream backdrop must start BELOW the natural crest so the
   jagged edge (not a rectangle) is the section's true silhouette; the top of
   the backdrop fades cream-to-texture so no straight line appears anywhere */
.rqb .rn-trust-section::before {
  top: clamp(48px, 4.5vw, 78px);
  height: calc(100% - clamp(48px, 4.5vw, 78px));
}
/* deterministic seam blend: plain div (no pseudo/shorthand stacking quirks)
   holds solid cream under the crest, then fades into whatever backdrop the
   width serves — kills the color-separation line at every viewport */
.rqb .rn-seam-blend {
  position: absolute; left: 0; top: 36px; width: 100%; height: 520px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #fff8ec 0px, #fff8ec 240px, rgba(255,248,236,0) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .rqb .rn-trust-section { margin-top: -54px; }
}
@media (max-width: 760px) {
  /* mobile bg stack (dawn piece anchored top) needs the same cream-to-art
     fade under the natural crest, or the dawn piece's top edge draws a line */
  .rqb .rn-seam-blend { height: 420px; }
}

/* ── Footer seam: natural jagged edge (Nico 2026-09-23 "do the footer seam").
      The crest PNG's alpha masks the footer's own top edge, so the sunset
      gradient itself gets the granular sand silhouette — replaces the old
      straight-line fade mask. Colors untouched: footer top stop stays
      #fff8ec so the crest fill IS the footer cream. ── */
.rqb .rn-foot {
  -webkit-mask-image: url("/imgs/raquel/rn-sand-edge-front.png?v=rq7"), linear-gradient(#000, #000);
  mask-image: url("/imgs/raquel/rn-sand-edge-front.png?v=rq7"), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% clamp(90px, 8vw, 140px), 100% calc(100% - clamp(88px, 7.8vw, 138px));
  mask-size: 100% clamp(90px, 8vw, 140px), 100% calc(100% - clamp(88px, 7.8vw, 138px));
  -webkit-mask-position: top center, bottom center;
  mask-position: top center, bottom center;
}

/* ── Raquel clips: sound chip only while muted (2026-09-28) ── */
body.rqb-video-on .rqb-sound { opacity: 0; }
body.rqb-video-on .rqb-sound.is-muted { opacity: 1; }

/* ── Mobile pass 2026-09-28 (Nico: cards down the page not optimized on phones).
      Measured at 390: schedule headline ended 272px into its section but the list
      sat at 472px (200px hole); app cards at 700px overlapped the third list card by
      12px; the last card's caption ended 55px under the footer; trust section carried
      ~330px of empty cream above its sea art. rq-mobile-pass-2026-09-28 ── */
@media (max-width: 760px) {
  .rqb .rn-schedule-list { top: 300px !important; }
  .rqb .rq-app-cards { top: 636px; } /* clears the list in its pre-reveal (+62px) state too */
  .rqb .rn-schedule-section { min-height: 1670px !important; }
  .rqb .rn-trust-section { height: auto !important; min-height: 2220px !important; }
}

/* ── Tablet / zoomed-desktop pass 2026-09-30 (Nico screenshot at ~1024 CSS px: subhead ran
      under the first app card and the list cards sat under the card captions). Cause: the
      base sheet moves .rn-schedule-list to 7%/38% and .rn-schedule-copy to 86% below 1100px,
      but the B-variant .rq-app-cards kept its desktop 37.2%/61% position. ── */
@media (min-width: 761px) and (max-width: 1100px) {
  .rqb .rn-schedule-copy { width: 38%; }
  .rqb .rq-app-cards { left: 48%; width: 49%; top: 345px; }
  .rqb .rq-app-cards .rq-card-media { height: clamp(240px, 28vw, 380px); }
  .rqb .rn-schedule-list { top: 390px; width: 38%; }
}

/* ── Trust two-up caption padding (Nico photo 2026-09-30 21:29Z: GPS caption touched the
      card's bottom edge on his phone). Measured live: the grid's 2.6% row-gap resolves
      against the grid's final height AFTER the auto rows are sized (auto-height grid on
      phones), so 18px came out of the last row and the caption overflowed by 1px. Desktop
      had the mirror defect: the stretched GPS card left 67-164px under its caption because
      the screenshot keeps its no-upscale height. Px gap on phones; auto vertical margins
      center the screenshot so both captions end the same distance from the edge. ── */
@media (max-width: 760px) {
  .rq-two-up { row-gap: 18px; }
}
.rq-two-up .rq-screen-shot { flex: 0 0 auto; margin: auto; }