.hero-shell{
margin-top:18px;
}

/* HERO */

.hero-card{
position:relative;
min-height:360px;
padding:28px;
display:grid;
align-items:start;
overflow:hidden;
border-radius:26px;
background-size:cover;
background-position:center;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 20px 60px rgba(0,0,0,0.45);
}

.hero-card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(8,8,12,0.9),rgba(8,8,12,0.55),rgba(8,8,12,0.2)),
linear-gradient(180deg,rgba(143,124,255,0.08),transparent 30%,rgba(8,8,12,0.9));
}

.hero-content{
position:relative;
z-index:1;
max-width:680px;
}

.hero-title{
margin:12px 0;
font-size:clamp(2rem,5vw,3.5rem);
line-height:1;
}

.hero-description{
margin:0 0 22px;
color:var(--text-soft);
line-height:1.6;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

/* TRENDING */

.episode-rail{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:18px;
}

.rail-card{
grid-column:span 4;
position:relative;
min-height:180px;
padding:20px;
border-radius:22px;
overflow:hidden;
background-size:cover;
background-position:center;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 16px 40px rgba(0,0,0,0.35);
}

.rail-card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(8,8,12,0.2),rgba(8,8,12,0.8));
}

.rail-card-content{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
justify-content:end;
height:100%;
gap:8px;
}

/* ANIME GRID */

.anime-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:18px;
}

.anime-card{
grid-column:span 3;
display:flex;
flex-direction:column;
gap:12px;
padding:12px;
border-radius:22px;
background:linear-gradient(180deg,#16161f,#101017);
border:1px solid var(--line);
box-shadow:0 18px 44px rgba(0,0,0,0.35);
transition:transform .25s;
}

.anime-card:hover{
transform:translateY(-6px);
}

.poster-frame{
position:relative;
aspect-ratio:3/4;
overflow:hidden;
border-radius:18px;
background:#101019;
}

.poster-frame img{
width:100%;
height:100%;
object-fit:cover;
}

.card-title{
font-size:1rem;
margin:0;
}

.card-description{
color:var(--text-soft);
font-size:.92rem;
line-height:1.6;
}

.card-actions{
display:flex;
gap:10px;
margin-top:auto;
}

.card-actions .btn{
flex:1;
height:44px;
}

/* TABLET */

@media (max-width:1100px){

.anime-card{
grid-column:span 4;
}

.rail-card{
grid-column:span 6;
}

}

/* MOBILE */

@media (max-width:760px){

.hero-card{
min-height:300px;
padding:20px;
}

.hero-title{
font-size:1.6rem;
}

.hero-actions{
flex-direction:column;
}

.hero-actions .btn{
width:100%;
}

/* trending scroll */

.episode-rail{
display:flex;
overflow-x:auto;
gap:12px;
scroll-snap-type:x mandatory;
}

.rail-card{
min-width:140px;
min-height:110px;
padding:12px;
flex:0 0 auto;
scroll-snap-align:start;
}

/* anime grid */

.anime-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.anime-card{
grid-column:auto;
padding:10px;
}

.card-description{
display:none;
}

.card-actions .btn{
height:40px;
font-size:.9rem;
}

}