/* V7 — one responsive architecture for EVERY viewport width.
   Background = full-bleed neutral parchment texture only.
   Travel illustrations = separate anchored transparent sprites.
   Therefore arbitrary browser resizing cannot crop away the airplane, palm,
   signs, compass or polaroid. Hero and quote UI are untouched. */

.hero-quote-stage {
  position: relative;
  isolation: isolate;
}

.hero-quote-bg-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-quote-stage > .hero,
.hero-quote-stage > .quote-strip {
  position: relative;
  z-index: 1;
}

.hero-quote-stage.canvas-ready > .hero,
.hero-quote-stage.canvas-ready > .quote-strip {
  background: transparent !important;
}

.hero-quote-stage.canvas-ready > .quote-strip::before,
.hero-quote-stage.canvas-ready > .quote-strip::after {
  content: none !important;
}

.quote-strip {
  overflow: hidden;
}

/* SAME decoration layer exists on phone, tablet, narrow desktop and wide desktop. */
.quote-mobile-decor-v6 {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Existing heading/bubble/navigation stay above all decorative art. */
.quote-strip > :not(.quote-mobile-decor-v6) {
  position: relative;
  z-index: 5;
}

.quote-mobile-decor-v6 img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  user-select: none;
}

/* ---------- WIDE DESKTOP: >1180 ---------- */
.quote-mobile-decor-v6__tl {
  left: -18px;
  top: -8px;
  width: clamp(185px, 16vw, 250px);
}

.quote-mobile-decor-v6__tr {
  right: 3%;
  top: 2px;
  width: clamp(165px, 14vw, 220px);
}

.quote-mobile-decor-v6__bl {
  left: -12px;
  bottom: -24px;
  width: clamp(175px, 15vw, 230px);
}

.quote-mobile-decor-v6__br {
  right: -8px;
  bottom: -22px;
  width: clamp(185px, 16vw, 245px);
  z-index: 2;
}

.quote-mobile-decor-v6__r {
  right: 0;
  top: 34%;
  width: clamp(95px, 8vw, 130px);
  opacity: .85;
  z-index: 3;
}

/* ---------- TABLET / NARROW DESKTOP: 769–1180 ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  .quote-mobile-decor-v6__tl {
    left: -10px;
    top: -5px;
    width: clamp(145px, 18vw, 205px);
  }

  .quote-mobile-decor-v6__tr {
    right: -2px;
    top: 1px;
    width: clamp(135px, 17vw, 195px);
  }

  .quote-mobile-decor-v6__bl {
    left: -8px;
    bottom: -18px;
    width: clamp(145px, 18vw, 200px);
  }

  .quote-mobile-decor-v6__br {
    right: -6px;
    bottom: -16px;
    width: clamp(150px, 19vw, 210px);
    z-index: 2;
  }

  .quote-mobile-decor-v6__r {
    right: -2px;
    top: 35%;
    width: clamp(82px, 10vw, 115px);
    opacity: .85;
    z-index: 3;
  }
}

/* ---------- PHONE / MOBILE: <=768 ---------- */
@media (max-width: 768px) {
  .quote-mobile-decor-v6__tl {
    left: -8px;
    top: 2px;
    width: clamp(112px, 31vw, 190px);
  }

  .quote-mobile-decor-v6__tr {
    right: -5px;
    top: 2px;
    width: clamp(105px, 29vw, 178px);
  }

  .quote-mobile-decor-v6__r {
    right: -12px;
    top: 31%;
    width: clamp(74px, 20vw, 125px);
    opacity: .85;
    z-index: 3;
  }

  .quote-mobile-decor-v6__bl {
    left: -8px;
    bottom: -10px;
    width: clamp(110px, 31vw, 190px);
  }

  .quote-mobile-decor-v6__br {
    right: -8px;
    bottom: -12px;
    width: clamp(112px, 31vw, 195px);
    z-index: 2;
  }
}

/* Wider mobile/tablet: ensure compass remains readable over the polaroid. */
@media (min-width: 600px) and (max-width: 768px) {
  .quote-mobile-decor-v6__r {
    right: -4px;
    opacity: .85;
  }
}

/* ---------- WIDE/ULTRAWIDE DESKTOP: anchor decorations to a centered
   composition container instead of the full viewport, so they stay near
   the (centered) bubble instead of drifting to the screen edges. The
   individual decoration left/right/top/bottom rules above are unchanged -
   they now simply resolve against this narrower, centered box. ---------- */
@media (min-width: 1200px) {
  .quote-mobile-decor-v6 {
    max-width: 1230px;
    margin: 0 auto;
  }
}