/*
Theme Name: Mir Rabbi
Theme URI: https://nullrizz.com/
Author: nullrizz
Author URI: https://nullrizz.com/
Description: A dark, image-forward block theme for a working actor. Built to sit on top of the IMDb & Natok Sync plugin, which keeps the filmography updated automatically. Bengali and English throughout.
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mir-rabbi
Tags: full-site-editing, block-patterns, portfolio, one-column, dark, custom-colors, custom-menu, translation-ready
*/

/*
 * Nearly all styling lives in theme.json. What is here is the handful of things
 * theme.json cannot express: the hero treatment, and the plugin's filmography
 * grid re-skinned to match this palette.
 */

/* ---------- Hero ---------- */

.mr-hero {
	position: relative;
	min-height: min(88vh, 900px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.mr-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mr-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

/* Keeps the name legible over any headshot, however bright. */
.mr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--base) 4%,
		color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) 38%,
		color-mix(in srgb, var(--wp--preset--color--base) 24%, transparent) 78%
	);
}

.mr-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.mr-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6rem;
}

/* ---------- Section headings ---------- */

.mr-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 0.8rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.mr-section-head__link {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	white-space: nowrap;
}

.mr-section-head__link:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Filmography, from the sync plugin ---------- */

.inx-grid,
.inx-list {
	--inx-line: var(--wp--preset--color--line);
	--inx-muted: var(--wp--preset--color--muted);
	--inx-surface: var(--wp--preset--color--surface-raised);
	--inx-radius: 4px;
}

.inx-card__title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -0.01em;
}

.inx-card__rating {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.inx-row__year {
	color: var(--wp--preset--color--accent);
}

/* ---------- Credit archive / single ---------- */

.mr-credit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.mr-credit-meta strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---------- Accessibility ---------- */

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	padding: 0.7rem 1.2rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: 4px;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}