/* RoachPlus — streaming-service style
	 - Dark background, centered header
	 - Responsive grid of poster cards
	 - Hover/focus play overlay and subtle animations
	 - Mobile-friendly single column
*/

:root{
	--bg:#07121a;
	--card:#0f2732;
	--muted:#9fb3bd;
	--accent:#e50914; /* red accent like many streaming UI */
	--glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background:linear-gradient(180deg,var(--bg), #021018 60%);
	color:#e6f2f6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

header{
	display:flex;
	align-items:center;
	gap:1rem;
	padding:1rem 2rem;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
	border-bottom:1px solid rgba(255,255,255,0.03);
}

header a{
	color:var(--muted);
	text-decoration:none;
	font-weight:600;
}

header a:first-child{
	font-size:1.1rem;
	color:#fff;
	letter-spacing:0.6px;
}

main{
	max-width:1200px;
	margin:2rem auto;
	padding:0 1rem 4rem;
}

h1{margin:0 0 1rem;font-size:1.8rem}

/* grid of cards */

.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
	gap:1.25rem;
}

.card{
	background:var(--card);
	border-radius:8px;
	overflow:hidden;
	padding:0.5rem;
	box-shadow:0 6px 18px rgba(2,9,12,0.6);
	transition:transform .22s ease, box-shadow .22s ease;
}

.card:focus-within,
.card:hover{
	transform:translateY(-6px);
	box-shadow:0 14px 40px rgba(2,9,12,0.7);
}

.poster{display:block;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:2/3;min-height:220px}
.poster img{width:100%;height:100%;display:block;object-fit:cover;display:block}

.meta{padding:0.6rem 0.4rem}
.title{font-size:0.95rem;margin:0;color:#fff}
.subtitle{font-size:0.82rem;color:var(--muted);margin-top:0.25rem}

/* play overlay */
.overlay{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35));
	color:white;opacity:0;transition:opacity .18s ease, transform .18s ease;
}
.poster:hover .overlay,
.card:focus-within .overlay,
.poster:focus .overlay{
	opacity:1;transform:translateY(0);
}
.play-btn{
	background:var(--accent);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 18px rgba(229,9,20,0.28);border:0;cursor:pointer;
}
.play-btn svg{width:18px;height:18px;fill:#fff;margin-left:3px}

/* Layout of page content: convert the sequence of divs into grid items */

/* small screens */
@media (max-width:640px){
	.grid{grid-template-columns:repeat(2,1fr)}
	h1{font-size:1.4rem}
}

@media (max-width:420px){
	.grid{grid-template-columns:repeat(1,1fr)}
}

/* footer */
footer{
	padding:2rem 1rem;text-align:center;color:var(--muted);font-size:0.9rem;border-top:1px solid rgba(255,255,255,0.02);
}

/* helper for accessible focus on links */
a:focus{outline:3px solid rgba(255,255,255,0.06);outline-offset:3px}

/* utility: make the movie list markup compatible with the grid */
/* We'll style the existing simple markup by wrapping direct children of main into a grid container */
.movie-grid-container{display:block}

/* Add card structure via selectors to map current HTML to new styles */
/* movie wrappers are now explicit .card elements in the HTML */

/* For safety: make images consistent size */
img{max-width:100%;height:auto;display:block}