/**
 * Blog Widget 5 - iOS-like Design for Demo 1
 * 
 * Clean, minimal design inspired by Apple/iOS
 * Features:
 * - Clean white cards with gray borders
 * - Fully rounded corners (16px)
 * - NO shadows anywhere
 * - NO animations/transitions
 * - Gray typography
 * - Generous white space
 * - Professional design
 * - Aligned with product cards and offers widget
 * 
 * @package MLM
 * @version 2.0.0
 * @demo Demo 1 (Default)
 */

/* ============================================
   CSS Variables - iOS-like Design System
   ============================================ */
:root {
    --mlm-blog-widget-white: #ffffff;
    --mlm-blog-widget-gray-50: #f9fafb;
    --mlm-blog-widget-gray-100: #f3f4f6;
    --mlm-blog-widget-gray-200: #e5e7eb;
    --mlm-blog-widget-gray-300: #d1d5db;
    --mlm-blog-widget-gray-400: #9ca3af;
    --mlm-blog-widget-gray-500: #6b7280;
    --mlm-blog-widget-gray-600: #4b5563;
    --mlm-blog-widget-gray-700: #374151;
    --mlm-blog-widget-gray-800: #1f2937;
    --mlm-blog-widget-gray-900: #111827;
    
    --mlm-blog-widget-accent: #F97316;
    --mlm-blog-widget-accent-light: #fb923c;
    
    --mlm-blog-widget-border: 1px solid var(--mlm-blog-widget-gray-200);
    --mlm-blog-widget-radius: 16px;
    --mlm-blog-widget-radius-sm: 8px;
    --mlm-blog-widget-radius-full: 9999px;
    
    --mlm-blog-widget-transition: none;
}

/* ============================================
   Widget Wrapper
   ============================================ */
.mlm-blog-posts-wrapper {
    margin-bottom: var(--mlm-ios-space-2xl, 48px);
    padding: 0 var(--mlm-ios-space-xl, 32px);
}

.mlm-blog-posts-wrapper-widget {
    margin-bottom: var(--mlm-ios-space-2xl, 48px);
}

/* Widget Title */
.mlm-blog-posts-wrapper .widget-title,
.mlm-blog-posts-wrapper-widget .widget-title {
    font-size: var(--mlm-ios-font-size-2xl, 24px);
    font-weight: 700;
    color: var(--mlm-blog-widget-gray-900);
    margin-bottom: var(--mlm-ios-space-lg, 24px);
    padding: 0;
    border: none;
    background: transparent;
}

/* ============================================
   Blog Card - iOS Style
   ============================================ */
.mlm-blog-posts-wrapper .mlm-blog,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog {
    background: var(--mlm-blog-widget-white) !important;
    border: var(--mlm-blog-widget-border) !important;
    border-radius: var(--mlm-blog-widget-radius) !important;
    padding: 0 !important;
    overflow: hidden;
    /* NO SHADOW - iOS style */
    box-shadow: none !important;
    /* NO TRANSITION - iOS style */
    transition: none !important;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-bottom: var(--mlm-ios-space-lg, 24px);
}

.mlm-blog-posts-wrapper .mlm-blog:hover,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog:hover,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog:hover,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog:hover {
    /* NO transform or shadow on hover - iOS style */
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--mlm-blog-widget-gray-300) !important;
}

/* Override primary.css styles */
.mlm-archive .mlm-blog-posts-wrapper .mlm-blog,
.mlm-archive .mlm-blog-posts-wrapper .mlm-archive .mlm-blog {
    box-shadow: none !important;
}

.mlm-archive .mlm-blog-posts-wrapper .mlm-blog:hover,
.mlm-archive .mlm-blog-posts-wrapper .mlm-archive .mlm-blog:hover {
    box-shadow: none !important;
}

/* ============================================
   Blog Image Section
   ============================================ */
.mlm-blog-posts-wrapper .mlm-blog .media-img,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .media-img,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img {
    flex-shrink: 0;
    width: 136px;
    height: 136px;
    overflow: hidden;
    background: var(--mlm-blog-widget-gray-100);
    border-radius: var(--mlm-blog-widget-radius) 0 0 var(--mlm-blog-widget-radius);
    position: relative;
}

.mlm-blog-posts-wrapper .mlm-blog .media-img a,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img a,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .media-img a,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img a {
    display: block;
    width: 100%;
    height: 100%;
}

.mlm-blog-posts-wrapper .mlm-blog .item-image,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-image,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .item-image,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* NO TRANSITION - iOS style */
    transition: none !important;
}

.mlm-blog-posts-wrapper .mlm-blog:hover .item-image,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog:hover .item-image,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog:hover .item-image,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog:hover .item-image {
    /* NO transform on hover - iOS style */
    transform: none !important;
}

/* ============================================
   Blog Content Section
   ============================================ */
.mlm-blog-posts-wrapper .mlm-blog .media-body,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-body,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .media-body,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--mlm-ios-space-md, 16px);
    align-self: stretch;
    justify-content: center;
}

/* ============================================
   Blog Title
   ============================================ */
.mlm-blog-posts-wrapper .mlm-blog .item-title,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .item-title,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title {
    margin: 0 0 var(--mlm-ios-space-sm, 12px) 0;
    padding: 0;
    font-size: var(--mlm-ios-font-size-base, 16px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--mlm-blog-widget-gray-900);
    overflow: hidden;
    max-height: 48px;
    line-height: 24px;
}

.mlm-blog-posts-wrapper .mlm-blog .item-title a,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title a,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .item-title a,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title a {
    color: var(--mlm-blog-widget-gray-900);
    text-decoration: none;
    /* NO TRANSITION - iOS style */
    transition: none !important;
}

.mlm-blog-posts-wrapper .mlm-blog .item-title a:hover,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title a:hover,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .item-title a:hover,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title a:hover {
    color: var(--mlm-blog-widget-accent);
}

/* ============================================
   Blog Excerpt
   ============================================ */
.mlm-blog-posts-wrapper .mlm-blog .item-excerpt,
.mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-excerpt,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-blog .item-excerpt,
.mlm-blog-posts-wrapper-widget .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-excerpt {
    margin: 0;
    padding: 0;
    font-size: var(--mlm-ios-font-size-sm, 14px);
    line-height: 1.6;
    color: var(--mlm-blog-widget-gray-600);
    overflow: hidden;
    max-height: 48px;
    line-height: 24px;
    text-align: justify;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 991px) {
    .mlm-blog-posts-wrapper {
        padding: 0 var(--mlm-ios-space-lg, 24px);
    }
    
    .mlm-blog-posts-wrapper .mlm-blog,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog {
        flex-direction: column;
    }
    
    .mlm-blog-posts-wrapper .mlm-blog .media-img,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img {
        width: 100%;
        height: 200px;
        border-radius: var(--mlm-blog-widget-radius) var(--mlm-blog-widget-radius) 0 0;
    }
    
    .mlm-blog-posts-wrapper .mlm-blog .media-body,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-body {
        padding: var(--mlm-ios-space-md, 16px);
    }
}

@media (max-width: 767px) {
    .mlm-blog-posts-wrapper {
        padding: 0 var(--mlm-ios-space-md, 16px);
    }
    
    .mlm-blog-posts-wrapper .mlm-blog .item-title,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-title {
        font-size: var(--mlm-ios-font-size-sm, 14px);
    }
    
    .mlm-blog-posts-wrapper .mlm-blog .item-excerpt,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .item-excerpt {
        font-size: var(--mlm-ios-font-size-xs, 12px);
    }
}

@media (max-width: 480px) {
    .mlm-blog-posts-wrapper {
        padding: 0 var(--mlm-ios-space-sm, 12px);
    }
    
    .mlm-blog-posts-wrapper .mlm-blog .media-img,
    .mlm-blog-posts-wrapper .mlm-archive .mlm-blog .media-img {
        height: 180px;
    }
}