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

.ceo-classic { padding: 90px 0 100px; overflow: hidden; }

/* a row: photo and text side by side (Elementor: min-height 317px, gap 40px, margin-top 50px) */
.ceoc-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; min-height: 317px; }
.ceoc-row + .ceoc-row { margin-top: 50px; }

/* the photo is the map link; the white arrow sits in its bottom corner */
.ceoc-photo {
	position: relative; display: flex; align-items: flex-end; min-height: 323px; padding: 20px;
	background-color: #2C2C2C; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ceoc-photo svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; transition: transform .3s; }
.rtl .ceoc-photo svg { transform: scaleX(-1); }
a.ceoc-photo:hover svg { transform: translate(3px, -3px); }
.rtl a.ceoc-photo:hover svg { transform: scaleX(-1) translate(3px, -3px); }

.ceoc-text { padding-top: 130px; }
.ceoc-title { margin: 0; font-family: 'Lucky Beauty', serif; font-size: 46px; font-weight: 500; line-height: 45px; color: #020202; }
/* Welcome sits level with the middle of the aerial photo */
.ceoc-row--welcome .ceoc-text { display: flex; align-items: center; padding-top: 0; }
.ceoc-row--welcome .ceoc-title { font-size: 80px; line-height: 80px; }
.rtl .ceoc-title { font-family: var(--font-head); font-weight: 300; line-height: 1.3; }

@media (max-width: 767px) {
	.ceo-classic { padding: 60px 0 60px; }
	.ceoc-row--welcome .ceoc-text { display: block; }
	.ceoc-row { grid-template-columns: 1fr; row-gap: 20px; min-height: 0; }
	.ceoc-row + .ceoc-row { margin-top: 50px; }
	/* on phones every row reads title first, then its photo (Elementor's "order start" on the text column) */
	.ceoc-text { order: -1; padding-top: 0; padding-inline-start: 8px; }
	.ceoc-row--welcome .ceoc-text { padding-inline-start: 0; }
	.ceoc-photo { min-height: 323px; }
	.ceoc-title, .ceoc-row--welcome .ceoc-title { font-size: 25px; line-height: 45px; }
}