/* WaveHaven chapter styles */

.wh-main { position: relative; }
img { max-width: 100%; display: block; }

/* Reveal-on-scroll: start hidden, JS (main.js) reveals via inline style overrides. */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal][data-clip] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
[data-reveal][data-draw] { opacity: 1; transform-origin: left center; transform: scaleX(0); }
.wh-revealed { opacity: 1 !important; transform: none !important; }
[data-clip].wh-revealed { clip-path: inset(0 0 0 0) !important; }
[data-draw].wh-revealed { transform: scaleX(1) !important; }

.wh-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.77,0,.18,1); }
.wh-wipe.wh-wiped { clip-path: inset(0 0 0 0); }

/* Eyebrow decoration: small wave-mark icon + line, matching the WaveHaven logo motif */
.wh-deco { position: relative; display: inline-flex; align-items: center; gap: 14px; }
.wh-deco::before {
	content: '';
	width: 22px; height: 14px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30' fill='none' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath stroke='%231B4650' d='M0 6c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath stroke='%23B5684A' d='M0 15c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath stroke='%231B4650' d='M0 24c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.wh-deco--onDark::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30' fill='none' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath stroke='%238FCFCC' d='M0 6c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath stroke='%23D99172' d='M0 15c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath stroke='%238FCFCC' d='M0 24c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3C/svg%3E");
}
.wh-deco::after {
	content: '';
	width: clamp(30px, 4vw, 56px); height: 1px;
	background: currentColor;
	flex: none;
}

/* Hero headline's script accent (e.g. "Rote") renders visually larger than the serif text beside it at the same font-size — scale it down. */
.wh-chapter-hero h1 .wh-script { font-size: 0.7em; }
.wh-ghost-num {
	position: absolute;
	left: 100%;
	margin-left: 18px;
	bottom: -0.55em;
	font-family: Forum, serif;
	font-size: clamp(64px, 8vw, 128px);
	line-height: 1;
	color: currentColor;
	opacity: .16;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}
@media (max-width: 680px) { .wh-ghost-num { display: none; } }

/* Buttons */
.wh-btn { display: inline-block; padding: 14px 26px; border: 1px solid currentColor; transition: background 320ms var(--wh-ease), color 320ms var(--wh-ease); }
.wh-btn--secondary { color: var(--wh-sea-900); }
.wh-btn--secondary:hover { background: var(--wh-sea-900); color: var(--wh-sand); }
.wh-btn--inverse { color: var(--wh-white); }
.wh-btn--inverse:hover { background: var(--wh-white); color: var(--wh-sea-900); }

/* Wave gallery row hover */

/* Social icons */
.wh-social-icon { transition: border-color 200ms; }
.wh-social-icon:hover { border-color: rgba(246,241,231,.7); }

/* Horizontal scroll-snap strip: hide scrollbar */
.wh-chapter-doorstep [style*="scroll-snap-type"]::-webkit-scrollbar { display: none; }

/* Nav enquire hover */
[data-nav-enquire]:hover { opacity: .8; }

@media (max-width: 680px) {
	[data-rail] { display: none !important; }
	[data-hero-instr] { display: none !important; }
	[data-strip] { flex-direction: column !important; height: auto !important; }
	[data-strip] [data-panel] { flex: none !important; width: 100% !important; height: 220px !important; min-width: 0 !important; }
	[data-strip] [data-panel] [data-shut] { display: none !important; }
	[data-strip] [data-panel] [data-open] { opacity: 1 !important; transform: none !important; }
	[data-filmstrip-scroller] { height: auto !important; }
	[data-filmstrip-scroller] > div { position: static !important; height: auto !important; }
}

/* Wave gallery: photo cards */
.wh-waves{background:var(--wh-sea-900);color:var(--wh-sand);padding:var(--wh-section-pad) var(--wh-edge)}
.wh-waves-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.wh-waves-head h2{font-size:clamp(34px,4.4vw,64px);line-height:1.08;color:var(--wh-sand);max-width:16ch;overflow-wrap:anywhere;min-width:0}
.wh-waves-intro{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.wh-waves-intro p{margin:0;font-size:18px;line-height:1.65;color:rgba(246,241,231,.7);max-width:46ch}
.wh-waves-link{display:inline-flex;gap:10px;align-items:center;color:var(--wh-sand);text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(246,241,231,.4);white-space:nowrap;transition:border-color 300ms var(--wh-ease)}
.wh-waves-link span{transition:transform 300ms var(--wh-ease)}
.wh-waves-link:hover{border-color:var(--wh-teal-pale)}
.wh-waves-link:hover span{transform:translateX(4px)}
.wh-waves-link:focus-visible{outline:2px solid var(--wh-teal-pale);outline-offset:4px}
.wh-waves-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(12px,1.4vw,20px)}
.wh-spot{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;min-width:0}
.wh-spot-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(170deg,var(--wh-teal) 0%,var(--wh-ink-soft-1) 70%);margin-bottom:12px}
.wh-spot-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--wh-ease)}
.wh-spot-desc{position:absolute;inset:auto 0 0 0;padding:clamp(16px,1.6vw,22px);font-size:15px;line-height:1.5;color:var(--wh-sand);background:linear-gradient(0deg,rgba(11,31,42,.92) 0%,rgba(11,31,42,.75) 70%,rgba(11,31,42,0) 100%);opacity:0;transform:translateY(12px);transition:opacity 400ms var(--wh-ease),transform 400ms var(--wh-ease)}
.wh-spot-name{font-family:Forum,serif;font-size:clamp(24px,2vw,30px);line-height:1.1;color:var(--wh-sand);transition:color 200ms var(--wh-ease)}
.wh-spot-meta{font-size:13px;line-height:1.5;color:rgba(246,241,231,.6)}
.wh-spot:hover .wh-spot-media img,.wh-spot:focus-visible .wh-spot-media img{transform:scale(1.05)}
.wh-spot:hover .wh-spot-desc,.wh-spot:focus-visible .wh-spot-desc{opacity:1;transform:none}
.wh-spot:hover .wh-spot-name,.wh-spot:focus-visible .wh-spot-name{color:var(--wh-teal-pale)}
.wh-spot:focus-visible{outline:2px solid var(--wh-teal-pale);outline-offset:6px}
@media (hover:none){.wh-spot-desc{display:none}}
@media (max-width:800px){
  .wh-waves-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .wh-waves-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68vw;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--wh-gutter) * -1);padding:0 var(--wh-gutter) 6px;scroll-padding:0 var(--wh-gutter);scrollbar-width:none}
  .wh-waves-cards::-webkit-scrollbar{display:none}
  .wh-spot{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.wh-spot-media img,.wh-spot-desc{transition:none}}