/* =====================================================================
 * Faragiri - single course head (H1 + meta chips + genre pills)
 * Loaded on single movie pages only by mu-plugin faragiri-course-head.php.
 *
 * What it replaces: an H1 painted with a fixed purple → blue → green
 * gradient (from vodi-child-style.min.css, so every colour scheme got the
 * same three hues) sitting on top of a run-on grey sentence -- author,
 * then date, then a comma separated list of genres, all in one 13px line
 * with two vertical bars between the parts.
 *
 * The rebuild paints from the theme-switcher tokens instead, so one block
 * serves all eight modes. Selectors are html[data-fgri-theme]-prefixed and
 * carry body.single-movie as well, because section 19 of
 * theme-switcher-core.css already claims h1.movie_title with !important
 * for the six coloured schemes and would otherwise win.
 *
 * DOM (from faragiri-course-head.php + the Vodi wrappers):
 *   .single-movie__player
 *     > .movie__info--head
 *       > .movie__info--head-inner
 *           h1.movie_title.entry-title
 *           .movie__meta.fgch
 *             .fgch__meta   (author / date / level chips)
 *             .fgch__cats   (genre pills)
 *     > .movie__head        (the player)
 * ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1) The block, and the wash behind it
 * ------------------------------------------------------------------ */
html[data-fgri-theme] body.single-movie .single-movie__player > .movie__info--head {
	border: 0 !important;
	background: transparent !important;
	margin-bottom: 0 !important; /* masvideos-rtl adds 22px; the seam does the spacing now */
}

html[data-fgri-theme] body.single-movie .single-movie__player .movie__info--head-inner {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	margin-top: 0 !important; /* vodi-child-style hard-codes 20px here */
	padding-block: clamp(.5rem, 2vw, 1.05rem) clamp(.85rem, 2.2vw, 1.3rem);
	/* Centred, matching the archive hero and the alignment this page had
	 * before the rebuild. Everything that follows keys off this one
	 * declaration: switching it to `start` right-aligns the whole block
	 * (title, accent rule, chips, pills) with no other edit. */
	text-align: center;
}

/* Ambient bloom, the same device the archive hero uses: a wash rather
 * than a rule or a coloured band. `closest-side` on both radials so the
 * ellipse always finishes inside its own box -- a percentage-sized radial
 * placed off centre gets clipped at the box edge and draws a visible
 * rectangle, which is exactly the bug page-hero.css had to fix.
 *
 * It hangs off head-INNER, not off .movie__info--head: that wrapper
 * computes to display:contents on this template, so it has no box of its
 * own to paint into. */
html[data-fgri-theme] body.single-movie .single-movie__player .movie__info--head-inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: -2rem;
	inset-block-start: -3rem;
	block-size: max(160%, 15rem);
	background:
		radial-gradient(closest-side at 76% 38%, var(--fg-glow, rgba(36, 186, 239, .13)), transparent),
		radial-gradient(closest-side at 28% 8%, var(--fg-glow-2, rgba(83, 145, 228, .12)), transparent);
	pointer-events: none;
}

/* Hairline between the head and the player. Fades out towards the far
 * edge so it reads as a seam, not as a border box around the text. */
html[data-fgri-theme] body.single-movie .single-movie__player .movie__info--head-inner::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--fg-accent) 50%, transparent);
	opacity: .3;
}

/* ------------------------------------------------------------------ *
 * 2) The H1
 * ------------------------------------------------------------------ */
html[data-fgri-theme] body.single-movie .movie__info--head-inner h1.movie_title.entry-title {
	display: block;
	max-inline-size: 26ch;
	margin: 0 auto .5em !important;
	padding: 0 !important;
	text-align: inherit !important;
	font-family: 'PeydaWeb', Arial, sans-serif !important;
	font-size: clamp(1.55rem, 3.3vw, 2.35rem) !important;
	font-weight: 900 !important;
	line-height: 1.42 !important;
	letter-spacing: -.015em;
	text-wrap: balance;
	color: var(--fg-text) !important;
	background: linear-gradient(100deg, var(--fg-text) 34%, var(--fg-accent) 118%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Short accent rule under the title, start aligned (so it sits under the
 * first letter in RTL). Punctuation, not a divider. */
html[data-fgri-theme] body.single-movie .movie__info--head-inner h1.movie_title.entry-title::after {
	content: "";
	display: block;
	inline-size: 3.8rem;
	block-size: 3px;
	margin: .55rem auto 0;
	border-radius: 999px;
	/* symmetric fade, because the rule is centred under the title */
	background: linear-gradient(90deg, transparent, var(--fg-accent), transparent);
	opacity: .85;
}

/* ------------------------------------------------------------------ *
 * 3) Meta chips
 * ------------------------------------------------------------------ */
/* .movie__meta arrives as a flex row with a `|` pseudo-element between
 * every child (masvideos-rtl: `.single-movie .movie__meta > * + *:before`).
 * Both go: the chips are the separator now, and the two rows have to stack. */
html[data-fgri-theme] body.single-movie .movie__info--head-inner .fgch {
	display: block !important;
	margin: 0 !important;
	font-family: 'PeydaWeb', Arial, sans-serif !important;
	text-align: inherit !important;
}
html[data-fgri-theme] body.single-movie .fgch > * + *::before,
html[data-fgri-theme] body.single-movie .fgch > *::before {
	content: none !important;
	margin: 0 !important;
}

/* The two rows are block boxes holding inline-flex chips, not flex
 * containers: that way the one `text-align` on head-inner decides where
 * both rows sit, and the chips still wrap. Spacing is margin rather than
 * gap for the same reason. The PHP emits no whitespace between chips, so
 * these margins are the only gap. */
html[data-fgri-theme] body.single-movie .fgch__meta {
	display: block;
	margin: 0 -.28rem;
}

html[data-fgri-theme] body.single-movie .fgch__item {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: .38rem;
	margin: .27rem .28rem;
	padding: .4rem .8rem;
	border: 1px solid var(--fg-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, .035);
	background: color-mix(in srgb, var(--fg-surface) 62%, transparent);
	font-size: .855rem;
	line-height: 1.75;
	color: var(--fg-text-2) !important;
	white-space: nowrap;
}

html[data-fgri-theme] body.single-movie .fgch__icon {
	inline-size: 1.02em;
	block-size: 1.02em;
	flex: 0 0 auto;
	color: var(--fg-accent);
	opacity: .95;
}

html[data-fgri-theme] body.single-movie .fgch__k {
	color: var(--fg-text-2) !important;
	opacity: .82;
	font-weight: 400;
}

html[data-fgri-theme] body.single-movie .fgch__v {
	color: var(--fg-text) !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

html[data-fgri-theme] body.single-movie a.fgch__v {
	color: var(--fg-accent) !important;
	text-underline-offset: 3px;
}
html[data-fgri-theme] body.single-movie a.fgch__v:hover {
	opacity: .82;
}

/* level: three fixed hues, because the level is a fact about the course
 * and should not change meaning when the visitor switches colour scheme.
 * Light gets its own darker set further down. */
html[data-fgri-theme] body.single-movie .fgch__level { --fgch-lv: var(--fg-accent); }
html[data-fgri-theme] body.single-movie .fgch__level[data-level="beginner"]     { --fgch-lv: #34d399; }
html[data-fgri-theme] body.single-movie .fgch__level[data-level="intermediate"] { --fgch-lv: #f0b429; }
html[data-fgri-theme] body.single-movie .fgch__level[data-level="advanced"]     { --fgch-lv: #f2657a; }

html[data-fgri-theme] body.single-movie .fgch__level {
	border-color: color-mix(in srgb, var(--fgch-lv) 42%, transparent);
	background: color-mix(in srgb, var(--fgch-lv) 11%, transparent);
}
html[data-fgri-theme] body.single-movie .fgch__level .fgch__icon,
html[data-fgri-theme] body.single-movie .fgch__level .fgch__v {
	color: var(--fgch-lv) !important;
}

/* ------------------------------------------------------------------ *
 * 4) Genre pills
 * ------------------------------------------------------------------ */
html[data-fgri-theme] body.single-movie .fgch__cats {
	display: block;
	margin: .5rem -.23rem 0;
}

html[data-fgri-theme] body.single-movie .fgch__cats-icon {
	vertical-align: middle;
	margin-inline: .23rem .3rem;
	color: var(--fg-text-2);
	opacity: .7;
	inline-size: 1.05em;
	block-size: 1.05em;
}

html[data-fgri-theme] body.single-movie .fgch__cats-k {
	vertical-align: middle;
	font-size: .82rem;
	color: var(--fg-text-2) !important;
	opacity: .82;
	margin-inline-end: .35rem;
}

/* text-decoration:none needs the !important: style.css underlines every
 * link inside .movie__meta for the Lighthouse "links rely on colour"
 * audit. The pill carries its own border and fill, so the underline is
 * not what makes it read as a link here. */
html[data-fgri-theme] body.single-movie a.fgch__cat {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: .23rem;
	padding: .36rem .78rem;
	border: 1px solid color-mix(in srgb, var(--fg-accent) 30%, transparent);
	border-radius: 11px;
	background: color-mix(in srgb, var(--fg-accent) 10%, transparent);
	font-size: .83rem;
	font-weight: 600;
	line-height: 1.9;
	color: var(--fg-accent) !important;
	text-decoration: none !important;
	transition: background .18s ease, border-color .18s ease, transform .14s ease;
}
html[data-fgri-theme] body.single-movie a.fgch__cat:hover,
html[data-fgri-theme] body.single-movie a.fgch__cat:focus-visible {
	background: color-mix(in srgb, var(--fg-accent) 20%, transparent);
	border-color: color-mix(in srgb, var(--fg-accent) 55%, transparent);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * 5) Light mode
 *    The token gradient on the H1 is fine as is (dark ink into dark
 *    teal). Only the chip fills and the three level hues need help:
 *    #f0b429 amber on near-white is well under 4.5:1.
 * ------------------------------------------------------------------ */
html[data-fgri-theme="light"] body.single-movie .fgch__item {
	background: rgba(20, 32, 60, .04);
}
html[data-fgri-theme="light"] body.single-movie .fgch__level[data-level="beginner"]     { --fgch-lv: #0e8f5f; }
html[data-fgri-theme="light"] body.single-movie .fgch__level[data-level="intermediate"] { --fgch-lv: #9a6300; }
html[data-fgri-theme="light"] body.single-movie .fgch__level[data-level="advanced"]     { --fgch-lv: #c92a4b; }
html[data-fgri-theme="light"] body.single-movie .fgch__level {
	background: color-mix(in srgb, var(--fgch-lv) 9%, #ffffff);
}

/* ------------------------------------------------------------------ *
 * 6) Small screens
 *    The chips stay chips down to 360px; they wrap onto three rows
 *    rather than shrinking the type, and the genre pills keep their
 *    tap target.
 * ------------------------------------------------------------------ */
@media (max-width: 782px) {
	/* no padding-inline here on purpose: head-inner already sits on the
	 * container's own gutter, and adding one pushed the H1 15px off the
	 * article text below it. */
	html[data-fgri-theme] body.single-movie .movie__info--head-inner h1.movie_title.entry-title {
		max-inline-size: none;
		line-height: 1.5 !important;
	}
}

@media (max-width: 480px) {
	html[data-fgri-theme] body.single-movie .fgch__item {
		font-size: .8rem;
		padding: .34rem .68rem;
	}
	html[data-fgri-theme] body.single-movie .fgch__item .fgch__k {
		display: none; /* icon already says which field this is */
	}
	html[data-fgri-theme] body.single-movie .fgch__cats-k {
		display: none;
	}
	html[data-fgri-theme] body.single-movie a.fgch__cat {
		font-size: .8rem;
	}
}

/* ------------------------------------------------------------------ *
 * 7) Motion safety
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html[data-fgri-theme] body.single-movie .fgch__cat {
		transition: none !important;
		transform: none !important;
	}
}