/**
 * CDC responsive layer: tablet and phone layouts loaded after every other
 * child-theme stylesheet. Keeps long sections compact on small screens.
 */

html,
body {
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
}

/* Google Fonts other than Cairo are no longer loaded; keep everything in Cairo. */
body,
.elementor-location-header,
.wcf-nav-menu a,
.cdc-home h1,
.cdc-home h2,
.cdc-home h3 {
	font-family: Cairo, Arial, sans-serif;
}

/*
 * Mobile header menu: the theme's slide-in submenu opens outside the RTL
 * panel, so show child links inline under their parent instead.
 */
.wcf__nav-menu.mobile-menu-active .sub-menu {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	margin: 0 !important;
	padding-inline-start: 16px !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

.wcf__nav-menu.mobile-menu-active .menu-item-has-children > a .wcf-submenu-indicator,
.wcf__nav-menu.mobile-menu-active .sub-menu li:has(> .nav-back-link) {
	display: none !important;
}

.wcf__nav-menu.mobile-menu-active .sub-menu a {
	font-size: 14px !important;
	opacity: 0.75;
}

/* Homepage hero: Cairo headline, badge kicker, balanced actions. */
.cdc-home .cdc-hero h1 {
	font-family: Cairo, Arial, sans-serif;
	font-size: clamp(40px, 5.4vw, 80px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: 0;
}

/* The img height attribute (1024) otherwise beats aspect-ratio on desktop. */
.cdc-home .cdc-hero__visual img {
	height: auto;
	max-height: min(76vh, 640px);
}

.cdc-home .cdc-hero__accent {
	color: var(--cdc-accent);
}

.cdc-home .cdc-hero .cdc-kicker {
	padding: 7px 16px;
	border: 1px solid rgba(187, 134, 47, 0.28);
	border-radius: 999px;
	background: rgba(187, 134, 47, 0.08);
	font-size: 13px;
}

.cdc-home .cdc-hero__content > p {
	max-width: 560px;
	margin-block-start: 22px;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.9;
}

.cdc-home .cdc-hero .cdc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 32px;
}

.cdc-home .cdc-hero .cdc-button {
	width: auto;
	min-width: 170px;
	min-height: 54px;
	padding-inline: 30px;
	justify-content: center;
}

.cdc-home .cdc-hero .cdc-button--primary {
	box-shadow: 0 12px 28px rgba(16, 16, 16, 0.18);
}

/* Tablet: single column, content first, image capped. */
@media (max-width: 991px) {
	.cdc-home .cdc-hero {
		min-height: 0;
		padding-block: 110px 56px;
	}

	.cdc-home .cdc-hero__content {
		max-width: 640px;
	}

	.cdc-home .cdc-hero h1 {
		font-size: clamp(48px, 7.4vw, 66px);
	}

	.cdc-home .cdc-hero__visual {
		width: 100%;
		max-width: 620px;
		margin-inline: auto;
	}
}

/* Phone: buttons share one row, tighter rhythm. */
@media (max-width: 767px) {
	.cdc-home .cdc-hero {
		padding-block: 92px 44px;
	}

	.cdc-home .cdc-hero .cdc-kicker {
		font-size: 12px;
		padding: 6px 14px;
	}

	.cdc-home .cdc-hero h1 {
		margin-block-start: 16px;
		font-size: clamp(36px, 10.5vw, 52px);
		line-height: 1.25;
	}

	.cdc-home .cdc-hero__content > p {
		margin-block-start: 16px;
		font-size: 15.5px;
		line-height: 1.85;
	}

	.cdc-home .cdc-hero .cdc-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-block-start: 26px;
	}

	.cdc-home .cdc-hero .cdc-button {
		width: 100%;
		min-width: 0;
		min-height: 50px;
		padding-inline: 12px;
		font-size: 14px;
	}

	.cdc-home .cdc-hero__markets {
		margin-block-start: 26px;
		padding: 14px 0;
		border-block: 1px solid var(--cdc-line);
	}
}

@media (max-width: 340px) {
	.cdc-home .cdc-hero .cdc-actions {
		grid-template-columns: 1fr;
	}
}

/* Portfolio: ten works, two per category, shown as two rows of five. */
@media (min-width: 992px) {
	.cdc-home .cdc-portfolio__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

/* Small laptops and large tablets. */
@media (max-width: 1180px) {
	.cdc-companies__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Tablets (portrait and small landscape). */
@media (min-width: 768px) and (max-width: 991px) {
	.cdc-home .cdc-hero__grid,
	.cdc-home .cdc-page-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cdc-hero__visual,
	.cdc-page-hero__visual {
		max-width: 640px;
		margin-inline: auto;
	}

	.cdc-services__grid,
	.cdc-portfolio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdc-stats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cdc-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones. */
@media (max-width: 767px) {
	.cdc-section {
		padding-block: 56px;
	}

	.cdc-hero {
		padding-block: 96px 48px;
	}

	.cdc-home .cdc-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Services: swipeable row instead of six full-height cards. */
	.cdc-services__grid {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 82%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 15px;
		padding-block-end: 10px;
		margin-inline: -15px;
		padding-inline: 15px;
		scrollbar-width: none;
	}

	.cdc-services__grid::-webkit-scrollbar,
	.cdc-cities__grid::-webkit-scrollbar {
		display: none;
	}

	.cdc-services__grid > .cdc-service-card {
		scroll-snap-align: start;
	}

	.cdc-service-card__media img {
		aspect-ratio: 16 / 10;
		height: auto;
		object-fit: cover;
	}

	.cdc-service-card__body {
		padding: 20px;
	}

	/* Group companies and portfolio: two compact columns. */
	.cdc-companies__grid,
	.cdc-portfolio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.cdc-company-card {
		min-height: 150px;
		padding: 16px 12px;
	}

	.cdc-company-card img {
		max-height: 64px;
		width: auto;
		object-fit: contain;
	}

	.cdc-company-card h3 {
		font-size: 13px;
		line-height: 1.5;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.cdc-project__media {
		aspect-ratio: 1 / 1;
	}

	.cdc-project__info {
		padding-block: 12px 4px;
	}

	.cdc-project__info h3 {
		font-size: 15px;
		line-height: 1.4;
	}

	.cdc-project__info p,
	.cdc-project__tag {
		font-size: 12px;
	}

	.cdc-project__media > span {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}

	/* Stats: two per row. */
	.cdc-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.cdc-stat {
		min-height: 118px;
		padding: 18px 14px;
	}

	.cdc-stat strong {
		font-size: 34px;
	}

	.cdc-stat span {
		font-size: 13px;
	}

	/* Cities: swipeable row. */
	.cdc-cities__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 78%;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: -15px;
		padding-inline: 15px;
		scrollbar-width: none;
	}

	.cdc-city-card {
		min-height: 260px;
		scroll-snap-align: start;
	}

	.cdc-testimonial blockquote {
		font-size: 21px;
		line-height: 1.7;
	}

	/* Inner pages. */
	.cdc-page-hero {
		padding-block: 96px 40px;
	}

	.cdc-arm-grid,
	.cdc-sector-grid,
	.cdc-case-grid,
	.cdc-event-layout__grid,
	.cdc-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.cdc-arm,
	.cdc-sector-grid article,
	.cdc-case-grid article,
	.cdc-event-layout__grid > div {
		min-height: 0;
		padding: 18px 14px;
	}

	.cdc-arm h3,
	.cdc-sector-grid h3,
	.cdc-case-grid h3,
	.cdc-event-layout__grid h3 {
		font-size: 16px;
		line-height: 1.45;
	}

	.cdc-arm p,
	.cdc-sector-grid p,
	.cdc-case-grid p,
	.cdc-event-layout__grid p {
		font-size: 13px;
		line-height: 1.65;
	}

	.cdc-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdc-about-ecosystem__grid,
	.cdc-about-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Footer: brand and contact full width, link lists side by side. */
	.cdc-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 20px;
	}

	.cdc-site-footer__brand,
	.cdc-site-footer__contact {
		grid-column: 1 / -1;
	}

	.cdc-site-footer__column h2 {
		font-size: 17px;
	}

	.cdc-site-footer__column a {
		font-size: 14px;
	}
}

/* Very small phones. */
@media (max-width: 359px) {
	.cdc-hero__markets li {
		font-size: 10px;
		padding-inline: 4px;
	}

	.cdc-arm-grid,
	.cdc-sector-grid,
	.cdc-case-grid,
	.cdc-event-layout__grid,
	.cdc-news-grid {
		grid-template-columns: 1fr;
	}
}