/**
 * Category Archive Featured Images - Responsive Styling
 * Supports: PC, iPad, iPhone, Samsung Z Fold (folded & unfolded)
 * Generated: 2025-11-15
 */

/* ==========================================================================
   Featured Image Container
   ========================================================================== */

.elementor-post__thumbnail {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    display: block;
}

.elementor-post__thumbnail__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Featured Image - Base Styles
   ========================================================================== */

.elementor-post__thumbnail__image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
}

/* Hover effect for desktop */
@media (hover: hover) and (pointer: fine) {
    .elementor-post__thumbnail__link:hover .elementor-post__thumbnail__image {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   Blog Post Card Layout Adjustments
   ========================================================================== */

.elementor-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
}

.elementor-post:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.elementor-post__text {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    z-index: 1;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large Desktop (1920px+) */
@media (min-width: 1920px) {
    .elementor-post__thumbnail__image {
        height: 280px;
    }
}

/* Standard Desktop (1200px - 1919px) */
@media (min-width: 1200px) and (max-width: 1919px) {
    .elementor-post__thumbnail__image {
        height: 240px;
    }
}

/* Small Desktop / Large Tablet Landscape (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .elementor-post__thumbnail__image {
        height: 220px;
    }
}

/* iPad Pro 12.9" (1024px x 1366px) - Portrait & Landscape */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .elementor-post__thumbnail__image {
        height: 240px;
    }
}

/* iPad Air / iPad Pro 11" (820px x 1180px) - Portrait & Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .elementor-post__thumbnail__image {
        height: 220px;
    }

    .elementor-post__text {
        padding: 18px;
    }
}

/* iPad Mini (768px x 1024px) - Portrait & Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
    .elementor-post__thumbnail__image {
        height: 200px;
    }
}

/* Tablets / Small Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .elementor-post__thumbnail__image {
        height: 200px;
    }

    .elementor-post__text {
        padding: 16px;
    }

    /* 2-column grid for tablets */
    .elementor-posts-container.elementor-posts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Samsung Galaxy Z Fold - UNFOLDED (7.6" - 1768px x 2208px) */
@media only screen
  and (min-device-width: 1768px)
  and (max-device-width: 2208px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .elementor-post__thumbnail__image {
        height: 260px;
    }

    /* 3-column grid for unfolded Z Fold */
    .elementor-posts-container.elementor-posts {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px;
    }
}

/* Samsung Galaxy Z Fold - FOLDED (Cover Screen - 6.2" - 832px x 2268px) */
@media only screen
  and (min-device-width: 832px)
  and (max-device-width: 968px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .elementor-post__thumbnail__image {
        height: 180px;
    }

    .elementor-post__text {
        padding: 14px;
    }

    /* Single column for folded Z Fold */
    .elementor-posts-container.elementor-posts {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile Landscape (568px - 767px) */
@media (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
    .elementor-post__thumbnail__image {
        height: 160px;
    }

    .elementor-post__text {
        padding: 14px;
    }

    /* 2-column grid for landscape phones */
    .elementor-posts-container.elementor-posts {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
}

/* iPhone 14 Pro Max / Plus Models (428px - 932px) */
@media only screen
  and (min-device-width: 428px)
  and (max-device-width: 932px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .elementor-post__thumbnail__image {
        height: 200px;
    }

    .elementor-post__text {
        padding: 16px;
    }
}

/* iPhone 14 Pro / Standard Models (390px - 844px) */
@media only screen
  and (min-device-width: 390px)
  and (max-device-width: 844px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .elementor-post__thumbnail__image {
        height: 200px;
    }

    .elementor-post__text {
        padding: 16px;
    }
}

/* iPhone SE / Mini Models (375px - 667px) */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .elementor-post__thumbnail__image {
        height: 180px;
    }

    .elementor-post__text {
        padding: 14px;
    }
}

/* Small Mobile Portrait (320px - 567px) */
@media (max-width: 567px) {
    .elementor-post__thumbnail__image {
        height: 180px;
    }

    .elementor-post__text {
        padding: 14px;
    }

    .elementor-post {
        margin-bottom: 20px;
    }

    /* Single column for mobile */
    .elementor-posts-container.elementor-posts {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

/* Extra Small Mobile (< 375px) */
@media (max-width: 374px) {
    .elementor-post__thumbnail__image {
        height: 160px;
    }

    .elementor-post__text {
        padding: 12px;
    }

    .elementor-post__title {
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   Image Loading States
   ========================================================================== */

.elementor-post__thumbnail__image[loading="lazy"] {
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
    min-height: 180px;
}

/* Error fallback gradient */
.elementor-post__thumbnail__image[onerror] {
    background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .elementor-post__thumbnail__image {
        height: auto;
        max-height: 200px;
    }

    .elementor-post {
        page-break-inside: avoid;
        box-shadow: none;
    }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .elementor-post__thumbnail__image,
    .elementor-post {
        transition: none !important;
    }

    .elementor-post__thumbnail__link:hover .elementor-post__thumbnail__image {
        transform: none !important;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .elementor-post {
        border: 2px solid #000;
    }

    .elementor-post__thumbnail {
        border-bottom: 2px solid #000;
    }
}