/* Blog & Insights Page Styles - Dynamic Dashboard Design */

/* ================================
   BLOG PAGE CSS VARIABLES
   ================================ */
:root {
    /* Blog Container Variables */
    --blog-container-max-width: 1164px;
    --blog-container-margin: 0 auto;
    --blog-container-padding: 0 var(--space-4);

    /* Newsletter Section Variables */
    --blog-newsletter-section-margin-bottom: var(--space-14);
    --blog-newsletter-section-background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(59, 130, 246, 0.03) 100%);
    --blog-newsletter-section-border-radius: var(--radius-2xl);
    --blog-newsletter-section-padding: var(--space-10);
    --blog-newsletter-section-border: 2px solid rgba(6, 182, 212, 0.1);
    --blog-newsletter-section-display: flex;
    --blog-newsletter-section-flex-direction: column;
    --blog-newsletter-section-gap: var(--space-6);

    /* Newsletter Subscription Variables */
    --blog-newsletter-subscription-background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --blog-newsletter-subscription-border-radius: var(--radius-2xl);
    --blog-newsletter-subscription-padding: var(--space-6);
    --blog-newsletter-subscription-color: white;
    --blog-newsletter-subscription-width: 100%;

    /* Newsletter Shimmer Animation Variables */
    --blog-newsletter-shimmer-top: -50%;
    --blog-newsletter-shimmer-left: -50%;
    --blog-newsletter-shimmer-width: 200%;
    --blog-newsletter-shimmer-height: 200%;
    --blog-newsletter-shimmer-background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    --blog-newsletter-shimmer-animation: newsletterShimmer 8s ease-in-out infinite;
    --blog-newsletter-shimmer-opacity-start: 0.3;
    --blog-newsletter-shimmer-opacity-mid: 0.6;
    --blog-newsletter-shimmer-transform-start: rotate(0deg);
    --blog-newsletter-shimmer-transform-mid: rotate(180deg);

    /* Newsletter Content Variables */
    --blog-newsletter-content-z-index: 2;
    --blog-newsletter-title-font-size: var(--text-2xl);
    --blog-newsletter-title-font-weight: var(--font-bold);
    --blog-newsletter-title-margin-bottom: var(--space-3);
    --blog-newsletter-title-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --blog-newsletter-subtitle-font-size: var(--text-base);
    --blog-newsletter-subtitle-line-height: 1.6;
    --blog-newsletter-subtitle-margin-bottom: var(--space-6);
    --blog-newsletter-subtitle-opacity: 0.95;

    /* Newsletter Form Variables */
    --blog-newsletter-form-display: flex;
    --blog-newsletter-form-gap: var(--space-3);
    --blog-newsletter-input-flex: 1;
    --blog-newsletter-input-padding: var(--space-3) var(--space-4);
    --blog-newsletter-input-border-radius: var(--radius-lg);
    --blog-newsletter-input-font-size: var(--text-sm);
    --blog-newsletter-input-background: rgba(255, 255, 255, 0.95);
    --blog-newsletter-input-background-focus: white;
    --blog-newsletter-input-color: var(--color-text-primary);
    --blog-newsletter-input-transition: all 0.3s ease;
    --blog-newsletter-input-placeholder-color: #64748b;
    --blog-newsletter-input-focus-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);

    /* Newsletter Button Variables */
    --blog-newsletter-btn-background: rgba(255, 255, 255, 0.2);
    --blog-newsletter-btn-background-hover: rgba(255, 255, 255, 0.3);
    --blog-newsletter-btn-color: white;
    --blog-newsletter-btn-border: 2px solid rgba(255, 255, 255, 0.3);
    --blog-newsletter-btn-border-hover: rgba(255, 255, 255, 0.5);
    --blog-newsletter-btn-padding: var(--space-3) var(--space-6);
    --blog-newsletter-btn-border-radius: var(--radius-lg);
    --blog-newsletter-btn-font-weight: var(--font-semibold);
    --blog-newsletter-btn-font-size: var(--text-sm);
    --blog-newsletter-btn-transition: all 0.3s ease;
    --blog-newsletter-btn-backdrop-filter: blur(10px);
    --blog-newsletter-btn-hover-transform: translateY(-2px);
    --blog-newsletter-btn-active-transform: translateY(0);

    /* Master Blog Tiles Variables */
    --blog-master-tiles-display: grid;
    --blog-master-tiles-grid-columns: repeat(3, 1fr);
    --blog-master-tiles-grid-rows: 1fr;
    --blog-master-tiles-gap: var(--space-5);

    /* Master Tile Variables */
    --blog-master-tile-background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --blog-master-tile-border: 2px solid rgba(6, 182, 212, 0.1);
    --blog-master-tile-border-hover: #06b6d4;
    --blog-master-tile-border-radius: var(--radius-2xl);
    --blog-master-tile-padding: 0;
    --blog-master-tile-transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --blog-master-tile-box-shadow: 0 4px 14px rgba(6, 182, 212, 0.1);
    --blog-master-tile-box-shadow-hover: 0 20px 40px rgba(6, 182, 212, 0.2);
    --blog-master-tile-height: 300px;
    --blog-master-tile-hover-transform: translateY(-8px) scale(1.02);
    --blog-master-tile-before-background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(59, 130, 246, 0.03) 100%);
    --blog-master-tile-before-opacity: 0;
    --blog-master-tile-before-opacity-hover: 1;
    --blog-master-tile-before-transition: opacity 0.4s ease;
    --blog-master-tile-z-index: 2;

    /* Master Tile Image Variables */
    --blog-master-tile-image-height: 50%;
    --blog-master-tile-image-background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --blog-master-tile-image-border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    --blog-master-tile-image-background-size: cover;
    --blog-master-tile-image-background-position: center;
    --blog-master-tile-image-background-repeat: no-repeat;

    /* Master Tile Placeholder Variables */
    --blog-master-tile-placeholder-font-size: 1.9rem;
    --blog-master-tile-placeholder-color: white;
    --blog-master-tile-placeholder-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Master Tile Content Variables */
    --blog-master-tile-content-height: 50%;
    --blog-master-tile-content-padding: var(--space-5);
    --blog-master-tile-content-text-align: left;

    /* Master Tile Title Variables */
    --blog-master-tile-title-font-size: var(--text-lg);
    --blog-master-tile-title-font-weight: var(--font-bold);
    --blog-master-tile-title-color: var(--color-text-primary);
    --blog-master-tile-title-margin-bottom: var(--space-2);
    --blog-master-tile-title-line-height: 1.3;

    /* Master Tile Excerpt Variables */
    --blog-master-tile-excerpt-font-size: var(--text-sm);
    --blog-master-tile-excerpt-color: var(--color-text-secondary);
    --blog-master-tile-excerpt-line-height: 1.4;
    --blog-master-tile-excerpt-margin-bottom: var(--space-2);
    --blog-master-tile-excerpt-line-clamp: 2;

    /* Master Tile Meta Variables */
    --blog-master-tile-meta-font-size: var(--text-xs);
    --blog-master-tile-meta-color: var(--color-text-secondary);
    --blog-master-tile-category-background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --blog-master-tile-category-color: white;
    --blog-master-tile-category-padding: 4px 12px;
    --blog-master-tile-category-border-radius: var(--radius-full);
    --blog-master-tile-category-font-size: 12px;
    --blog-master-tile-category-font-weight: var(--font-bold);
    --blog-master-tile-category-text-transform: uppercase;
    --blog-master-tile-category-letter-spacing: 0.5px;
    --blog-master-tile-date-font-size: 12px;
    --blog-master-tile-date-color: var(--color-text-secondary);
    --blog-master-tile-date-font-weight: var(--font-medium);

    /* Blog Archive Section Variables */
    --blog-archive-section-margin-top: var(--space-10);
    --blog-archive-section-margin-bottom: var(--space-12);

    /* Blog Search Container Variables */
    --blog-search-container-margin-bottom: var(--space-10);
    --blog-search-bar-max-width: 1164px;
    --blog-search-input-wrapper-background: white;
    --blog-search-input-wrapper-border: 2px solid rgba(6, 182, 212, 0.2);
    --blog-search-input-wrapper-border-focus: #06b6d4;
    --blog-search-input-wrapper-border-radius: var(--radius-2xl);
    --blog-search-input-wrapper-padding: var(--space-4);
    --blog-search-input-wrapper-transition: all 0.3s ease;
    --blog-search-input-wrapper-box-shadow: 0 4px 14px rgba(6, 182, 212, 0.1);
    --blog-search-input-wrapper-box-shadow-focus: 0 8px 30px rgba(6, 182, 212, 0.2);

    /* Search Icon Variables */
    --blog-search-icon-color: #06b6d4;
    --blog-search-icon-margin-right: var(--space-3);
    --blog-search-icon-font-size: var(--text-lg);

    /* Search Input Variables */
    --blog-search-input-flex: 1;
    --blog-search-input-font-size: var(--text-base);
    --blog-search-input-color: var(--color-text-primary);
    --blog-search-input-placeholder-color: #94a3b8;

    /* Search Dropdown Variables */
    --blog-search-dropdown-margin-left: var(--space-4);
    --blog-search-dropdown-padding-left: var(--space-4);
    --blog-search-dropdown-border-left: 2px solid rgba(6, 182, 212, 0.2);
    --blog-category-filter-font-size: var(--text-sm);
    --blog-category-filter-color: var(--color-text-primary);
    --blog-category-filter-padding-right: var(--space-6);
    --blog-dropdown-icon-color: #06b6d4;
    --blog-dropdown-icon-font-size: var(--text-sm);

    /* Blog Category Grid Variables */
    --blog-category-grid-display: grid;
    --blog-category-grid-columns: repeat(2, 1fr);
    --blog-category-grid-rows: repeat(3, 1fr);
    --blog-category-grid-gap: var(--space-6);

    /* Blog Tile Variables */
    --blog-tile-background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --blog-tile-border: 2px solid rgba(6, 182, 212, 0.1);
    --blog-tile-border-hover: #06b6d4;
    --blog-tile-border-radius: var(--radius-2xl);
    --blog-tile-transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --blog-tile-box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
    --blog-tile-box-shadow-hover: 0 25px 50px rgba(6, 182, 212, 0.2);
    --blog-tile-height: 350px;
    --blog-tile-hover-transform: translateY(-12px) rotateX(5deg);

    /* Blog Tile Image Variables */
    --blog-tile-image-height: 50%;
    --blog-tile-image-background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    --blog-tile-image-border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    --blog-tile-image-background-size: cover;
    --blog-tile-image-background-position: center;
    --blog-tile-image-background-repeat: no-repeat;
    --blog-tile-image-before-background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);

    /* Blog Tile Icon Variables */
    --blog-tile-icon-font-size: 2.5rem;
    --blog-tile-icon-color: white;
    --blog-tile-icon-text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    --blog-tile-icon-z-index: 2;

    /* Blog Tile Overlay Variables */
    --blog-tile-overlay-background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
    --blog-tile-overlay-opacity: 0;
    --blog-tile-overlay-opacity-hover: 1;
    --blog-tile-overlay-transition: opacity 0.3s ease;

    /* Blog Tile Content Variables */
    --blog-tile-content-height: 50%;
    --blog-tile-content-padding: var(--space-5);

    /* Blog Tile Category Variables */
    --blog-tile-category-top: var(--space-3);
    --blog-tile-category-left: var(--space-3);
    --blog-tile-category-background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --blog-tile-category-color: white;
    --blog-tile-category-padding: 4px 12px;
    --blog-tile-category-border-radius: var(--radius-full);
    --blog-tile-category-font-size: 12px;
    --blog-tile-category-font-weight: var(--font-bold);
    --blog-tile-category-text-transform: uppercase;
    --blog-tile-category-letter-spacing: 0.5px;
    --blog-tile-category-z-index: 3;
    --blog-tile-category-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* Blog Tile Title Variables */
    --blog-tile-title-font-size: var(--text-lg);
    --blog-tile-title-font-weight: var(--font-bold);
    --blog-tile-title-color: var(--color-text-primary);
    --blog-tile-title-margin-bottom: var(--space-2);
    --blog-tile-title-line-height: 1.3;

    /* Blog Tile Excerpt Variables */
    --blog-tile-excerpt-font-size: var(--text-sm);
    --blog-tile-excerpt-color: var(--color-text-secondary);
    --blog-tile-excerpt-line-height: 1.4;
    --blog-tile-excerpt-margin-bottom: var(--space-2);

    /* Blog Tile Meta Variables */
    --blog-tile-meta-font-size: 12px;
    --blog-tile-meta-color: #64748b;
    --blog-tile-meta-padding-top: var(--space-4);
    --blog-tile-meta-border-top: 1px solid rgba(6, 182, 212, 0.1);
    --blog-tile-author-font-weight: var(--font-semibold);
    --blog-tile-date-opacity: 0.8;

    /* Animation Variables */
    --blog-tile-float-animation: tileFloat 2s ease-in-out infinite;
    --blog-tile-float-transform-start: translateY(0px);
    --blog-tile-float-transform-mid: translateY(-5px);

    /* Responsive Variables - Tablet */
    --blog-responsive-tablet-master-tiles-columns: repeat(2, 1fr);
    --blog-responsive-tablet-category-grid-columns: repeat(2, 1fr);
    --blog-responsive-tablet-category-grid-gap: var(--space-6);

    /* Responsive Variables - Mobile */
    --blog-responsive-mobile-newsletter-padding: var(--space-8);
    --blog-responsive-mobile-newsletter-margin-bottom: var(--space-16);
    --blog-responsive-mobile-newsletter-gap: var(--space-6);
    --blog-responsive-mobile-master-tiles-columns: 1fr;
    --blog-responsive-mobile-master-tiles-gap: var(--space-4);
    --blog-responsive-mobile-category-grid-columns: 1fr;
    --blog-responsive-mobile-category-grid-gap: var(--space-4);
    --blog-responsive-mobile-search-wrapper-padding: var(--space-3);
    --blog-responsive-mobile-search-wrapper-gap: var(--space-3);
    --blog-responsive-mobile-search-dropdown-margin-left: 0;
    --blog-responsive-mobile-search-dropdown-padding-left: 0;
    --blog-responsive-mobile-search-dropdown-padding-top: var(--space-3);
    --blog-responsive-mobile-search-dropdown-border-top: 1px solid rgba(6, 182, 212, 0.2);
    --blog-responsive-mobile-category-filter-padding: var(--space-2);
    --blog-responsive-mobile-category-filter-border: 1px solid rgba(6, 182, 212, 0.2);
    --blog-responsive-mobile-category-filter-border-radius: var(--radius-md);

    /* Responsive Variables - Small Mobile */
    --blog-responsive-small-mobile-newsletter-padding: var(--space-6);
    --blog-responsive-small-mobile-newsletter-margin-bottom: var(--space-12);
    --blog-responsive-small-mobile-master-tile-image-height: 100px;
    --blog-responsive-small-mobile-master-tile-placeholder-font-size: 2.5rem;
    --blog-responsive-small-mobile-blog-tile-image-height: 120px;
    --blog-responsive-small-mobile-blog-tile-icon-font-size: 3rem;
    --blog-responsive-small-mobile-blog-tile-content-padding: var(--space-4);
    --blog-responsive-small-mobile-blog-tile-title-font-size: var(--text-lg);
    --blog-responsive-small-mobile-blog-tile-meta-gap: var(--space-1);

    /* Page Identity Icon Variables */
    --blog-page-identity-position: absolute;
    --blog-page-identity-top: 2rem;
    --blog-page-identity-right: 2rem;
    --blog-page-identity-z-index: 5;
    --blog-page-identity-animation: fadeInScale 1s ease-out 0.5s both;
    --blog-page-identity-icon-width: 61px;
    --blog-page-identity-icon-height: 61px;
    --blog-page-identity-icon-background: linear-gradient(135deg, rgba(124, 58, 237, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
    --blog-page-identity-icon-border-radius: 50%;
    --blog-page-identity-icon-font-size: 25px;
    --blog-page-identity-icon-border: 3px solid rgba(124, 58, 237, 0.4);
    --blog-page-identity-icon-box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --blog-page-identity-icon-box-shadow-hover: 0 12px 35px rgba(124, 58, 237, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --blog-page-identity-icon-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --blog-page-identity-icon-backdrop-filter: blur(10px);
    --blog-page-identity-icon-transform-hover: scale(1.1) rotate(5deg);

    /* Page Identity Icon Responsive Variables */
    --blog-page-identity-tablet-top: 1.5rem;
    --blog-page-identity-tablet-right: 1.5rem;
    --blog-page-identity-tablet-width: 46px;
    --blog-page-identity-tablet-height: 46px;
    --blog-page-identity-tablet-font-size: 19px;
    --blog-page-identity-tablet-border-width: 2px;
    --blog-page-identity-mobile-top: 1rem;
    --blog-page-identity-mobile-right: 1rem;
    --blog-page-identity-mobile-width: 38px;
    --blog-page-identity-mobile-height: 38px;
    --blog-page-identity-mobile-font-size: 15px;
}

/* Blog specific styling overrides */

/* Blog Hero Section Top Margin - Standardized to match home page exactly */
#blog-page-wrapper .hero {
    margin-top: 128px !important;
}

/* Remove content-area top padding for blog page */
#blog-page-wrapper {
    padding-top: 0 !important;
}

/* Blog Hero Grid Background Pattern - Force Override */
#blog-page-wrapper .hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') !important;
    opacity: 0.3 !important;
    z-index: 0 !important;
}

/* Page Identity Icon - Top Right Corner */
.hero-page-identity {
    position: var(--blog-page-identity-position);
    top: var(--blog-page-identity-top);
    right: var(--blog-page-identity-right);
    z-index: var(--blog-page-identity-z-index);
    animation: var(--blog-page-identity-animation);
}

#blog-page-wrapper .page-identity-icon {
    width: var(--blog-page-identity-icon-width);
    height: var(--blog-page-identity-icon-height);
    background: var(--blog-page-identity-icon-background);
    border-radius: var(--blog-page-identity-icon-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--blog-page-identity-icon-font-size);
    border: var(--blog-page-identity-icon-border);
    box-shadow: var(--blog-page-identity-icon-box-shadow);
    transition: var(--blog-page-identity-icon-transition);
    backdrop-filter: var(--blog-page-identity-icon-backdrop-filter);
}

#blog-page-wrapper .page-identity-icon:hover {
    transform: var(--blog-page-identity-icon-transform-hover);
    box-shadow: var(--blog-page-identity-icon-box-shadow-hover);
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.blog-container {
    max-width: var(--blog-container-max-width);
    margin: var(--blog-container-margin);
    padding: var(--blog-container-padding);
}

/* Newsletter & Master Display Section */
.blog-newsletter-section {
    margin-bottom: var(--blog-newsletter-section-margin-bottom);
    background: var(--blog-newsletter-section-background);
    border-radius: var(--blog-newsletter-section-border-radius);
    padding: var(--blog-newsletter-section-padding);
    border: var(--blog-newsletter-section-border);
}

/* Core Title Section Layout */
.blog-newsletter-section {
    display: var(--blog-newsletter-section-display);
    flex-direction: var(--blog-newsletter-section-flex-direction);
    gap: var(--blog-newsletter-section-gap);
}

/* Newsletter Subscription - Full Width */
.newsletter-subscription {
    background: var(--blog-newsletter-subscription-background);
    border-radius: var(--blog-newsletter-subscription-border-radius);
    padding: var(--blog-newsletter-subscription-padding);
    color: var(--blog-newsletter-subscription-color);
    position: relative;
    overflow: hidden;
    width: var(--blog-newsletter-subscription-width);
}

.newsletter-subscription::before {
    content: '';
    position: absolute;
    top: var(--blog-newsletter-shimmer-top);
    left: var(--blog-newsletter-shimmer-left);
    width: var(--blog-newsletter-shimmer-width);
    height: var(--blog-newsletter-shimmer-height);
    background: var(--blog-newsletter-shimmer-background);
    animation: var(--blog-newsletter-shimmer-animation);
}

@keyframes newsletterShimmer {
    0%, 100% { opacity: var(--blog-newsletter-shimmer-opacity-start); transform: var(--blog-newsletter-shimmer-transform-start); }
    50% { opacity: var(--blog-newsletter-shimmer-opacity-mid); transform: var(--blog-newsletter-shimmer-transform-mid); }
}

.newsletter-content {
    position: relative;
    z-index: var(--blog-newsletter-content-z-index);
}

.newsletter-title {
    font-size: var(--blog-newsletter-title-font-size);
    font-weight: var(--blog-newsletter-title-font-weight);
    margin-bottom: var(--blog-newsletter-title-margin-bottom);
    text-shadow: var(--blog-newsletter-title-text-shadow);
}

.newsletter-subtitle {
    font-size: var(--blog-newsletter-subtitle-font-size);
    line-height: var(--blog-newsletter-subtitle-line-height);
    margin-bottom: var(--blog-newsletter-subtitle-margin-bottom);
    opacity: var(--blog-newsletter-subtitle-opacity);
}

.newsletter-form {
    display: var(--blog-newsletter-form-display);
    gap: var(--blog-newsletter-form-gap);
}

.newsletter-input {
    flex: var(--blog-newsletter-input-flex);
    padding: var(--blog-newsletter-input-padding);
    border: none;
    border-radius: var(--blog-newsletter-input-border-radius);
    font-size: var(--blog-newsletter-input-font-size);
    background: var(--blog-newsletter-input-background);
    color: var(--blog-newsletter-input-color);
    transition: var(--blog-newsletter-input-transition);
}

.newsletter-input:focus {
    outline: none;
    background: var(--blog-newsletter-input-background-focus);
    box-shadow: var(--blog-newsletter-input-focus-shadow);
}

.newsletter-input::placeholder {
    color: var(--blog-newsletter-input-placeholder-color);
}

.newsletter-btn {
    background: var(--blog-newsletter-btn-background);
    color: var(--blog-newsletter-btn-color);
    border: var(--blog-newsletter-btn-border);
    padding: var(--blog-newsletter-btn-padding);
    border-radius: var(--blog-newsletter-btn-border-radius);
    font-weight: var(--blog-newsletter-btn-font-weight);
    font-size: var(--blog-newsletter-btn-font-size);
    cursor: pointer;
    transition: var(--blog-newsletter-btn-transition);
    backdrop-filter: var(--blog-newsletter-btn-backdrop-filter);
}

.newsletter-btn:hover {
    background: var(--blog-newsletter-btn-background-hover);
    border-color: var(--blog-newsletter-btn-border-hover);
    transform: var(--blog-newsletter-btn-hover-transform);
}

.newsletter-btn:active {
    transform: var(--blog-newsletter-btn-active-transform);
}

/* Master Blog Tiles - 1x3 Layout */
.master-blog-tiles {
    display: var(--blog-master-tiles-display);
    grid-template-columns: var(--blog-master-tiles-grid-columns);
    grid-template-rows: var(--blog-master-tiles-grid-rows);
    gap: var(--blog-master-tiles-gap);
}

.master-tile {
    background: var(--blog-master-tile-background);
    border: var(--blog-master-tile-border);
    border-radius: var(--blog-master-tile-border-radius);
    padding: var(--blog-master-tile-padding);
    cursor: pointer;
    transition: var(--blog-master-tile-transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--blog-master-tile-box-shadow);
    display: flex;
    flex-direction: column;
    height: var(--blog-master-tile-height);
}

.master-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blog-master-tile-before-background);
    opacity: var(--blog-master-tile-before-opacity);
    transition: var(--blog-master-tile-before-transition);
}

.master-tile:hover {
    transform: var(--blog-master-tile-hover-transform);
    border-color: var(--blog-master-tile-border-hover);
    box-shadow: var(--blog-master-tile-box-shadow-hover);
}

.master-tile:hover::before {
    opacity: var(--blog-master-tile-before-opacity-hover);
}

.master-tile > * {
    position: relative;
    z-index: var(--blog-master-tile-z-index);
}

.master-tile-image {
    height: var(--blog-master-tile-image-height);
    background: var(--blog-master-tile-image-background);
    border-radius: var(--blog-master-tile-image-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    background-size: var(--blog-master-tile-image-background-size);
    background-position: var(--blog-master-tile-image-background-position);
    background-repeat: var(--blog-master-tile-image-background-repeat);
}

/* Remove CSS override - let JavaScript handle it completely */

.master-tile-placeholder {
    font-size: var(--blog-master-tile-placeholder-font-size);
    color: var(--blog-master-tile-placeholder-color);
    text-shadow: var(--blog-master-tile-placeholder-text-shadow);
}

.master-tile-content {
    height: var(--blog-master-tile-content-height);
    padding: var(--blog-master-tile-content-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: var(--blog-master-tile-content-text-align);
    position: relative;
}

.master-tile-title {
    font-size: var(--blog-master-tile-title-font-size);
    font-weight: var(--blog-master-tile-title-font-weight);
    color: var(--blog-master-tile-title-color);
    margin-bottom: var(--blog-master-tile-title-margin-bottom);
    line-height: var(--blog-master-tile-title-line-height);
}

.master-tile-excerpt {
    font-size: var(--blog-master-tile-excerpt-font-size);
    color: var(--blog-master-tile-excerpt-color);
    line-height: var(--blog-master-tile-excerpt-line-height);
    flex-grow: 1;
    margin-bottom: var(--blog-master-tile-excerpt-margin-bottom);
    display: -webkit-box;
    -webkit-line-clamp: var(--blog-master-tile-excerpt-line-clamp);
    line-clamp: var(--blog-master-tile-excerpt-line-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.master-tile-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--blog-master-tile-meta-font-size);
    color: var(--blog-master-tile-meta-color);
}

.master-tile-category {
    background: var(--blog-master-tile-category-background);
    color: var(--blog-master-tile-category-color);
    padding: var(--blog-master-tile-category-padding);
    border-radius: var(--blog-master-tile-category-border-radius);
    font-size: var(--blog-master-tile-category-font-size);
    font-weight: var(--blog-master-tile-category-font-weight);
    text-transform: var(--blog-master-tile-category-text-transform);
    letter-spacing: var(--blog-master-tile-category-letter-spacing);
}

.master-tile-date {
    font-size: var(--blog-master-tile-date-font-size);
    color: var(--blog-master-tile-date-color);
    font-weight: var(--blog-master-tile-date-font-weight);
}

/* Blog Archive Section */
.blog-archive-section {
    margin-top: var(--blog-archive-section-margin-top);
    margin-bottom: var(--blog-archive-section-margin-bottom);
}

/* Search Container */
.blog-search-container {
    margin-bottom: var(--blog-search-container-margin-bottom);
    display: flex;
    justify-content: center;
}

.blog-search-bar {
    width: 100%;
    max-width: var(--blog-search-bar-max-width);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--blog-search-input-wrapper-background);
    border: var(--blog-search-input-wrapper-border);
    border-radius: var(--blog-search-input-wrapper-border-radius);
    padding: var(--blog-search-input-wrapper-padding);
    transition: var(--blog-search-input-wrapper-transition);
    box-shadow: var(--blog-search-input-wrapper-box-shadow);
}

.search-input-wrapper:focus-within {
    border-color: var(--blog-search-input-wrapper-border-focus);
    box-shadow: var(--blog-search-input-wrapper-box-shadow-focus);
}

.search-icon {
    color: var(--blog-search-icon-color);
    margin-right: var(--blog-search-icon-margin-right);
    font-size: var(--blog-search-icon-font-size);
}

.blog-search-input {
    flex: var(--blog-search-input-flex);
    border: none;
    outline: none;
    font-size: var(--blog-search-input-font-size);
    color: var(--blog-search-input-color);
    background: transparent;
}

.blog-search-input::placeholder {
    color: var(--blog-search-input-placeholder-color);
}

.search-dropdown {
    position: relative;
    margin-left: var(--blog-search-dropdown-margin-left);
    padding-left: var(--blog-search-dropdown-padding-left);
    border-left: var(--blog-search-dropdown-border-left);
}

.category-filter {
    border: none;
    background: transparent;
    font-size: var(--blog-category-filter-font-size);
    color: var(--blog-category-filter-color);
    cursor: pointer;
    padding-right: var(--blog-category-filter-padding-right);
    appearance: none;
}

.dropdown-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blog-dropdown-icon-color);
    font-size: var(--blog-dropdown-icon-font-size);
    pointer-events: none;
}

/* Blog Category Grid - 2x3 Layout */
.blog-category-grid {
    display: var(--blog-category-grid-display);
    grid-template-columns: var(--blog-category-grid-columns);
    grid-template-rows: var(--blog-category-grid-rows);
    gap: var(--blog-category-grid-gap);
}

/* Blog Tiles */
.blog-tile {
    background: var(--blog-tile-background);
    border: var(--blog-tile-border);
    border-radius: var(--blog-tile-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--blog-tile-transition);
    position: relative;
    box-shadow: var(--blog-tile-box-shadow);
    display: flex;
    flex-direction: column;
    height: var(--blog-tile-height);
}

.blog-tile:hover {
    transform: var(--blog-tile-hover-transform);
    border-color: var(--blog-tile-border-hover);
    box-shadow: var(--blog-tile-box-shadow-hover);
}

.blog-tile-image {
    height: var(--blog-tile-image-height);
    background: var(--blog-tile-image-background);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: var(--blog-tile-image-background-size);
    background-position: var(--blog-tile-image-background-position);
    background-repeat: var(--blog-tile-image-background-repeat);
    border-radius: var(--blog-tile-image-border-radius);
}

/* Remove CSS override - let JavaScript handle it completely */

.blog-tile-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blog-tile-image-before-background);
}

.blog-tile-icon {
    font-size: var(--blog-tile-icon-font-size);
    color: var(--blog-tile-icon-color);
    text-shadow: var(--blog-tile-icon-text-shadow);
    position: relative;
    z-index: var(--blog-tile-icon-z-index);
}

.blog-tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blog-tile-overlay-background);
    opacity: var(--blog-tile-overlay-opacity);
    transition: var(--blog-tile-overlay-transition);
}

.blog-tile:hover .blog-tile-overlay {
    opacity: var(--blog-tile-overlay-opacity-hover);
}

.blog-tile-content {
    height: var(--blog-tile-content-height);
    padding: var(--blog-tile-content-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-tile-category {
    position: absolute;
    top: var(--blog-tile-category-top);
    left: var(--blog-tile-category-left);
    background: var(--blog-tile-category-background);
    color: var(--blog-tile-category-color);
    padding: var(--blog-tile-category-padding);
    border-radius: var(--blog-tile-category-border-radius);
    font-size: var(--blog-tile-category-font-size);
    font-weight: var(--blog-tile-category-font-weight);
    text-transform: var(--blog-tile-category-text-transform);
    letter-spacing: var(--blog-tile-category-letter-spacing);
    z-index: var(--blog-tile-category-z-index);
    box-shadow: var(--blog-tile-category-box-shadow);
}

.blog-tile-title {
    font-size: var(--blog-tile-title-font-size);
    font-weight: var(--blog-tile-title-font-weight);
    color: var(--blog-tile-title-color);
    margin-bottom: var(--blog-tile-title-margin-bottom);
    line-height: var(--blog-tile-title-line-height);
}

.blog-tile-excerpt {
    font-size: var(--blog-tile-excerpt-font-size);
    color: var(--blog-tile-excerpt-color);
    line-height: var(--blog-tile-excerpt-line-height);
    flex-grow: 1;
    margin-bottom: var(--blog-tile-excerpt-margin-bottom);
}

.blog-tile-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--blog-tile-meta-font-size);
    color: var(--blog-tile-meta-color);
    padding-top: var(--blog-tile-meta-padding-top);
    border-top: var(--blog-tile-meta-border-top);
}

.blog-tile-author {
    font-weight: var(--blog-tile-author-font-weight);
}

.blog-tile-date {
    opacity: var(--blog-tile-date-opacity);
}

/* Hover Effects and Animations */
@keyframes tileFloat {
    0%, 100% { transform: var(--blog-tile-float-transform-start); }
    50% { transform: var(--blog-tile-float-transform-mid); }
}

.blog-tile:hover .blog-tile-icon {
    animation: var(--blog-tile-float-animation);
}

.master-tile:hover .master-tile-placeholder {
    animation: var(--blog-tile-float-animation);
}

/* Responsive Design - Blog Specific */
@media (max-width: 1024px) {
    .master-blog-tiles {
        grid-template-columns: var(--blog-responsive-tablet-master-tiles-columns);
        grid-template-rows: auto;
    }
    
    .blog-category-grid {
        grid-template-columns: var(--blog-responsive-tablet-category-grid-columns);
        grid-template-rows: auto;
        gap: var(--blog-responsive-tablet-category-grid-gap);
    }
}

@media (max-width: 768px) {
    .blog-newsletter-section {
        padding: var(--blog-responsive-mobile-newsletter-padding);
        margin-bottom: var(--blog-responsive-mobile-newsletter-margin-bottom);
        gap: var(--blog-responsive-mobile-newsletter-gap);
    }
    
    .master-blog-tiles {
        grid-template-columns: var(--blog-responsive-mobile-master-tiles-columns);
        grid-template-rows: auto;
        gap: var(--blog-responsive-mobile-master-tiles-gap);
    }
    
    .newsletter-form {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .newsletter-btn {
        align-self: stretch;
    }
    
    .blog-category-grid {
        grid-template-columns: var(--blog-responsive-mobile-category-grid-columns);
        grid-template-rows: auto;
        gap: var(--blog-responsive-mobile-category-grid-gap);
    }
    
    .search-input-wrapper {
        flex-direction: column;
        gap: var(--blog-responsive-mobile-search-wrapper-gap);
        padding: var(--blog-responsive-mobile-search-wrapper-padding);
    }
    
    .search-dropdown {
        margin-left: var(--blog-responsive-mobile-search-dropdown-margin-left);
        padding-left: var(--blog-responsive-mobile-search-dropdown-padding-left);
        border-left: none;
        border-top: var(--blog-responsive-mobile-search-dropdown-border-top);
        padding-top: var(--blog-responsive-mobile-search-dropdown-padding-top);
        width: 100%;
    }
    
    .category-filter {
        width: 100%;
        padding: var(--blog-responsive-mobile-category-filter-padding);
        border: var(--blog-responsive-mobile-category-filter-border);
        border-radius: var(--blog-responsive-mobile-category-filter-border-radius);
    }
    
    /* Responsive Page Identity Icon */
    .hero-page-identity {
        top: var(--blog-page-identity-tablet-top);
        right: var(--blog-page-identity-tablet-right);
    }
    
    #blog-page-wrapper .page-identity-icon {
        width: var(--blog-page-identity-tablet-width);
        height: var(--blog-page-identity-tablet-height);
        font-size: var(--blog-page-identity-tablet-font-size);
        border-width: var(--blog-page-identity-tablet-border-width);
    }
}

@media (max-width: 480px) {
    .blog-newsletter-section {
        padding: var(--space-6);
        margin-bottom: var(--space-12);
    }
    
    .master-tile-image {
        height: 100px;
    }
    
    .master-tile-placeholder {
        font-size: 2.5rem;
    }
    
    .blog-tile-image {
        height: 120px;
    }
    
    .blog-tile-icon {
        font-size: 3rem;
    }
    
    .blog-tile-content {
        padding: var(--space-4);
    }
    
    .blog-tile-title {
        font-size: var(--text-lg);
    }
    
    .blog-tile-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    
    /* Extra Small Screen Page Identity Icon */
    .hero-page-identity {
        top: var(--blog-page-identity-mobile-top);
        right: var(--blog-page-identity-mobile-right);
    }
    
    #blog-page-wrapper .page-identity-icon {
        width: var(--blog-page-identity-mobile-width);
        height: var(--blog-page-identity-mobile-height);
        font-size: var(--blog-page-identity-mobile-font-size);
    }
}