/* ==========================================

   NudeImg — Blog Page Stylesheet

   Depends on css/ni-style.css for variables & base

   ========================================== */



/* ==========================================

   BLOG HERO

   ========================================== */

.blog-hero {

    padding: calc(var(--navbar-height) + 56px) 0 48px;

    position: relative;

    overflow: hidden;

}



.blog-hero__bg-glow {

    position: absolute;

    top: -150px;

    left: 50%;

    transform: translateX(-50%);

    width: 700px;

    height: 400px;

    background: radial-gradient(ellipse, rgba(255, 163, 26, 0.2) 0%, transparent 70%);

    pointer-events: none;

}



.blog-hero__content {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.blog-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 14px;

    background: rgba(255, 163, 26, 0.15);

    border: 1px solid rgba(255, 163, 26, 0.3);

    border-radius: 100px;

    font-size: 0.8rem;

    color: var(--accent-lighter);

    margin-bottom: 20px;

}



.blog-hero__title {

    font-size: 3rem;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -1px;

    margin-bottom: 12px;

}



.blog-hero__subtitle {

    font-size: 1.05rem;

    color: var(--text-secondary);

    max-width: 560px;

    line-height: 1.6;

    margin-bottom: 36px;

    text-align: center;

}



/* ==========================================

   SEARCH BAR

   ========================================== */

.blog-search {

    display: flex;

    gap: 10px;

    width: 100%;

    max-width: 640px;

    margin-bottom: 28px;

}



.blog-search__input {

    flex: 1;

    background: var(--bg-card);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius-sm);

    padding: 12px 18px;

    font-size: 0.95rem;

    color: var(--text-primary);

    font-family: var(--font-main);

    outline: none;

    transition: border-color 0.25s, box-shadow 0.25s;

}



.blog-search__input::placeholder {

    color: var(--text-muted);

}



.blog-search__input:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(255, 163, 26, 0.15);

}



.blog-search__btn {

    padding: 12px 24px;

    background: var(--accent-gradient);

    color: #fff;

    border: none;

    border-radius: var(--radius-sm);

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    font-family: var(--font-main);

    transition: all 0.25s;

    white-space: nowrap;

    box-shadow: 0 4px 15px var(--accent-glow);

}



.blog-search__btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px var(--accent-glow);

}



/* ==========================================

   TAG FILTERS

   ========================================== */

.blog-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 36px;

    justify-content: center;

    width: 100%;

    max-width: 740px;

}



.blog-tag {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 100px;

    font-size: 0.82rem;

    font-weight: 500;

    cursor: pointer;

    border: 1px solid var(--border-color);

    background: var(--bg-card);

    color: var(--text-secondary);

    transition: all 0.2s ease;

    user-select: none;

    white-space: nowrap;

}



.blog-tag:hover {

    border-color: var(--accent);

    color: var(--accent-lighter);

    background: rgba(255, 163, 26, 0.08);

}



.blog-tag.active {

    background: var(--accent-gradient);

    border-color: transparent;

    color: #fff;

    font-weight: 600;

    box-shadow: 0 2px 10px var(--accent-glow);

}



/* ==========================================

   RESULTS COUNT

   ========================================== */

.blog-results-count {

    font-size: 0.88rem;

    color: var(--text-muted);

    margin-bottom: 28px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

    width: 100%;

    max-width: 740px;

    text-align: center;

}



.blog-results-count span {

    color: var(--accent-lighter);

    font-weight: 600;

}



/* ==========================================

   BLOG SECTION

   ========================================== */

.blog-section {

    padding: 0 0 100px;

}



/* ==========================================

   BLOG CARDS GRID

   ========================================== */

.blog-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-bottom: 48px;

    justify-content: flex-start;

}



/* Empty state */

.blog-empty {

    grid-column: 1 / -1;

    text-align: center;

    padding: 80px 20px;

    color: var(--text-muted);

}



.blog-empty__icon {

    font-size: 3rem;

    margin-bottom: 16px;

}



.blog-empty__text {

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 8px;

    color: var(--text-secondary);

}



.blog-empty__sub {

    font-size: 0.9rem;

}



/* ==========================================

   BLOG CARD

   ========================================== */

.blog-post-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    transition: all 0.3s ease;

    text-decoration: none;

    color: inherit;

    /* 4 columns: (100% - 3*24px) / 4 */

    width: calc(25% - 18px);

    min-width: 220px;

}



.blog-post-card:hover {

    border-color: var(--accent);

    transform: translateY(-5px);

    box-shadow: 0 12px 40px rgba(255, 163, 26, 0.18);

    color: inherit;

}



/* Card Cover */

.blog-post-card__cover {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    flex-shrink: 0;

    background: linear-gradient(135deg, #1a1a2e 0%, #2a1a4e 100%);

}



.blog-post-card__cover img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition: transform 0.4s ease;

}



.blog-post-card:hover .blog-post-card__cover img {

    transform: scale(1.04);

}



.blog-post-card__cover-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.8rem;

}



.blog-post-card__tag-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    background: var(--accent-gradient);

    color: #fff;

    padding: 3px 10px;

    border-radius: 100px;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.3px;

    z-index: 1;

}



/* Card Body */

.blog-post-card__body {

    padding: 16px 18px 18px;

    display: flex;

    flex-direction: column;

    flex: 1;

    gap: 8px;

}



.blog-post-card__date {

    font-size: 0.78rem;

    color: var(--text-muted);

}



.blog-post-card__title {

    font-size: 0.97rem;

    font-weight: 700;

    line-height: 1.4;

    color: var(--text-primary);

    /* Clamp to 2 lines */

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color 0.2s;

}



.blog-post-card:hover .blog-post-card__title {

    color: var(--accent-lighter);

}



.blog-post-card__excerpt {

    font-size: 0.85rem;

    color: var(--text-secondary);

    line-height: 1.55;

    /* Clamp to 3 lines */

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    flex: 1;

}



/* Card Read Button */

.blog-post-card__btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 9px 16px;

    background: var(--accent-gradient);

    color: #fff;

    border-radius: var(--radius-sm);

    font-size: 0.85rem;

    font-weight: 600;

    text-decoration: none;

    margin-top: 6px;

    transition: all 0.25s;

    box-shadow: 0 3px 12px var(--accent-glow);

}



.blog-post-card__btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 5px 18px var(--accent-glow);

    color: #fff;

}



/* ==========================================

   LOAD MORE / SHOW ALL BUTTON

   ========================================== */

.blog-cta {

    text-align: center;

}



.blog-cta__btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 36px;

    border: 1px solid var(--border-color-light);

    background: transparent;

    color: var(--text-primary);

    border-radius: var(--radius-sm);

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    font-family: var(--font-main);

    transition: all 0.25s;

    text-decoration: none;

}



.blog-cta__btn:hover {

    border-color: var(--accent);

    color: var(--accent-lighter);

    background: rgba(255, 163, 26, 0.08);

}



/* ==========================================

   HIDDEN CARD STATE (for filtering)

   ========================================== */

.blog-post-card.hidden {

    display: none;

}



/* ==========================================

   RESPONSIVE

   ========================================== */



/* Large tablet — 3 columns */

@media (max-width: 1200px) {

    .blog-post-card {

        /* (100% - 2*24px) / 3 */

        width: calc(33.333% - 16px);

    }

}



/* Tablet — 2 columns */

@media (max-width: 1024px) {

    .blog-hero__title {

        font-size: 2.4rem;

    }

    .blog-grid {

        gap: 20px;

    }

    .blog-post-card {

        /* (100% - 1*20px) / 2 */

        width: calc(50% - 10px);

    }

}



/* Mobile — 2 columns */

@media (max-width: 768px) {

    .blog-hero {

        padding: calc(var(--navbar-height) + 32px) 0 36px;

    }

    .blog-hero__title {

        font-size: 2rem;

    }

    .blog-hero__subtitle {

        font-size: 0.95rem;

        margin-bottom: 24px;

    }

    .blog-search {

        flex-direction: row;

        max-width: 100%;

    }

    .blog-search__input {

        font-size: 0.9rem;

        padding: 10px 14px;

    }

    .blog-search__btn {

        padding: 10px 18px;

        font-size: 0.9rem;

    }

    .blog-grid {

        gap: 16px;

    }

    .blog-post-card {

        /* (100% - 1*16px) / 2 */

        width: calc(50% - 8px);

    }

    .blog-section {

        padding-bottom: 60px;

    }

}



/* Small mobile — 1 column */

@media (max-width: 480px) {

    .blog-hero__title {

        font-size: 1.7rem;

    }

    .blog-post-card {

        width: 100%;

    }

    .blog-post-card__cover {

        aspect-ratio: 16 / 9;

    }

}