// ==========================================================================
// PressZone Theme - Blog Page Styles
// ==========================================================================
// Entry point - compiles to blog.css
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

@import 'abstracts/variables';
@import 'abstracts/mixins';

// --------------------------------------------------------------------------
// Blog Hero
// --------------------------------------------------------------------------
.blog-hero {
    text-align: center;

    @include rtl {
        text-align: right;
    }
}

.blog-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: $color-primary;
    padding: 0.5rem 1rem;
    background: rgba($color-primary, 0.1);
    border: 1px solid rgba($color-primary, 0.2);
    border-radius: 50px;
}

.blog-title {
    color: $light-text-primary;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

// --------------------------------------------------------------------------
// Section Headers
// --------------------------------------------------------------------------
.section-header h2 {
    color: $light-text-primary;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

.view-all-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: $color-primary;
    text-decoration: none;

    &:hover {
        color: $color-primary-hover;
    }
}

// --------------------------------------------------------------------------
// Featured Post Card
// --------------------------------------------------------------------------
.featured-post-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 1rem;
    overflow: hidden;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;
        box-shadow: $shadow-lg;

        .featured-post-image img {
            transform: scale(1.05);
        }
    }

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }
}

.featured-post-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform $transition-base;
    }
}

.post-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    background: $color-primary;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50px;

    @include rtl {
        left: auto;
        right: 1rem;
    }
}

.featured-post-title a {
    color: $light-text-primary;
    text-decoration: none;

    &:hover {
        color: $color-primary;
    }

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

.read-more-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: $color-primary;
    text-decoration: none;
}

// --------------------------------------------------------------------------
// Post List
// --------------------------------------------------------------------------
.post-list-item {
    padding: 1rem;
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;
    align-items: center;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;

        .post-list-arrow {
            background: $color-primary;
            color: #fff;
        }
    }

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }

    @include rtl {
        flex-direction: row-reverse;
    }
}

.post-list-image {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.post-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: $color-primary;
    text-transform: uppercase;
}

.post-list-title a {
    color: $light-text-primary;
    text-decoration: none;

    &:hover {
        color: $color-primary;
    }

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

.post-list-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $light-bg-secondary;
    border-radius: 50%;
    color: $light-text-muted;
    transition: all $transition-base;

    body.dark-mode & {
        background: $dark-bg-secondary;
        color: $dark-text-muted;
    }

    @include rtl {
        margin-left: 0;
        margin-right: auto;
    }
}

// --------------------------------------------------------------------------
// Guide Cards
// --------------------------------------------------------------------------
.guide-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;
    }

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }
}

.guide-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba($color-primary, 0.1);
    border-radius: 0.5rem;
    color: $color-primary;
    font-size: 1.125rem;
}

.guide-title a {
    color: $light-text-primary;
    text-decoration: none;

    &:hover {
        color: $color-primary;
    }

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

// Docs Link Card
.docs-link-card {
    background: $light-bg-tertiary;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;

    body.dark-mode & {
        background: $dark-bg-tertiary;
        border-color: $dark-border-color;
    }
}

// --------------------------------------------------------------------------
// Newsletter CTA
// --------------------------------------------------------------------------
.blog-newsletter {
    background: $light-bg-secondary;

    body.dark-mode & {
        background: $dark-bg-secondary;
    }
}

.newsletter-cta-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 1rem;

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

// --------------------------------------------------------------------------
// RTL Support
// --------------------------------------------------------------------------
@include rtl {
    .blog-page {
        text-align: right;
    }
}