/* Kols Page Specific Styles */

/* ── Hero Section ── */
.ec-hero {
    background-color: var(--color-surface);
    overflow: hidden;
}

.ec-hero__wave {
    background: url(../images/hero-section/bg-wave.jpg) center bottom / cover no-repeat;
    height: auto;
    aspect-ratio: 2880 / 1194;
}

.ec-hero__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ec-hero__heading-accent {
    color: var(--color-text-primary);
}

.ec-hero__heading-main {
    display: inline;
    color: var(--color-primary);
}

.ec-hero__desc {
    max-width: 55rem;
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-top: var(--space-md);
}

.ec-hero__cta {
    display: inline-block;
    padding: 1.2rem 3.2rem;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-base);
    margin-top: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.ec-hero__cta:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-0.3rem);
    box-shadow: var(--shadow-lg);
}

/* ── Layout Adjustments ── */
@media (max-width: 1024px) {
    .ec-hero__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ec-hero__desc {
        margin-inline: auto;
    }

    .ec-features__inner {
        grid-template-columns: 1fr;
    }
}

/* ── Stats Section Override (Fix layout conflict) ── */
.stat-item__number::before,
.stat-item__number::after {
    display: none !important;
}

.stats__grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.stat-item__number {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .stats__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
    }
}

/* ── Mạng lưới KOLs ── */
.kols-network {
    padding-block: var(--space-4xl);
    background-color: var(--color-surface);
}

.kols-network__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.kols-network__heading {
    font-size: clamp(var(--font-2xl), 5vw, var(--font-4xl));
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.kols-network__desc {
    font-size: var(--font-md);
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 80rem;
    margin-inline: auto;
}

.kols-network__wrapper {
    display: flex;
}

/* Tablet & Desktop: Flex layout */
@media (min-width: 769px) {
    .kols-network__wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }
    .kols-network__group {
        /* Default to 3 columns on tablet */
        flex: 0 0 calc(33.333% - var(--space-xl));
    }
}

/* Desktop: 4 columns layout */
@media (min-width: 1025px) {
    .kols-network__group {
        flex: 0 0 calc(25% - var(--space-xl));
    }
}

.kols-network__group {
    position: relative;
    /* padding-right removed, relying on gap/spaceBetween for spacing */
}

/* Add dividers between columns for desktop & tablet */
.kols-network__divider {
    position: absolute;
    right: calc(var(--space-xl) / -2);
    top: 3.5rem; /* slightly below the title */
    bottom: 0;
    width: 1px;
    background-color: var(--color-border);
}

/* Hide dividers dynamically based on wrapping */
@media (min-width: 1025px) {
    /* Desktop: 4 cols */
    .kols-network__group:nth-child(4n) .kols-network__divider,
    .kols-network__group:nth-child(7) .kols-network__divider {
        display: none;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet: 3 cols */
    .kols-network__group:nth-child(3n) .kols-network__divider,
    .kols-network__group:last-child .kols-network__divider {
        display: none;
    }
}

.kols-network__group-title {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.kols-network__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.kols-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background-color: #F8F9FA; /* Light pill background */
    padding: var(--space-xs);
    border-radius: 5rem;
    transition: all var(--transition-base);
}

.kols-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(2px);
    background-color: var(--color-surface);
}

.kols-item__avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    object-fit: cover;
}

.kols-item__info {
    display: flex;
    flex-direction: column;
}

.kols-item__name {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    margin-bottom: 0.2rem;
}

.kols-item__followers {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* Responsiveness */
@media (max-width: 1024px) {
    /* Hide dividers when swiper is active */
    .kols-network__divider {
        display: none;
    }
}