/* ============================================
   FORPROCER - Blog CSS
   "Liquid Glass" Editorial Design
   ============================================ */

/* --- Categories section --- */
.categories-section {
    padding: 1.5rem 0;
}

/* --- Blog search form --- */
.blog-search-form {
    display: flex;
    gap: var(--space-sm);
    max-width: 500px;
    margin: 0 auto;
}

.blog-search-form .form-input {
    flex: 1;
    border-radius: var(--radius-full);
}

/* --- Blog newsletter --- */
.blog-newsletter {
    background: linear-gradient(
        135deg,
        rgba(var(--color-dark-teal-rgb), 0.05),
        rgba(var(--color-light-teal-rgb), 0.08)
    );
    border: 1px solid rgba(var(--color-light-teal-rgb), 0.10);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle decorative accent */
.blog-newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-dark-teal), var(--color-medium-teal), var(--color-light-teal));
}

.blog-newsletter h3 { margin-bottom: var(--space-sm); }
.blog-newsletter p { color: var(--text-secondary); margin-bottom: var(--space-lg); }

/* --- Article featured image --- */
.article-featured-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.article-featured-image img {
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-featured-image:hover img {
    transform: scale(1.02);
}

/* --- Article footer tags --- */
.article-footer__tags {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* --- No results --- */
.no-results {
    text-align: center;
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
}

.no-results__icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    opacity: 0.3;
    color: var(--color-light-teal);
}

.no-results p {
    margin-bottom: var(--space-xl);
    font-size: var(--text-lg);
}

/* --- Spinner for newsletter loading --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .article-header__title {
        font-size: var(--text-4xl);
    }

    .blog-newsletter {
        padding: var(--space-3xl) var(--space-2xl);
    }
}