/* =========================================================
   CEO BUSINESS CARD — page styles (slug ceo-business-card-2)
   Values taken from the live Elementor CSS (page id 54919).
   Markup: src/seed/fix-ceo-business-card.ts
   ========================================================= */

body.ceo-card-page { background: #000 !important; }
.ceo-card { overflow: hidden; }

/* full-bleed photo with a 50% black overlay */
.ceo-hero, .ceo-band {
	position: relative; min-height: 886px;
	background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ceo-hero::before, .ceo-band::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); pointer-events: none; }
.ceo-hero > .container, .ceo-band > .container { position: relative; z-index: 1; }

/* ---------- 1. Welcome ---------- */
.ceo-hero { min-height: 795px; }
.ceo-hero > .container { padding-top: 221px; }
.ceo-hero__title { font-family: "Lucky Beauty", serif; font-size: 75px; font-weight: 300; line-height: 45px; color: #fff; margin: 0; }

/* ---------- 2/3. regions: framed photo + name and map button over its edge ---------- */
.ceo-band { display: flex; flex-direction: column; justify-content: center; }
.ceo-band > .container { display: flex; flex-direction: column; gap: 24px; }
/* the Central region rises into the Welcome hero, as on WordPress (absolute, top -93px -282px + its row) */
.ceo-band--lift { justify-content: flex-end; padding-bottom: 80px; }
.ceo-band--lift > .container > .ceo-region:first-child {
	position: absolute; top: -800px; left: 10px; right: 10px; /* offset from the Eastern row: 495px above the section top */
}

.ceo-region { position: relative; min-height: 499px; display: flex; align-items: center; }
.ceo-region__img {
	position: absolute; top: 0; bottom: 0; aspect-ratio: 1326 / 908; max-width: 100%;
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ceo-region--right .ceo-region__img { right: 0; }
.ceo-region--left .ceo-region__img { left: 0; }
.ceo-region__body { position: relative; z-index: 1; }
.ceo-region--right .ceo-region__body { padding-left: 200px; }
.ceo-region--left .ceo-region__body { padding-left: 650px; }
.ceo-band:not(.ceo-band--lift) .ceo-region--right .ceo-region__body { padding-left: 170px; }

.ceo-region__title { font-family: "Lucky Beauty", serif; font-size: 50px; font-weight: 300; line-height: 45px; color: #fff; margin: 0 0 20px; }

.ceo-btn {
	display: inline-block; padding: 10px 50px; font-family: "Lucky Beauty", serif; font-size: 14px; font-weight: 500; line-height: 1.5;
	color: #fff; background: #85553A; border: 1px solid #85553A; border-radius: 0; transition: all .3s;
}
.ceo-btn:hover, .ceo-btn:focus { background: transparent; border-color: #fff; color: #fff; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
	.ceo-region--left .ceo-region__body { padding-left: 52%; }
	.ceo-region--right .ceo-region__body, .ceo-band:not(.ceo-band--lift) .ceo-region--right .ceo-region__body { padding-left: 40px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	.ceo-hero, .ceo-band { min-height: 700px; }
	.ceo-hero > .container { padding-top: 190px; padding-left: 20px; }
	.ceo-hero__title { font-size: 35px; }
	.ceo-hero { min-height: 700px; }
	.ceo-band--lift { padding-bottom: 0; }
	.ceo-band--lift > .container > .ceo-region:first-child { position: relative; top: auto; left: auto; right: auto; margin-top: -300px; }
	.ceo-region { min-height: 0; flex-direction: column; align-items: flex-start; padding: 20px 0; }
	.ceo-region__img { position: relative; top: auto; bottom: auto; width: 100%; left: 0; right: 0; }
	.ceo-region__body, .ceo-region--left .ceo-region__body, .ceo-region--right .ceo-region__body,
	.ceo-band:not(.ceo-band--lift) .ceo-region--right .ceo-region__body { padding: 0 20px; margin-top: -70px; }
	.ceo-region__title { font-size: 35px; }
}

/* Arabic mirrors the sides */
.rtl .ceo-region--right .ceo-region__img { right: auto; left: 0; }
.rtl .ceo-region--left .ceo-region__img { left: auto; right: 0; }