/* ==========================================================================
   BeThree Child – Αρχική (homepage)
   Figma: "Desktop | Αρχική" 1:716 (1920) and "Mobile | Αρχική" 1:912 (375).
   Loaded only on the page using templates/page-home.php (key "page-home").
   Shared pieces live in main.css: .be_btn--arrow, .be_quote, .be_card +
   .be_blog-group, .be_icard, .be_slider, .be_form, .be_curve-top/-bottom, .be_reviews.
   ========================================================================== */

/* --- Section head: title (fixed column) + orange lead ------------------- */
.be_sec-head {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.be_sec-title {
	flex: 0 0 280px;
	font: 700 40px/50px var(--be-font-primary);
	color: var(--be-color-dark);
}

.be_sec-lead {
	flex: 1 1 auto;
	margin: 0;
	font: 400 32px/40px var(--be-font-primary);
	color: var(--be-color-orange);
}

/* --- Hero (1:717): cream, card 1720x720 with the photo, text bottom-left,
       counter + thumbnails bottom-right --------------------------------- */
.be_hero {
	padding: 0 100px 75px;
	background: var(--be-color-cream);
}

.be_hero-card {
	position: relative;
	aspect-ratio: 1720 / 720; /* Figma card ratio: keeps the photo framing on any screen width */
	min-height: 560px;
	overflow: hidden;
	border: 2px solid var(--be-color-white);
	border-radius: 60px;
	background: var(--be-color-dark);
	color: var(--be-color-white);
}

.be_hero-slides {
	position: absolute;
	inset: 0;
}

.be_hero-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.be_hero-slide.is-active {
	opacity: 1;
}

.be_hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* 5% orange wash (10% on mobile) */
.be_hero-slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(242, 104, 34, 0.05);
	pointer-events: none;
}

.be_hero-text {
	position: absolute;
	left: 57px;
	right: 57px;
	bottom: 63px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.be_hero-title {
	margin: 0;
	font: 700 45px/50px var(--be-font-primary);
	color: var(--be-color-white);
}

.be_hero-subtitle {
	margin: 0;
	font: 700 32px/45px var(--be-font-primary);
}

.be_hero-nav {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: flex;
	gap: 12px;
}

.be_hero-counter,
.be_hero-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	background: var(--be-color-white);
}

.be_hero-counter {
	font: 700 32px/45px var(--be-font-primary);
	color: #000000;
}

.be_hero-thumb {
	cursor: pointer;
	transition: transform 0.2s ease;
}

.be_hero-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_hero-thumb:hover,
.be_hero-thumb:focus-visible {
	transform: scale(1.06);
}

.be_hero-thumb.is-active {
	display: none; /* the active slide is the big picture */
}

/* --- Ο Ιατρός (1:718): cream, photo 593x543 radius 80 | text ----------- */
.be_about {
	position: relative;
	overflow: clip;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 70px;
	padding: 100px 100px 132px;
	background: var(--be-color-cream);
	color: var(--be-color-dark);
}

/* Soft orange glow (Figma "Ellipse 2", 10% orange, 65px blur) */
.be_about::before {
	content: "";
	position: absolute;
	right: 165px;
	top: 325px;
	width: 382px;
	height: 372px;
	border-radius: 50%;
	background: rgba(242, 104, 34, 0.1);
	filter: blur(65px);
	pointer-events: none;
}

.be_about > * {
	position: relative;
}

.be_about-media {
	flex: 0 0 593px;
}

.be_about-img {
	display: block;
	width: 100%;
	height: 543px;
	object-fit: cover;
	object-position: center 15%; /* Figma framing: head near the top, arms at the bottom */
	border-radius: 80px;
}

.be_about-body {
	flex: 0 1 1057px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.be_about-title {
	font: 700 60px/72px var(--be-font-primary);
}

.be_about-name {
	margin: 0;
	font: 700 26px/32px var(--be-font-primary);
	color: var(--be-color-orange);
}

.be_about-text {
	font: 400 24px/32px var(--be-font-primary);
	color: #666666;
}

.be_about-text p {
	margin: 0;
}

.be_about-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-left: 27px;
	font: 400 18px/24px var(--be-font-primary);
	color: #666666;
}

/* --- Συχνές ΩΡΛ Παθήσεις (1:719): cream, two wide cards ---------------- */
.be_common {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 100px;
	background: var(--be-color-cream);
}

.be_common-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

/* --- Quote (1:726): cream, no top padding ------------------------------- */
.be_home-quote {
	padding: 0 100px 100px;
	background: var(--be-color-cream);
}

/* --- Σύγχρονες ΩΡΛ Παθήσεις (1:737): white with cream curves ----------- */
.be_conditions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
	padding: 200px 100px;
	background: var(--be-color-white);
}

.be_conditions-cards {
	width: 100%;
}

.be_conditions-track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/* --- Σύγχρονες Τεχνικές (1:753): cream, list with photo + text band ----- */
.be_techniques {
	position: relative;
	overflow: clip;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 50px 100px 100px;
	background: var(--be-color-cream);
	color: var(--be-color-dark);
}

/* Two blurred orange ellipses (Figma "Ellipse 2/3") */
.be_techniques::before,
.be_techniques::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(65px);
	pointer-events: none;
}

.be_techniques::before {
	left: 89px;
	top: 87px;
	width: 560px;
	height: 545px;
	background: rgba(242, 104, 34, 0.1);
}

.be_techniques::after {
	right: 103px;
	top: 531px;
	width: 449px;
	height: 438px;
	background: rgba(242, 104, 34, 0.05);
}

.be_techniques > * {
	position: relative;
}

.be_techniques-title {
	align-self: flex-start;
	font: 700 40px/50px var(--be-font-primary);
}

.be_techniques-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_tech {
	border-bottom: 1px solid var(--be-color-dark);
}

.be_tech:first-child {
	border-top: 1px solid var(--be-color-dark);
}

.be_tech-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 24px 0;
	color: inherit;
	text-decoration: none;
}

.be_tech-media {
	flex: 0 0 320px;
}

.be_tech-media img {
	display: block;
	width: 320px;
	height: 240px;
	object-fit: cover;
	border-radius: 20px;
}

/* "Spread": cream → white band behind the text */
.be_tech-body {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 120px;
	padding: 0 24px;
	border-radius: 60px;
	background: linear-gradient(90deg, var(--be-color-cream) 0%, var(--be-color-white) 100%);
}

.be_tech-text {
	margin: 0;
	font: 400 24px/32px var(--be-font-primary);
}

.be_tech-title,
.be_tech-sep {
	font: 700 40px/45px var(--be-font-primary);
}

a.be_tech-inner:hover .be_tech-title,
a.be_tech-inner:focus-visible .be_tech-title {
	color: var(--be-color-orange);
}

/* --- Metrics (1:765): cream, white box, numbers over dark boxes --------- */
.be_metrics {
	padding: 34px 200px;
	background: var(--be-color-cream);
}

.be_metrics-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
	padding: 11px 100px 37px;
	background: var(--be-color-white);
	border-radius: 20px;
}

.be_metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.be_metric-number {
	margin: 0 0 54px;
	font: 700 45px/63px var(--be-font-primary);
	font-variant-numeric: tabular-nums; /* count-up (main.js [data-count]) without jitter */
	color: var(--be-color-orange);
}

.be_metric-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 174px;
	margin: 0;
	padding: 0 9.79%;
	background: var(--be-color-dark);
	border-radius: 20px;
	font: 400 32px/40px var(--be-font-primary);
	color: var(--be-color-cream);
	text-align: center;
}

/* --- Blog (1:772): white, cream curve on top ---------------------------- */
.be_home-blog {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 150px 100px 100px;
	background: var(--be-color-white);
	color: var(--be-color-dark);
}

.be_home-blog-title {
	align-self: flex-start;
	font: 700 40px/50px var(--be-font-primary);
}

.be_home-blog > .be_blog-group {
	width: 100%;
}

/* --- Έχετε απορίες; (1:790): white, orange frame, text | form card ------ */
.be_home-contact {
	padding: 50px 100px 200px;
	background: var(--be-color-white);
	color: var(--be-color-dark);
}

.be_home-contact-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 100px;
	border: 1px solid var(--be-color-orange);
	border-radius: 30px;
}

.be_home-contact-body {
	flex: 0 1 758px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.be_home-contact-title {
	max-width: 606px;
	font: 700 40px/50px var(--be-font-primary);
	color: var(--be-color-navy);
}

.be_home-contact-text {
	margin: 0;
	font: 400 24px/32px var(--be-font-primary);
	color: #666666;
}

.be_home-contact-note {
	max-width: 505px;
	margin: 0;
	font: 400 20px/32px var(--be-font-primary);
	color: var(--be-color-orange);
}

.be_home-contact-form {
	flex: 0 0 684px;
	padding: 32px;
	background: var(--be-color-white);
	border-radius: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.be_home-contact-form .wpcf7-submit {
	width: 100%;
}

/* --- Media (1:791): cream, glass box with the TikTok slider ------------- */
.be_media {
	padding: 0 100px 100px;
	background: var(--be-color-cream);
	color: var(--be-color-dark);
}

.be_media-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 60px;
	border: 1px solid var(--be-color-orange);
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(7.5px);
	backdrop-filter: blur(7.5px);
}

.be_media-title {
	align-self: flex-start;
	font: 700 40px/50px var(--be-font-primary);
	color: var(--be-color-navy);
}

.be_media-slider {
	width: 100%;
}

.be_media-track {
	display: flex;
	gap: 33px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.be_media-track::-webkit-scrollbar {
	display: none;
}

.be_media-item {
	flex: 0 0 226px;
	scroll-snap-align: start;
	display: block;
}

.be_media-item img {
	display: block;
	width: 226px;
	height: 347px;
	object-fit: cover;
	border-radius: 20px;
}

/* Desktop arrows: 50px dark circles (Figma "Arrow" 50x50) */
.be_media-nav {
	display: flex;
	gap: 12px;
	margin-top: 32px;
}

.be_media-nav .be_slider-btn {
	width: 50px;
	height: 50px;
	background-image: url("../../img/icon-arrow-circle-dark.svg");
}

.be_media-btn {
	margin-top: -8px; /* 32px after the arrows (box gap is 40px) */
}

/* --- Responsive: laptops --------------------------------------------- */
@media (max-width: 1440px) {
	.be_hero-card {
		min-height: 0;
	}

	.be_about {
		gap: 48px;
	}

	.be_about-media {
		flex-basis: 480px;
	}

	.be_about-img {
		height: 460px;
	}

	.be_about-title {
		font-size: 48px;
		line-height: 56px;
	}

	.be_metrics {
		padding-left: 100px;
		padding-right: 100px;
	}

	.be_metrics-box {
		padding-left: 60px;
		padding-right: 60px;
	}

	.be_home-contact-box {
		padding: 60px;
	}

	.be_home-contact-form {
		flex-basis: 560px;
	}

	.be_tech-title,
	.be_tech-sep {
		font-size: 32px;
		line-height: 40px;
	}
}

@media (max-width: 1100px) {
	.be_hero {
		padding: 0 60px 60px;
	}

	.be_hero-card {
		aspect-ratio: auto;
		height: 520px;
		border-radius: 40px;
	}

	.be_hero-text {
		left: 40px;
		right: 40px;
		bottom: 110px;
		gap: 16px;
	}

	.be_hero-title {
		font-size: 34px;
		line-height: 40px;
	}

	.be_hero-subtitle {
		font-size: 22px;
		line-height: 30px;
	}

	.be_hero-counter,
	.be_hero-thumb {
		width: 60px;
		height: 60px;
	}

	.be_hero-counter {
		font-size: 24px;
	}

	.be_about {
		flex-direction: column;
		gap: 32px;
		padding: 80px 60px;
	}

	.be_about-media {
		flex-basis: auto;
		width: 100%;
		max-width: 593px;
	}

	.be_about-body {
		flex-basis: auto;
	}

	.be_sec-head {
		flex-direction: column;
		gap: 16px;
	}

	.be_sec-title {
		flex-basis: auto;
	}

	.be_sec-lead {
		font-size: 24px;
		line-height: 32px;
	}

	.be_common,
	.be_conditions {
		gap: 40px;
		padding: 80px 60px;
	}

	.be_conditions {
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.be_home-quote {
		padding: 0 60px 80px;
	}

	.be_common-cards {
		grid-template-columns: 1fr;
	}

	.be_conditions-track {
		grid-template-columns: 1fr 1fr;
	}

	.be_techniques {
		gap: 40px;
		padding: 40px 60px 80px;
	}

	.be_tech-inner {
		align-items: flex-start;
	}

	.be_tech-media {
		flex-basis: 240px;
	}

	.be_tech-media img {
		width: 240px;
		height: 180px;
	}

	.be_tech-body {
		border-radius: 30px;
	}

	.be_tech-text {
		font-size: 20px;
		line-height: 28px;
	}

	.be_tech-title,
	.be_tech-sep {
		font-size: 26px;
		line-height: 32px;
	}

	.be_metrics {
		padding: 32px 60px;
	}

	.be_metrics-box {
		gap: 24px;
		padding: 24px;
	}

	.be_metric-number {
		margin-bottom: 24px;
		font-size: 36px;
		line-height: 48px;
	}

	.be_metric-label {
		min-height: 140px;
		font-size: 24px;
		line-height: 32px;
	}

	.be_home-blog {
		padding: 120px 60px 80px;
	}

	.be_home-contact {
		padding: 40px 60px 140px;
	}

	.be_home-contact-box {
		flex-direction: column;
		align-items: stretch;
		padding: 40px;
	}

	.be_home-contact-body,
	.be_home-contact-form {
		flex-basis: auto;
	}

	.be_media {
		padding: 0 60px 80px;
	}

	.be_media-box {
		padding: 40px;
	}
}

/* --- Responsive: mobile (Figma "Mobile | Αρχική" 1:912) ---------------- */
@media (max-width: 700px) {
	.be_hero {
		padding: 16px 20px 24px;
	}

	/* 1:913: photo 335x613, radius 20, 10% orange wash, no border */
	.be_hero-card {
		height: 613px;
		border: 0;
		border-radius: 20px;
	}

	.be_hero-slides::after {
		background: rgba(242, 104, 34, 0.1);
	}

	.be_hero-text {
		left: 16px;
		right: 16px;
		bottom: 161px;
		gap: 12px;
	}

	.be_hero-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_hero-subtitle {
		font-size: 20px;
		line-height: 24px;
	}

	.be_hero-nav {
		left: 17px;
		right: auto;
		bottom: 69px;
		gap: 21px;
	}

	.be_hero-counter,
	.be_hero-thumb {
		width: 59.5px;
		height: 59.5px;
	}

	.be_hero-counter {
		font-size: 26px;
		line-height: 32px;
	}

	/* 1:929 */
	.be_about {
		gap: 24px;
		padding: 32px 20px;
	}

	.be_about::before {
		right: -93px;
		top: 634px;
	}

	.be_about-media {
		max-width: none;
	}

	.be_about-img {
		height: 543px;
	}

	.be_about-body {
		gap: 12px;
	}

	.be_about-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_about-name {
		font-size: 20px;
		line-height: 24px;
	}

	.be_about-text {
		font-size: 18px;
		line-height: 24px;
	}

	.be_about-list {
		padding-left: 24px;
		font-size: 16px;
	}

	.be_about-body > .be_btn {
		margin-top: 20px;
	}

	/* Section heads + buttons at mobile sizes */
	.be_sec-head {
		gap: 12px;
	}

	.be_sec-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_sec-lead {
		font-size: 20px;
		line-height: 24px;
	}

	.be_hero ~ .be_row .be_btn--arrow,
	.be_about .be_btn--arrow {
		font-size: 18px;
	}

	/* 1:943 */
	.be_common {
		gap: 24px;
		padding: 32px 20px;
	}

	.be_common-cards {
		gap: 24px;
	}

	/* 1:949 */
	.be_home-quote {
		padding: 20px;
	}

	/* 1:961: head, button, then one card per swipe + arrows */
	.be_conditions {
		gap: 24px;
		padding: 40px 20px 32px;
	}

	.be_conditions-btn {
		order: 1;
	}

	.be_conditions-cards {
		order: 2;
		margin-top: 8px;
	}

	.be_conditions-track {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.be_conditions-track::-webkit-scrollbar {
		display: none;
	}

	.be_conditions-track > .be_icard {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.be_conditions .be_slider-nav {
		margin-top: 32px;
	}

	/* 1:975 */
	.be_techniques {
		gap: 24px;
		padding: 32px 20px;
	}

	.be_techniques::before {
		left: -40px;
		top: 206px;
		width: 313px;
		height: 305px;
	}

	.be_techniques::after {
		right: 56px;
		top: 743px;
		width: 262px;
		height: 256px;
	}

	.be_techniques-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_techniques-list {
		gap: 24px;
	}

	.be_tech-inner {
		flex-direction: column;
		gap: 12px;
		padding: 12px;
		border-radius: 20px;
		background: linear-gradient(90deg, var(--be-color-cream) 0%, var(--be-color-white) 100%);
	}

	.be_tech {
		padding: 12px 0;
	}

	.be_tech-media {
		flex-basis: auto;
		width: 100%;
	}

	.be_tech-media img {
		width: 100%;
		height: 240px;
	}

	.be_tech-body {
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.be_tech-text {
		font-size: 18px;
		line-height: 24px;
	}

	.be_tech-title {
		font-size: 24px;
		line-height: 32px;
	}

	.be_tech-sep {
		font-weight: 400;
		font-size: 20px;
		line-height: 24px;
	}

	.be_tech-desc {
		display: block;
	}

	.be_techniques-btn {
		width: 100%;
	}

	/* 1:1007 */
	.be_metrics {
		padding: 32px 20px;
	}

	.be_metrics-box {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px;
	}

	.be_metric-number {
		margin-bottom: 15px;
		font-size: 32px;
		line-height: 72px;
	}

	.be_metric-label {
		min-height: 113px;
		font-size: 22px;
		line-height: 40px;
	}

	/* 1:1024 */
	.be_home-blog {
		gap: 24px;
		padding: 32px 20px;
	}

	.be_home-blog-title {
		font-size: 26px;
		line-height: 32px;
	}

	/* 1:1060: cream frame, stacked */
	.be_home-contact {
		padding: 32px 20px;
	}

	.be_home-contact-box {
		gap: 32px;
		padding: 24px 12px;
		background: var(--be-color-cream);
	}

	.be_home-contact-body {
		gap: 24px;
	}

	.be_home-contact-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_home-contact-text {
		font-size: 18px;
		line-height: 24px;
	}

	.be_home-contact-note {
		font-size: 20px;
		line-height: 24px;
	}

	.be_home-contact-form {
		padding: 24px;
	}

	.be_home-contact-form .wpcf7-submit {
		width: auto;
		align-self: center;
	}

	/* 1:1091: white box, one 226x347 image per swipe */
	.be_media {
		padding: 32px 24px;
	}

	.be_media-box {
		gap: 24px;
		padding: 24px;
		border-radius: 20px;
		background: var(--be-color-white);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.be_media-title {
		font-size: 26px;
		line-height: 32px;
	}

	.be_media-track {
		width: 226px;
		margin: 0 auto;
	}

	.be_media-item {
		flex-basis: 100%;
	}

	.be_media-nav {
		gap: 6px;
		margin-top: 24px;
	}

	.be_media-nav .be_slider-btn {
		width: 32px;
		height: 32px;
		background-image: url("../../img/icon-arrow-circle.svg");
	}

	.be_media-btn {
		margin-top: 0;
	}
}