/**
 * FictionX homepage - Frontend Styles
 *
 * ONE sheet for both languages, replacing templates/fiction/assets/css/home_ar.css and
 * home_en.css. Those two were identical but for their first four lines - the Arabic
 * Tajawal override - and they sat outside assets/css/modules/, which is where every
 * other page's styles live, with no ?v= stamp at all. A homepage CSS edit therefore
 * never reached a browser that already held the file.
 *
 * Roughly half of what they held was dead. Measured against the rendered homepage
 * rather than read: .devOfEdu-header-h, .z-2, .video-container, .video-overlay,
 * .overlayx, .tw-min-h-full, .tw-h-full, .line-clamp-3, .content_holder, .gray-color,
 * .adss-bannerx and .munu-bgbannerx matched ZERO elements, and the last five are
 * referenced in no markup anywhere in the repo. The first five belong to header.dwt's
 * video, which the homepage does not use - and which library.css, topics.css and
 * updates.css each define for themselves - so they are not this file's business.
 */

/* Arabic sets its headings and body copy in Tajawal. Scoped to the direction rather
   than forked into a second file, which is what made these two sheets diverge. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] p {
	font-family: 'Tajawal', sans-serif !important;
}

/* ==============================================================================
   The page surface
   ============================================================================== */
/* The homepage is a single viewport over a looping video: the teal underneath is what
   shows while the video is still arriving, and on any device that refuses to play it. */
body {
	margin: 0;
	line-height: inherit;
	background: #2b647f !important;
}

body video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* The tint that makes white text legible over whatever frame is playing. */
body .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: transparent linear-gradient(180deg, #0000009f 0%, #00505fd1 78%, #009bb7 100%) 0% 0% no-repeat padding-box;
}

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

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
	display: block;
	vertical-align: middle;
}

/* ==============================================================================
   The audience tiles
   ============================================================================== */
/* Six tiles - school student, university student, parent, teaching staff, employees,
   institutions - each a link into govdalil.
   This was style="border: unset;width: 100%;text-align: start;" written inline on every
   one of them, in both files: twelve copies of one declaration. */
.fx-audience-tile {
	border: unset;
	width: 100%;
	text-align: start;
}

/* The icon inside a tile. Was style="height: 50px;" inline on all six, with one of the
   English tiles carrying max-height/width instead for no reason. */
.fx-audience-icon {
	height: 50px;
	width: auto;
}

/* ==============================================================================
   Reduced motion
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
	/* A full-bleed 20-second loop is exactly what this setting is asking us not to
	   play. The teal body background and the overlay still carry the design. */
	body video {
		display: none;
	}
}

/* ==============================================================================
   Equal tiles
   ============================================================================== */
/* The six tiles took their height from their own text, so a label that wrapped to two
   lines made its tile taller than its neighbours - measured 72 / 93 / 72 / 85 / 72 / 85,
   a 21px spread across one row. A Bootstrap column is already a stretch item, so the
   anchor inside it only needs to fill the height it is given. */
.fx-audience-tile {
	height: 100%;
}
/* A row of tiles that wrap onto a second line should not leave the first line short. */
.fx-audience-row {
	align-items: stretch;
}