/* Shared standard for /cruise/, /cruise/river/ and /cruise/sea/. */
.cruise-beach-page { color:#132f4d; font-family:Arial,sans-serif; }
.cruise-beach-page #main { position:relative; isolation:isolate; background:#fff; padding:0 0 56px; }
.cruise-beach-page #main::before { display:none; }
.cruise-beach-page .cs-container { width:min(1240px,calc(100% - 64px)); }
.cruise-beach-page #main > .cs-container { position:relative; z-index:3; }
.cruise-beach-page .cs-breadcrumb { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 22px; font-size:13px; line-height:1.7; color:#d0e3ed; }
.cruise-beach-page .cs-breadcrumb a { color:#e6f2f2; text-decoration:none; }
.cruise-beach-page .cs-breadcrumb a:hover { text-decoration:underline; }
.cruise-beach-page .cs-catalog-intro { padding-top:32px; background:linear-gradient(90deg,#0b294a,#246b75); }
.cruise-beach-page .cs-catalog-intro > .cs-container { position:relative; z-index:2; padding-bottom:40px; }
.cruise-beach-page .cs-catalog-intro h1 { margin:0 0 12px; color:#fff; font-size:clamp(28px,3.5vw,42px); line-height:1.18; font-weight:600; }
.cruise-beach-page .cs-heading p { color:#e6f2f2; margin:0; font-size:16px; line-height:1.7; }
.cs-beach-intro { --beach-frame-height:clamp(120px,13vw,200px); --beach-horizon:calc(64px + var(--beach-frame-height) * .18 - 34.2vw); display:block; position:relative; height:calc(var(--beach-frame-height) + 134px); margin:-64px 0 0; overflow:hidden; isolation:isolate; background:#e6ccaa; }
.cs-beach-intro .sea-water { position:absolute; left:0; right:0; top:0; z-index:0; height:calc(100% - 70px); pointer-events:none; background:#c0e9f1 url('/assets/video/sea-beach-poster.webp') center var(--beach-horizon) / 100% auto no-repeat; }
.cs-beach-intro .sea-water__video { display:block; position:absolute; top:var(--beach-horizon); width:100%; height:auto; object-fit:cover; object-position:center; opacity:0; transition:opacity .8s ease; }
.cs-beach-intro .sea-water.is-ready .sea-water__video { opacity:1; }
.cs-beach-sand { position:absolute; left:0; right:0; bottom:0; height:94px; pointer-events:none; background:url('/assets/video/sea-sand-generated.webp') center bottom / cover no-repeat; -webkit-mask-image:linear-gradient(transparent,#000 28px); mask-image:linear-gradient(transparent,#000 28px); z-index:1; }
.cs-beach-intro::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#0b294a,#246b75); -webkit-mask-image:linear-gradient(#000 48px,transparent 112px); mask-image:linear-gradient(#000 48px,transparent 112px); z-index:2; }
.cs-beach-intro::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,transparent calc(100% - 42px),#fff); z-index:2; }
.cs-beach-tail { display:none; position:absolute; left:0; right:0; top:var(--cs-sand-top); height:var(--cs-sand-height); z-index:1; pointer-events:none; background:url('/assets/video/sea-sand-generated.webp') center top / cover no-repeat; -webkit-mask-image:linear-gradient(transparent,#000 28px,#000 var(--cs-sand-fade),transparent); mask-image:linear-gradient(transparent,#000 28px,#000 var(--cs-sand-fade),transparent); }
.has-sand-tail .cs-beach-tail { display:block; }
.has-sand-tail .cs-beach-sand { visibility:hidden; }
.has-sand-tail .cs-beach-intro::after { opacity:0; }
.cruise-beach-glass { position:relative; margin-top:-220px; padding:20px 24px 24px; border:1px solid #ffffff80; border-radius:24px; background:#ffffff26; -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); box-shadow:0 18px 48px #0b294a25,inset 0 0 40px #ffffff1a; scroll-margin-top:130px; }
.cruise-beach-glass::before { content:''; position:absolute; inset:-1px; padding:1px; border-radius:inherit; background:linear-gradient(135deg,#4cc2c0b3,#ffffffb3 45%,#f15b2659); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.cruise-beach-page .cruise-beach-glass .cruise-kind-nav { padding:0 0 12px; margin:0 0 16px; background:transparent; border-bottom-color:#ffffff66; }
.cruise-beach-glass .cruise-kind-nav a[aria-current=page] { color:#932d09; }
.cruise-beach-page .cruise-beach-glass .cs-searchbar { padding:0; border:0; border-radius:0; background:transparent; backdrop-filter:none; box-shadow:none; }
.cruise-beach-page .cruise-beach-glass :is(select,input) { background:#ffffffb3; border-color:#ffffffa6; border-radius:12px; }
.cruise-beach-page .cruise-beach-glass :is(select,input):focus { background:#ffffffe6; border-color:#2c7a7b80; }
@media(max-width:1199px) { .cruise-beach-page .cs-container { width:calc(100% - 40px); } }
@media(min-width:768px) and (max-width:1023px) {
 /* Keep dark tab labels readable where the smaller frame meets the gradient. */
 .cruise-beach-glass { background:#ffffff69; }
}
@media(max-width:767px) {
 .cruise-beach-page .cs-container { width:calc(100% - 32px); }
 .cruise-beach-page .cs-catalog-intro { padding-top:24px; }
 .cruise-beach-page .cs-catalog-intro > .cs-container { padding-bottom:18px; }
 .cs-beach-intro { --beach-frame-height:calc(27.5vw - 8px); }
 .cs-beach-intro .sea-water { background-size:cover; background-position:center bottom; }
 .cs-beach-intro .sea-water__video { position:static; height:100%; object-position:center bottom; }
 /* Mobile uses the compact beach; the sand never continues behind the results. */
 .cruise-beach-page .cs-beach-tail { display:none; }
 .cruise-beach-page .cs-beach-sand { visibility:visible; }
 .cruise-beach-page .cs-beach-intro::after { opacity:1; }
 .cruise-beach-glass { margin-top:-72px; padding:18px 16px; border-radius:18px; background:#ffffff69; box-shadow:0 12px 30px #0b294a12,inset 0 0 30px #ffffff2e; }
 .cruise-beach-page .cruise-beach-glass .cruise-kind-nav { gap:20px; margin-bottom:18px; }
 .cruise-beach-page .cruise-beach-glass :is(select,input) { background:#ffffffbf; border-color:#d5e4e8; }
}
@media(prefers-reduced-motion:reduce) { .sea-water__video { transition:none; } }