/**
 * Orthodox Curacao Slider - frontend stijlen.
 * Geen externe dependencies. Alles prefix 'ock-' om conflicten te voorkomen.
 */

.ock-hero {
	--ock-height: 55vh;
	--ock-min-height: 420px;
	--ock-overlay: 0.45;
	--ocs-radius: 40px;
	--ock-max-width: 1200px;
	--ock-transition: 800ms;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	background: #ccc;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

/* Strak onder de header: het blok zoveel pixels omhoog trekken
   (instelling "Slider omhoog trekken"). Werkt ook op de zoekbalk. */
.ock-flush {
	margin-top: calc(-1 * var(--ock-header-offset, 0px));
}

.ock-search.ock-width-custom {
	max-width: var(--ock-container-max, 1400px);
	margin-left: auto;
	margin-right: auto;
}

/* Compacte contact-, zoek- en menubalk direct boven de homepage-slider. */
.ocsai-slider-toolbar {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	box-sizing: border-box;
	background: #102033;
	color: #f7f2e8;
	border-bottom: 1px solid rgba(217,169,40,.38);
	font-family: var(--ock-font, "Open Sans", Arial, sans-serif);
}
.ocsai-slider-toolbar__utility,
.ocsai-slider-toolbar__navigation {
	width: min(100% - 32px, 1400px);
	margin-inline: auto;
	box-sizing: border-box;
}
.ocsai-slider-toolbar__utility {
	min-height: 46px;
	display: grid;
	grid-template-columns: minmax(260px,1fr) minmax(280px,600px);
	align-items: center;
	gap: 24px;
}
.ocsai-slider-toolbar__contact { display:flex; align-items:center; gap:18px; min-width:0; }
.ocsai-slider-toolbar a { color:#f7f2e8; text-decoration:none; }
.ocsai-slider-toolbar a:hover,
.ocsai-slider-toolbar a:focus-visible { color:#e4bc40; }
.ocsai-slider-toolbar a:focus-visible,
.ocsai-slider-toolbar button:focus-visible,
.ocsai-slider-toolbar input:focus-visible { outline:2px solid #e4bc40; outline-offset:2px; }
.ocsai-slider-toolbar__search { display:grid; grid-template-columns:1fr 42px; align-items:center; }
.ocsai-slider-toolbar__search input {
	width:100%; height:34px; box-sizing:border-box; margin:0; padding:7px 12px;
	border:1px solid rgba(217,169,40,.38); border-right:0; border-radius:6px 0 0 6px;
	background:rgba(255,255,255,.035); color:#fff;
}
.ocsai-slider-toolbar__search input::placeholder { color:rgba(255,255,255,.68); }
.ocsai-slider-toolbar__search button {
	height:34px; margin:0; padding:0; border:1px solid rgba(217,169,40,.55); border-radius:0 6px 6px 0;
	background:#172c43; color:#e4bc40; cursor:pointer; font-size:1.15rem;
}
.ocsai-slider-toolbar__navigation { min-height:58px; display:flex; align-items:center; justify-content:center; }
.ocsai-slider-toolbar__menu { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin:0!important; padding:0!important; list-style:none!important; }
.ocsai-slider-toolbar__menu > li { margin:0!important; padding:0!important; list-style:none!important; }
.ocsai-slider-toolbar__menu > li > a { display:block; padding:18px clamp(13px,2vw,26px); font-family:var(--ock-heading-font,Georgia,serif); letter-spacing:.035em; }

@media (max-width: 720px) {
	.ocsai-slider-toolbar__utility { grid-template-columns:1fr; gap:10px; padding:12px 0; }
	.ocsai-slider-toolbar__contact { justify-content:space-between; gap:10px; font-size:.82rem; }
	.ocsai-slider-toolbar__navigation { min-height:48px; overflow-x:auto; justify-content:flex-start; scrollbar-width:thin; }
	.ocsai-slider-toolbar__menu { flex-wrap:nowrap; justify-content:flex-start; margin-inline:auto!important; }
	.ocsai-slider-toolbar__menu > li > a { white-space:nowrap; padding:14px 13px; font-size:.86rem; }
}

/* Volledige schermbreedte (full-bleed).
   slider.js zet per slider --ock-bleed (vensterbreedte zonder scrollbar) en
   --ock-pull (afstand tot de linkerrand van het venster). Daarmee klopt
   de uitloop ook als het thema of de page-builder de container ná page load
   opnieuw opmeet. Zonder JS valt hij terug op 100vw. */
.ock-hero.ock-width-full {
	width: var(--ock-bleed, 100vw) !important;
	max-width: none !important;
	margin-left: calc(-1 * var(--ock-pull, calc(50% - var(--ock-bleed, 100vw) / 2))) !important;
}

/* Vangnet: mocht de gemeten viewport-breedte toch zorgen voor horizontale
   scroll (rotatie, dynamische balken), dan schakelt slider.js deze class in. */
.ock-hero.ock-no-bleed.ock-width-full {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
}

/* Eigen maximale breedte, gecentreerd binnen de content-kolom. */
.ock-hero.ock-width-custom {
	width: 100%;
	max-width: var(--ock-container-max, 1400px);
}

.ock-hero.ock-rounded {
	border-radius: 0 0 var(--ocs-radius) var(--ocs-radius);
}

.ock-hero:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ock-viewport {
	position: relative;
	width: 100%;
	height: var(--ock-height);
	min-height: var(--ock-min-height);
	overflow: hidden;
	/* Mobiel: horizontaal vegen wisselt slide, verticaal scrollen blijft normaal. */
	touch-action: pan-y;
}

.ock-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------- Slide-schil ---------- */

.ock-slide {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.ock-hero.ock-effect-fade .ock-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	/* Pure crossfade: de slide lost op, er wordt niet in- of uitgezoomd. */
	transition:
		opacity var(--ock-transition) cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear var(--ock-transition);
	z-index: 1;
}

.ock-hero.ock-effect-fade .ock-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--ock-transition) cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
	z-index: 2;
}

/* Optionele zachte zoom (instelling "Zachte zoom bij overgang", standaard uit).
   v2.3.76: vrijwel geen schaalverandering meer; de kleine homepage-blokken
   blijven visueel stabiel tijdens de overgang. */
.ock-hero.ock-zoom.ock-effect-fade .ock-slide {
	transform: scale(1.005);
	transition:
		opacity var(--ock-transition) cubic-bezier(0.4, 0, 0.2, 1),
		transform calc(var(--ock-transition) * 1.5) cubic-bezier(0.16, 0.84, 0.44, 1),
		visibility 0s linear var(--ock-transition);
}
.ock-hero.ock-zoom.ock-effect-fade .ock-slide.is-active {
	transform: scale(1);
	transition:
		opacity var(--ock-transition) cubic-bezier(0.4, 0, 0.2, 1),
		transform calc(var(--ock-transition) * 1.5) cubic-bezier(0.16, 0.84, 0.44, 1),
		visibility 0s;
}

.ock-hero.ock-effect-slide .ock-track {
	display: flex;
	will-change: transform;
	transition: transform var(--ock-transition) cubic-bezier(0.65, 0, 0.35, 1);
}

.ock-hero.ock-effect-slide .ock-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}

/* ---------- Afbeelding ---------- */

.ock-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.ock-media img.ock-media-img {
	display:block;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	object-position:center;
	transform:none!important;
}
.ock-media img.ock-media-backdrop{
	position:absolute;inset:-4%;z-index:0;display:none;width:108%;height:108%;object-fit:cover;
	filter:blur(24px) brightness(.58) saturate(.88);opacity:.72;transform:scale(1.04);
}
.ock-hero.ock-image-cover .ock-media-img{object-fit:cover!important;}
.ock-hero.ock-image-cover .ock-media-backdrop{display:none!important;}
.ock-hero.ock-image-contain .ock-media-img{object-fit:contain!important;}
.ock-hero.ock-image-contain .ock-media-backdrop{display:block!important;}
.ock-media::after { z-index:2; }
.ock-mobile-day { display:none; }

.ock-hero.ock-zoom .ock-media img.ock-media-img {
	/* subtiele parallax-achtige zoom (alleen als de zoom aan staat) */
	transform: scale(1.02);
	transition: transform 8s linear;
}

.ock-hero.ock-zoom .ock-slide.is-active .ock-media img.ock-media-img {
	transform: scale(1.08);
}

.ock-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, calc(var(--ock-overlay) * 0.55)) 0%,
		rgba(0, 0, 0, var(--ock-overlay)) 100%
	);
	pointer-events: none;
}

/* ---------- Inhoud ---------- */

.ock-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: calc(32px + var(--ock-header-padding, 0px)) 24px 32px;
	box-sizing: border-box;
}

.ock-content {
	width: 100%;
	max-width: var(--ock-max-width);
	margin: 0 auto;
	font-family: var(--ock-font, inherit);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	/* Tekst glijdt zachtjes mee bij het wisselen van slide. */
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity calc(var(--ock-transition) * 0.8) cubic-bezier(0.4, 0, 0.2, 1) 120ms,
		transform calc(var(--ock-transition) * 0.9) cubic-bezier(0.16, 0.84, 0.44, 1) 120ms;
}

.ock-slide.is-active .ock-content {
	opacity: 1;
	transform: translateY(0);
}

.ock-hero.ock-left .ock-content {
	margin: 0 auto 0 0;
	text-align: left;
}

.ock-hero.ock-center .ock-content {
	text-align: center;
}

/* Standaard: kop links (gelijk met het eerste blok), knop rechts
   (gelijk met het laatste blok). */
.ock-hero.ock-split .ock-content {
	margin: 0 auto;
	text-align: left;
}

.ock-heading {
	margin: 0 0 10px;
	font-family: var(--ock-heading-font, inherit);
	font-size: var(--ock-heading-size, clamp(2rem, 4.2vw, 56px));
	line-height: 1.12;
	font-weight: var(--ock-heading-weight, 400);
	letter-spacing: 0;
	color: var(--ock-heading-color, #f7f7f5);
	text-transform: var(--ock-heading-transform, none);
	text-wrap: balance;
}

.ock-subheading {
	margin: 0 0 24px;
	font-family: var(--ock-font, inherit);
	font-size: clamp(0.72rem, 0.9vw, 0.86rem);
	font-weight: 300;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- Vier tekstblokken ---------- */

.ock-blocks {
	display: grid;
	gap: 22px;
	margin: 0 0 28px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ock-blocks-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ock-blocks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.ock-blocks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ock-blocks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ock-hero.ock-center .ock-blocks-1,
.ock-hero.ock-center .ock-blocks-2 {
	margin-left: auto;
	margin-right: auto;
}

/* Bij 1 of 2 gevulde blokken is de rij smaller; de knop krijgt dezelfde
   breedte zodat hij bij 'split' netjes onder het laatste blok eindigt. */
.ock-cta-1 { max-width: 520px; }
.ock-cta-2 { max-width: 760px; }

.ock-hero.ock-center .ock-cta-1,
.ock-hero.ock-center .ock-cta-2 {
	margin-left: auto;
	margin-right: auto;
}

.ock-block {
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 10px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	text-align: left;
}

.ock-block-title {
	margin: 0 0 6px;
	font-family: var(--ock-block-title-font, inherit);
	font-size: var(--ock-block-title-size, 1.12rem);
	line-height: 1.25;
	font-weight: var(--ock-block-title-weight, 600);
	letter-spacing: 0.01em;
	color: var(--ock-block-title-color, #ffc107);
	text-transform: var(--ock-block-title-transform, none);
	text-shadow: none;
}

.ock-block-text {
	font-family: var(--ock-block-text-font, var(--ock-font, inherit));
	font-size: var(--ock-block-text-size, 0.92rem);
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.005em;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: none;
	max-width: 46ch;
}

.ock-block-text p {
	margin: 0 0 0.5em;
}

.ock-block-text p:last-child {
	margin-bottom: 0;
}

/* ---------- Knop ---------- */

.ock-cta {
	margin: 0;
}

.ock-hero.ock-left .ock-cta {
	text-align: left;
}

.ock-hero.ock-center .ock-cta {
	text-align: center;
}

.ock-hero.ock-split .ock-cta {
	text-align: right;
}

.ock-button {
	display: inline-block;
	padding: 13px 28px;
	border: 1px solid var(--ock-button-border, rgba(255, 255, 255, 0.25));
	border-radius: var(--ock-button-radius, 8px);
	background: var(--ock-button-bg, #212529);
	color: var(--ock-button-color, #fff);
	font-family: var(--ock-font, inherit);
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

/** De knop is een link; themes geven links in de content vaak een underline
    (bijv. .entry-content a). Die halen we hier weg - ook bij hover/focus. */
.ock-hero .ock-button,
.entry-content .ock-button,
a.ock-button,
.ock-button:link,
.ock-button:visited,
.ock-button:hover,
.ock-button:focus,
.ock-button:active {
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.ock-hero .ock-button { text-transform:uppercase; }

.ock-button:hover,
.ock-button:focus {
	background: var(--ock-button-hover-bg, #000);
	color: var(--ock-button-hover-color, var(--ock-button-color, #fff));
	transform: translateY(-1px);
	text-decoration: none;
	/* zachte witte gloed, zoals op athos.guide */
	border-color: rgba(255, 255, 255, 0.75);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.35),
		0 0 18px 2px rgba(255, 255, 255, 0.28),
		0 8px 22px rgba(0, 0, 0, 0.28);
}

.ock-button:active {
	transform: translateY(0);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ock-button:focus-visible {
	outline: 2px solid #ffc107;
	outline-offset: 3px;
}

/* Knop met tekst maar nog geen doel (geen pagina en geen URL gekozen):
   wel zichtbaar, maar niet klikbaar. */
.ock-button-nolink {
	cursor: default;
	opacity: 0.9;
	border-style: dashed;
}

.ock-button-nolink:hover {
	background: #212529;
	transform: none;
}

/* ---------- Navigatie ---------- */

.ock-arrow {
	position: absolute;
	touch-action: manipulation;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease;
}

.ock-hero:hover .ock-arrow,
.ock-hero:focus-within .ock-arrow,
.ock-hero.ock-touched .ock-arrow {
	opacity: 1;
}

.ock-arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.ock-arrow svg {
	width: 24px;
	height: 24px;
}

.ock-prev { left: 16px; }
.ock-next { right: 16px; }

/* Op touch-apparaten zijn de pijlen altijd zichtbaar en groter (klikbaar). */
@media (hover: none), (pointer: coarse) {
	.ock-arrow {
		opacity: 1;
		width: 44px;
		height: 44px;
	}
	.ock-prev { left: 8px; }
	.ock-next { right: 8px; }
	.ock-cta,
	.ock-hero.ock-split .ock-cta,
	.ock-hero.ock-left .ock-cta,
	.ock-hero.ock-center .ock-cta {
		text-align: center;
	}
	.ock-cta-1,
	.ock-cta-2 {
		max-width: none;
	}
	.ock-button {
		display: block;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
		text-align: center;
	}
}

.ock-dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 5;
	display: flex;
	gap: 9px;
	transform: translateX(-50%);
}

.ock-dot {
	position: relative;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

/* Onzichtbare, grotere klikzone (minimaal ~34px) voor vingers. */
.ock-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
}

.ock-dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

.ock-dot.is-active {
	background: #fff;
	transform: scale(1.15);
}

/* Streepjes in plaats van bolletjes. */
.ock-dots-line {
	gap: 10px;
}

.ock-dots-line .ock-dot {
	width: 34px;
	height: 4px;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.4);
}

.ock-dots-line .ock-dot:hover {
	background: rgba(255, 255, 255, 0.65);
}

.ock-dots-line .ock-dot.is-active {
	background: #fff;
	transform: scaleX(1.1);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.ock-blocks-4,
	.ock-blocks-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ock-hero {
		--ock-height: auto;
	}
	.ock-viewport {
		height: auto;
		min-height: var(--ock-min-height);
	}
	.ock-hero.ock-effect-fade .ock-slide {
		position: relative;
		display: none;
		height: auto;
		min-height: var(--ock-min-height);
	}
	.ock-hero.ock-effect-fade .ock-slide.is-active {
		display: block;
	}
	.ock-hero.ock-effect-slide .ock-slide {
		min-height: var(--ock-min-height);
	}
	.ock-inner {
		padding: 44px 18px 78px;
	}
	.ock-heading {
		font-size: clamp(1.65rem, 7.2vw, 2.35rem);
		letter-spacing: 0;
	}
	.ock-subheading {
		margin-bottom: 16px;
		font-size: 0.78rem;
		letter-spacing: 1.4px;
	}
	.ock-blocks,
	.ock-blocks-2,
	.ock-blocks-3,
	.ock-blocks-4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 20px;
	}
	.ock-block-title { font-size: 1rem; }
	.ock-block-text { font-size: 0.9rem; }

	/* Pijlen onderin, naast de streepjes: zo zitten ze nooit op de tekst. */
	.ock-arrow {
		top: auto;
		bottom: 12px;
		transform: none;
		width: 42px;
		height: 42px;
		opacity: 1;
		background: rgba(0, 0, 0, 0.5);
	}
	.ock-prev { left: 10px; }
	.ock-next { right: 10px; }
	.ock-dots { bottom: 22px; }
	.ock-hero.ock-effect-slide .ock-viewport { touch-action: pan-y pinch-zoom; }
	.ock-cta,
	.ock-hero.ock-split .ock-cta,
	.ock-hero.ock-left .ock-cta,
	.ock-hero.ock-center .ock-cta {
		text-align: center;
	}
	.ock-cta-1,
	.ock-cta-2 {
		max-width: none;
	}
	.ock-button {
		display: block;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ock-hero {
		--ock-min-height: 360px;
	}
	.ock-inner {
		padding: 36px 16px 76px;
	}
	.ock-blocks {
		gap: 10px;
	}
	.ock-arrow {
		width: 40px;
		height: 40px;
	}
}

/* ---------- Toegankelijkheid ---------- */

@media (prefers-reduced-motion: reduce) {
	.ock-hero * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
	.ock-media img.ock-media-img {
		transform: none !important;
		transition: none !important;
	}
}

.ock-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* v2.0.2 hover */
.ock-block{transition:all .3s ease}
.ock-block:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* v2.3.8: Athos-inspired photographic hero with open editorial columns. */
.ock-athos .ock-inner { padding: 64px max(7vw, 24px) 72px; }
.ock-athos .ock-content { max-width: min(var(--ock-max-width), 1080px); }
.ock-athos .ock-heading {
  font-family: var(--ock-heading-font, Georgia, "Times New Roman", serif);
  font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 400;
  margin-bottom: 36px; line-height: 1.15;
}
.ock-athos .ock-media::after {
  background: linear-gradient(90deg, rgba(0,0,0,var(--ock-overlay)), rgba(0,0,0,calc(var(--ock-overlay) * .7)));
}
.ock-athos .ock-blocks { gap: 32px; margin-bottom: 28px; max-width: none; }
.ock-athos .ock-block {
  padding: 8px 10px; border: 0; border-radius: 0; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ock-athos .ock-block:hover {
  background: rgba(255,255,255,.08); transform: none; box-shadow: none;
}
.ock-athos .ock-block-title {
  font-family: var(--ock-heading-font, Georgia, "Times New Roman", serif);
  font-size: 1rem; font-weight: 400; text-transform: uppercase;
  color: var(--ock-block-title-color, #e0bd48); line-height: 1.35;
}
.ock-athos .ock-block-text { font-size: .95rem; line-height: 1.45; color: var(--ock-block-text-color, #fff); }
.ock-athos .ock-cta { max-width: none; }
.ock-athos .ock-button { padding: 11px 18px; letter-spacing: 0; box-sizing: border-box; }
.ock-athos .ock-arrow { opacity: .75; background: transparent; border-radius: 0; }
.ock-athos .ock-arrow:hover, .ock-athos .ock-arrow:focus-visible { opacity: 1; background: rgba(0,0,0,.2); }
.ock-athos .ock-prev { left: 3%; }
.ock-athos .ock-next { right: 3%; }
/* Grid sizing keeps the tallest translated slide fully visible, even at zoom. */
.ock-athos .ock-viewport { height: auto; min-height: max(var(--ock-height), var(--ock-min-height)); }
.ock-athos.ock-effect-fade .ock-track { display: grid; min-height: inherit; }
.ock-athos.ock-effect-fade .ock-slide { position: relative; inset: auto; grid-area: 1 / 1; display: block; height: auto; min-width: 0; }
.ock-athos .ock-block, .ock-athos .ock-heading, .ock-athos .ock-button { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .ock-athos .ock-inner { padding: 40px 24px 78px; }
  .ock-athos .ock-heading { margin-bottom: 22px; font-size: clamp(2rem, 8vw, 2.7rem); }
  .ock-athos .ock-blocks { gap: 12px; }
  .ock-athos .ock-block { padding: 4px 0; }
  .ock-athos .ock-button { width: auto; display: inline-block; max-width: 100%; }
  .ock-athos .ock-viewport { min-height: var(--ock-min-height); }
}

/* v2.3.9: compact gold CTA at the right, including touch/mobile layouts. */
.ock-hero.ock-athos .ock-cta {
  display: flex; justify-content: flex-end; text-align: right; max-width: none;
}
.ock-hero.ock-athos .ock-cta .ock-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: 100%; margin: 0; padding: 10px 18px;
  background: #d9a928; color: #201a09; border: 0; border-radius: 16px;
  font-size: .92rem; line-height: 1.3;
}
.ock-hero.ock-athos .ock-cta .ock-button:hover,
.ock-hero.ock-athos .ock-cta .ock-button:focus-visible {
  background: #edc55a; color: #201a09; box-shadow: none;
}
.ock-hero.ock-athos .ock-arrow,
.ock-hero.ock-athos .ock-arrow:hover,
.ock-hero.ock-athos .ock-arrow:focus,
.ock-hero.ock-athos .ock-arrow:active {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0; color: #fff;
}
.ock-hero.ock-athos .ock-arrow::before,
.ock-hero.ock-athos .ock-arrow::after { content: none !important; }
.ock-hero.ock-athos .ock-arrow:focus-visible { outline: 2px solid #d9a928; outline-offset: 2px; }
/* Text columns are informational: hover feedback only, never a latched selection. */
.ock-hero.ock-athos .ock-block { cursor: default; }
/* Informational slider columns do not react visually to the pointer. */
.ock-hero.ock-athos .ock-block,
.ock-hero.ock-athos .ock-block:hover,
.ock-hero.ock-athos .ock-block:focus {
  background: transparent !important; box-shadow: none !important;
  transform: none !important; filter: none !important; opacity: 1 !important;
}
.ock-hero.ock-athos .ock-block:hover .ock-block-title { color: var(--ock-block-title-color, #e0bd48) !important; }
.ock-hero.ock-athos .ock-block:hover .ock-block-text { color: var(--ock-block-text-color, #fff) !important; }

/* Desktop must fill the complete wide slider. No blurred duplicate or side
   bands: the sharp image uses cover and retains its natural proportions. */
@media (min-width: 768px) {
  .ock-hero.ock-athos .ock-viewport { height:var(--ock-height); min-height:var(--ock-min-height); }
  .ock-hero.ock-athos.ock-effect-fade .ock-track { height:100%; min-height:0; }
  .ock-hero.ock-athos.ock-effect-fade .ock-slide { height:100%; min-height:0; }
  .ock-hero.ock-athos .ock-inner { height:100%; box-sizing:border-box; }
  .ock-hero.ock-athos .ock-media { background:#132238; }
  .ock-hero.ock-athos .ock-media-img { width:100%; height:100%; object-fit:cover !important; transform:none !important; }
}
/* Mobile echoes the desktop typography and information, while using its own
   iconostasis-inspired stacked composition underneath the complete image. */
@media (max-width: 767px) {
  .ock-hero.ock-athos { --ock-min-height:0; background:#101b28; border-radius:0 0 30px 30px; }
  .ock-hero.ock-athos .ock-viewport { height:auto; min-height:0; }
  .ock-hero.ock-athos.ock-effect-fade .ock-track { height:auto; min-height:0; display:block; }
  .ock-hero.ock-athos.ock-effect-fade .ock-slide { position:relative; inset:auto; display:none; height:auto; min-height:0; }
  .ock-hero.ock-athos.ock-effect-fade .ock-slide.is-active { display:block; }
  .ock-hero.ock-athos.ock-effect-slide .ock-slide { height:auto; }
  .ock-hero.ock-athos .ock-media { position:relative; inset:auto; height:auto; background:#132238; }
  .ock-hero.ock-athos .ock-media::after { display:none; }
  .ock-hero.ock-athos .ock-media-img { display:block; position:relative; width:100%; height:auto; max-height:none; object-fit:contain !important; object-position:center !important; transform:none !important; }
  .ock-hero.ock-athos .ock-inner { height:auto; min-height:0; box-sizing:border-box; padding:28px 16px 70px; background:linear-gradient(180deg,#132238 0%,#0d1926 100%); display:flex; flex-direction:column; justify-content:center; }
  .ock-hero.ock-athos .ock-content { position:relative; width:100%; max-width:680px; margin:auto; padding-top:24px; border-top:1px solid rgba(217,169,40,.8); }
  .ock-hero.ock-athos .ock-content::before { content:'☦'; position:absolute; top:-18px; left:50%; transform:translateX(-50%); padding:0 12px; background:#132238; color:#d9a928; font-size:1.5rem; text-shadow:none; }
  .ock-hero.ock-athos .ock-intro { display:block; padding:18px 8px 22px; margin-bottom:12px; text-align:center; }
  .ock-hero.ock-athos .ock-mobile-day { display:block; padding:16px 12px; margin-bottom:12px; background:rgba(255,255,255,.035); border:1px solid rgba(217,169,40,.72); border-radius:16px; text-align:center; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .ock-mobile-day-top { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; align-items:start; font-family:Georgia,"Times New Roman",serif; font-size:.67rem; text-transform:uppercase; }
  .ock-mobile-day-top span { display:flex; flex-direction:column; gap:4px; }
  .ock-mobile-day-top strong { font-size:.82rem; color:#fff; }
  .ock-mobile-day-top time { font-size:.78rem; }
  .ock-mobile-day h2 { margin:14px 0 6px; color:#e4bc40; font:400 clamp(1.25rem,5.7vw,1.65rem)/1.2 Georgia,"Times New Roman",serif; text-transform:none; }
  .ock-mobile-day p { margin:3px 0; color:#fff; font-size:1rem; }
  .ock-mobile-day .ock-mobile-food { font-size:.88rem; }
  .ock-hero.ock-athos .ock-heading { color:#e4bc40; letter-spacing:.01em; }
  .ock-hero.ock-athos .ock-subheading { margin:0; color:#fff; }
  .ock-hero.ock-athos .ock-blocks { display:grid; grid-template-columns:1fr; gap:10px; }
  .ock-hero.ock-athos .ock-block:last-child:nth-child(odd) { grid-column:auto; }
  .ock-hero.ock-athos .ock-block, .ock-hero.ock-athos .ock-block:hover, .ock-hero.ock-athos .ock-block:active { min-height:0; display:block; background:rgba(255,255,255,.035) !important; border:1px solid rgba(217,169,40,.48); border-left:3px solid #d9a928; border-radius:4px 14px 14px 4px; padding:16px 17px; text-align:left; box-shadow:none !important; transform:none !important; filter:none !important; opacity:1 !important; pointer-events:auto; -webkit-tap-highlight-color:transparent; user-select:text; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .ock-hero.ock-athos .ock-block-title { color:#e4bc40; font-size:1rem; text-transform:none; }
  .ock-hero.ock-athos .ock-block-text { display:block; color:#fff; font-size:.9rem; line-height:1.5; }
  .ock-hero.ock-athos .ock-cta { margin-top:12px; }
  .ock-hero.ock-athos .ock-cta .ock-button { width:100%; padding:16px; border-radius:18px; }
  .ock-hero.ock-athos .ock-arrow { top:auto; bottom:12px; transform:none; }
  .ock-hero.ock-athos .ock-heading { font-size:clamp(1.75rem, 7.2vw, 2.25rem); margin-bottom:12px; }
  .ock-hero.ock-athos .ock-subheading { font-size:.8rem; line-height:1.45; margin-bottom:12px; }
  .ock-hero.ock-athos .ock-blocks { gap:8px; margin-bottom:14px; }
  .ock-hero.ock-athos .ock-block-title { font-size:.9rem; }
  .ock-hero.ock-athos .ock-block-text { font-size:.84rem; line-height:1.35; }
  .ock-hero.ock-athos + * { position:relative; z-index:1; }
}

/* 2.3.90 — typography aligned with the Athos-style reference. */
.ock-hero .ock-heading{font-family:Georgia,"Times New Roman","DejaVu Serif",serif!important;font-weight:400!important;letter-spacing:-.018em!important}
.ock-hero .ock-subheading,.ock-hero .ock-block-title,.ock-hero .ock-block-text,.ock-hero .ock-button{font-family:Arial,"Helvetica Neue","DejaVu Sans",sans-serif!important}

/* v2.5.1: the hero never owns site navigation. */
.ocsai-slider-toolbar{display:none!important}

/* 2.7.15 — mobile slider mirrors the desktop Athos composition: image + text in one compact scene. */
@media(max-width:767px){
  .ock-hero.ock-athos{
    --ock-min-height:0!important;
    min-height:0!important;
    height:auto!important;
    border-radius:0 0 22px 22px!important;
    background:#0d1c2c!important;
    overflow:hidden!important;
  }
  .ock-hero.ock-athos .ock-viewport{
    position:relative!important;
    height:clamp(540px,142vw,680px)!important;
    min-height:540px!important;
    overflow:hidden!important;
  }
  .ock-hero.ock-athos.ock-effect-fade .ock-track,
  .ock-hero.ock-athos.ock-effect-slide .ock-track{
    height:100%!important;
    min-height:0!important;
  }
  .ock-hero.ock-athos.ock-effect-fade .ock-slide,
  .ock-hero.ock-athos.ock-effect-slide .ock-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .ock-hero.ock-athos.ock-effect-fade .ock-slide{display:block!important;opacity:0!important;visibility:hidden!important}
  .ock-hero.ock-athos.ock-effect-fade .ock-slide.is-active{opacity:1!important;visibility:visible!important}
  .ock-hero.ock-athos .ock-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background:#0d1c2c!important;
  }
  .ock-hero.ock-athos .ock-media-img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .ock-hero.ock-athos .ock-media::after{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    background:linear-gradient(180deg,rgba(4,12,22,.28) 0%,rgba(4,12,22,.46) 42%,rgba(4,12,22,.74) 100%)!important;
  }
  .ock-hero.ock-athos .ock-inner{
    position:relative!important;
    z-index:3!important;
    display:flex!important;
    align-items:center!important;
    height:100%!important;
    min-height:0!important;
    padding:34px 18px 68px!important;
    background:transparent!important;
  }
  .ock-hero.ock-athos .ock-content{
    position:relative!important;
    width:100%!important;
    max-width:620px!important;
    margin:auto!important;
    padding:0!important;
    border:0!important;
    text-align:left!important;
    text-shadow:0 2px 14px rgba(0,0,0,.55)!important;
  }
  .ock-hero.ock-athos .ock-content::before{display:none!important;content:none!important}
  .ock-hero.ock-athos .ock-mobile-day{display:none!important}
  .ock-hero.ock-athos .ock-intro{display:block!important;margin:0 0 12px!important;padding:0!important;text-align:left!important}
  .ock-hero.ock-athos .ock-heading{
    margin:0 0 10px!important;
    color:#fff!important;
    font-size:clamp(1.85rem,8vw,2.55rem)!important;
    line-height:1.08!important;
  }
  .ock-hero.ock-athos .ock-subheading{
    margin:0 0 18px!important;
    color:rgba(255,255,255,.92)!important;
    font-size:.72rem!important;
    line-height:1.45!important;
    letter-spacing:.10em!important;
  }
  .ock-hero.ock-athos .ock-blocks,
  .ock-hero.ock-athos .ock-blocks-1,
  .ock-hero.ock-athos .ock-blocks-2,
  .ock-hero.ock-athos .ock-blocks-3,
  .ock-hero.ock-athos .ock-blocks-4{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    max-width:none!important;
    margin:0 0 16px!important;
  }
  .ock-hero.ock-athos .ock-block,
  .ock-hero.ock-athos .ock-block:hover,
  .ock-hero.ock-athos .ock-block:focus,
  .ock-hero.ock-athos .ock-block:active{
    min-height:0!important;
    margin:0!important;
    padding:0 0 8px!important;
    border:0!important;
    border-bottom:1px solid rgba(217,169,40,.34)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:left!important;
  }
  .ock-hero.ock-athos .ock-block-title{
    margin-bottom:3px!important;
    color:#e4bc40!important;
    font-size:.86rem!important;
    line-height:1.25!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
  }
  .ock-hero.ock-athos .ock-block-text{
    display:block!important;
    color:#fff!important;
    font-size:.82rem!important;
    line-height:1.38!important;
  }
  .ock-hero.ock-athos .ock-cta,
  .ock-hero.ock-athos.ock-split .ock-cta,
  .ock-hero.ock-athos.ock-left .ock-cta,
  .ock-hero.ock-athos.ock-center .ock-cta{
    display:flex!important;
    justify-content:flex-end!important;
    margin:12px 0 0!important;
    text-align:right!important;
  }
  .ock-hero.ock-athos .ock-cta .ock-button{
    width:auto!important;
    min-height:40px!important;
    padding:10px 15px!important;
    border-radius:999px!important;
    font-size:.76rem!important;
  }
  .ock-hero.ock-athos .ock-arrow{bottom:12px!important;width:38px!important;height:38px!important;opacity:.86!important}
  .ock-hero.ock-athos .ock-dots{bottom:24px!important}
}
@media(max-width:420px){
  .ock-hero.ock-athos .ock-viewport{height:600px!important;min-height:600px!important}
  .ock-hero.ock-athos .ock-inner{padding:30px 14px 62px!important}
  .ock-hero.ock-athos .ock-heading{font-size:clamp(1.65rem,8.8vw,2.15rem)!important}
  .ock-hero.ock-athos .ock-block-text{font-size:.79rem!important}
}


/* 2.7.87 — desktop slider columns: reserve two heading lines in every info
   block so the white body copy starts on exactly the same horizontal line.
   A longer translated heading can still grow naturally beyond two lines. */
@media (min-width:768px){
  .ock-hero.ock-athos .ock-block-title{
    display:block!important;
    min-height:2.70em!important;
    margin-bottom:6px!important;
  }
}
@media (max-width:767px){
  .ock-hero.ock-athos .ock-block-title{
    min-height:0!important;
  }
}