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

.sports-page{
background:#0c0c0c;
color:white;
font-family:'Poppins', sans-serif;
}

/* =========================
   HERO
========================= */

.sports-hero{
height:70vh;
background:url('https://picsum.photos/1200/700?sports') center/cover no-repeat;
display:flex;
align-items:center;
padding:0 10%;
position:relative;
}

.sports-hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to right,
rgba(0,0,0,.8),
rgba(0,0,0,.3)
);
}

.sports-hero-content{
position:relative;
z-index:2;
max-width:500px;
}

.sports-hero h1{
font-size:48px;
margin-bottom:10px;
}

.sports-hero p{
margin-bottom:20px;
color:#ccc;
}

.sports-hero a{
background:#ff6a00;
padding:12px 25px;
border-radius:25px;
color:white;
text-decoration:none;
font-weight:bold;
}

/* =========================
   GRID DESTACADOS
========================= */

.sports-featured{
padding:50px 5%;
}

.section-title{
margin-bottom:25px;
font-size:24px;
}

.sports-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.sports-card{
position:relative;
border-radius:15px;
overflow:hidden;
cursor:pointer;
}

.sports-card img{
width:100%;
height:250px;
object-fit:cover;
transition:.4s;
}

/* HOVER */
.sports-card:hover img{
transform:scale(1.1);
}

.overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:15px;
background:linear-gradient(
to top,
rgba(0,0,0,.8),
transparent
);
}

.overlay span{
font-size:12px;
color:#ff6a00;
font-weight:bold;
}

.overlay h3{
margin-top:5px;
}

/* =========================
   TRENDING
========================= */

.sports-trending{
padding:50px 5%;
}

.sports-trending-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}

.sports-mini{
position:relative;
border-radius:10px;
overflow:hidden;
cursor:pointer;
}

.sports-mini img{
width:100%;
height:160px;
object-fit:cover;
transition:.3s;
}

.sports-mini:hover img{
transform:scale(1.1);
}

.mini-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:10px;
background:linear-gradient(
to top,
rgba(0,0,0,.8),
transparent
);
font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

.sports-hero h1{
font-size:32px;
}

}