/* ==========================================================================
   Shared sections – doctor, clinics, reviews, FAQ, contact form
   Used by the homepage (templates/page-home.php), the contact page
   (templates/page-contact.php) and the biography (templates/page-about.php) through
   template-parts/section-*.php; enqueued for those templates only (inc/enqueue.php,
   bethree_child_sections_css_keys).
   Figma: Ο Ιατρός 28:2063 / 57:1854, Ιατρεία 44:1642 / 57:2269, Κριτικές 104:2313 /
   57:2478, Συχνές ερωτήσεις 44:2563 / 57:2599, Επικοινωνία 44:3397 / 57:2826.
   ========================================================================== */


/* Mobile-only slider arrows (clinics on phones) */
.be_slider-nav--mobile {
	display: none;
}

/* Ο Ιατρός (28:2063) ------------------------------------------------------
   Cream, 61/100 padding, sketch at 5% bleeding off the left edge. Text column
   (≈500px), 440x300 photo, portrait frame (paper, 547px high) filling the rest. */
.be_about {
	position: relative;
	overflow: hidden;
	padding-top: 61px;
	padding-bottom: 61px;
	background: var(--be-cream);
}

.be_about::before {
	content: "";
	position: absolute;
	left: -34.08%;
	top: 16.81%;
	width: 61.6%;
	height: 98.73%;
	background: url("../../img/sketch-iatros.webp") center / contain no-repeat;
	opacity: 0.05;
	pointer-events: none;
}

.be_about > * {
	position: relative;
}

.be_about .be_sec-title {
	color: var(--be-black);
}

.be_about-grid {
	display: flex;
	align-items: center;
	gap: 50px;
}

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

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

.be_about-text {
	font: var(--be-body);
	color: var(--be-muted);
}

/* Roles under the name (biography page: «Μαιευτήρας Γυναικολόγος», «Διδάκτωρ …») */
.be_about-roles {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: -16px; /* closer to the name than the 32px column gap */
}

.be_about-role {
	margin: 0;
	font: 500 18px/24px var(--be-font-alt);
	color: var(--be-mauve);
}

.be_about-media {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 50px;
	min-width: 0;
}

/* Photos: positioned like the Figma image crops (fill transforms of 28:1915 / 78:2114),
   so they keep the design framing at every width. */
.be_about-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.be_about-photo img {
	position: absolute;
	max-width: none;
	height: auto; /* in colour (Thanos), although the Figma fills are desaturated */
}

/* Award photo: 440x547 frame (Variant2), square image 141.8% wide, 12.5% off the left */
.be_about-photo--wide {
	flex: 0 1 440px;
	aspect-ratio: 440 / 547;
}

.be_about-photo--wide img {
	top: 0;
	left: -12.5%;
	width: 141.8%;
}

/* Portrait: paper frame, 547px high; cut-out 113.8% wide, left 2.96%, top 7.5%, clipped at the bottom */
.be_about-photo--portrait {
	--be-portrait-h: 547px;
	flex: 1 1 0;
	height: var(--be-portrait-h);
	background: var(--be-paper);
}

/* Sized from the frame HEIGHT (Figma at 578x547: 657x746 image, top 41px, centre 57px right of
   the frame centre), so wider frames on large screens get more paper, not a bigger photo */
.be_about-photo--portrait img {
	top: calc(var(--be-portrait-h) * 0.0746);
	left: calc(50% + var(--be-portrait-h) * 0.1042);
	width: auto;
	height: calc(var(--be-portrait-h) * 1.3644);
	transform: translateX(-50%);
}

/* Rules after each photo (Figma "Vertical Line" 1px / 2px, full 547px height) */
.be_about-line {
	flex: 0 0 1px;
	align-self: stretch;
	background: var(--be-ink);
}

.be_about-line--end {
	flex-basis: 2px;
}

/* Reveal (Figma Ο Ιατρός Default → Variant2, smart animate 1200ms ease-out), played once
   when the photos come into view (main.js "Reveal"): the award frame opens from a centred
   300px band to its full height while the photo settles from 440px wide to its crop, and
   the two rules draw in from the middle. Without JavaScript the final state shows. */
.be_about-photo--wide,
.be_about-photo--wide img,
.be_about-line {
	transition: clip-path 1.2s var(--be-ease), transform 1.2s var(--be-ease);
}

.be_about-photo--wide img {
	transform-origin: 0 0;
}

.be_about-media.is-reveal-pending .be_about-line {
	transform: scaleY(0);
}

@media (min-width: 701px) {
	.be_about-photo--wide {
		clip-path: inset(0); /* explicit end value: inset() → none would not animate */
	}

	.be_about-media.is-reveal-pending .be_about-photo--wide {
		clip-path: inset(22.58% 0); /* Default: the 300px band of the 547px frame */
	}

	.be_about-media.is-reveal-pending .be_about-photo--wide img {
		transform: translate(8.8%, 19.8%) scale(0.705); /* Default: 440px wide, top of the band */
	}
}

@media (max-width: 1440px) {
	.be_about-media {
		gap: 32px;
	}

	.be_about-photo--wide {
		flex-basis: 340px;
	}

	.be_about-photo--portrait {
		--be-portrait-h: 460px;
	}
}

@media (max-width: 1100px) {
	.be_about-grid {
		flex-direction: column;
		align-items: stretch;
	}

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

/* Mobile (57:1854): left-aligned title, both photos side by side with a rule */
@media (max-width: 700px) {
	.be_about {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.be_about::before {
		left: -40%;
		top: 0;
		width: 180%;
		height: 60%;
	}

	.be_about .be_sec-title {
		color: var(--be-ink);
		text-align: left;
	}

	.be_about-grid,
	.be_about-body {
		gap: 20px;
	}

	/* Mobile row (57:2138): rule 1px | award 125x122 | rule 2px | portrait 168x143 */
	.be_about-media {
		justify-content: space-between;
		gap: 10px;
	}

	.be_about-line {
		flex-basis: 2px;
	}

	.be_about-line--end {
		order: -1;
		flex-basis: 1px;
	}

	.be_about-photo--wide {
		flex: 0 1 37.3%;
		aspect-ratio: 125 / 122;
	}

	.be_about-photo--wide img {
		left: 0;
		width: 100%;
	}

	.be_about-photo--portrait {
		flex: 0 1 50.1%;
		height: auto;
		aspect-ratio: 168 / 143;
	}

	.be_about-photo--portrait img {
		top: 8.1%;
		left: -3.76%;
		width: 129.5%;
		height: auto;
		transform: none;
	}
}


/* Clinics (44:1642) */
.be_clinics {
	background: var(--be-cream);
}

/* Optional paragraph under the title (biography page, with links) */
.be_clinics-text {
	max-width: 960px;
	margin: calc(-1 * var(--be-gap) + 16px) 0 40px;
	font: var(--be-body);
	color: var(--be-ink);
}

.be_clinics .be_clinics-track {
	display: flex;
	flex-direction: column;
	gap: 40px;
	overflow: visible;
}

.be_clinic {
	display: grid;
	gap: 32px;
	align-items: center;
}

.be_clinic--imgs-2 {
	grid-template-columns: minmax(0, 776fr) minmax(0, 317fr) minmax(0, 563fr);
}

.be_clinic--imgs-1 {
	grid-template-columns: minmax(0, 348fr) minmax(0, 1340fr);
}

.be_clinic--imgs-1 .be_clinic-body {
	order: -1;
}

.be_clinic-media {
	display: contents;
}

.be_clinic-photo {
	height: 454px;
	margin: 0;
	overflow: hidden;
}

/* Figma 44:3898 / 44:3949: photos at saturation -100; hovering the clinic block brings the
   colour back (Variant2, dissolve 800ms ease-out) */
.be_clinic-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--be-t-slow) var(--be-ease);
}

.be_clinic:hover .be_clinic-photo img,
.be_clinic:focus-within .be_clinic-photo img {
	filter: grayscale(0);
}

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

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

@media (min-width: 1441px) {
	.be_clinic--imgs-1 .be_clinic-title {
		white-space: nowrap; /* Figma: two lines, «ΙΑΤΡΕΙΟ ΒΟΛΟΣ» / «MED4WOMAN VOLOS» */
	}
}

@media (max-width: 1440px) {
	.be_clinic--imgs-2 {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 1.2fr);
	}

	.be_clinic--imgs-1 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.be_clinic-photo {
		height: 380px;
	}
}

@media (max-width: 1100px) {
	.be_clinic--imgs-2,
	.be_clinic--imgs-1 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.be_clinic-body {
		grid-column: 1 / -1;
		order: 0 !important;
	}

	.be_clinic--imgs-1 .be_clinic-photo {
		grid-column: 1 / -1;
	}

	.be_clinic-photo {
		height: 320px;
	}
}

/* Maps under the clinic blocks (contact page): one Google Maps iframe per clinic */
.be_maps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 40px;
}

.be_map {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	background: var(--be-cream);
}

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

/* Reviews (104:2313): three 420px cards (1320 row), chevrons on the sides */
.be_reviews {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	background: var(--be-paper);
}

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

.be_reviews-slider {
	width: min(1320px, 100%);
}

.be_reviews-track {
	gap: 30px;
	align-items: stretch;
}

.be_review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: calc((100% - 60px) / 3);
	padding: 24px;
	border: 1px solid rgba(14, 27, 27, 0.25);
	background: var(--be-white);
	color: #071e26;
	font-family: var(--be-font-alt);
}

.be_review-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.be_review-avatar {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #8a6c64;
	color: var(--be-white);
	font: 400 20px/1 var(--be-font-alt);
}

.be_review:nth-child(3n + 2) .be_review-avatar {
	background: #00473b;
}

.be_review-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.be_review-name {
	margin: 0 0 8px;
	font: 500 23px/32px var(--be-font-alt);
	color: var(--be-black);
	overflow-wrap: anywhere;
}

.be_review-date {
	margin: 0;
	font: 300 14px/24px var(--be-font-alt);
	color: rgba(14, 27, 27, 0.5);
}

.be_review-source {
	width: 24px;
	height: 24px;
}

.be_review-stars {
	display: flex;
	gap: 4px;
	margin: 0;
	color: #ffc107;
	font-size: 27px;
	line-height: 24px;
}

.be_review-text {
	font: 300 18px/24px var(--be-font-alt);
}

.be_review-text p {
	margin: 0;
}

.be_review-text.is-clamped:not(.is-open) p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.be_review-more {
	align-self: flex-start;
	margin-top: auto;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(14, 27, 27, 0.5);
	font: 400 18px/24px var(--be-font-alt);
}

.be_review-more:hover,
.be_review-more:focus-visible {
	color: var(--be-ink);
	text-decoration: underline;
}

/* Chevron buttons (104:2390: 44px white circles, 1px border) */
.be_slider-nav--reviews {
	position: absolute;
	top: 50%;
	left: -22px;
	right: -22px;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.be_slider-nav--reviews .be_slider-btn {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(14, 27, 27, 0.25);
	border-radius: 50%;
	background: var(--be-white);
	pointer-events: auto;
}

.be_slider-nav--reviews .be_icon {
	display: none;
}

.be_slider-nav--reviews .be_slider-btn::before {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 1px solid #0e1b1b;
	border-bottom: 1px solid #0e1b1b;
	transform: translateX(-2px) rotate(-45deg);
}

.be_slider-nav--reviews .be_slider-btn--prev::before {
	transform: translateX(2px) rotate(135deg);
}

.be_slider-nav--reviews .be_slider-btn:disabled {
	opacity: 0.4;
}

@media (max-width: 1100px) {
	.be_review {
		width: calc((100% - 30px) / 2);
	}
}

.be_reviews-btn {
	display: flex;
	width: fit-content;
	margin: 0 auto;
}

/* FAQ (44:2563) */
.be_faq-section {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	background: var(--be-cream);
}

.be_faq-aside {
	display: flex;
	flex: 0 0 233px;
	flex-direction: column;
	gap: 40px;
}

.be_faq-aside .be_sec-title {
	margin: 0;
}

.be_faq-sketch {
	position: relative;
	display: block;
	width: 182px;
	height: 424px;
}

.be_faq-sketch::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 424px;
	height: 182px;
	background: url("../../img/sketch-faq.webp") center / contain no-repeat;
	opacity: 0.1;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.be_faq {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.be_faq-item {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--be-ink);
}

.be_faq-q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	list-style: none;
	cursor: pointer;
}

.be_faq-q::-webkit-details-marker {
	display: none;
}

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

.be_faq-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: var(--be-btn-light);
	box-shadow: 0 2px 8px rgba(73, 54, 58, 0.06);
	transition: background-color var(--be-t-fast) var(--be-ease);
}

/* Figma "Button FAQ" 44:2750: hover = white + mauve circle, open = arrow turned down (smart animate 300ms) */
.be_faq-icon .be_icon {
	width: 20px;
	height: 20px;
	color: var(--be-ink);
	transition: color var(--be-t-fast) var(--be-ease), transform var(--be-t-fast) var(--be-ease);
}

.be_faq-q:hover .be_faq-icon .be_icon,
.be_faq-q:focus-visible .be_faq-icon .be_icon,
.be_faq-item[open]:not(.is-closing) .be_faq-icon .be_icon {
	color: var(--be-mauve);
}

.be_faq-item[open]:not(.is-closing) .be_faq-icon {
	background: var(--be-white);
}

.be_faq-item[open]:not(.is-closing) .be_faq-icon .be_icon {
	transform: rotate(90deg);
}

/* main.js animates the answer's height/opacity when an item opens or closes */
.be_faq-item.is-animating .be_faq-a {
	overflow: hidden;
}

.be_faq-q:hover .be_faq-icon,
.be_faq-q:focus-visible .be_faq-icon {
	background: var(--be-white);
}

.be_faq-a {
	max-width: 1326px;
	margin-top: 32px;
	color: var(--be-faint);
}

/* Contact (44:3397) */
.be_contact {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	background: var(--be-paper);
}

.be_contact-intro {
	display: flex;
	flex: 0 1 449px;
	flex-direction: column;
	gap: 40px;
}

.be_contact-intro .be_sec-title {
	margin: 0;
}

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

.be_contact-sketch {
	display: block;
	width: 100%;
	aspect-ratio: 1587 / 991;
	background: url("../../img/sketch-contact.webp") center / contain no-repeat;
	opacity: 0.2;
}

.be_contact-form {
	flex: 0 1 932px;
	min-width: 0;
}

.be_contact-form-title {
	margin: 0 0 37px;
	font: var(--be-h2);
	color: var(--be-ink);
}

@media (max-width: 1100px) {
	.be_contact {
		flex-direction: column;
	}

	.be_contact-intro,
	.be_contact-form {
		flex-basis: auto;
		width: 100%;
	}

	.be_contact-sketch {
		max-width: 449px;
	}
}

/* Lazy backgrounds: nothing is downloaded before .is-bg-ready (main.js) */
.be_about.be_lazy-bg:not(.is-bg-ready)::before,
.be_faq-sketch.be_lazy-bg:not(.is-bg-ready)::before,
.be_contact-sketch.be_lazy-bg:not(.is-bg-ready) {
	background-image: none;
}


/* Mobile (≤700px) ---------------------------------------------------------- */
@media (max-width: 700px) {
	.be_slider-nav--mobile {
		display: flex;
		margin-top: 20px;
	}

	.be_clinics .be_clinics-track {
		display: flex;
		flex-direction: row;
		gap: 20px;
		overflow-x: auto;
	}

	/* Clinics slider (57:2269) */
	.be_clinic {
		display: flex;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.be_clinic-media {
		display: flex;
		gap: 20px;
	}

	.be_clinic-photo {
		height: 237px;
	}

	.be_clinic--imgs-2 .be_clinic-photo:first-child {
		flex: 0 0 220px;
	}

	.be_clinic--imgs-2 .be_clinic-photo:last-child {
		flex: 1 1 auto;
	}

	.be_clinic--imgs-1 .be_clinic-photo {
		flex: 1 1 auto;
	}

	.be_clinic--imgs-1 .be_clinic-body {
		order: 0;
	}

	.be_clinic-body {
		gap: 32px;
	}

	.be_clinic-title {
		font: 500 32px/40px var(--be-font);
	}

	.be_maps {
		gap: 20px;
		margin-top: 20px;
	}

	.be_map {
		aspect-ratio: 335 / 300;
	}

	/* Reviews (57:2478) */
	.be_reviews {
		align-items: stretch;
		gap: 20px;
	}

	.be_reviews .be_sec-title {
		text-align: left;
	}

	.be_review {
		width: 100%;
		gap: 16px;
	}

	.be_review-name {
		font-size: 23px;
	}

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

	.be_slider-nav--reviews {
		position: static;
		justify-content: flex-start;
		gap: 6px;
		margin-top: 20px;
		transform: none;
	}

	.be_slider-nav--reviews .be_slider-btn {
		width: 32px;
		height: 32px;
	}

	.be_reviews-btn {
		margin: 0;
	}

	/* FAQ (57:2599) */
	.be_faq-section {
		flex-direction: column;
		gap: 20px;
	}

	.be_faq-aside {
		flex-basis: auto;
	}

	.be_faq-sketch {
		display: none;
	}

	.be_faq {
		gap: 20px;
		width: 100%;
	}

	.be_faq-item {
		padding-bottom: 20px;
	}

	.be_faq-q {
		gap: 20px;
	}

	.be_faq-icon {
		width: 55.636px;
		height: 36px;
		padding: 0;
	}

	.be_faq-a {
		margin-top: 20px;
	}

	/* Contact (57:2826) */
	.be_contact {
		gap: 20px;
	}

	.be_contact-intro {
		gap: 20px;
	}

	.be_contact-form-title {
		margin-bottom: 12px;
		font: 400 24px/30px var(--be-font);
	}
}

/* Laptop fix (Oct 2026): hide the awards photo so the doctor portrait fits on screen */
@media (min-width: 1101px) and (max-width: 1600px) {
	.be_about-photo--wide,
	.be_about-photo--wide + .be_about-line {
		display: none;
	}
}

/* Laptop fix (Oct 2026): single-photo clinic (Volos) text column sizes to its title, so the title never slides under the photo */
@media (min-width: 1101px) {
	.be_clinic--imgs-1 {
		grid-template-columns: max-content minmax(0, 1fr);
	}

	.be_clinic--imgs-1 .be_clinic-title {
		white-space: nowrap;
	}
}

/* Fix (Oct 2026): Athens clinic shows one photo only (second hidden), layout mirrors Volos */
.be_clinic--imgs-2 .be_clinic-photo + .be_clinic-photo {
	display: none;
}

@media (min-width: 1101px) {
	.be_clinic--imgs-2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	}
}

@media (min-width: 701px) and (max-width: 1100px) {
	.be_clinic--imgs-2 .be_clinic-photo {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.be_clinic--imgs-2 .be_clinic-photo:first-child {
		flex: 1 1 auto;
	}
}