/*!
 * Baly Site System — /contact page.
 * Depends on bsy-chrome.css (which already includes bsy-about-hero
 * helpers reused by contact-hero where convenient).
 */

/* ── Hero ───────────────────────────────────────────────────── */
/* ContactMosaic.jsx — design composition.
 *
 * Design canvas dimensions (1184×280):
 *   padding 34/44 · gap 28 · grid 1.4fr/1fr · alignItems center
 *   pill 12px · H1 46/0.98/950 · lede 15/1.65
 *   promise icon 56×56 (clock 28) · promise value 28/950 · promise eye/s 11
 *
 * Strategy: container queries. Every inner dimension is sized as a
 * percentage of the BOX's own width (cqw), not viewport width. So the
 * composition stays identical whether the host theme renders the hero
 * at 1184px or 1082px — only the absolute pixel sizes scale, the
 * proportions are pixel-perfect to the design.
 *
 * The aspect-ratio locks box height to the design's 4.23:1, so height
 * scales with width too. Container width 1184 → height 280; 1082 → 256.
 *
 * Container queries (cqw) supported in Chrome 105+, Safari 16+,
 * Firefox 110+ — well-supported across modern browsers. */
.bsy-contact-hero {
	/* container-type lets descendant rules use cqw; the hero's OWN
	 * cqw declarations would resolve against the viewport (not the
	 * container), so we use static fluid values for padding/gap. */
	container-type: inline-size;
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(160deg, var(--bsy-brand-active) 0%, #1B4CFF 55%, #355FFF 100%);
	color: #fff; direction: rtl;
	padding: clamp(20px, 2.6vw, 34px) clamp(24px, 3.4vw, 44px);
	gap: clamp(16px, 2.2vw, 28px);
	display: grid; grid-template-columns: 1.4fr 1fr;
	align-items: center;
	aspect-ratio: 1184 / 280;
	min-height: 0 !important;
	max-height: 320px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 28px 60px -24px rgba(0,30,80,.45);
}
.bsy-contact-hero__copy {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	min-width: 0; min-height: 0;
	overflow: hidden;
}

/* H1 — locked to 3.88cqw so at container width 1184 it's 46px,
 * at 1082 it's 42px (everything stays proportional). margins, line-height
 * and weight all !important — theme h1 rules add 0.67em margin and
 * trigger reflows that bust the locked aspect-ratio. */
.bsy-page--contact .bsy-contact-hero__title {
	/* fallback */
	font-size: 42px !important;
	margin: 14px 0 12px !important;
	/* container-query override */
	font-size: max(28px, 3.88cqw) !important;
	margin: max(8px, 1.18cqw) 0 max(6px, 1.01cqw) !important;
	font-family: var(--bsy-font) !important;
	font-weight: 950 !important;
	line-height: 0.98 !important;
	color: #fff !important;
}
.bsy-contact-hero__accent { color: var(--bsy-accent-gold) !important; }
.bsy-page--contact .bsy-contact-hero__lede {
	margin: 0 !important;
	font-size: 14px !important;
	max-width: 460px;
	font-size: max(12px, 1.27cqw) !important;
	max-width: max(360px, 42.23cqw);
	line-height: 1.55 !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,.88) !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Promise card — design: padding 18/20, icon 56×56, value 28px/950. */
.bsy-contact-hero__promise {
	position: relative; z-index: 2;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
	/* fallback */
	border-radius: 16px;
	padding: 16px 18px;
	gap: 14px;
	/* container-query override */
	border-radius: max(12px, 1.52cqw);
	padding: max(12px, 1.52cqw) max(14px, 1.69cqw);
	gap: max(12px, 1.35cqw);
	display: flex; align-items: center;
	backdrop-filter: blur(6px); direction: rtl;
}
.bsy-contact-hero__promise-ic {
	width: 50px; height: 50px;
	border-radius: 13px;
	width: max(44px, 4.73cqw); height: max(44px, 4.73cqw);
	border-radius: max(11px, 1.18cqw);
	background: rgba(255,225,94,.18); color: var(--bsy-accent-gold);
	display: grid; place-items: center; flex: none;
	border: 1px solid rgba(255,225,94,.30);
}
.bsy-contact-hero__promise-ic svg {
	width: 24px !important; height: 24px !important;
	width: max(22px, 2.36cqw) !important;
	height: max(22px, 2.36cqw) !important;
}
.bsy-page--contact .bsy-contact-hero__promise-eye {
	font-size: 11px !important;
	font-size: max(10px, 0.93cqw) !important;
	font-weight: 700 !important;
	color: rgba(255,255,255,.80) !important;
	letter-spacing: 0.02em;
	margin: 0 !important; line-height: 1.2 !important;
}
.bsy-page--contact .bsy-contact-hero__promise-v {
	font-family: var(--bsy-font) !important;
	font-weight: 950 !important;
	font-size: 24px !important;
	margin: 4px 0 0 !important;
	font-size: max(20px, 2.36cqw) !important;
	margin: max(3px, 0.34cqw) 0 0 !important;
	line-height: 1 !important;
	color: #fff !important;
}
.bsy-page--contact .bsy-contact-hero__promise-s {
	font-size: 11px !important;
	margin: 4px 0 0 !important;
	font-size: max(10px, 0.93cqw) !important;
	margin: max(3px, 0.34cqw) 0 0 !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,.78) !important;
	line-height: 1.3 !important;
}

/* Pin pill to design defaults inside the contact hero. */
.bsy-page--contact .bsy-contact-hero .bsy-pill {
	font-size: 12px !important;
	padding: 6px 12px !important;
	font-size: max(11px, 1.01cqw) !important;
	padding: max(4px, 0.51cqw) max(10px, 1.01cqw) !important;
}

/* Below 768px the hero stacks 1-column — container queries are turned
 * off (aspect-ratio: auto), content goes back to absolute pixel sizes
 * with reasonable mobile values. */
@media (max-width: 768px) {
	.bsy-contact-hero {
		container-type: normal;
		padding: 20px 18px 18px;
		border-radius: var(--bsy-radius-xl);
		grid-template-columns: 1fr; gap: 16px;
		aspect-ratio: auto;
		min-height: 0 !important;
		max-height: none;
		overflow: visible;
	}
	.bsy-page--contact .bsy-contact-hero__title { font-size: 28px !important; margin: 12px 0 8px !important; }
	.bsy-page--contact .bsy-contact-hero__lede { font-size: 12.5px !important; max-width: none; -webkit-line-clamp: unset; line-clamp: unset; }
	.bsy-contact-hero__promise { padding: 12px 14px; gap: 12px; border-radius: 14px; }
	.bsy-contact-hero__promise-ic { width: 44px !important; height: 44px !important; border-radius: 12px; }
	.bsy-contact-hero__promise-ic svg { width: 22px !important; height: 22px !important; }
	.bsy-page--contact .bsy-contact-hero__promise-eye { font-size: 10.5px !important; }
	.bsy-page--contact .bsy-contact-hero__promise-v { font-size: 22px !important; }
	.bsy-page--contact .bsy-contact-hero__promise-s { font-size: 10.5px !important; }
	.bsy-page--contact .bsy-contact-hero .bsy-pill { font-size: 11px !important; padding: 4px 9px !important; }
}

@media (max-width: 768px) {
	.bsy-contact-hero { padding: 22px 18px 18px; grid-template-columns: 1fr; gap: 16px; min-height: 0; border-radius: var(--bsy-radius-xl); }
	.bsy-contact-hero__title { font-size: 30px; }
	.bsy-contact-hero__promise-ic { width: 44px; height: 44px; }
	.bsy-contact-hero__promise-v { font-size: 22px; }
}

/* ── Info + Map two-column ─────────────────────────────────── */
.bsy-contact-main { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
.bsy-contact-info { display: flex; flex-direction: column; gap: 16px; }
.bsy-contact-info__title { margin: 12px 0 6px; font-family: var(--bsy-font); font-weight: 900; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.15; color: var(--bsy-fg-primary); }
.bsy-contact-info__sub { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--bsy-grey-700); line-height: 1.65; }
.bsy-contact-info__list { display: flex; flex-direction: column; gap: 8px; }
.bsy-contact-info__row {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px;
	background: var(--bsy-grey-100);
	border: 1px solid transparent;
	border-radius: 14px;
}
.bsy-contact-info__row.is-active { background: var(--bsy-brand-lighter); border-color: rgba(0,67,255,.18); }
.bsy-contact-info__ic {
	width: 38px; height: 38px; border-radius: 11px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center; flex: none;
	border: 1px solid var(--bsy-grey-200);
}
.bsy-contact-info__row.is-active .bsy-contact-info__ic { background: var(--bsy-brand); color: #fff; border-color: transparent; }
.bsy-contact-info__txt { flex: 1; min-width: 0; }
.bsy-contact-info__l { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--bsy-grey-600); text-transform: uppercase; }
.bsy-contact-info__v { display: block; font-size: 15px; font-weight: 900; color: var(--bsy-fg-primary); margin-top: 3px; }
/* Phone number forced into exact left-to-right order so the Arabic-Indic
   digit groups aren't reordered inside the RTL column. bidi-override (not
   just isolate) is needed because each space-separated group is otherwise
   re-laid-out by the bidi algorithm. */
.bsy-contact-info__v[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; text-align: right; width: 100%; }
.bsy-contact-info__v--link { text-decoration: none; color: var(--bsy-fg-primary); transition: color .15s ease; }
.bsy-contact-info__v--link:hover { color: var(--bsy-brand); }
.bsy-contact-info__s { font-size: 11.5px; font-weight: 500; color: var(--bsy-grey-700); margin-top: 4px; line-height: 1.5; }

/* Map placeholder */
.bsy-contact-map {
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-2xl);
	background: linear-gradient(160deg, #E6ECFF 0%, #F5F5F7 100%);
	border: 1px solid var(--bsy-grey-100);
	min-height: 320px;
	box-shadow: var(--bsy-shadow-card);
}
.bsy-contact-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsy-contact-map__compass {
	position: absolute; inset-inline-end: 12px; top: 12px;
	width: 28px; height: 28px; border-radius: 999px;
	background: #fff; display: grid; place-items: center;
	box-shadow: 0 4px 12px rgba(0,30,80,.15);
	font-size: 10px; font-weight: 900; color: var(--bsy-brand);
 direction: ltr;
}
.bsy-contact-map__pin {
	position: absolute; left: 38%; top: 54%;
	transform: translate(-50%, -100%);
	display: flex; flex-direction: column; align-items: center;
}
.bsy-contact-map__card {
	margin-bottom: 6px; padding: 8px 12px; border-radius: 12px; background: #fff;
	box-shadow: 0 12px 24px -8px rgba(0,30,80,.30), 0 0 0 1px var(--bsy-grey-100);
	direction: rtl; white-space: nowrap;
}
.bsy-contact-map__card-t { font-size: 11px; font-weight: 900; color: var(--bsy-fg-primary); }
.bsy-contact-map__card-s { font-size: 10px; font-weight: 600; color: var(--bsy-grey-600); margin-top: 2px; }
.bsy-contact-map__pulse {
	margin-top: -6px;
	width: 36px; height: 10px; border-radius: 999px;
	background: radial-gradient(ellipse at center, rgba(0,67,255,.40), transparent 70%);
}
.bsy-contact-map__foot {
	position: absolute; inset-inline: 12px; bottom: 12px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px;
	background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
	border-radius: 12px;
	border: 1px solid var(--bsy-grey-100);
}
.bsy-contact-map__foot-eye { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--bsy-grey-600); text-transform: uppercase; }
.bsy-contact-map__foot-v { font-size: 11.5px; font-weight: 700; color: var(--bsy-fg-primary); margin-top: 2px; }
.bsy-contact-map__open,
.bsy-page--contact .bsy-contact-map__open {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 11px; border-radius: 999px;
	background: var(--bsy-brand); color: #fff;
	font-size: 11px; font-weight: 800; text-decoration: none;
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-contact-map__open:hover,
.bsy-page--contact .bsy-contact-map__open:hover { background: var(--bsy-brand-hover); color: #fff; }
.bsy-contact-map__open:visited,
.bsy-page--contact .bsy-contact-map__open:visited { color: #fff; }

@media (max-width: 900px) {
	.bsy-contact-main { grid-template-columns: 1fr; gap: 12px; }
	.bsy-contact-map { min-height: 280px; }
}

/* ── Other Ways ────────────────────────────────────────────── */
.bsy-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bsy-ways__c {
	background: var(--bsy-grey-100);
	border: 1px solid transparent;
	border-radius: 16px; padding: 14px;
	display: flex; flex-direction: column; gap: 6px; direction: rtl;
	min-height: 0;
}
.bsy-ways__c.is-active { background: var(--bsy-brand-lighter); border-color: rgba(0,67,255,.18); }
.bsy-ways__ic {
	width: 42px; height: 42px; border-radius: 12px;
	background: #fff; color: var(--bsy-brand);
	display: grid; place-items: center;
	border: 1px solid var(--bsy-grey-200);
}
.bsy-ways__c.is-active .bsy-ways__ic { background: var(--bsy-brand); color: #fff; border-color: transparent; }
.bsy-ways__eye { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--bsy-grey-600); text-transform: uppercase; margin-top: 4px; }
.bsy-ways__t { font-size: 16px; font-weight: 900; color: var(--bsy-fg-primary); }
.bsy-ways__s { font-size: 12.5px; font-weight: 500; color: var(--bsy-grey-700); line-height: 1.6; }
/* Higher specificity so the theme's anchor color rules don't win. */
.bsy-page--contact .bsy-ways__cta,
.bsy-ways__cta {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	background: #fff; color: var(--bsy-brand);
	border: 1px solid rgba(0,67,255,.20);
	font-size: 12.5px; font-weight: 800; text-decoration: none;
	transition: background var(--bsy-duration-fast) var(--bsy-ease-out), color var(--bsy-duration-fast) var(--bsy-ease-out);
}
.bsy-page--contact .bsy-ways__cta:visited,
.bsy-ways__cta:visited { color: var(--bsy-brand); }
.bsy-page--contact .bsy-ways__cta:hover,
.bsy-ways__cta:hover { background: var(--bsy-brand); color: #fff; }
@media (max-width: 768px) {
	.bsy-ways { grid-template-columns: 1fr; gap: 10px; }
	.bsy-ways__c { min-height: 0; padding: 14px; }
}

/* ── Social row ────────────────────────────────────────────── */
.bsy-social {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap;
}
.bsy-social__copy { flex: 1; min-width: 0; }
.bsy-social__eye { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--bsy-grey-600); text-transform: uppercase; }
.bsy-social__t { margin: 6px 0 0; font-family: var(--bsy-font); font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; color: var(--bsy-fg-primary); }
.bsy-social__row { display: flex; align-items: center; gap: 12px; direction: ltr; }
.bsy-social__a {
	width: 48px; height: 48px; border-radius: 999px;
	border: 1px solid var(--bsy-grey-200);
	background: #fff; color: var(--bsy-black);
	display: grid; place-items: center; text-decoration: none;
	transition: all .15s var(--bsy-ease-out);
}
.bsy-social__a:hover { background: var(--bsy-brand); color: #fff; border-color: var(--bsy-brand); }