/* Tour Morocco: photo heroes on inner pages (Tailor-Make, Community Impact, FAQs).
   Slider styles come from tm-home.css; this file sizes the shorter variant. */

.tm-page-hero-wrap {
	background: transparent;
	padding: 16px 16px 0;
}
.tm-page-hero {
	height: min(62vh, 560px);
	min-height: 440px;
}
.tm-page-hero__content { gap: 0; }
.tm-page-hero .tm-hero__copy { max-width: 760px; gap: 16px; }
.tm-page-hero__title { font-size: clamp(42px, 5.6vw, 80px) !important; }
.tm-page-hero__sub {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	color: rgba(255, 248, 238, .9);
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	max-width: 620px;
}
.tm-page-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tm-ivory) !important;
	font-weight: 600;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	text-decoration: none !important;
}
.tm-page-hero__link .tm-i { width: 16px; height: 16px; transition: transform var(--tm-ease); }
.tm-page-hero__link:hover .tm-i { transform: translateX(3px); }

/* The page's text sits bottom-left, so lean the shade that way. */
.tm-page-hero .tm-hero__shade {
	background:
		linear-gradient(90deg, rgba(20, 14, 10, .6) 0%, rgba(20, 14, 10, .2) 50%, rgba(20, 14, 10, 0) 75%),
		linear-gradient(180deg, rgba(20, 14, 10, .1) 0%, rgba(20, 14, 10, .15) 45%, rgba(20, 14, 10, .7) 100%);
}
/* Black-and-white community photos are brighter overall; deepen the wash so white text keeps contrast. */
.tm-page-hero-wrap--mono .tm-hero__shade {
	background:
		linear-gradient(90deg, rgba(14, 12, 10, .72) 0%, rgba(14, 12, 10, .35) 55%, rgba(14, 12, 10, .1) 80%),
		linear-gradient(180deg, rgba(14, 12, 10, .1) 0%, rgba(14, 12, 10, .75) 100%);
}

/* Old heroes: an Elementor block with a dead placeholder background (Tailor-Make)
   and an empty gradient box (Community Impact). The new hero replaces both. */
body.page-id-10282 .elementor-10282 > .elementor-element-5604e6ce,
body.page-id-10163 .elementor-10163 > .elementor-element-7ecdc7c4,
body.page-id-10163 .elementor-10163 > .elementor-element-253d37b3 {
	display: none !important;
}

@media (max-width: 700px) {
	.tm-page-hero-wrap { padding: 10px 10px 0; }
	.tm-page-hero { height: auto; min-height: 420px; }
	.tm-page-hero .tm-hero__content { position: absolute; padding-top: 0; }
	.tm-page-hero .tm-slider-ui__caption { display: none; }
}

/* Community Impact's first content card was built to overlap the old banner; give it room. */
body.page-id-10163 .tm-page-hero-wrap { margin-bottom: 32px; }

/* ---------------------------------------------------------------- Community Impact: ImpactBridge MENA
   Body of page 10163 ([tm_impactbridge] → tm-home/impactbridge.php). Deep teal + amber come from the IB logo. */
.tm-ib {
	--tm-ib-teal: #0D3A41;
	--tm-ib-teal-2: #14505A;
	font-family: var(--tm-sans-font);
	color: var(--tm-ink-2);
	font-size: 17px;
	line-height: 1.65;
}
.tm-ib__wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tm-ib__section { padding: 72px 24px 0; }
.tm-ib h2 {
	font-family: var(--tm-serif-font) !important;
	color: var(--tm-ink);
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.08;
	font-weight: 600;
	margin: 6px 0 18px;
}
.tm-ib h3 { font-family: var(--tm-sans-font) !important; font-size: 18px; font-weight: 700; color: var(--tm-ink); margin: 0 0 6px; }
.tm-ib p { margin: 0 0 14px; }
.tm-ib .tm-eyebrow { margin: 0; }
.tm-ib__lede { max-width: 720px; font-size: 18px; }
.tm-ib__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px !important; }
.tm-ib__actions .tm-btn { text-decoration: none !important; }

.tm-ib__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	padding-top: 24px;
	padding-bottom: 8px;
}
.tm-ib__logo {
	display: block;
	background: var(--tm-ib-teal);
	border-radius: var(--tm-r-lg);
	padding: 28px;
	box-shadow: 0 18px 40px -24px rgba(13, 58, 65, .55);
}
.tm-ib__logo img { display: block; width: 100%; height: auto; }

.tm-ib__band { background: var(--tm-cream); border-block: 1px solid var(--tm-line); padding: 64px 0; margin-top: 72px; }
.tm-ib__band--dark { background: var(--tm-ib-teal); border: 0; color: rgba(255, 248, 238, .86); }
.tm-ib__band--dark h2 { color: var(--tm-ivory); }

.tm-ib__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.tm-ib__stat { background: #fff; border: 1px solid var(--tm-line); border-radius: var(--tm-r-card); padding: 24px 24px 10px; }
.tm-ib__stat b { display: block; font-family: var(--tm-serif-font); font-size: 52px; line-height: 1; color: var(--tm-terracotta); font-weight: 700; }
.tm-ib__stat span { display: block; margin: 10px 0 6px; font-weight: 700; color: var(--tm-ink); font-size: 15px; }
.tm-ib__stat p { font-size: 15px; color: var(--tm-muted-2); }
.tm-ib__stats--plain .tm-ib__stat { background: var(--tm-cream); padding-bottom: 20px; }
.tm-ib__stat b + p { margin-top: 12px; }
.tm-ib__src { display: block; margin: 0 0 14px; font-size: 12px; color: var(--tm-muted-2); }
.tm-ib__member { margin-top: 16px; font-size: 15px; color: var(--tm-muted-2); }

.tm-ib__steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.tm-ib__steps li { border-top: 2px solid var(--tm-ib-teal); padding-top: 20px; }
.tm-ib__num {
	display: inline-grid; place-items: center;
	width: 36px; height: 36px; margin-bottom: 14px;
	border-radius: 50%;
	background: var(--tm-ib-teal); color: var(--tm-gold);
	font-weight: 700; font-size: 15px;
}
.tm-ib__steps p { font-size: 16px; }

.tm-ib__split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; }
.tm-ib__band .tm-ib__split { padding-top: 0; }
.tm-ib__split--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tm-ib__ring {
	width: 240px; aspect-ratio: 1; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
	background:
		radial-gradient(closest-side, var(--tm-sand) 76%, transparent 77%),
		conic-gradient(var(--tm-amber) 0 80%, var(--tm-ib-teal) 80% 100%);
}
.tm-ib__ring b { font-family: var(--tm-serif-font); font-size: 64px; line-height: 1; color: var(--tm-ink); }
.tm-ib__ring span { font-size: 14px; font-weight: 600; color: var(--tm-muted-2); }
.tm-ib__photo { margin: 0; border-radius: var(--tm-r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tm-ib-teal-2); }
.tm-ib__photo img, .tm-ib__coop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tm-ib__coops { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tm-ib__coop-img { aspect-ratio: 4 / 3; border-radius: var(--tm-r-card); overflow: hidden; background: var(--tm-photo); margin-bottom: 14px; }
.tm-ib__coop p { font-size: 15px; color: var(--tm-muted-2); margin-bottom: 8px; }

.tm-ib__chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tm-ib__chips li { border: 1px solid var(--tm-line-strong); border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 600; color: var(--tm-ink); background: #fff; }

.tm-ib__cta { text-align: center; margin-top: 80px; margin-bottom: -1px; }
.tm-ib__cta p { max-width: 640px; margin-inline: auto; }
.tm-ib__cta .tm-ib__actions { justify-content: center; }

@media (max-width: 1080px) {
	.tm-ib__coops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.tm-ib__intro, .tm-ib__split, .tm-ib__split--photo { grid-template-columns: 1fr; gap: 32px; }
	.tm-ib__logo { max-width: 420px; }
	.tm-ib__ring { width: 200px; }
	.tm-ib__stats, .tm-ib__steps { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
	.tm-ib__wrap, .tm-ib__section { padding-left: 16px; padding-right: 16px; }
	.tm-ib__section, .tm-ib__split { padding-top: 56px; }
	.tm-ib__band { padding: 48px 0; margin-top: 56px; }
	.tm-ib__coops { grid-template-columns: 1fr; }
}