/* CRITICAL CSS - base paint - header shell - hero - main layout shell - listing grid - movie card above the fold */

/* ROOT / BASE ======================================== */

:root {--bg: #0f1117; --bg-soft: #141821; --text: #eef2f7; --text-soft: #c7cfdb; --accent: #cea649; --border: rgba(255, 255, 255, 0.06);
	--border-strong: rgba(255, 255, 255, 0.1);} *, *::before, *::after {box-sizing: border-box;} html, body {margin: 0; min-height: 100%;}
body {background: radial-gradient(circle at top center, rgba(206, 166, 73, 0.05), transparent 22%), var(--bg); color: var(--text);
	font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
img {display: block; max-width: 100%; height: auto;}
a {color: inherit; text-decoration: none;}
h1, h2, h3, h4, h5, h6, p {margin: 0;}

/* LAYOUT FOUNDATION ======================================== */
.container {width: min(100% - 24px, 1680px); margin-inline: auto;}
.site-wrap {min-height: 100dvh; overflow: clip;}
.site-main {padding: 24px 0 36px;}
.site-main__grid {display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start;}
.content-area, .sidebar-area, .content-box {min-width: 0;}
.content-box--listing {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.content-box--listing > * {min-width: 0;}

/* HEADER SHELL ======================================== */
.site-header {position: sticky; top: 0; z-index: 1100; background: rgba(15, 17, 23, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);}
.site-header__inner {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 76px;}
.site-header__left, .site-header__center, .site-header__right {min-width: 0;}
.site-logo {display: inline-flex; align-items: center;}
.site-logo img {display: block; max-width: 100%; height: auto;}
.site-nav {display: flex; justify-content: center;}
.site-nav__list {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none;}
.site-nav__link {display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
	border-radius: 12px; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1;}
.site-header__right {display: flex; align-items: center; justify-content: flex-end; gap: 10px;}
.header-btn {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #1a202c;
	border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; color: var(--text);}
.header-search {padding: 0 0 16px;}

/* HERO ======================================== */
.hero-section {padding: 22px 0 4px;}
.hero-section__inner {padding: 28px; background: radial-gradient(circle at top left, rgba(206, 166, 73, 0.14), transparent 35%),
	linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)), #141821; border: 1px solid var(--border); border-radius: 22px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);}
.hero-section__content {max-width: 760px;}
.hero-section__title {font-size: clamp(30px, 4vw, 48px); line-height: 1.06; font-weight: 900; letter-spacing: -0.03em; color: #fff;}
.hero-section__text {margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--text-soft);}
.hero-section__actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px;}
.hero-section__btn {display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 12px;
	font-size: 14px; font-weight: 800;}
.hero-section__btn--primary {background: var(--accent); border: 1px solid rgba(206, 166, 73, 0.35); color: #111;}
.hero-section__btn--secondary {background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-strong); color: var(--text);}

/* MOVIE CARD CRITICAL ======================================== */
.movie-card {position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; background: #16181f;
	border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); align-self: start;}
.movie-card__poster-wrap {position: relative; display: block; overflow: hidden; background: var(--bg); aspect-ratio: 2 / 3;}
.movie-card__poster {display: block; width: 100%; height: 100%; object-fit: cover;}
.movie-card__badges {position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
	pointer-events: none;}
.movie-card__badge {display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.02em;}
.movie-card__badge--year {background: rgba(15, 17, 23, 0.82); color: #f3f3f3; border: 1px solid rgba(255, 255, 255, 0.08);}
.movie-card__badge--quality {background: rgba(206, 166, 73, 0.92); color: #111; border: 1px solid rgba(255, 255, 255, 0.12);}
.movie-card__body {display: flex; flex: 1 1 auto; flex-direction: column; padding: 14px 14px 16px;}
.movie-card__title {font-size: 16px; font-weight: 700; line-height: 1.35;}
.movie-card__title a {color: #f3f3f3;}
.movie-card__meta {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; line-height: 1.4; color: #b8beca;}
.movie-card__meta-item {display: inline-flex; align-items: center;}
.movie-card__meta-sep {color: rgba(255, 255, 255, 0.28);}

/* VISIBILITY HELPERS ======================================== */
.d-none-desktop {display: none;}
.visually-hidden {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}

/* RESPONSIVE CRITICAL ======================================== */
@media (min-width: 640px) { .content-box--listing {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;} }
@media (min-width: 980px) { .content-box--listing {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;} }
@media (min-width: 1200px) { .content-box--listing {grid-template-columns: repeat(4, minmax(0, 1fr));} }
@media (min-width: 1500px) { .content-box--listing {grid-template-columns: repeat(6, minmax(0, 1fr));} }
@media (max-width: 1199px) { .site-main__grid {grid-template-columns: minmax(0, 1fr) 290px; gap: 20px;} }
@media (max-width: 979px) {
	.d-none-mobile {display: none !important;}
	.d-none-desktop {display: inline-flex !important;}
	.site-header__inner {grid-template-columns: auto 1fr auto; gap: 12px; min-height: 68px;}
	.site-header__center {display: none;}
	.site-main__grid {grid-template-columns: 1fr;}
	.hero-section__inner {padding: 22px;} }
@media (max-width: 639px) {
	.container {width: min(100% - 16px, 1680px);}
	.site-main {padding: 18px 0 28px;}
	.site-header__inner {min-height: 64px;}
	.site-logo img {width: 150px; height: auto;}
	.header-btn {width: 40px; height: 40px; border-radius: 10px;}
	.hero-section {padding-top: 16px;}
	.hero-section__inner {padding: 18px; border-radius: 18px;}
	.hero-section__title {font-size: 28px;}
	.hero-section__text {font-size: 15px; line-height: 1.7;}
	.content-box--listing {gap: 12px;}
	.movie-card {border-radius: 14px;}
	.movie-card__body {padding: 12px 12px 14px;}
	.movie-card__title {font-size: 14px; line-height: 1.32;}
	.movie-card__meta {margin-top: 8px; font-size: 12px;}
	.movie-card__badge {min-height: 25px; padding: 4px 9px; font-size: 11px;} }