/* static/css/home.css */

/* Hero Card */
.home-hero {
    padding: 60px 20px 30px;
    margin-top: 20px;
    border-radius: var(--tbg-radius-lg);
    background: radial-gradient(ellipse at 82% 0%, rgba(33, 242, 139, .16), transparent 42%), linear-gradient(135deg, #123A27 0%, #091B12 50%, #06100B 100%);
    border: 1px solid rgba(97, 255, 177, .23);
    text-align: center;
    color: white;
}

.hero-actions-bottom { display: flex; justify-content: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

/* The New UEFA Vibe Grid */
.uefa-vibe-section { margin: 40px 0; }
.uefa-title { font-family: var(--tbg-font-heading); font-weight: 900; font-size: 1.8rem; color: var(--tbg-text); margin-bottom: 20px; text-transform: uppercase; }

.uefa-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    height: 500px;
}

.uefa-big-card {
    position: relative;
    border-radius: var(--tbg-radius-md);
    overflow: hidden;
    display: block;
    background: var(--tbg-surface);
    border: 1px solid var(--tbg-border);
}

.uefa-big-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.uefa-big-card:hover img { transform: scale(1.03); }

.uefa-big-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(2, 10, 6, .95), transparent);
}

.uefa-big-overlay h3 { color: #F1FFF7; font-size: 2rem; font-weight: 900; margin: 0; line-height: 1.1; }

.uefa-stack { display: flex; flex-direction: column; gap: 15px; height: 100%; }

.uefa-small-card {
    display: flex;
    background: var(--tbg-surface);
    border-radius: var(--tbg-radius-md);
    overflow: hidden;
    flex: 1;
    text-decoration: none;
    transition: var(--tbg-transition);
    border: 1px solid var(--tbg-border);
}

.uefa-small-card:hover { border-color: var(--neon-mint); background: var(--tbg-surface-hover); }
.uefa-small-img { width: 40%; height: 100%; }
.uefa-small-img img { width: 100%; height: 100%; object-fit: cover; }
.uefa-small-text { padding: 20px; width: 60%; display: flex; align-items: center; }
.uefa-small-text h4 { color: var(--tbg-text); font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.3; }

/* Discover Layout (3-Column) */
.discover-layout { display: grid; grid-template-columns: 260px 1fr 300px; gap: 24px; align-items: start; margin-top: 30px; margin-bottom: 40px; }

/* Trending / Left Column */
.discover-col-left { background: var(--bg-card); border-radius: var(--tbg-radius-md); padding: 20px; border: 1px solid var(--tbg-border); }
.discover-header { font-size: 1.1rem; font-weight: 900; margin: 0 0 16px; color: var(--tbg-text); text-transform: uppercase; }

.trending-list { display: flex; flex-direction: column; gap: 16px; }
.trending-item { display: flex; gap: 12px; text-decoration: none; transition: var(--tbg-transition); padding-bottom: 12px; border-bottom: 1px solid var(--tbg-border); }
.trending-item:last-child { border-bottom: none; padding-bottom: 0; }

.trending-number { background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.85rem; flex-shrink: 0; }
.trending-text h4 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--tbg-text); }
.trending-text span { font-size: 0.75rem; color: var(--tbg-text-muted); font-weight: 600; }
.trending-item:hover .trending-text h4 { color: var(--neon-mint); }

/* Center Column */
.hero-card { display: block; position: relative; border-radius: var(--tbg-radius-md); overflow: hidden; text-decoration: none; aspect-ratio: 16/9; background: var(--tbg-surface); border: 1px solid var(--tbg-border); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.hero-card:hover img { transform: scale(1.03); }
.hero-card-meta { position: absolute; bottom: 70px; left: 20px; }
.author-badge { background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; padding: 4px 10px; border-radius: var(--tbg-radius-pill); font-size: 0.75rem; font-weight: 800; }
.hero-card-title { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 20px; color: white; font-size: 1.6rem; font-weight: 900; line-height: 1.2; background: linear-gradient(transparent, rgba(2, 10, 6, .95)); }

/* Right Column */
.discover-col-right { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card { background: var(--bg-card); border-radius: var(--tbg-radius-md); overflow: hidden; border: 1px solid var(--tbg-border); }

/* Article Grid */
.article-grid-section { margin: 40px 0; }
.article-grid-section h2 { font-size: 1.4rem; font-weight: 900; margin-bottom: 20px; color: var(--tbg-text); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.article-card { background: var(--bg-card); border-radius: var(--tbg-radius-md); overflow: hidden; text-decoration: none; border: 1px solid var(--tbg-border); transition: var(--tbg-transition); display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-4px); border-color: var(--neon-mint); box-shadow: var(--tbg-shadow-hover); }
.article-img-wrapper { height: 200px; width: 100%; overflow: hidden; }
.article-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-img-wrapper img { transform: scale(1.05); }
.article-content { padding: 20px; }
.article-content h3 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--tbg-text); }

/* Ads */
.ad-card-container { margin: 20px 0; width: 100%; }
.ad-card { position: relative; background: var(--bg-card); border: 1px solid var(--tbg-border); border-radius: var(--tbg-radius-md); padding: 24px; overflow: hidden; transition: var(--tbg-transition); }
.ad-card:hover { transform: translateY(-2px); border-color: var(--neon-mint); }
.ad-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: var(--tbg-text-muted); font-size: 10px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; font-weight: 700; }
.ad-content h3 { margin: 0 0 8px 0; color: var(--tbg-text); font-size: 1.1rem; font-weight: 900; }
.ad-content p { margin: 0 0 16px 0; color: var(--tbg-text-muted); font-size: 0.9rem; line-height: 1.4; }
.ad-btn { display: inline-block; background: linear-gradient(135deg, #79FFC0 0%, #21F28B 52%, #10C875 100%); color: #03150B; text-decoration: none; font-weight: 800; font-size: 0.9rem; padding: 10px 20px; border-radius: var(--tbg-radius-sm); transition: var(--tbg-transition); text-align: center; border: 1px solid rgba(174, 255, 213, .72); }
.ad-btn:hover { filter: brightness(1.08); }
.wide-ad { padding: 24px; border-left: 4px solid var(--neon-green); }
.wide-ad-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.wide-ad-content p { margin: 0; }

/* Mobile */
@media (max-width: 1024px) {
    .uefa-grid { grid-template-columns: 1fr; height: auto; }
    .uefa-big-card { height: 300px; }
    .uefa-small-card { height: 120px; }
    .discover-layout { display: flex; flex-direction: column; gap: 24px; }
    .discover-col-left, .discover-col-right { display: none; }
    .hero-card { aspect-ratio: 4/3; border-radius: var(--tbg-radius-md); }
    .hero-card-title { font-size: 1.4rem; padding: 15px; }
    .hero-card-meta { bottom: 60px; left: 15px; }
    .article-grid { display: flex; flex-direction: column; gap: 16px; }
    .article-card { flex-direction: row; height: 100px; }
    .article-img-wrapper { width: 120px; flex-shrink: 0; height: 100%; }
    .article-content { padding: 10px 15px; display: flex; align-items: center; }
    .article-content h3 { font-size: 0.95rem; margin: 0; }
    .wide-ad-content { flex-direction: column; align-items: flex-start; }
    .wide-ad-content .ad-btn { width: 100%; margin-top: 10px; }
}

/* --- FEATURED LEAGUES CARDS --- */
.featured-leagues-section {
    margin: 40px 0;
}

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

.league-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-card);
    border: 1px solid var(--tbg-border);
    border-radius: var(--tbg-radius-md);
    padding: 15px 20px;
    text-decoration: none;
    transition: var(--tbg-transition);
}

.league-card:hover {
    border-color: var(--neon-mint);
    background: var(--tbg-surface-hover);
    transform: translateY(-2px);
    box-shadow: var(--tbg-shadow-hover);
}

.league-emoji { font-size: 1.8rem; line-height: 1; }
.league-card h3 { font-family: var(--tbg-font-heading); font-weight: 800; font-size: 1rem; color: var(--tbg-text); margin: 0; }
.league-card:hover h3 { color: var(--neon-mint); }

/* --- HERO BUTTONS --- */
.hero-actions-bottom {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-glass {
    background: rgba(33, 242, 139, .08);
    color: var(--neon-mint);
    border: 1px solid rgba(97, 255, 177, .4);
    padding: 12px 24px;
    border-radius: var(--tbg-radius-pill);
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: var(--tbg-transition);
}

.btn-glass:hover {
    background: rgba(33, 242, 139, .15);
    border-color: var(--neon-mint);
    box-shadow: 0 0 20px rgba(33, 242, 139, .2);
    color: #fff;
}

.btn-primary {
    background: linear-gradient(135deg, #79FFC0 0%, #21F28B 52%, #10C875 100%);
    color: #03150B;
    border: 1px solid rgba(174, 255, 213, .72);
    padding: 12px 24px;
    border-radius: var(--tbg-radius-pill);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(33, 242, 139, .2);
    transition: var(--tbg-transition);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(33, 242, 139, .35);
}

/* --- ARTICLE IMAGE SIZING --- */
.article-img-wrapper {
    width: 100%;
    height: 200px; /* Fixed height */
    overflow: hidden;
    background: #050F0A; /* Fallback if image is missing */
}

.article-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the magic bullet - it crops instead of stretching */
    object-position: center;
    transition: transform 0.4s ease;
}

.article-card:hover .article-img-wrapper img {
    transform: scale(1.05);
}