/* ============================================
   Novel Template - Enhanced with Images
   Bootstrap 5 + Font Awesome
   ============================================ */

/* === CSS Variables === */
:root {
    --color-primary: #3b82f6;
    --color-primary-dark: #1e3a8a;
    --color-primary-darker: #1e293b;
    --color-accent: #fbbf24;
    --color-accent-dark: #f59e0b;
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-bg: #2e7d32;
    --color-bg-soft: #f8fafc;
    --color-bg-muted: #f1f5f9;
    --color-border: #e5e7eb;
    --gradient-hero: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #3b82f6 100%);
    --gradient-deep: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --gradient-cta: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --gradient-accent: linear-gradient(135deg, #fbbf24, #f59e0b);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 30px rgba(0,0,0,0.1);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 30px;
}

/* === Base === */
body {
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/public/assets/sports/bg-football-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}
a { color: var(--color-text); transition: color 0.2s; }
a:hover { color: var(--color-primary); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--color-primary-darker); }

/* === Header === */
.header { background: #fff; z-index: 1030; }
.header .navbar-brand { font-weight: 800; font-size: 1.4rem; color: var(--color-primary-dark); }
.header .navbar-brand:hover { color: var(--color-primary); }
.header .nav-link {
    font-weight: 500; color: var(--color-text) !important;
    transition: color 0.2s; padding: 0.5rem 1rem !important;
}
.header .nav-link:hover { color: var(--color-primary) !important; }
.header .navbar-toggler { border: none; padding: 0.5rem; }
.header-search .form-control {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    border-right: none; padding-left: 1.2rem;
}
.header-search .btn {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
}

/* === Hero Section === */
.hero-section {
    min-height: 360px;
    background: var(--gradient-hero);
    color: #fff;
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    pointer-events: none;
}
.hero-section > .container { position: relative; z-index: 1; }
.hero-section h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.2;
    color: #fff;
}
.hero-section p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    max-width: 600px;
}
.hero-search {
    max-width: 520px;
    display: flex;
}
.hero-search .form-control {
    height: 50px;
    border: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding: 0 1.5rem;
    font-size: 1rem;
}
.hero-search .btn {
    height: 50px;
    padding: 0 2rem;
    background: var(--color-accent);
    color: var(--color-primary-darker);
    border: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    font-weight: 700;
    font-size: 1rem;
}
.hero-search .btn:hover { background: var(--color-accent-dark); }

/* === Spotlight (Featured) === */
.spotlight-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}
.spotlight-main:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.spotlight-img {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.spotlight-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.spotlight-main:hover .spotlight-img img {
    transform: scale(1.05);
}
.spotlight-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.5);
}
.spotlight-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
}
.spotlight-overlay h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}
.spotlight-overlay p {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spotlight-small {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}
.spotlight-small:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.spotlight-img-sm {
    position: relative;
    height: 160px;
    overflow: hidden;
}
.spotlight-img-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spotlight-placeholder-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.5);
}
.spotlight-overlay-sm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.spotlight-overlay-sm h4 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === Category Cards === */
.cat-card {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.2s;
    border: 1px solid var(--color-border);
}
.cat-card:hover {
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.cat-card-icon {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}
.cat-card:hover .cat-card-icon { color: #fff; }
.cat-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--color-primary-darker);
    transition: color 0.2s;
}
.cat-card:hover h3 { color: #fff; }
.cat-card-more {
    font-size: 0.75rem;
    color: var(--color-text-light);
    transition: color 0.2s;
}
.cat-card:hover .cat-card-more { color: rgba(255,255,255,0.8); }

/* === Grid Cards (Article Cards with Image) === */
.grid-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
.grid-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.grid-card-img {
    display: block;
    position: relative;
    height: 160px;
    overflow: hidden;
    background: var(--color-bg-muted);
}
.grid-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.grid-card:hover .grid-card-img img {
    transform: scale(1.05);
}
.grid-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: var(--color-text-light);
    font-size: 2.5rem;
}
.grid-card:nth-child(3n+1) .grid-card-placeholder { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: rgba(255,255,255,0.3); }
.grid-card:nth-child(3n+2) .grid-card-placeholder { background: linear-gradient(135deg, #f59e0b, #ef4444); color: rgba(255,255,255,0.3); }
.grid-card:nth-child(3n+3) .grid-card-placeholder { background: linear-gradient(135deg, #10b981, #06b6d4); color: rgba(255,255,255,0.3); }
.grid-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-accent);
    color: var(--color-primary-darker);
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.grid-card-body {
    padding: 0.8rem 1rem;
}
.grid-card-body h3 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grid-card-body h3 a { color: var(--color-primary-darker); }
.grid-card-body h3 a:hover { color: var(--color-primary); }
.grid-card-body p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grid-card-meta {
    display: flex;
    gap: 0.8rem;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* === Horizontal Cards === */
.h-card {
    display: flex;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
.h-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.h-card-img {
    display: block;
    width: 140px;
    min-height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-bg-muted);
}
.h-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.h-card:hover .h-card-img img {
    transform: scale(1.05);
}
.h-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: rgba(255,255,255,0.4);
    font-size: 2rem;
}
.h-card:nth-child(even) .h-card-placeholder { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.h-card:nth-child(3n) .h-card-placeholder { background: linear-gradient(135deg, #10b981, #06b6d4); }
.h-card-body {
    padding: 0.8rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.h-card-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: rgba(59,130,246,0.1);
    color: var(--color-primary);
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    align-self: flex-start;
}
.h-card-body h3 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.h-card-body h3 a { color: var(--color-primary-darker); }
.h-card-body h3 a:hover { color: var(--color-primary); }
.h-card-body p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.h-card-meta {
    display: flex;
    gap: 0.8rem;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* === Section Title Bar === */
.section-title-bar h2 {
    font-size: 1.3rem;
    font-weight: 700;
}
.section-title-bar a {
    font-size: 0.85rem;
    color: var(--color-primary);
}

/* === Stats Section === */
.stats-section { padding: 3rem 0; background: var(--color-bg-soft); }
.stat-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    height: 100%;
    border-bottom: 3px solid var(--color-primary);
    transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon { font-size: 2rem; color: var(--color-primary); margin-bottom: 0.5rem; }
.stat-card .stat-number { font-size: 1.8rem; font-weight: 800; color: var(--color-primary-dark); display: block; }
.stat-card .stat-label { font-size: 0.85rem; color: var(--color-text-muted); }

/* === Sidebar === */
.side-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.side-card-heading {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
    font-weight: 700;
}
.side-card-body { padding: 1rem 1.2rem; }
.rank-list { counter-reset: rank; }
.rank-list li {
    display: flex;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
    counter-increment: rank;
}
.rank-list li:last-child { border-bottom: none; }
.rank-list li::before {
    content: counter(rank);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--color-bg-muted);
    color: var(--color-text-light);
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.8rem;
    flex-shrink: 0;
}
.rank-list li:nth-child(1)::before { background: var(--color-primary); color: #fff; }
.rank-list li:nth-child(2)::before { background: #6366f1; color: #fff; }
.rank-list li:nth-child(3)::before { background: var(--color-accent); color: var(--color-primary-darker); }
.rank-list li a {
    flex: 1;
    font-size: 0.9rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-list li a:hover { color: var(--color-primary); }

/* === Tags === */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-cloud a {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: all 0.2s;
}
.tag-cloud a:hover { background: var(--color-primary); color: #fff; }

/* === CTA Banner === */
.cta-banner {
    background: var(--gradient-cta);
    padding: 3.5rem 0;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 2rem 0;
}
.cta-banner h2 { font-size: 1.8rem; color: #fff; margin-bottom: 0.8rem; }
.cta-banner p { font-size: 1.05rem; opacity: 0.9; margin-bottom: 1.5rem; }
.cta-banner .badge-cta {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: var(--color-accent);
    color: var(--color-primary-darker);
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* === Footer === */
.site-footer {
    background: var(--color-primary-darker);
    color: rgba(255,255,255,0.6);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
    font-size: 0.85rem;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.footer-col a {
    display: block;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.footer-col a:hover { color: #fff; }
.footer-col p { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.footer-bottom {
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.footer-links a { color: rgba(255,255,255,0.5); }
.footer-links a:hover { color: #fff; }

/* === Breadcrumb === */
.breadcrumb-nav { padding: 1rem 0; font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumb-nav a { color: var(--color-text-muted); }
.breadcrumb-nav a:hover { color: var(--color-primary); }
.breadcrumb-nav .sep { margin: 0 0.5rem; color: var(--color-text-light); }

/* === Detail === */
.detail-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.detail-header { padding: 2rem 1.8rem 1.2rem; border-bottom: 1px solid var(--color-border); }
.detail-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.detail-meta .tag {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background: rgba(59,130,246,0.1);
    color: var(--color-primary);
    border-radius: 4px;
    font-size: 0.8rem;
}
.detail-content {
    padding: 1.8rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}
.detail-content p { margin-bottom: 1rem; }
.detail-content img { max-width: 100%; margin: 1rem auto; border-radius: 8px; }

/* === Search Hero === */
.search-hero {
    background: var(--gradient-hero);
    padding: 3rem 0;
    text-align: center;
    color: #fff;
}
.search-hero h2 { font-size: 1.5rem; color: #fff; margin-bottom: 1.2rem; }
.search-hero-form { max-width: 520px; margin: 0 auto; display: flex; }
.search-hero-input {
    flex: 1;
    height: 50px;
    border: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding: 0 1.5rem;
    font-size: 1rem;
    outline: none;
}
.search-hero-btn {
    height: 50px;
    padding: 0 2rem;
    background: var(--color-accent);
    color: var(--color-primary-darker);
    border: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* === 404 === */
.error-section {
    padding: 6rem 0;
    text-align: center;
    background: var(--gradient-hero);
    color: #fff;
}
.error-section h1 { font-size: 6rem; font-weight: 900; opacity: 0.3; }
.error-section h2 { font-size: 1.8rem; color: #fff; margin-bottom: 1rem; }
.error-section p { opacity: 0.8; margin-bottom: 2rem; }

/* === Pagination === */
.pagination-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.pagination-wrap a, .pagination-wrap span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: all 0.2s;
}
.pagination-wrap a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination-wrap .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* === Article Nav === */
.article-nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
    font-size: 0.9rem;
}
.article-nav a { color: var(--color-primary); max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Article List (horizontal) === */
.article-list-item {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
}
.article-list-item:last-child { border-bottom: none; }
.article-list-img {
    width: 140px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-muted);
}
.article-list-img img { width: 100%; height: 100%; object-fit: cover; }
.article-list-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: var(--color-text-light);
    font-size: 1.8rem;
}
.article-list-info { flex: 1; display: flex; flex-direction: column; }
.article-list-info h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; }
.article-list-info h4 a { color: var(--color-primary-darker); }
.article-list-info h4 a:hover { color: var(--color-primary); }
.article-list-info .desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-list-info .meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 0.4rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
}
.article-list-info .meta .tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(59,130,246,0.1);
    color: var(--color-primary);
    border-radius: 3px;
    font-size: 0.7rem;
}

/* === Card Box === */
.card-box {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s;
}
.card-box:hover { box-shadow: var(--shadow-md); }
.card-box-heading {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-box-heading h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.card-box-body { padding: 1.2rem 1.5rem; }

/* === About Section === */
.about-section { padding: 3.5rem 0; background: var(--gradient-deep); color: #fff; }
.about-section h2 { color: #fff; }
.about-section p { color: rgba(255,255,255,0.85); }
.about-feature {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md); padding: 1.2rem; margin-bottom: 1rem;
}
.about-feature strong { color: #fff; display: block; margin-bottom: 0.3rem; }
.about-feature span { color: rgba(255,255,255,0.7); font-size: 0.85rem; }

/* === Honor Section === */
.honor-section { padding: 3.5rem 0; }
.honor-card {
    background: #fff; border-radius: var(--radius-lg);
    padding: 2rem 1.5rem; box-shadow: var(--shadow-sm);
    text-align: center; height: 100%;
    border-top: 3px solid var(--color-accent);
    transition: transform 0.2s;
}
.honor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.honor-card .honor-icon { font-size: 2.5rem; color: var(--color-accent); margin-bottom: 1rem; }
.honor-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.honor-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* === Partners Section === */
.partners-section { padding: 3rem 0; }
.partner-card {
    background: #fff; border-radius: var(--radius-md);
    padding: 1.2rem 1.5rem; box-shadow: var(--shadow-sm);
    text-align: center; min-width: 140px;
    transition: transform 0.2s;
}
.partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.partner-card i { font-size: 1.8rem; color: var(--color-primary); margin-bottom: 0.5rem; display:block; }
.partner-card span { display: block; font-size: 0.85rem; color: var(--color-text-muted); }

/* === FAQ Section === */
.faq-section { padding: 3.5rem 0; }
.faq-item-wrap {
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0;
}
.faq-btn {
    background: none; border: none; width: 100%; text-align: left;
    padding: 0.8rem 0; font-size: 1rem; font-weight: 600;
    color: var(--color-primary-darker); cursor: pointer;
    display: flex; align-items: center;
}
.faq-btn:hover { color: var(--color-primary); }
.faq-btn .fa-chevron-down { transition: transform 0.2s; }
.faq-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.faq-answer {
    padding: 0 0 0.8rem 1.8rem;
    font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.8;
}

/* === Mission Section === */
.mission-section { padding: 3.5rem 0; background: var(--gradient-deep); color: #fff; }
.mission-section h2 { color: #fff; }
.mission-item {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-bottom: 1.2rem;
}
.mission-item .mission-icon { font-size: 1.8rem; flex-shrink: 0; }
.mission-item strong { color: #fff; display: block; margin-bottom: 0.2rem; }
.mission-item span { color: rgba(255,255,255,0.75); font-size: 0.9rem; }

/* === Testimonials === */
.testimonials-section { padding: 3.5rem 0; background: var(--color-bg-soft); }
.testimonial-card {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 1.5rem;
    text-align: center; min-width: 280px; max-width: 360px;
}
.testimonial-card .stars { color: var(--color-accent); margin-bottom: 0.8rem; font-size: 1.1rem; }
.testimonial-card p { font-style: italic; color: var(--color-text-muted); margin-bottom: 1rem; font-size: 0.9rem; }
.testimonial-card .user-avatar { font-size: 2rem; color: var(--color-primary); }

/* === Editor Picks (Masonry) === */
.editor-picks {
    column-count: 2;
    column-gap: 1.5rem;
}
.pick-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.pick-card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
.pick-card:first-child .pick-card-img {
    height: 280px;
}
.pick-card-body {
    padding: 1rem 1.2rem;
}
.pick-card-body h3 a:hover {
    color: var(--color-primary) !important;
}

/* === CTA Banner Section === */
.cta-banner-section {
    position: relative;
}

/* === Responsive === */
@media (max-width: 768px) {
    .hero-section { min-height: auto; padding: 2.5rem 0; }
    .hero-section h1 { font-size: 1.5rem; }
    .spotlight-img { height: 240px; }
    .spotlight-img-sm { height: 115px; }
    .grid-card-img { height: 130px; }
    .h-card { flex-direction: column; }
    .h-card-img { width: 100%; height: 160px; }
    .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
    .cta-banner { margin: 1.5rem 0.5rem; padding: 2rem 1rem; }
    .cta-banner h2 { font-size: 1.3rem; }
    .editor-picks { column-count: 1; }
    .pick-card-img { height: 180px; }
    .detail-header h1 { font-size: 1.3rem; }
    .detail-content { padding: 1.2rem; }
}