/*
 * EmiratesX blog polish: the archive /en/blog/ and the articles /en/blog/<slug>/ in the style of the modern pages.
 * Loaded only on those templates (inc/assets.php). CSS only: the PHP templates and the article content are untouched.
 * Overrides the B1 section of emiratesx.css (same selectors or stronger). Palette: #101B18 #182620 #F4F0E7 #C3AA78.
 */

/* ------------------------------------------------------------------ archive: page head */
.ex-blog__head.ex-pagehead {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(96px, 11vw, 168px) clamp(56px, 7vw, 110px);
	border-block-end: 0;
	background: #101B18;
}
.ex-blog__head.ex-pagehead::before,
.ex-blog__head.ex-pagehead::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}
.ex-blog__head.ex-pagehead::before {
	top: 0;
	bottom: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 60% 80% at 88% -10%, rgba(195, 170, 120, .16), transparent 60%),
		radial-gradient(ellipse 50% 60% at 0% 110%, rgba(195, 170, 120, .07), transparent 60%);
}
.ex-blog__head.ex-pagehead::after {
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(195, 170, 120, .55) 20%, rgba(195, 170, 120, .55) 80%, transparent);
}
.ex-blog__head.ex-pagehead .ex-h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(52px, 7vw, 108px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.05em;
	color: #F4F0E7;
}
.ex-blog__head.ex-pagehead .ex-h1::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: clamp(24px, 3vw, 40px);
	background: #C3AA78;
}

/* ------------------------------------------------------------------ archive: cards */
.ex-blog__list.ex-light { background: #F4F0E7; }
.ex-blog-card {
	position: relative;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}
.ex-blog-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #C3AA78;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}
.ex-blog-card:hover::before,
.ex-blog-card:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
	.ex-blog-card:hover { transform: translateY(-4px); }
}
.ex-blog-card__media {
	aspect-ratio: 16 / 10;
	border-radius: 2px;
	position: relative;
}
.ex-blog-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(16, 27, 24, .28), transparent 45%);
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}
.ex-blog-card:hover .ex-blog-card__media::after { opacity: 1; }
.ex-blog-card__img { filter: saturate(.92) contrast(1.02); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .6s; }
.ex-blog-card:hover .ex-blog-card__img,
.ex-blog-card:focus-visible .ex-blog-card__img { transform: scale(1.05); filter: saturate(1) contrast(1.02); }
.ex-blog-card__date {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #766B54;
}
.ex-blog-card__date::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #A58B59;
	transform: rotate(45deg);
	flex: none;
}
.ex-blog-card .ex-blog-card__title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(20px, .5vw + 16px, 24px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.025em;
}
.ex-blog-card:hover .ex-blog-card__title,
.ex-blog-card:focus-visible .ex-blog-card__title { text-decoration: none; color: #101B18; }
.ex-blog-card .ex-blog-card__text { color: #535D55; font-size: 15px; line-height: 1.65; }

/* pagination in the same language */
.ex-pagination__link {
	border-radius: 2px;
	border-color: #101B18;
	background: #101B18;
	color: #F4F0E7;
}
a.ex-pagination__link:hover,
a.ex-pagination__link:focus-visible { background: #C3AA78; border-color: #C3AA78; color: #101B18; }
.ex-pagination__link.is-disabled { background: transparent; border-color: #D9D2C5; color: #8A918B; }

/* ------------------------------------------------------------------ article */
/* A dark band behind the back link, the title and the date, full width, whatever its height. The band is a grid item
   of the article column (rows 1 and 2) painted wide with a huge spread shadow and clipped to the viewport width. */
.ex-article.ex-light { background: #F4F0E7; padding-block: 0 var(--ex-section); }
.ex-article__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(860px + 2 * var(--ex-gutter));
}
.ex-article__inner::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	z-index: 0;
	margin-inline: calc(-1 * var(--ex-gutter));
	background: #101B18;
	box-shadow: 0 0 0 100vmax #101B18;
	clip-path: inset(-100vmax -100vmax 0 -100vmax);
	pointer-events: none;
}
.ex-article__back, .ex-article__head { grid-column: 1; position: relative; z-index: 1; }
.ex-article__back { grid-row: 1; align-self: end; margin: clamp(56px, 7vw, 104px) 0 0; color: #C3AA78; width: max-content; }
.ex-article__back.ex-link { color: #C3AA78; border-color: rgba(195, 170, 120, .6); }
.ex-article__back.ex-link:hover { color: #F4F0E7; border-color: #F4F0E7; }
.ex-article__head { grid-row: 2; padding: clamp(28px, 3vw, 44px) 0 clamp(48px, 6vw, 88px); }
.ex-article .ex-article__title {
	margin: 0 0 clamp(22px, 2.6vw, 34px);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.045em;
	color: #F4F0E7;
	text-wrap: balance;
}
.ex-article .ex-article__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: #C3AA78;
}
.ex-article .ex-article__meta::before {
	content: "";
	width: 40px;
	height: 1px;
	background: #C3AA78;
}
.ex-article__media {
	grid-column: 1;
	position: relative;
	z-index: 2;
	margin: calc(-1 * clamp(28px, 4vw, 56px)) 0 clamp(36px, 4.5vw, 64px);
}
.ex-article__img { margin-inline: 0; }
.ex-article__img {
	border-radius: 2px;
	box-shadow: 0 30px 70px -34px rgba(16, 27, 24, .55);
}
.ex-article__body {
	grid-column: 1;
	max-width: 760px;
	margin-inline: 0;
	width: 100%;
	color: #26312C;
	font-size: clamp(17px, .35vw + 15.5px, 19px);
	line-height: 1.85;
}
.ex-article__body p { margin-block: 0 1.35em; }
.ex-article__body h2 {
	margin-block: clamp(48px, 5vw, 72px) 20px;
	padding-block-start: 0;
	border-block-start: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(26px, 1.6vw + 18px, 38px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.035em;
	color: #101B18;
}
.ex-article__body h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-bottom: 22px;
	background: #C3AA78;
}
.ex-article__body h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 500;
	letter-spacing: -.02em;
	color: #101B18;
}
.ex-article__body a {
	color: #101B18;
	text-decoration: none;
	background: linear-gradient(#C3AA78, #C3AA78) 0 100% / 100% 1px no-repeat;
	transition: background-size .3s, color .25s;
}
.ex-article__body a:hover { background-size: 100% 100%; color: #101B18; }
.ex-article__body blockquote {
	margin-inline: 0;
	padding: 6px 0 6px clamp(20px, 3vw, 36px);
	border-inline-start: 2px solid #C3AA78;
	font-size: 1.12em;
	color: #101B18;
}
.ex-article__body hr { border: 0; height: 1px; background: linear-gradient(90deg, #C3AA78, transparent); margin-block: 3em; }
.ex-article__body ul > li::marker { color: #A58B59; }
.ex-article__body ol > li::marker { color: #766B54; font-weight: 700; }

@media (max-width: 767px) {
	.ex-article__inner::before { margin-inline: calc(-1 * var(--ex-gutter)); }
}
@media (prefers-reduced-motion: reduce) {
	.ex-blog-card, .ex-blog-card::before, .ex-blog-card__img, .ex-blog-card__media::after, .ex-article__body a { transition: none !important; }
}