/* =========================================================================
   WAOW — responsive layer (tablet + mobile).
   Desktop (>= 1100px) is the pixel-measured 1366px system in style.css and is NOT touched here.
   Below 1100px the pages are plain flow layouts (flex / grid / natural heights); this file only
   corrects what the desktop layers leave behind on narrow screens.
   Breakpoints: 1099.98px (tablet and below) · 767.98px (mobile) · 479.98px (small mobile)
   ========================================================================= */

@media (max-width: 1099.98px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, picture, video, canvas { max-width: 100%; }
  [id] { scroll-margin-top: 84px; }               /* sticky header */
  .logo { flex: 0 0 auto; }
  .logo img { width: auto; max-width: none; }     /* never squeeze the logo */

  /* footer: desktop pins the grid at a fixed height */
  .hp-footer__grid { height: auto !important; }
}

/* ---- shared: decorative embroidery icons are never cropped or stretched ---- */
@media (max-width: 1099.98px) { .hp-icon, img.dot-icon { height: auto !important; object-fit: contain !important; } }

/* =========================================================================
   Homepage
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* icons sit on the corner of their photo instead of covering text */
  .hp-family__visual .dot-icon { width: clamp(70px, 14vw, 130px); left: -3%; bottom: -8%; }
  .hp-safety__photo { overflow: visible; }
  .hp-safety__photo .dot-icon { width: clamp(70px, 13vw, 120px); right: -3%; bottom: -8%; }
  .hp-dive__mask-icon { width: clamp(80px, 15vw, 140px); left: -2%; top: -9%; }
  .hp-dive__photo--right { margin-top: clamp(2.5rem, 8vw, 4rem); }
  .hp-dive__col { min-width: 0; }

  /* destination stamps: a wrapped row of reasonably sized stamps, not one giant column */
  .hp-stamp-row { gap: clamp(0.75rem, 2.5vw, 1.5rem); }
  .hp-stamp-row li { flex: 0 1 clamp(150px, 29vw, 230px); position: static; width: auto; height: auto; }
  .hp-stamp-row li a, .hp-stamp-row li img { display: block; width: 100%; height: auto; }

  /* carousels: arrows stay inside the viewport */
  .hp-coming-next__row { gap: 0.5rem; }
  .hp-coming-next__track { min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
  .hp-coming-next__track::-webkit-scrollbar { display: none; }
  .hp-coming-next__nav { flex: 0 0 auto; position: static; }
  .hp-coming-next__card { width: clamp(150px, 38vw, 244px); flex: 0 0 auto; }
  .hp-coming-next__card figure { height: auto; aspect-ratio: 4 / 5; }
  .hp-testi-nav { position: static; }
}
@media (max-width: 479.98px) {
  .hp-stamp-row li { flex-basis: calc(50% - 0.5rem); }
  .hp-coming-next__card { width: 62vw; }
}

/* =========================================================================
   Photo collages (two overlapping photos): one flow-based grid for tablet + mobile
   ========================================================================= */
@media (max-width: 1099.98px) {
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) {
    position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
    width: 100%; max-width: 620px; margin-inline: auto; min-height: 0 !important; height: auto !important; padding-bottom: 12%;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure {
    position: relative !important; inset: auto !important; margin: 0 !important; height: auto !important; transform: none;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(1) {
    grid-column: 1 / span 8; grid-row: 1; width: 100% !important; aspect-ratio: 4 / 5 !important; z-index: 1;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(2) {
    grid-column: 6 / span 7; grid-row: 1; align-self: end; margin-bottom: -12% !important; width: 100% !important; aspect-ratio: 1 / 1.05 !important; z-index: 2;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) figure img {
    width: 100%; height: 100%; object-fit: cover; transform: none;
  }
  .cb-hero__collage > figure:nth-of-type(1) { aspect-ratio: 4 / 3 !important; grid-column: 1 / span 9; }
  .cb-hero__collage > figure:nth-of-type(2) { grid-column: 5 / span 8; aspect-ratio: 1 / 1 !important; }
  .cb-hero__collage { padding-bottom: 16%; }
  .hp-intro__visual > figure:nth-of-type(1) { aspect-ratio: 1 / 1.05 !important; }
}

/* =========================================================================
   Cabins
   ========================================================================= */
@media (max-width: 1099.98px) {
  .cb-page .cb-return__copy > p[style], .cb-page .cb-closing__copy p[style], .cb-page .cb-hero p[style] {
    position: static !important; left: auto !important; transform: none !important; text-align: center; margin-inline: auto;
  }
  .cb-return__copy { text-align: center; }
  .cb-return__icon { display: none; }
  .cb-return__script { text-align: center; font-size: clamp(1rem, 2.6vw, 1.4rem); margin-top: 1rem; }
  .cb-return__script--2 { margin-top: 0.25rem; }
  .cb-cabin__plan.cb-cabin__plan--img { width: 100%; max-width: 440px; margin-inline: auto; }
  .cb-cabin__plan img { transform: none !important; }
  .cb-cabin__frame { max-width: 440px; margin-inline: auto; }
  .cb-cabin__annotation { font-size: clamp(1.05rem, 3vw, 1.4rem); line-height: 1.5; text-align: center; }
  .cb-cabin__copy { text-align: center; }
  .cb-cabin__copy h2 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.1; }
  .cb-cabin__copy p.cb-cabin__deck { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ironwood); letter-spacing: 0.03em; }
  .cb-cabin__copy .link-arrow { margin-inline: auto; }
  .cb-hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .cb-closing__copy { text-align: center; }
  .cb-closing__photo { max-width: 460px; margin-inline: auto; }
}

/* =========================================================================
   The Boat
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* desktop-only image crops (inline transforms) */
  .tbp-page .tbp-fullbleed__photo img { transform: none !important; }
  .tbp-page .tbp-fullbleed__photo--br img { transform: scaleY(-1) !important; object-fit: contain !important; background: transparent; }
  /* Outdoor / Indoor: plain stack, text first on tablet too */
  .tbp-fullbleed { position: relative; display: block; min-height: 0 !important; overflow: visible; }
  .tbp-fullbleed__photo, .tbp-fullbleed__photo--full-right {
    position: relative !important; inset: auto !important; display: block; width: min(100%, 560px) !important; height: auto !important;
    aspect-ratio: 4 / 3 !important; margin: 1.5rem auto !important;
  }
  .tbp-fullbleed__photo--br { aspect-ratio: 4 / 3 !important; }
  .tbp-fullbleed__copy { max-width: 60ch; margin-inline: auto !important; text-align: center !important; padding-inline: var(--gutter) !important; }
  .tbp-fullbleed .dot-icon { display: none; }
  .tbp-intro__collage { margin-top: 1.5rem; }
  .tbp-intro__copy { text-align: center; }
  .tbp-life h2 { left: auto; }
}

/* =========================================================================
   Experience / Diving / Engagement / About: loose items (quotes, captions, menu card) join the flow
   ========================================================================= */
@media (max-width: 1099.98px) {
  .xp-gastro__collage, .dd-built__visual, .dd-underwater__visual, .dd-groups__visual, .gb-forest__photo, .gb-promise__photo {
    position: relative; display: flex; flex-direction: column; gap: 1rem; min-height: 0 !important; height: auto !important;
    width: 100%; max-width: 560px; margin-inline: auto;
  }
  .xp-gastro__collage > *, .dd-built__visual > *, .dd-underwater__visual > *, .dd-groups__visual > *, .gb-forest__photo > .p, .gb-promise__photo > .p,
  .xp-hotel__caption, .xp-hero__collage > .dot-icon {
    position: static !important; inset: auto !important; transform: none !important; width: auto !important; margin: 0 !important;
  }
  .xp-gastro__photo, .dd-built__photo, .gb-forest__photo > picture, .gb-promise__photo > picture { height: auto !important; aspect-ratio: 4 / 3 !important; }
  .xp-gastro__photo-quote { order: -1; text-align: center; }
  .xp-gastro__menu { align-self: center; width: min(100%, 340px) !important; padding: 1.5rem 1rem !important; }
  .xp-hotel__caption, .dd-built__caption, .dd-underwater__caption, .gb-forest__caption, .gb-promise__caption { text-align: center; max-width: 100%; }
  .xp-hotel__caption { grid-column: 1 / -1; grid-row: 2; margin-top: 1.5rem !important; }
  .dd-groups__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
  .xp-hero__collage > .dot-icon, .dd-newsites__visual > .dot-icon { position: absolute !important; right: 0; top: -2rem; width: clamp(60px, 14vw, 110px) !important; }
  .xp-diving__visual > .dot-icon, .xp-included__visual > .dot-icon { width: clamp(60px, 14vw, 110px) !important; }
  .xp-beyond__photo { overflow: visible; }
  .xp-beyond__photo img { transform: none !important; }
  .dd-newsites__photo, .dd-newsites__photo img { overflow: visible; }
}

/* =========================================================================
   Header + mobile menu (accordion with every page the desktop menu reaches)
   ========================================================================= */
@media (max-width: 900px) {
  .site-header__row { gap: 0.75rem; }
  .site-header__actions { gap: 0.5rem; }
  .site-header__actions .btn { white-space: nowrap; padding: 0.55em 0.9em; font-size: 0.7rem; }
  .mobile-nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav ul { gap: 0.2rem; padding-block: 0.75rem 1.5rem; }
  .mobile-nav > ul > li > a, .mobile-nav summary a { display: inline-block; padding-block: 0.55rem; }
  .mobile-nav details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .mobile-nav details > summary::-webkit-details-marker { display: none; }
  .mobile-nav details > summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--open-sea); border-bottom: 2px solid var(--open-sea);
    transform: rotate(45deg); transition: transform 0.2s var(--ease);
  }
  .mobile-nav details[open] > summary::after { transform: rotate(-135deg); }
  .mobile-nav__sub { display: flex; flex-direction: column; gap: 0 !important; padding: 0 0 0.5rem 1rem !important; border-left: 1.5px solid var(--yellaow); margin-left: 2px; }
  .mobile-nav__sub a { font-size: 0.8rem; font-weight: 600; color: var(--open-sea); padding-block: 0.45rem; display: inline-block; }
  .mobile-nav__nested > ul { display: flex; flex-direction: column; padding: 0 0 0.25rem 1rem; }
  .mobile-nav__nested > ul a { font-size: 0.72rem; font-weight: 500; }
  .mobile-nav__nested > summary a { font-size: 0.8rem; }
}
@media (max-width: 479.98px) {
  .site-header__actions .btn { padding: 0.5em 0.7em; font-size: 0.62rem; letter-spacing: 0.04em; }
  .logo img { height: 28px; }
}

/* =========================================================================
   Regions
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-rg figure img, .px-it figure img { object-fit: cover; }
  .px-rg .rg-quote__card.p { transform: none !important; top: auto !important; min-height: 0; height: auto !important; max-height: none; overflow: visible; }
  .px-rg .rg-key__note { height: auto !important; min-height: 0; }
  .px-rg .rg-key__right { height: auto !important; }
  .px-rg .rgx-track, .px-it2 .it2-track { translate: none; margin-inline: calc(-1 * var(--gutter)); padding: 18px var(--gutter) 12px; scroll-padding-inline: var(--gutter); box-sizing: border-box; }
}

/* =========================================================================
   Small screens: desktop hard line breaks inside paragraphs become spaces so text re-wraps naturally
   (Chrome/Safari; poems and short stacked lines keep their breaks)
   ========================================================================= */
.br-sp { display: none; }
@media (max-width: 767.98px) {
  br.had { display: none; }
  .br-sp { display: inline; }
}

/* newsletter + footer on small screens */
@media (max-width: 899.98px) {
  .hp-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; }
  .hp-newsletter__form input { flex: 1 1 220px; min-width: 0; min-height: 44px; }
  .hp-newsletter__form button { flex: 1 1 140px; min-height: 44px; }
  .hp-footer__legal { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .hp-footer__policies { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
}

/* the mobile panel only exists below the desktop-nav breakpoint, and opens/closes with [hidden] */
@media (min-width: 901px) { .mobile-nav { display: none !important; } }
@media (max-width: 900px) {
  .mobile-nav[hidden] { display: none; }
  .mobile-nav:not([hidden]) { display: block; }
}