/* ==========================================================================
   Homepage – templates/page-home.php (Figma Desktop frame 1:7)
   Sections: hero, availability request, villas carousel, Παροχές, Τοποθεσία,
   Εμπειρίες (accordion), CTA, gallery, blog, Instagram.
   ========================================================================== */


/* Hero (19:218): dark room photo full-bleed, text left, arch photo right with
   three wood-texture strips behind it (Figma frames 19:176-178). */
.be_hero {
	position: relative;
	display: flex;
	min-height: min(853px, calc(100svh - var(--be-header-h)));
	background: var(--be-color-dark);
	color: var(--be-color-white);
	overflow: hidden;
	isolation: isolate;
}

.be_hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.45);
}

.be_hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--be-gap);
	width: 100%;
	padding: 80px var(--be-pad-x);
}

.be_hero-text {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 800px;
}

.be_hero-title {
	font: var(--be-h1);
	text-wrap: balance;
}

.be_hero-subtitle {
	font: var(--be-lead);
	max-width: 620px;
}

.be_hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	margin-top: 8px;
}

.be_hero-call {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: var(--be-body);
}

.be_hero-call .be_icon--phone {
	width: 14px;
	height: 22px;
	color: var(--be-color-sand);
}

.be_hero-call strong {
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--be-color-sand);
}

.be_hero-media {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

.be_hero-strips {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: -1;
	display: flex;
	flex-direction: column;
	gap: 32px;
	transform: translateY(-50%);
}

.be_hero-strips span {
	display: block;
	height: 88px;
	background: url("../../img/texture-wood.webp") center / cover no-repeat;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.be_hero-strips span:nth-child(2) {
	background-position: 30% 60%;
}

.be_hero-strips span:nth-child(3) {
	background-position: 70% 30%;
}

.be_hero-arch {
	width: 480px;
	height: 560px;
	object-fit: cover;
	border-radius: 300px 300px 0 0;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1280px) {
	.be_hero-arch {
		width: 400px;
		height: 480px;
	}
}

@media (max-width: 1024px) {
	.be_hero-inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 56px var(--be-pad-x);
	}

	.be_hero-media {
		padding: 24px 0 0;
	}

	.be_hero-arch {
		width: 380px;
		height: 440px;
	}
}

@media (max-width: 700px) {
	.be_hero {
		min-height: 0;
	}

	.be_hero-inner {
		padding: 40px var(--be-pad-x) 48px;
		gap: 32px;
	}

	.be_hero-text {
		gap: 20px;
	}

	.be_hero-actions {
		gap: 16px 24px;
	}

	.be_hero-strips {
		gap: 20px;
	}

	.be_hero-strips span {
		height: 56px;
	}

	.be_hero-arch {
		width: 280px;
		height: 340px;
		border-radius: 200px 200px 0 0;
	}
}


/* Βίλες carousel (19:169): #151515 section, inner box #171a18 with the stone
   texture at 10%, 60px title, two 840px cards per view, dots, «Όλες οι Βίλες». */
.be_villas {
	padding: var(--be-pad-y) 50px;
	background: var(--be-color-dark-2);
	color: var(--be-color-white);
}

.be_villas-box {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 50px;
	background:
		linear-gradient(rgba(23, 26, 24, 0.9), rgba(23, 26, 24, 0.9)),
		url("../../img/texture-stone.jpg") center / cover no-repeat;
	overflow: hidden;
}

.be_villas-title {
	max-width: 930px;
	margin-bottom: 25px;
}

.be_villas-track {
	gap: 40px;
}

.be_villa {
	position: relative;
	flex: 0 0 calc((100% - 40px) / 2);
	padding: 50px;
	overflow: hidden;
	isolation: isolate;
}

.be_villa-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_villa-panel {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 10px;
	padding: 24px;
	background: rgba(215, 204, 184, 0.5);
	backdrop-filter: blur(2px);
	transition: background-color 0.6s ease, backdrop-filter 0.6s ease;
}

/* Hover (Figma Villa "Variant2"): the sand overlay fades away so the b/w photo
   shows through, the background darkens a touch and the two photos zoom in
   (Figma: strip 106%, side photo 109%). */
.be_villa-bg {
	transition: filter 0.6s ease, transform 0.8s ease;
}

.be_villa:hover .be_villa-panel {
	background: rgba(215, 204, 184, 0);
	backdrop-filter: none;
}

.be_villa:hover .be_villa-bg {
	filter: grayscale(1) brightness(0.8);
	transform: scale(1.03);
}

.be_villa-thumbs img,
.be_villa-side img {
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.be_villa-thumbs,
.be_villa-side {
	overflow: hidden;
}

.be_villa:hover .be_villa-thumbs img {
	transform: scale(1.065);
}

.be_villa:hover .be_villa-side img {
	transform: scale(1.09);
}

.be_villa-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	min-width: 0;
}

.be_villa-name {
	font: var(--be-h2);
	color: var(--be-color-white);
}

.be_villa-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 300 24px/32px var(--be-font-primary);
}

.be_villa-btn {
	margin: 4px 0;
}

.be_villa-thumbs {
	display: grid;
	grid-template-columns: repeat(2, 190px);
	gap: 5px;
	max-width: 100%;
}

.be_villa-thumbs img {
	width: 100%;
	height: 157px;
	object-fit: cover;
}

.be_villa-side {
	flex: 0 0 297px;
	width: 297px;
}

.be_villa-side img {
	width: 100%;
	height: 386px;
	object-fit: cover;
}

.be_villas-btn {
	align-self: flex-start;
	margin-left: 50px;
}

@media (max-width: 1440px) {
	.be_villa-thumbs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.be_villa-thumbs img {
		height: 130px;
	}

	.be_villa-side {
		flex-basis: 240px;
		width: 240px;
	}

	.be_villa-side img {
		height: 320px;
	}
}

@media (max-width: 1280px) {
	.be_villas {
		padding: var(--be-pad-y) var(--be-pad-x);
	}

	.be_villa {
		flex-basis: 100%;
		padding: 40px;
	}

	.be_villa-side {
		flex-basis: 297px;
		width: 297px;
	}

	.be_villa-side img {
		height: 386px;
	}

	.be_villa-thumbs {
		grid-template-columns: repeat(2, 190px);
	}

	.be_villa-thumbs img {
		height: 157px;
	}
}

@media (max-width: 1024px) {
	.be_villas-box {
		padding: 32px;
	}

	.be_villas-btn {
		margin-left: 0;
	}
}

@media (max-width: 700px) {
	.be_villas-box {
		padding: 20px;
		gap: 24px;
	}

	.be_villas-track {
		gap: 20px;
	}

	.be_villas-title {
		margin-bottom: 0;
	}

	.be_villa {
		padding: 16px;
	}

	.be_villa-panel {
		flex-direction: column;
		align-items: stretch;
		padding: 16px;
	}

	.be_villa-body {
		gap: 16px;
	}

	.be_villa-meta {
		font-size: 18px;
		line-height: 26px;
	}

	.be_villa-thumbs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.be_villa-thumbs img {
		height: 100px;
	}

	.be_villa-side {
		flex-basis: auto;
		width: 100%;
	}

	.be_villa-side img {
		height: 220px;
	}
}


/* Παροχές (32:1545, component 19:1165): light section, dark #404040 box with the
   kitchen photo in a light frame; the photo (Variant2: 798x807) pokes 100px out
   of the box, six outlined circles (218px). */
.be_paroxes {
	background: var(--be-color-light);
	color: var(--be-color-dark);
}

.be_paroxes-title {
	margin-bottom: 45px;
}

.be_paroxes-box {
	display: grid;
	grid-template-columns: minmax(0, 848fr) minmax(0, 732fr);
	align-items: center;
	gap: 40px;
	margin-bottom: 50px;
	padding: 50px 50px 0;
	background: var(--be-color-grey);
	color: var(--be-color-white);
}

.be_paroxes-media {
	position: relative;
	height: 757px;
	background: var(--be-color-light);
}

.be_paroxes-media img {
	position: absolute;
	left: 50px;
	top: 50px;
	width: calc(100% - 50px);
	height: calc(100% + 50px);
	object-fit: cover;
}

@media (max-width: 1600px) {
	.be_paroxes-media {
		height: auto;
		aspect-ratio: 848 / 757;
	}
}

.be_paroxes-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding-bottom: 50px;
}

.be_paroxes-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	width: 100%;
}

.be_paroxes-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 24px;
	border: 1px solid var(--be-color-sand);
	border-radius: 50%;
	font: var(--be-body);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	cursor: default;
	transition: border-color 0.4s ease, transform 0.4s ease;
}

/* Hover (Figma Παροχές "Variant2"): the circle fills terracotta. The fill grows
   from the centre so it reads as a ripple. */
.be_paroxes-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--be-color-terracotta);
	transform: scale(0);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.be_paroxes-item:hover {
	border-color: var(--be-color-terracotta);
	transform: translateY(-4px);
}

.be_paroxes-item:hover::before {
	transform: scale(1);
}

@media (max-width: 1280px) {
	.be_paroxes-box {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 0;
		padding: 40px 40px 0;
	}

	.be_paroxes-media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.be_paroxes-media img {
		left: 40px;
		top: 40px;
		width: calc(100% - 40px);
		height: calc(100% - 40px);
	}

	.be_paroxes-content {
		padding-bottom: 40px;
	}
}

@media (max-width: 700px) {
	.be_paroxes-title {
		margin-bottom: 24px;
	}

	.be_paroxes-box {
		padding: 20px 20px 0;
		gap: 24px;
	}

	.be_paroxes-media img {
		left: 20px;
		top: 20px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}

	.be_paroxes-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.be_paroxes-item {
		padding: 16px;
		font-size: 15px;
		line-height: 20px;
	}

	.be_paroxes-content {
		gap: 24px;
		padding-bottom: 24px;
	}
}


/* Τοποθεσία (19:1078, component 19:1046, Variant2 geometry): white card (727px,
   100px inner padding) with subtitle, text, three ruled lines and a light button;
   b/w photo 593x805 to the right, top-aligned with the card, terracotta
   mountains (assets/img/mountains.svg, 760px) overlapping bottom-right. */
.be_location {
	position: relative;
	background: var(--be-color-light);
	color: var(--be-color-dark);
	overflow: hidden;
}

.be_location::before {
	content: "";
	position: absolute;
	right: 0;
	top: 30px;
	width: 563px;
	height: 588px;
	background: url("../../img/contours.svg") center / contain no-repeat;
	opacity: 0.7;
	pointer-events: none;
}

.be_location-title {
	position: relative;
	margin-bottom: 15px;
}

.be_location-inner {
	position: relative;
	display: grid;
	grid-template-columns: 727px minmax(0, 1fr);
	align-items: start;
	gap: 40px;
	padding-bottom: 60px;
}

.be_location-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding: 100px 100px 25px;
	background: var(--be-color-white);
}

.be_location-subtitle {
	font: var(--be-h2);
	max-width: 432px;
}

.be_location-list {
	width: 100%;
}

.be_location-list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--be-color-terracotta);
	font: var(--be-h3);
	line-height: 26px;
}

.be_location-media {
	max-width: 593px;
}

.be_location-media img {
	width: 100%;
	height: 805px;
	object-fit: cover;
}

.be_location-mountains {
	position: absolute;
	right: 40px; /* 140px from the viewport edge (the inner sits 100px in) */
	bottom: 55px; /* ends ~11px above the photo bottom, as in Figma (inner padding 60px) */
	width: 760px;
	height: auto;
	pointer-events: none;
}

@media (max-width: 1440px) {
	.be_location-inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.be_location-card {
		padding: 60px 60px 25px;
	}

	.be_location-mountains {
		width: 480px;
	}
}

@media (max-width: 1024px) {
	.be_location::before {
		width: 360px;
		height: 376px;
	}

	.be_location-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 100px;
	}

	.be_location-media {
		margin: 0;
		max-width: 100%;
	}

	.be_location-media img {
		height: auto;
		aspect-ratio: 593 / 805;
		max-height: 560px;
	}

	.be_location-mountains {
		right: -20px;
		width: 380px;
	}
}

@media (max-width: 700px) {
	.be_location-card {
		gap: 24px;
		padding: 32px 20px 20px;
	}

	.be_location-list li {
		padding: 10px 0;
		font-size: 18px;
		line-height: 24px;
	}

	.be_location-inner {
		gap: 24px;
		padding-bottom: 80px;
	}

	.be_location-mountains {
		width: 280px;
	}
}


/* Εμπειρίες & Δραστηριότητες (45:1407): title (3 lines) + indented text and
   button, photo 1053x434 on the right bleeding to the viewport edge (Variant2 of
   component 45:1343); accordion of activities below with the ruled band (text
   left, photo right overlapping the bottom rule). */
.be_exp {
	background: var(--be-color-white);
	color: var(--be-color-dark);
}

.be_exp-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, calc(1053px - var(--be-pad-x)));
	align-items: start;
	gap: 40px 0;
}

.be_exp-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.be_exp-title {
	max-width: 560px;
}

.be_exp-text,
.be_exp-btn {
	margin-left: 100px;
}

.be_exp-text {
	max-width: 527px;
}

.be_exp-media {
	margin: 90px calc(-1 * var(--be-pad-x)) 0 0;
}

.be_exp-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1053 / 434;
	object-fit: cover;
}

.be_exp-list {
	margin-top: 60px;
}

.be_exp-item-title {
	font: var(--be-h2);
}

.be_exp-band {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 651px;
	align-items: start;
	gap: 40px 60px;
	min-height: 200px;
	margin-top: 12px;
	padding: 34px 0;
	border-top: 1px solid var(--be-color-terracotta);
	border-bottom: 1px solid var(--be-color-terracotta);
}

.be_exp-band-text {
	max-width: 745px;
	padding: 0 20px;
	color: var(--be-color-black);
}

.be_exp-band-media {
	margin: 10px 0 -160px;
}

.be_exp-band-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 651 / 334;
	object-fit: cover;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.be_exp-item.is-open {
	margin-bottom: 200px;
}

.be_exp-item:last-child.is-open {
	margin-bottom: 120px;
}

@media (max-width: 1600px) {
	.be_exp-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
		column-gap: 40px;
	}
}

@media (max-width: 1280px) {
	.be_exp-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	}

	.be_exp-text,
	.be_exp-btn {
		margin-left: 40px;
	}

	.be_exp-band {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	}

	.be_exp-band-media {
		margin-bottom: -120px;
	}

	.be_exp-item.is-open {
		margin-bottom: 160px;
	}
}

@media (max-width: 1024px) {
	.be_exp-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.be_exp-media {
		margin: 0;
	}

	.be_exp-text,
	.be_exp-btn {
		margin-left: 0;
	}

	.be_exp-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 0;
	}

	.be_exp-band-text {
		padding: 0;
	}

	.be_exp-band-media {
		margin: 0;
	}

	.be_exp-item.is-open,
	.be_exp-item:last-child.is-open {
		margin-bottom: 0;
	}

	.be_exp-list {
		margin-top: 40px;
	}
}

@media (max-width: 700px) {
	.be_exp-intro {
		gap: 20px;
	}

	.be_accordion-toggle {
		padding: 12px 0;
		text-align: left;
		justify-content: space-between;
	}
}


/* Gallery «Ένας ήσυχος κόσμος» (15:56, component 15:32 Variant2): #404040, blob
   top-right, title (2 lines), Source Sans lead, four photos staggered like the
   Figma collage (297x350, 521x348, 521x594, 297x350 in 1720, 28px gaps). */
.be_gallery {
	position: relative;
	background: var(--be-color-grey);
	color: var(--be-color-white);
	overflow: hidden;
}

.be_gallery::before {
	content: "";
	position: absolute;
	right: var(--be-pad-x);
	top: 82px;
	width: 613px;
	height: 346px;
	background: url("../../img/blob.svg") center / contain no-repeat;
	opacity: 0.35;
	pointer-events: none;
}

.be_gallery .be_sec-head {
	position: relative;
}

.be_gallery-grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.63%;
}

.be_gallery-item {
	margin: 0;
	flex: 0 0 auto;
}

.be_gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_gallery-item--1 { width: 17.27%; margin-top: 14.39%; aspect-ratio: 297 / 350; }
.be_gallery-item--2 { width: 30.29%; margin-top: 7.3%; aspect-ratio: 521 / 348; }
.be_gallery-item--3 { width: 30.29%; margin-top: 0.15%; aspect-ratio: 521 / 594; }
.be_gallery-item--4 { width: 17.27%; aspect-ratio: 297 / 350; }

.be_gallery-btn {
	margin-top: 40px;
}

@media (max-width: 700px) {
	.be_gallery::before {
		width: 300px;
		height: 170px;
		top: 40px;
	}

	.be_gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.be_gallery-item--1,
	.be_gallery-item--2,
	.be_gallery-item--3,
	.be_gallery-item--4 {
		width: auto;
		margin-top: 0;
		aspect-ratio: 3 / 4;
	}

	.be_gallery-item--2 {
		aspect-ratio: 3 / 4;
	}

	.be_gallery-btn {
		margin-top: 24px;
	}
}


/* Blog (latest posts) */
.be_home-blog {
	background: var(--be-color-white);
	color: var(--be-color-dark);
}

.be_home-blog-title {
	margin-bottom: 40px;
}

.be_home-blog-btn {
	margin-top: 40px;
}


/* Instagram (40:255): title, grey lead, dark brand tile (124px) + four 399x500
   tiles, light «Ακολουθήστε μας» button. */
.be_insta {
	background: var(--be-color-light);
	color: var(--be-color-dark);
}

.be_insta-row {
	display: flex;
	gap: 0;
}

.be_insta-brand {
	display: flex;
	flex: 0 0 124px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 25px;
	background: var(--be-color-dark);
	color: var(--be-color-white);
}

.be_insta-logo {
	width: 74px;
	height: auto;
}

.be_insta-tile {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--be-color-grey);
}

.be_insta-tile img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.be_insta-tile:hover img {
	transform: scale(1.04);
}

.be_insta-btn {
	margin-top: 40px;
}

@media (max-width: 1024px) {
	.be_insta-tile img {
		height: 340px;
	}
}

@media (max-width: 700px) {
	.be_insta-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.be_insta-brand {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 16px;
		padding: 12px;
	}

	.be_insta-logo {
		width: 60px;
	}

	.be_insta-tile img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.be_insta-btn {
		margin-top: 24px;
	}
}


/* ==========================================================================
   Motion from Figma. Each section component in the Assets page has a Smart
   Animate Default → Variant2 (trigger "on hover" in the prototype, on the site
   the section gets .is-visible from the IntersectionObserver in main.js).
   Default = the initial state below, Variant2 = the resting layout above. Gated
   behind html.be-js and prefers-reduced-motion like main.css section 9; every
   final value is declared explicitly so the transition has something to
   interpolate to (clip-path: none would not animate).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Παροχές 19:1165 – photo 748x757 → 798x807, anchored top-left, 0.3 s linear */
	.be-js [data-motion="paroxes"] .be_paroxes-media img {
		clip-path: inset(0);
		transition: clip-path 0.3s linear;
	}

	.be-js [data-motion="paroxes"]:not(.is-visible) .be_paroxes-media img {
		clip-path: inset(0 6.27% 6.2% 0);
	}

	/* Τοποθεσία 19:1046 – 1.2 s ease-in-out: the card unrolls from 202px to its
	   full height, the photo grows from 518x670 (bottom-left) to 593x805, the
	   mountains scale 676 → 760 from their right edge, the contour lines fade in. */
	.be-js [data-motion="location"] .be_location-card,
	.be-js [data-motion="location"] .be_location-media img {
		clip-path: inset(0);
		transition: clip-path 1.2s var(--be-ease-in-out);
	}

	.be-js [data-motion="location"] .be_location-mountains {
		transform: none;
		transform-origin: 100% 50%;
		transition: transform 1.2s var(--be-ease-in-out);
	}

	.be-js [data-motion="location"]::before {
		transition: opacity 1.2s var(--be-ease-in-out);
	}

	.be-js [data-motion="location"]:not(.is-visible) .be_location-card {
		clip-path: inset(0 0 77.7% 0);
	}

	.be-js [data-motion="location"]:not(.is-visible) .be_location-media img {
		clip-path: inset(16.8% 12.6% 0 0);
	}

	.be-js [data-motion="location"]:not(.is-visible) .be_location-mountains {
		transform: scale(0.889);
	}

	.be-js [data-motion="location"]:not(.is-visible)::before {
		opacity: 0;
	}

	/* Εμπειρίες 45:1343 – photo 716 → 1053 wide with its right edge fixed, 0.8 s ease-out */
	.be-js [data-motion="experiences"] .be_exp-media img {
		clip-path: inset(0);
		transition: clip-path 0.8s var(--be-ease-out);
	}

	.be-js [data-motion="experiences"]:not(.is-visible) .be_exp-media img {
		clip-path: inset(0 0 0 32%);
	}

	/* Gallery 15:32 – 0.6 s ease-out: photo 1 grows down (275 → 350), photo 2
	   widens from a 158px sliver, photo 3 widens to the right (397 → 521) while
	   sliding 38px, photo 4 grows up (234 → 350). */
	.be-js [data-motion="gallery"] .be_gallery-item {
		clip-path: inset(0);
		transform: none;
		transition: clip-path 0.6s var(--be-ease-out), transform 0.6s var(--be-ease-out);
	}

	.be-js [data-motion="gallery"]:not(.is-visible) .be_gallery-item--1 { clip-path: inset(0 0 21.43% 0); }
	.be-js [data-motion="gallery"]:not(.is-visible) .be_gallery-item--2 { clip-path: inset(0 38.6% 0 31.1%); }
	.be-js [data-motion="gallery"]:not(.is-visible) .be_gallery-item--3 { clip-path: inset(0 23.8% 0 0); transform: translateX(-7.3%); }
	.be-js [data-motion="gallery"]:not(.is-visible) .be_gallery-item--4 { clip-path: inset(33.1% 0 0 0); }
}