/* PHASE 2: LAYOUT, CARDS, SIDEBAR, SECTIONS */

/* Homepage Hero */
.revved-hero, .revved-hero, .revved-feature-area {
    margin-bottom: 48px !important;
}

.revved-hero .revved-post-item {
    border-radius: 24px !important;
    overflow: hidden !important;
}

.revved-hero .revved-post-title {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
}

/* Card Grid */
.row {
    --bs-gutter-x: 24px !important;
    --bs-gutter-y: 24px !important;
    row-gap: 24px !important;
}

.revved-post-item, .revved-post-item {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.revved-post-data, .revved-post-data, .revved-post-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Card Image Aspect Ratio */
.revved-thumb, .revved-thumb {
    position: relative !important;
    padding-top: 60% !important;
    overflow: hidden !important;
}

.revved-thumb img, .revved-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Card Content */
.revved-post-data, .revved-post-data {
    padding: 20px 24px 24px !important;
}

.revved-post-item .revved-post-title h4,
.revved-post-item .revved-post-title h3,
.revved-post-item h4 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.revved-feature-post .revved-post-title h3,
.revved-lg-post .revved-post-title h3 {
    font-size: 1.75rem !important;
}

/* Card Meta */
.revved-post-meta, .revved-post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 12px !important;
    color: #8a918f !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #f4f6f5 !important;
}

/* Section Headers */
.revved-section-title, .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 32px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #e2e6e5 !important;
    position: relative !important;
}

.revved-section-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 80px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #647c40, #f5ff3d) !important;
}

.revved-section-title h2, .section-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.35rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.revved-section-title h2::before {
    display: none !important;
}

/* Content Sections */
.revved-section, .revved-section, section.revved-section {
    padding: 48px 0 !important;
    margin: 0 !important;
}

/* Sidebar */
.sidebar, .widget-area, aside.col-xl-4, aside.col-lg-4 {
    padding-left: 24px !important;
}

.sidebar .revved-post-item, .widget .revved-post-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f4f6f5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

.sidebar .revved-post-item:hover, .widget .revved-post-item:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #f4f6f5 !important;
    margin: 0 -12px !important;
    padding: 14px 12px !important;
    border-radius: 6px !important;
}

.sidebar .revved-post-item:last-child {
    border-bottom: none !important;
}

.sidebar .revved-thumb, .widget .revved-thumb {
    flex: 0 0 75px !important;
    width: 75px !important;
    height: 75px !important;
    padding-top: 0 !important;
    border-radius: 6px !important;
}

.sidebar .revved-thumb img, .widget .revved-thumb img {
    position: relative !important;
    width: 75px !important;
    height: 75px !important;
}

.sidebar .revved-post-data, .widget .revved-post-data {
    flex: 1 !important;
    padding: 0 !important;
}

.sidebar .revved-post-title h4, .widget .revved-post-title h4 {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
}

.sidebar .revved-post-meta, .widget .revved-post-meta {
    border: none !important;
    padding-top: 0 !important;
    margin-top: 4px !important;
    font-size: 11px !important;
}

.sidebar .revved-post-meta .revved-category,
.widget .revved-post-meta .revved-category {
    display: none !important;
}

/* Category Widget as Tags */
.widget_categories ul, .popular-category ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.widget_categories ul li, .popular-category ul li {
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

.widget_categories ul li a, .popular-category ul li a {
    display: inline-block !important;
    padding: 8px 14px !important;
    background: #f4f6f5 !important;
    color: #4d544d !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.widget_categories ul li a:hover, .popular-category ul li a:hover {
    background: #647c40 !important;
    color: #fff !important;
}

/* Tabs */
.revved-tab-section .nav-tabs, .trending-tabs .nav-tabs {
    border: none !important;
    gap: 4px !important;
    margin-bottom: 24px !important;
}

.revved-tab-section .nav-tabs .nav-link, .trending-tabs .nav-link {
    background: #f4f6f5 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #6b7270 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    text-transform: uppercase !important;
}

.revved-tab-section .nav-tabs .nav-link.active,
.revved-tab-section .nav-tabs .nav-link:hover {
    background: #647c40 !important;
    color: #fff !important;
}

/* Carousel */
.owl-carousel .owl-nav button, .slick-arrow {
    width: 44px !important;
    height: 44px !important;
    background: #fff !important;
    border: 1px solid #e2e6e5 !important;
    border-radius: 50% !important;
    color: #1a1f1a !important;
    box-shadow: 0 4px 12px rgba(26,31,26,0.1) !important;
}

.owl-carousel .owl-nav button:hover, .slick-arrow:hover {
    background: #647c40 !important;
    color: #fff !important;
    border-color: #647c40 !important;
}

.owl-dots .owl-dot span {
    width: 10px !important;
    height: 10px !important;
    background: #c1c9c9 !important;
    border-radius: 50% !important;
}

.owl-dots .owl-dot.active span {
    background: #647c40 !important;
    width: 24px !important;
    border-radius: 5px !important;
}

/* Main Content */
.main-content, .revved-main-content, main.col-xl-8, main.col-lg-8 {
    padding-right: 24px !important;
}

.container {
    max-width: 1320px !important;
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar, aside.col-lg-4 {
        padding-left: 0 !important;
        padding-top: 40px !important;
        border-top: 1px solid #e2e6e5 !important;
        margin-top: 40px !important;
    }
    
    .main-content, main.col-lg-8 {
        padding-right: 0 !important;
    }
    
    .revved-section {
        padding: 32px 0 !important;
    }
    
    .revved-hero .revved-post-title {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 767px) {
    .row {
        --bs-gutter-x: 16px !important;
        --bs-gutter-y: 16px !important;
    }
    
    .revved-post-data {
        padding: 16px 18px 18px !important;
    }
    
    .revved-section-title h2 {
        font-size: 1.15rem !important;
    }
    
    .widget {
        padding: 20px !important;
    }
    
    .sidebar .revved-thumb, .widget .revved-thumb {
        flex: 0 0 65px !important;
        width: 65px !important;
        height: 65px !important;
    }
    
    .sidebar .revved-thumb img, .widget .revved-thumb img {
        width: 65px !important;
        height: 65px !important;
    }
}