/* ==========================================================================
   Homepage – templates/page-home.php (key page-home, see inc/enqueue.php)
   Figma "Desktop" 8:62 (1920) / "Mobile" 57:1805 (375).
   ========================================================================== */


/* Header over the hero (desktop only): the navigation bar (28:956) sits 24px
   into the hero, across both halves. */
@media (min-width: 1366px) {
	.page-template-page-home .be_navbar {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: transparent;
	}

	.page-template-page-home .be_header--stuck .be_navbar {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		background: var(--be-paper);
	}
}


/* Hero (28:1679) ----------------------------------------------------------
   Left half: paper 80% over cream, text block 650px wide; right half: cream,
   665x712 paper frame with the cut-out portrait (left 9.51%, top 22.34%,
   width 80.99%; the bottom is clipped by the frame). */
.be_hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 920px;
	background: var(--be-cream);
}

.be_hero-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 40px;
	padding-top: 147px;
	padding-bottom: 61px;
	background: rgba(255, 251, 248, 0.8);
}

.be_hero-body > * {
	max-width: 650px;
	width: 100%;
}

.be_hero-body > .be_btn {
	width: auto;
}

.be_hero-title {
	margin: 0;
	font: var(--be-hero);
	color: var(--be-black);
}

.be_hero-kicker {
	display: block;
	margin-bottom: 16px;
	font: 500 18px/24px var(--be-font);
	color: var(--be-mauve);
}

.be_hero-name {
	display: block;
}

.be_hero-credentials {
	margin: 0;
	font: var(--be-hero);
	color: var(--be-black);
}

.be_hero-subtitle {
	margin: 0;
	padding: 40px 0;
	border-top: 2px solid var(--be-ink);
	border-bottom: 1px solid var(--be-ink);
	font: var(--be-subtext);
	color: var(--be-ink);
}

.be_hero-text {
	margin: 0;
	font: 400 18px/22px var(--be-font);
	color: var(--be-black);
}

.be_hero-media {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 147px var(--be-pad-x) 61px 32px;
}

.be_hero-frame {
	position: relative;
	width: min(665px, 100%);
	aspect-ratio: 665 / 712;
	overflow: hidden;
	background: var(--be-paper);
}

.be_hero-img {
	position: absolute;
	left: 9.51%;
	top: 22.34%;
	width: 80.99%;
	height: auto;
}

/* Hero hover (Figma Hero 28:1176 Variant2, smart animate 800ms ease-out): the sketch
   fades in behind the hero at 20% (box left 19.56%, top 16.06%, 60.94% x 77.58%) and the
   portrait grows to the Variant2 crop (left 1.55%, top 6.76%, width 96.8%). The sketch
   file loads on the first pointer entry (main.js adds .is-hover-ready). */
@media (min-width: 1101px) and (hover: hover) {
	.be_hero {
		position: relative;
		isolation: isolate;
	}

	.be_hero::before {
		content: "";
		position: absolute;
		left: 19.56%;
		top: 16.06%;
		z-index: -1;
		width: 60.94%;
		height: 77.58%;
		background: center / 100% 100% no-repeat;
		opacity: 0;
		transition: opacity var(--be-t-slow) var(--be-ease);
		pointer-events: none;
	}

	.be_hero.is-hover-ready::before {
		background-image: url("../../img/sketch-hero.webp");
	}

	.be_hero:hover::before {
		opacity: 0.2;
	}

	.be_hero-img {
		transform-origin: 0 0;
		transition: transform var(--be-t-slow) var(--be-ease);
	}

	.be_hero:hover .be_hero-img {
		transform: translate(-9.83%, -19.59%) scale(1.1955);
	}
}

@media (max-width: 1365px) { /* header in the flow (main.css burger breakpoint) */
	.be_hero {
		min-height: 0;
	}

	.be_hero-body,
	.be_hero-media {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

@media (max-width: 1100px) {
	.be_hero {
		grid-template-columns: 1fr;
	}

	.be_hero-media {
		justify-content: center;
		padding: 40px var(--be-pad-x) 60px;
	}

	.be_hero-frame {
		width: min(520px, 100%);
	}
}

/* Mobile hero (57:1806): paper ground with the sketch at 10%, no rules,
   cream box with the 305x326.6 frame (image left 5.52%, top 20.28%, w 88.95%). */
@media (max-width: 700px) {
	.be_hero {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 20px 20px 0;
		background: var(--be-paper);
		overflow: hidden;
	}

	.be_hero::before {
		content: "";
		position: absolute;
		left: -22.49%;
		top: 4.33%;
		width: 152.45%;
		height: 45.67%;
		background: url("../../img/sketch-hero.webp") center / contain no-repeat;
		opacity: 0.1;
		pointer-events: none;
	}

	.be_hero-body {
		position: relative;
		gap: 20px;
		padding: 0;
		background: none;
	}

	.be_hero-title,
	.be_hero-credentials {
		color: var(--be-ink);
	}

	.be_hero-kicker {
		margin-bottom: 8px;
		font-size: 15px;
		line-height: 20px;
	}

	.be_hero-subtitle {
		padding: 0;
		border: 0;
	}

	.be_hero-text {
		font: 400 16px/20px var(--be-font);
		color: var(--be-ink);
	}

	.be_hero-media {
		position: relative;
		justify-content: center;
		padding: 20px 0;
		background: var(--be-cream);
	}

	.be_hero-frame {
		width: 305px;
		aspect-ratio: 305 / 326.556;
	}

	.be_hero-img {
		left: 5.52%;
		top: 20.28%;
		width: 88.95%;
	}
}


/* Gradient tiles (services, conditions, news) -----------------------------
   Mauve → transparent gradient, white text. Services 562x304 (25px padding,
   art at 20%), conditions 530x547 (50px, art at 50% in the lower half), news
   530x547 (50px, post photo under a mauve → 20% mauve gradient). */
.be_tile {
	position: relative;
	isolation: isolate; /* art/photo (z-index -1) stay above the ground, under the text */
	display: flex;
	flex-direction: column;
	color: var(--be-white);
	background: linear-gradient(180deg, var(--be-mauve) 0%, rgba(245, 240, 236, 0) 100%);
}

.be_tile-art,
.be_tile-photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.be_tile-art img,
.be_tile-photo img {
	width: 100%;
	height: 100%;
}

.be_tile-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.be_tile-title {
	margin: 0;
	font: var(--be-tile);
	color: var(--be-white);
}

.be_tile-title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable through the title link */
.be_tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.be_tile .be_btn {
	position: relative;
	z-index: 2;
}

/* The whole card is the link: hovering it shows the arrow button's hover state too */
.be_tile:hover .be_btn--light,
.be_tile:focus-within .be_btn--light {
	background: var(--be-white);
}

.be_tile:hover .be_btn--light .be_icon,
.be_tile:focus-within .be_btn--light .be_icon {
	color: var(--be-mauve);
}

.be_tile-text {
	margin: 0;
	max-width: 430px;
	font: 400 18px/22px var(--be-font);
}

.be_tile-number {
	margin: 0;
	font: 400 60px/45px var(--be-font-alt);
}

.be_tile .be_btn--light {
	box-shadow: none;
}

/* Services (98:7139) */
.be_services {
	background: var(--be-paper);
}

.be_services-grid {
	display: grid;
	grid-template-columns: minmax(0, 531fr) minmax(0, 1156fr);
	gap: 32px;
	align-items: start;
}

.be_services-grid > * {
	min-width: 0;
}

.be_services-intro {
	position: sticky;
	top: calc(var(--be-sticky-h, 0px) + 40px); /* the intro stays in view (under the sticky bar) while the cards scroll past */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.admin-bar .be_services-intro {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--be-sticky-h, 0px) + 40px);
}

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

.be_tile--service {
	justify-content: center;
	min-height: 304px;
	padding: 25px;
}

.be_tile--service .be_tile-art img {
	object-fit: contain;
	opacity: 0.2;
}

.be_tile--service .be_tile-title {
	font-weight: 500;
	max-width: 512px;
}

.be_services-btn--mobile {
	display: none;
}

/* Service hover (Figma Variant2, smart animate 300ms ease-out): the gradient
   keeps 50% mauve at the bottom */
.be_tile--service::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, var(--be-mauve) 0%, rgba(107, 79, 84, 0.5) 100%);
	opacity: 0;
	transition: opacity var(--be-t-fast) var(--be-ease);
}

.be_tile--service:hover::before,
.be_tile--service:focus-within::before {
	opacity: 1;
}

@media (max-width: 1440px) {
	.be_tile-number {
		font-size: 48px;
		line-height: 40px;
	}
}

@media (max-width: 1280px) {
	.be_services-grid {
		grid-template-columns: 1fr;
	}

	.be_services-intro {
		position: static;
	}
}

/* Conditions (38:3452): cards bleed off the right edge, 1px rules between */
.be_conditions {
	background: var(--be-paper);
	overflow: hidden;
}

.be_conditions-track {
	gap: 64px;
	margin-right: calc(-1 * var(--be-pad-x));
	padding-right: var(--be-pad-x);
	scroll-padding-left: 0;
}

.be_tile--condition,
.be_tile--post {
	justify-content: space-between;
	width: calc((100% - var(--be-pad-x) - 128px) / 3); /* track = content + right bleed */
	min-width: 340px;
	height: 547px;
	padding: 50px;
}

.be_tile--condition:not(:last-child)::after,
.be_tile--post:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -32.5px;
	width: 1px;
	background: var(--be-ink);
}

.be_tile--condition .be_tile-art {
	inset: 46% 6% 0;
}

.be_tile--condition .be_tile-art img {
	object-fit: contain;
	object-position: center bottom;
	opacity: 0.5;
	transition: opacity var(--be-t-fast) var(--be-ease);
}

/* Condition hover (Figma Variant2, dissolve 300ms): the line drawing goes from 50% to 70% */
.be_tile--condition:hover .be_tile-art img,
.be_tile--condition:focus-within .be_tile-art img {
	opacity: 0.7;
}

.be_slider-nav--center {
	justify-content: center;
	margin-top: 32px;
	padding-right: 0;
}

.be_conditions-btn {
	display: flex;
	width: fit-content;
	margin: 32px auto 0;
}

/* News (44:2189) */
.be_news {
	background: var(--be-cream);
}

.be_news .be_news-track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
	overflow: visible;
}

.be_news .be_tile--post {
	width: auto;
	min-width: 0;
}

.be_tile--post {
	overflow: visible;
	background: var(--be-mauve);
}

.be_tile--post .be_tile-photo {
	overflow: hidden;
}

.be_tile--post .be_tile-photo img {
	object-fit: cover;
	transition: transform var(--be-t-slow) var(--be-ease); /* not in Figma (its Νέο Variant2 is identical): a light zoom as click cue */
}

.be_tile--post .be_tile-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--be-mauve) 0%, rgba(107, 79, 84, 0.2) 100%);
}

.be_tile--post:hover .be_tile-photo img,
.be_tile--post:focus-within .be_tile-photo img {
	transform: scale(1.04);
}

.be_tile--post {
	justify-content: flex-start;
}

.be_tile-date {
	margin: 0;
	font: 400 18px/22px var(--be-font-alt);
	color: var(--be-white);
}

.be_news-btn {
	display: flex;
	width: fit-content;
	margin: 40px auto 0;
}

/* YouTube (8:745) */
.be_video {
	position: relative;
	overflow: hidden;
	background: var(--be-paper);
}

.be_video::after {
	content: "";
	position: absolute;
	left: 80.8%;
	top: 48.08%;
	width: 38.39%;
	height: 56.95%;
	background: url("../../img/sketch-youtube.webp") left top / contain no-repeat;
	opacity: 0.2;
	pointer-events: none;
}

.be_video > * {
	position: relative;
	z-index: 1;
}

.be_video-grid {
	display: grid;
	grid-template-columns: minmax(0, 844fr) minmax(0, 844fr);
	gap: 32px;
	align-items: center;
}

.be_video-player {
	position: relative;
	aspect-ratio: 844 / 529.4;
	background: var(--be-ink);
	overflow: hidden;
}

.be_yt,
.be_yt-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.be_yt {
	padding: 0;
	background: var(--be-ink);
}

.be_yt-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_yt-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(73, 54, 58, 0.85);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.be_yt-play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--be-white);
	transform: translate(-38%, -50%);
}

.be_yt:hover .be_yt-play,
.be_yt:focus-visible .be_yt-play {
	background: var(--be-mauve);
	transform: translate(-50%, -50%) scale(1.06);
}

.be_video-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 32px;
	padding: 50px;
}

.be_video-title {
	margin: 0;
	font: var(--be-h2);
	color: var(--be-ink);
}

.be_video-title a {
	text-decoration: none;
}

.be_video-title a:hover,
.be_video-title a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 1100px) {
	.be_video-grid {
		grid-template-columns: 1fr;
	}

	.be_video-body {
		padding: 0;
	}
}

/* Lazy backgrounds: nothing is downloaded before .is-bg-ready (main.js) */
.be_video.be_lazy-bg:not(.is-bg-ready)::after,
.be_cta.be_lazy-bg:not(.is-bg-ready)::before {
	background-image: none;
}

/* CTA (104:1482): cream, 100/200 padding, sketch at 20% on the right */
.be_cta {
	position: relative;
	overflow: hidden;
	padding-left: 200px;
	padding-right: 200px;
	background: var(--be-cream);
}

.be_cta::before {
	content: "";
	position: absolute;
	left: 52.35%;
	top: 3.52%;
	width: 38.91%;
	height: 100%;
	background: url("../../img/sketch-cta.webp") center top / contain no-repeat;
	opacity: 0.2;
	pointer-events: none;
}

.be_cta-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	max-width: 553px;
}

.be_cta .be_sec-title {
	margin: 0;
}

.be_cta-text {
	margin: 0;
	font: var(--be-body);
	color: var(--be-ink);
}

@media (max-width: 1440px) {
	.be_cta {
		padding-left: var(--be-pad-x);
		padding-right: var(--be-pad-x);
	}
}


/* Mobile (≤700px) ---------------------------------------------------------- */
@media (max-width: 700px) {
	.be_services-grid {
		gap: 20px;
	}

	.be_services-intro {
		gap: 20px;
	}

	.be_services-btn--desktop {
		display: none;
	}

	.be_services-btn--mobile {
		display: flex;
	}

	.be_services-btn--mobile {
		justify-self: start;
	}

	.be_services-intro {
		position: static;
	}

	.be_services-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.be_tile--service {
		width: 100%;
		min-height: 180px;
		padding: 20px;
		justify-content: flex-start;
	}

	.be_tile--service .be_tile-number {
		display: none;
	}

	.be_tile--service .be_btn--icon,
	.be_tile--condition .be_btn--icon,
	.be_tile--post .be_btn--icon {
		width: 55.636px;
		height: 36px;
		padding: 0;
	}

	.be_tile-body {
		gap: 32px;
	}

	.be_tile-text {
		font: 400 16px/20px var(--be-font);
	}

	/* Conditions / news: one 335x345 card per view */
	.be_conditions {
		overflow: visible;
	}

	.be_news .be_news-track {
		display: flex;
		overflow-x: auto;
	}

	.be_news .be_tile--post {
		width: 100%;
	}

	.be_conditions-track,
	.be_news .be_news-track {
		gap: 20px;
		margin-right: 0;
		padding-right: 0;
	}

	.be_tile--condition,
	.be_tile--post {
		width: 100%;
		min-width: 0;
		height: 345px;
		padding: 20px;
	}

	.be_tile--condition::after,
	.be_tile--post::after {
		display: none;
	}

	.be_tile--condition .be_tile-art {
		inset: 50% 10% 0;
	}

	.be_slider-nav--center {
		margin-top: 20px;
	}

	.be_conditions-btn {
		margin-top: 20px;
	}

	.be_news-btn {
		margin: 20px 0 0;
	}

	/* YouTube (57:2381): title, video title, text, player, button */
	.be_video::after {
		left: 50%;
		top: 60%;
		width: 80%;
		height: 40%;
	}

	.be_video-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.be_video-body {
		display: contents;
	}

	.be_video-title {
		order: 1;
		font: 400 24px/32px var(--be-font);
	}

	.be_video-body > .be_text {
		order: 2;
	}

	.be_video-player {
		order: 3;
		aspect-ratio: 335 / 210;
	}

	.be_video-body > .be_btn {
		order: 4;
		align-self: flex-start;
	}

	.be_yt-play {
		width: 56px;
		height: 56px;
	}

	/* CTA (104:2206) */
	.be_cta {
		padding: 20px;
	}

	.be_cta::before {
		left: 25%;
		top: 10%;
		width: 100%;
		height: 90%;
	}

	.be_cta-body {
		gap: 40px;
	}
}

/* Laptop fix (Oct 2026): conditions slider shows 2 wider tiles instead of ~3 narrow ones */
@media (min-width: 1101px) and (max-width: 1600px) {
	.be_tile--condition {
		width: calc((100% - var(--be-pad-x) - 64px) / 2);
	}
}

/* Laptop fix (Oct 2026): smaller service tile titles so long words fit the cards */
@media (min-width: 1101px) and (max-width: 1800px) {
	.be_tile--service .be_tile-title {
		font-size: clamp(24px, 1.85vw, 32px);
		line-height: 1.2;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Fix (Oct 2026): news article titles a bit smaller (desktop/laptop) */
@media (min-width: 701px) {
	.be_news .be_tile-title {
		font-size: clamp(24px, 1.7vw, 32px);
		line-height: 1.2;
	}
}