/* =============================================================================
   Category Cards Grid Layouts (based on layout-* classes)
   ============================================================================= */

/* Base styles for category cards grid */
.category-cards-block .category-cards-grid {
display: grid;
gap: 20px;
}

/* Layout: 3x2 (3 columns, 2 rows max) */
.category-cards-block.layout-3x2 .category-cards-grid {
grid-template-columns: repeat(3, 1fr);
}

/* Layout: 2x3 (2 columns, 3 rows max) */
.category-cards-block.layout-2x3 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
}

/* Layout: 4x2 (4 columns, 2 rows max) */
.category-cards-block.layout-4x2 .category-cards-grid {
grid-template-columns: repeat(4, 1fr);
}

/* Layout: 6x1 (6 columns, horizontal scroll) */
.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: repeat(6, 1fr);
overflow-x: auto;
}

/* Layout: 1x4 (1 column, vertical list) */
.category-cards-block.layout-1x4 .category-cards-grid {
grid-template-columns: 1fr;
}

/* Layout: auto (responsive auto-fill) */
.category-cards-block.layout-auto .category-cards-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Card wrapper styles - Fill entire grid cell */
.category-cards-block .category-card-wrapper {
width: 100%;
max-width: none; /* Override any conflicting max-width */
margin-bottom: 0;
box-sizing: border-box;
height: 100% !important;
display: flex; /* Allow inner card to fill height */
flex-direction: column;
}

/* Ensure card and its contents fill wrapper */
.category-cards-block .category-card-wrapper .category-card,
.category-cards-block .category-card-wrapper.category-card,
.category-cards-block .category-card-wrapper .category-card-link,
.category-cards-block .category-card-wrapper.category-card-link,
.category-cards-block .post-card-item .post-card-link {
display: flex;
flex-direction: column; /* 預設：上圖下文 */
width: 100%;
max-width: none;
text-decoration: none;
height: 100% !important; /* Ensure link fills the wrapper */
}

/* Limit global horizontal forced layout to tablet and up, OR ensure mobile override exists */
@media (min-width: 768px) {
    .category-cards-block.style-card.layout-left-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.style-card .layout-left-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.style-card.layout-right-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.style-card .layout-right-image .category-cards-grid .post-card-item .post-card-link {
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-box-align: start !important;
        -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 15px !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }
}

/* Mobile specific horizontal layout (when explicitly set OR section layout is horizontal) */
@media (max-width: 767px) {
    .category-cards-block.layout-left-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.layout-right-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.layout-left-image .category-card-posts .category-post-item > a,
    .category-cards-block.layout-right-image .category-card-posts .category-post-item > a {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 12px !important;
        align-items: flex-start !important;
    }
    
    .category-cards-block.layout-right-image .category-cards-grid .post-card-item .post-card-link,
    .category-cards-block.layout-right-image .category-card-posts .category-post-item > a {
        flex-direction: row-reverse !important;
    }
}

.category-cards-block.style-card.layout-right-image .category-cards-grid .post-card-item .post-card-link {
-webkit-box-direction: reverse !important;
-webkit-box-orient: horizontal !important;
-webkit-flex-direction: row-reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}

@media (min-width: 768px) {
    .category-cards-block.style-card.layout-left-image .category-cards-grid .post-card-item .category-card-image,
    .category-cards-block.style-card .layout-left-image .category-cards-grid .post-card-item .category-card-image,
    .category-cards-block.style-card.layout-right-image .category-cards-grid .post-card-item .category-card-image,
    .category-cards-block.style-card .layout-right-image .category-cards-grid .post-card-item .category-card-image {
        -webkit-flex: 0 0 150px !important;
        -ms-flex: 0 0 150px !important;
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 120px !important;
        -webkit-flex-shrink: 0 !important;
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .category-cards-block.style-card.layout-left-image .category-cards-grid .post-card-item .category-card-content,
    .category-cards-block.style-card .layout-left-image .category-cards-grid .post-card-item .category-card-content,
    .category-cards-block.style-card.layout-right-image .category-cards-grid .post-card-item .category-card-content,
    .category-cards-block.style-card .layout-right-image .category-cards-grid .post-card-item .category-card-content {
        -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
}

/* Override column direction for card style left/right image layouts - Must come before main rule */
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-left-image .category-post-item > a,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a {
display: flex !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}

.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a {
-webkit-box-direction: reverse !important;
-webkit-box-orient: horizontal !important;
-webkit-flex-direction: row-reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}

/* 圖片和內容容器基礎樣式 */
.category-cards-block .category-card-image,
.category-cards-block .category-card-content {
width: 100%;
}

/* Category cards: image alignment and sizing */
.category-cards-block .category-card-image {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

.category-cards-block .category-card-image img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
}

/* Center small images in category cards */
.category-cards-block .category-card-image img.small-image {
object-fit: contain;
object-position: center;
}

/* Category post thumb (for list layouts) */
.category-cards-block .category-post-thumb {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

/* Override for card style left/right image - must come after general rule */
.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-thumb,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-thumb {
position: relative !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f5f5f5 !important;
}

.category-cards-block .category-post-thumb img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
}

/* Center small images in category post thumb */
.category-cards-block .category-post-thumb img.small-image {
object-fit: contain;
object-position: center;
}

/* =============================================================================
   Category Cards: Visual Styles (Card, List, Compact, Overlay)
   ============================================================================= */

/* Style: Card (Standard) */
.category-cards-block.style-card .category-post-item {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
padding: 15px;
/* [FIX] Removed height: 100% to prevent portrait images from stretching cards */
min-height: 0;
box-sizing: border-box;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden; /* Prevent content overflow */
}

/* Exclude left/right image layouts from default card styling */
.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}

.category-cards-block.style-card .category-post-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Card style with left/right image layout - Enhanced specificity and override all conflicting styles */
.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item {
padding: 0 !important; /* Remove padding from item, let link handle spacing */
display: block !important;
background: transparent !important; /* Remove background from item */
border: none !important; /* Remove border from item */
box-shadow: none !important; /* Remove shadow from item */
margin-bottom: 20px !important; /* Add margin between items */
flex-direction: initial !important; /* Override any flex-direction from top-image */
}

/* Override top-image flex-direction for left/right layouts */
.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item {
flex-direction: initial !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item > a,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a {
/* Force flex layout with all vendor prefixes */
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
/* Force row direction */
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
/* Alignment */
-webkit-box-align: start !important;
-webkit-align-items: flex-start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
/* Spacing */
gap: 15px !important;
-webkit-box-pack: start !important;
-webkit-justify-content: flex-start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
/* Sizing */
height: auto !important;
min-height: 120px !important;
padding: 15px !important;
text-decoration: none !important;
color: inherit !important;
box-sizing: border-box !important;
width: 100% !important;
/* Visual styling */
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item:hover > a,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item:hover > a {
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a {
-webkit-box-direction: reverse !important;
-webkit-box-orient: horizontal !important;
-webkit-flex-direction: row-reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-thumb,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-thumb {
/* Force flex properties with vendor prefixes */
-webkit-box-flex: 0 !important;
-webkit-flex: 0 0 150px !important;
-ms-flex: 0 0 150px !important;
flex: 0 0 150px !important;
/* Force sizing */
width: 150px !important;
max-width: 150px !important;
min-width: 150px !important;
height: 120px !important;
/* Remove all margins */
margin: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
/* Visual styling */
border-radius: 4px !important;
overflow: hidden !important;
-webkit-flex-shrink: 0 !important;
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important;
background: #f5f5f5 !important;
/* Ensure it's a block element */
display: block !important;
position: relative !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-thumb img,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-content,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-content {
/* Force flex properties with vendor prefixes */
-webkit-box-flex: 1 !important;
-webkit-flex: 1 1 auto !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
/* Force display */
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
/* Force column direction for content */
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
/* Alignment */
-webkit-box-pack: start !important;
-webkit-justify-content: flex-start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
/* Sizing */
padding: 0 !important;
width: auto !important;
overflow: hidden !important;
}

/* Force override any conflicting styles for card left/right image layout - Maximum specificity */
/* This rule must come AFTER all other rules to ensure it takes precedence */
@media (min-width: 768px) {
    .category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item > a,
    .category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a,
    .category-cards-block.style-card.layout-left-image .category-cards-grid .post-card-item > a,
    .category-cards-block.style-card.layout-right-image .category-cards-grid .post-card-item > a,
    .category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-left-image .category-post-item > a,
    .category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a {
        /* Ensure flex layout is applied with all vendor prefixes */
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        /* Override any flex-direction from other rules */
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        /* Ensure alignment */
        -webkit-box-align: start !important;
        -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
        /* Override any column direction from wrapper rules */
        -webkit-box-pack: start !important;
        -webkit-justify-content: flex-start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }
}

.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a {
-webkit-box-direction: reverse !important;
-webkit-box-orient: horizontal !important;
-webkit-flex-direction: row-reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}

/* Ensure thumb and content are direct children of flex container with proper sizing */
.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item > a > .category-post-thumb,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a > .category-post-thumb,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-left-image .category-post-item > a > .category-post-thumb,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a > .category-post-thumb {
-webkit-box-flex: 0 !important;
-webkit-flex: 0 0 150px !important;
-ms-flex: 0 0 150px !important;
flex: 0 0 150px !important;
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
height: 120px !important;
-webkit-flex-shrink: 0 !important;
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important;
}

.category-cards-block.style-card .category-card-posts.layout-left-image .category-post-item > a > .category-post-content,
.category-cards-block.style-card .category-card-posts.layout-right-image .category-post-item > a > .category-post-content,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-left-image .category-post-item > a > .category-post-content,
.category-cards-block.style-card .category-card-wrapper .category-card-posts.layout-right-image .category-post-item > a > .category-post-content {
-webkit-box-flex: 1 !important;
-webkit-flex: 1 1 auto !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
}

/* Style: List (Simple) */
.category-cards-block.style-list .category-post-item {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 15px;
}

.category-cards-block.style-list .category-post-thumb {
border-radius: 4px;
}

/* List style with left/right image layout - ensure flex layout works */
.category-cards-block.style-list .category-card-posts.layout-left-image .category-post-item > a,
.category-cards-block.style-list .category-card-posts.layout-right-image .category-post-item > a {
display: flex !important;
flex-direction: row;
align-items: flex-start;
gap: 15px;
}

.category-cards-block.style-list .category-card-posts.layout-right-image .category-post-item > a {
flex-direction: row-reverse;
}

.category-cards-block.style-list .category-card-posts.layout-left-image .category-post-thumb,
.category-cards-block.style-list .category-card-posts.layout-right-image .category-post-thumb {
flex: 0 0 120px !important;
width: 120px !important;
height: 90px !important;
margin-bottom: 0 !important;
}

.category-cards-block.style-list .category-card-posts.layout-left-image .category-post-content,
.category-cards-block.style-list .category-card-posts.layout-right-image .category-post-content {
flex: 1;
min-width: 0;
}

/* List style with horizontal layout - items arranged horizontally */
.category-cards-block.style-list .category-card-posts.layout-horizontal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
width: 100%; /* Ensure full width */
}

.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-item {
flex: 0 0 calc(50% - 7.5px); /* 2 columns with gap */
min-width: 0;
width: 100%; /* Ensure items fill available space */
max-width: calc(50% - 7.5px); /* Prevent overflow */
}

.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-item > a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-thumb {
width: 100%;
height: 150px;
margin-bottom: 0;
}

.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-content {
width: 100%;
}

/* Responsive: 1 column on mobile */
@media (max-width: 767px) {
.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-item {
flex: 0 0 100%;
}

.category-cards-block.style-list .category-card-posts.layout-horizontal .category-post-thumb {
height: 120px;
}
}

/* =============================================================================
   Responsive Layout Settings (Desktop/Tablet/Mobile)
   ============================================================================= */

/* Mobile Layout: Horizontal (Left Image Right Content) */
@media (max-width: 767px) {
/* When mobile layout is set to horizontal, apply left-image layout */
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item .post-card-link,
.category-cards-block[data-layout-mobile="horizontal"] .category-card-posts .category-post-item > a,
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .category-card-wrapper .category-card-link {
display: flex !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
-webkit-box-align: start !important;
-webkit-align-items: flex-start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 12px !important;
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
width: 100% !important;
box-sizing: border-box !important;
}

.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item .category-card-image,
.category-cards-block[data-layout-mobile="horizontal"] .category-card-posts .category-post-item .category-post-thumb,
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .category-card-wrapper .category-card-image {
-webkit-flex: 0 0 100px !important;
-ms-flex: 0 0 100px !important;
flex: 0 0 100px !important;
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
height: 80px !important;
-webkit-flex-shrink: 0 !important;
-ms-flex-negative: 0 !important;
flex-shrink: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
border-radius: 4px !important;
}

.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item .category-card-content,
.category-cards-block[data-layout-mobile="horizontal"] .category-card-posts .category-post-item .category-post-content,
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .category-card-wrapper .category-card-content {
-webkit-flex: 1 1 auto !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
display: flex !important;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
-webkit-box-pack: start !important;
-webkit-justify-content: flex-start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}

.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item .category-card-image img,
.category-cards-block[data-layout-mobile="horizontal"] .category-card-posts .category-post-item .category-post-thumb img,
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .category-card-wrapper .category-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}

/* Override grid layout for horizontal mobile - make it single column */
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}

/* Ensure card items fill width */
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item,
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .category-card-wrapper {
width: 100% !important;
}}

@media (max-width: 767px) {
    /* Force 1-column for horizontal layouts on mobile to prevent height explosion */
    .category-cards-block.layout-left-image .category-cards-grid,
    .category-cards-block.layout-right-image .category-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .category-cards-block.layout-left-image .category-cards-grid .post-card-item .category-card-image,
    .category-cards-block.layout-left-image .category-card-posts .category-post-item .category-post-thumb,
    .category-cards-block.layout-right-image .category-cards-grid .post-card-item .category-card-image,
    .category-cards-block.layout-right-image .category-card-posts .category-post-item .category-post-thumb {
        -webkit-flex: 0 0 120px !important;
        -ms-flex: 0 0 120px !important;
        flex: 0 0 120px !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        height: 90px !important;
    }
}
/* Override any existing layout classes for mobile horizontal */
.category-cards-block[data-layout-mobile="horizontal"] .category-cards-grid .post-card-item .post-card-link {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}

/* Tablet Layout: Horizontal */
@media (min-width: 768px) and (max-width: 1024px) {
.category-cards-block[data-layout-tablet="horizontal"] .category-cards-grid .post-card-item .post-card-link,
.category-cards-block[data-layout-tablet="horizontal"] .category-card-posts .category-post-item > a {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 15px !important;
padding: 15px !important;
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.category-cards-block[data-layout-tablet="horizontal"] .category-cards-grid .post-card-item .category-card-image,
.category-cards-block[data-layout-tablet="horizontal"] .category-card-posts .category-post-item .category-post-thumb {
flex: 0 0 150px !important;
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
height: 120px !important;
flex-shrink: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
}

.category-cards-block[data-layout-tablet="horizontal"] .category-cards-grid .post-card-item .category-card-content,
.category-cards-block[data-layout-tablet="horizontal"] .category-card-posts .category-post-item .category-post-content {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
}

.category-cards-block[data-layout-tablet="horizontal"] .category-cards-grid .post-card-item .category-card-image img,
.category-cards-block[data-layout-tablet="horizontal"] .category-card-posts .category-post-item .category-post-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}

/* Desktop Layout: Horizontal */
@media (min-width: 1025px) {
.category-cards-block[data-layout-desktop="horizontal"] .category-cards-grid .post-card-item .post-card-link,
.category-cards-block[data-layout-desktop="horizontal"] .category-card-posts .category-post-item > a {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 20px !important;
padding: 20px !important;
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.category-cards-block[data-layout-desktop="horizontal"] .category-cards-grid .post-card-item .category-card-image,
.category-cards-block[data-layout-desktop="horizontal"] .category-card-posts .category-post-item .category-post-thumb {
flex: 0 0 200px !important;
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 150px !important;
flex-shrink: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
}

.category-cards-block[data-layout-desktop="horizontal"] .category-cards-grid .post-card-item .category-card-content,
.category-cards-block[data-layout-desktop="horizontal"] .category-card-posts .category-post-item .category-post-content {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
}

.category-cards-block[data-layout-desktop="horizontal"] .category-cards-grid .post-card-item .category-card-image img,
.category-cards-block[data-layout-desktop="horizontal"] .category-card-posts .category-post-item .category-post-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}

/* Style: Compact */
.category-cards-block.style-compact .category-post-item {
padding: 10px;
}

.category-cards-block.style-compact .category-post-thumb {
height: 120px; /* Smaller thumb */
margin-bottom: 8px;
}

.category-cards-block.style-compact h3 {
font-size: 0.95em;
margin: 0;
}

/* Style: Overlay */
.category-cards-block.style-overlay .category-post-item {
position: relative;
overflow: hidden;
border-radius: 8px;
padding: 0;
border: none;
height: 250px; /* Fixed height for overlay effect */
}

.category-cards-block.style-overlay .category-post-thumb {
width: 100%;
height: 100%;
margin: 0;
}

.category-cards-block.style-overlay .category-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}

.category-cards-block.style-overlay .category-post-item:hover .category-post-thumb img {
transform: scale(1.05);
}

.category-cards-block.style-overlay .category-post-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
color: #fff;
z-index: 2;
pointer-events: none; /* Let clicks pass through to link if wrapper is link */
}

.category-cards-block.style-overlay h3 a {
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Style: Grid 3x2 (Special) */
/* Usually implies specific grid logic, but if layout handles columns, this might just be a styling modifier */
.category-cards-block.style-grid3x2 .category-cards-grid {
gap: 20px;
}


/* =============================================================================
   Category Cards: Item Layout Variations (Top, Left, Right, No Image)
   ============================================================================= */

/* Layout: Top Image (Standard Card) - Only apply when NOT left/right image */
.category-cards-block .category-post-posts.layout-top-image,
.category-cards-block .category-cards-grid .layout-top-image {
display: block;
}

/* Top image layout - exclude left/right image layouts */
.category-cards-block .category-card-posts.layout-top-image:not(.layout-left-image):not(.layout-right-image) .category-post-item {
display: block; /* Change from flex to block to avoid conflicts */
margin-bottom: 20px;
}

/* Ensure top-image layout uses column for link */
.category-cards-block .category-card-posts.layout-top-image:not(.layout-left-image):not(.layout-right-image) .category-post-item > a {
display: flex;
flex-direction: column;
}

/* [FIX] Layout: Top Image - Force consistent height for all screen sizes */
.category-cards-block .category-card-posts.layout-top-image .category-post-thumb,
.category-cards-block.style-card .category-card-posts.layout-top-image .category-post-thumb {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    margin-bottom: 12px;
    overflow: hidden !important;
    position: relative !important;
}

.category-cards-block .category-card-posts.layout-top-image .category-post-thumb img,
.category-cards-block.style-card .category-card-posts.layout-top-image .category-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-height: 180px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

@media (max-width: 767px) {
    /* [FIX] Force consistent thumbnail height on mobile for layout-top-image */
    .category-cards-block .category-card-posts.layout-top-image:not(.layout-left-image):not(.layout-right-image) .category-post-thumb,
    .category-cards-block.style-card .category-card-posts.layout-top-image .category-post-thumb {
        height: 120px !important;
        max-height: 120px !important;
        min-height: 120px !important;
        overflow: hidden !important;
    }
    
    /* [FIX] Force cover fit for all images in top-image layout on mobile */
    .category-cards-block .category-card-posts.layout-top-image .category-post-thumb img,
    .category-cards-block.style-card .category-card-posts.layout-top-image .category-post-thumb img {
        width: 100% !important;
        height: 100% !important;
        max-height: 120px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Layout: Left Image - General (for non-card styles) */
.category-cards-block:not(.style-card) .layout-left-image .category-post-item > a,
.category-cards-block:not(.style-card) .category-card-posts.layout-left-image .category-post-item > a {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 15px;
text-decoration: none;
color: inherit;
}

.category-cards-block:not(.style-card) .layout-left-image .category-post-thumb,
.category-cards-block:not(.style-card) .category-card-posts.layout-left-image .category-post-thumb {
flex: 0 0 100px; /* Fixed width for thumbnail */
width: 100px;
height: 75px;
margin-bottom: 0;
}

.category-cards-block:not(.style-card) .layout-left-image .category-post-content,
.category-cards-block:not(.style-card) .category-card-posts.layout-left-image .category-post-content {
flex: 1;
min-width: 0; 
}

/* Layout: Right Image - General (for non-card styles) */
.category-cards-block:not(.style-card) .layout-right-image .category-post-item > a,
.category-cards-block:not(.style-card) .category-card-posts.layout-right-image .category-post-item > a {
display: flex;
flex-direction: row-reverse; /* Swap order */
align-items: flex-start;
gap: 15px;
text-decoration: none;
color: inherit;
justify-content: space-between;
}

.category-cards-block:not(.style-card) .layout-right-image .category-post-thumb,
.category-cards-block:not(.style-card) .category-card-posts.layout-right-image .category-post-thumb {
flex: 0 0 100px;
width: 100px;
height: 75px;
margin-bottom: 0;
}

.category-cards-block:not(.style-card) .layout-right-image .category-post-content,
.category-cards-block:not(.style-card) .category-card-posts.layout-right-image .category-post-content {
flex: 1;
min-width: 0;
}

/* Layout: No Image (Text Only) */
.category-cards-block .layout-no-image .category-post-thumb {
display: none !important;
}

.category-cards-block .layout-no-image .category-post-item {
margin-bottom: 15px;
border-bottom: 1px dashed #eee;
padding-bottom: 15px;
}

.category-cards-block .layout-no-image .category-post-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
.category-cards-block.layout-3x2 .category-cards-grid,
.category-cards-block.layout-4x2 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
/* 3x2 和 4x2 維持 2 欄布局，但限制標題長度以防止高度過大 */
.category-cards-block.layout-3x2 .category-cards-grid,
.category-cards-block.layout-4x2 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.category-cards-block.layout-3x2 .category-card-name,
.category-cards-block.layout-4x2 .category-card-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.9rem !important;
line-height: 1.3 !important;
}
/* 2x3 和 6x1 使用單欄以顯示更多內容 */
.category-cards-block.layout-2x3 .category-cards-grid,
.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: 1fr;
}

/* Respect explicit mobile layout setting: follow layout class on mobile */
.category-cards-block[data-layout-mobile="card"].layout-3x2 .category-cards-grid,
.category-cards-block[data-layout-mobile="card"].layout-4x2 .category-cards-grid,
.category-cards-block[data-layout-mobile="card"].layout-2x3 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.category-cards-block[data-layout-mobile="card"].layout-6x1 .category-cards-grid,
.category-cards-block[data-layout-mobile="card"].layout-auto .category-cards-grid,
.category-cards-block[data-layout-mobile="card"].layout-1x4 .category-cards-grid {
grid-template-columns: 1fr;
gap: 14px;
}

/* Mobile readability improvements for category cards */
.category-cards-block[data-layout-mobile="card"] .category-card-name {
font-size: 1.05rem !important;
line-height: 1.4 !important;
}
.category-cards-block[data-layout-mobile="card"] .category-post-title {
font-size: 0.98rem;
line-height: 1.5;
}
.category-cards-block[data-layout-mobile="card"] .category-post-date {
font-size: 0.85rem;
}
}

/* Legacy: style-grid3x2 for backwards compatibility */
.category-cards-block.style-grid3x2 .category-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.category-cards-block.style-grid3x2 .category-card-wrapper {
width: 100%;
margin-bottom: 0;
}
@media (max-width: 991px) {
.category-cards-block.style-grid3x2 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.category-cards-block.style-grid3x2 .category-cards-grid {
grid-template-columns: 1fr;
}
}

/* =============================================================================
   New Layout Styles: Category Cards
   ============================================================================= */

@media (min-width: 1025px) {
/* Style: Modern Grid */
.category-cards-block.style-modern-grid .category-card-wrapper {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
}

.category-cards-block.style-modern-grid .category-card-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.category-cards-block.style-modern-grid .category-card-header {
background: linear-gradient(to right, var(--header-accent-color, #3b82f6), #60a5fa);
padding: 12px 15px;
}

.category-cards-block.style-modern-grid .category-card-name {
color: #fff;
margin: 0;
font-weight: 700;
}

/* Style: Solid Color (Originally Gradient) */
.category-cards-block.style-solid-color .category-card-wrapper {
background: var(--card-solid-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
border-radius: 12px;
overflow: hidden;
color: #fff;
transition: transform 0.3s ease;
}

.category-cards-block.style-solid-color .category-card-wrapper:hover {
transform: translateY(-5px);
}

.category-cards-block.style-solid-color .category-card-name,
.category-cards-block.style-solid-color .category-card-count,
.category-cards-block.style-solid-color .category-post-title,
.category-cards-block.style-solid-color .category-post-excerpt,
.category-cards-block.style-solid-color .category-post-date {
color: #fff !important;
}

.category-cards-block.style-solid-color .category-card-header {
border-bottom: 1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.05);
}

.category-cards-block.style-modern-grid .category-card-count {
background: rgba(255,255,255,0.2);
color: #fff;
border-radius: 20px;
padding: 2px 10px;
}

.category-cards-block.style-modern-grid .category-card-posts {
padding: 15px;
}

.category-cards-block.style-modern-grid .category-post-item {
border-bottom: 1px solid #f0f0f0;
padding: 10px 0;
}

.category-cards-block.style-modern-grid .category-post-item:last-child {
border-bottom: none;
}

.category-cards-block.style-modern-grid .category-post-title {
font-size: 1rem;
line-height: 1.4;
transition: color 0.2s;
color: #333;
}

.category-cards-block.style-modern-grid .category-post-item:hover .category-post-title {
color: var(--header-accent-color, #3b82f6);
}

/* Style: Minimal List */
.category-cards-block.style-minimal-list .category-card-wrapper {
background: transparent;
border: none;
box-shadow: none;
}

.category-cards-block.style-minimal-list .category-card-header {
border-bottom: 2px solid #333;
padding-bottom: 8px;
margin-bottom: 15px;
}

.category-cards-block.style-minimal-list .category-card-name {
font-family: serif;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: -0.5px;
}

.category-cards-block.style-minimal-list .category-post-item {
margin-bottom: 12px;
}

.category-cards-block.style-minimal-list .category-post-title {
font-size: 0.95rem;
font-weight: 500;
color: #444;
}

.category-cards-block.style-minimal-list .category-post-date {
font-size: 0.75rem;
color: #999;
text-transform: uppercase;
}

}
/* =============================================================================
   Feature Block Tags Enhancement (v1.0)
   Modern pill-style category tags with gradients and hover effects
   ============================================================================= */

/* Base tag styles */
.category-cards-block .collection-item-cat,
.category-cards-block .category-card-category,
.category-cards-block .post-card-category,
.feature-block .item-category,
.hd-category-card .card-category,
.tabs-content-container .card-category,
.postcard_thumbnail .hd-cat-tag,
#arte-t6-t .hd-cat-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
line-height: 1.4;
margin-bottom: 8px;
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
white-space: nowrap;
max-width: calc(100% - 24px);
overflow: hidden;
text-overflow: ellipsis;
}

/* Hover effect */
.category-cards-block .collection-item-cat:hover,
.category-cards-block .category-card-category:hover,
.category-cards-block .post-card-category:hover,
.feature-block .item-category:hover,
.hd-category-card .card-category:hover,
.tabs-content-container .card-category:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Alternative color schemes for variety */
.category-cards-block .collection-item-cat.tag-alt-blue {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.category-cards-block .collection-item-cat.tag-alt-green {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.category-cards-block .collection-item-cat.tag-alt-orange {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.category-cards-block .collection-item-cat.tag-alt-dark {
background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

/* Minimalist style option */
.category-cards-block .collection-item-cat.tag-minimal,
.category-cards-block .collection-item-cat.tag-style-minimal,
.postcard_thumbnail .hd-cat-tag.tag-style-minimal,
#arte-t6-t .hd-cat-tag.tag-style-minimal,
.feature-block .item-category.tag-minimal {
background: transparent;
border: 1px solid currentColor;
color: #667eea;
font-weight: 500;
}

.category-cards-block .collection-item-cat.tag-minimal:hover,
.category-cards-block .collection-item-cat.tag-style-minimal:hover,
.postcard_thumbnail .hd-cat-tag.tag-style-minimal:hover,
#arte-t6-t .hd-cat-tag.tag-style-minimal:hover,
.feature-block .item-category.tag-minimal:hover {
background: #667eea;
color: #fff;
border-color: #667eea;
}

/* Additional Tag Style Options */
/* Gradient (default) */
.category-cards-block .collection-item-cat.tag-style-gradient,
.postcard_thumbnail .hd-cat-tag.tag-style-gradient,
#arte-t6-t .hd-cat-tag.tag-style-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
}

/* Solid */
.category-cards-block .collection-item-cat.tag-style-solid,
.postcard_thumbnail .hd-cat-tag.tag-style-solid,
#arte-t6-t .hd-cat-tag.tag-style-solid {
background: #667eea;
color: #fff;
border: none;
}

/* Outline */
.category-cards-block .collection-item-cat.tag-style-outline,
.postcard_thumbnail .hd-cat-tag.tag-style-outline,
#arte-t6-t .hd-cat-tag.tag-style-outline {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
}

.category-cards-block .collection-item-cat.tag-style-outline:hover,
.postcard_thumbnail .hd-cat-tag.tag-style-outline:hover,
#arte-t6-t .hd-cat-tag.tag-style-outline:hover {
background: #667eea;
color: #fff;
}

/* Pill (more rounded) */
.category-cards-block .collection-item-cat.tag-style-pill,
.postcard_thumbnail .hd-cat-tag.tag-style-pill,
#arte-t6-t .hd-cat-tag.tag-style-pill {
border-radius: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 6px 16px;
}

/* Square */
.category-cards-block .collection-item-cat.tag-style-square,
.postcard_thumbnail .hd-cat-tag.tag-style-square,
#arte-t6-t .hd-cat-tag.tag-style-square {
border-radius: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}

/* Rounded (less rounded than default) */
.category-cards-block .collection-item-cat.tag-style-rounded,
.postcard_thumbnail .hd-cat-tag.tag-style-rounded,
#arte-t6-t .hd-cat-tag.tag-style-rounded {
border-radius: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}

/* Flat (no gradient, no shadow) */
.category-cards-block .collection-item-cat.tag-style-flat,
.postcard_thumbnail .hd-cat-tag.tag-style-flat,
#arte-t6-t .hd-cat-tag.tag-style-flat {
background: #667eea;
color: #fff;
border: none;
box-shadow: none;
}

.category-cards-block .collection-item-cat.tag-style-flat:hover,
.postcard_thumbnail .hd-cat-tag.tag-style-flat:hover,
#arte-t6-t .hd-cat-tag.tag-style-flat:hover {
background: #5568d3;
transform: none;
box-shadow: none;
}

/* Dark Transparent (黑色+透明) */
.category-cards-block .collection-item-cat.tag-style-dark-transparent,
.postcard_thumbnail .hd-cat-tag.tag-style-dark-transparent,
#arte-t6-t .hd-cat-tag.tag-style-dark-transparent {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.category-cards-block .collection-item-cat.tag-style-dark-transparent:hover,
.postcard_thumbnail .hd-cat-tag.tag-style-dark-transparent:hover,
#arte-t6-t .hd-cat-tag.tag-style-dark-transparent:hover {
background: rgba(0, 0, 0, 0.75);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile RWD adjustments */
@media (max-width: 767px) {
.category-cards-block .collection-item-cat,
.category-cards-block .category-card-category,
.category-cards-block .post-card-category,
.feature-block .item-category,
.hd-category-card .card-category,
.tabs-content-container .card-category,
.postcard_thumbnail .hd-cat-tag,
#arte-t6-t .hd-cat-tag {
font-size: 10px;
padding: 3px 10px;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
.category-cards-block .collection-item-cat,
.category-cards-block .category-card-category,
.category-cards-block .post-card-category,
.feature-block .item-category {
font-size: 10px;
padding: 4px 10px;
}
}

/* Feature Block Title Enhancement */
.feature-block-title,
.category-cards-block .feature-block-title,
.collection-slider-block .feature-block-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 1.4em;
font-weight: 700;
color: #1a1a1a;
}

.feature-block-title i,
.feature-block-title .dashicons {
color: #667eea;
}

@media (max-width: 767px) {
.feature-block-title,
.category-cards-block .feature-block-title,
.collection-slider-block .feature-block-title {
font-size: 1.2em;
margin-bottom: 15px;
}
}

/* =============================================================================
   Featured Highlight (First Post Larger)
   ============================================================================= */
.additional-category-block.has-featured-highlight .category-cards-grid .featured-highlight {
grid-column: span 2;
grid-row: span 2;
}

.additional-category-block.has-featured-highlight .featured-highlight .category-card-image {
height: 280px;
}

.additional-category-block.has-featured-highlight .featured-highlight .category-card-title {
font-size: 1.25rem;
}

/* Mobile: Featured highlight takes full width */
@media (max-width: 767px) {
.additional-category-block.has-featured-highlight .category-cards-grid .featured-highlight {
grid-column: span 2;
grid-row: span 1;
}

.additional-category-block.has-featured-highlight .featured-highlight .category-card-image {
height: 180px;
}
}

/* =============================================================================
   List View Mode (Toggled by View Toggle)
   ============================================================================= */
.category-cards-grid.list-view {
grid-template-columns: 1fr !important;
}

.category-cards-grid.list-view .category-card-wrapper {
grid-column: span 1 !important;
grid-row: span 1 !important;
}

.category-cards-grid.list-view .post-card-link,
.category-cards-grid.list-view .category-card-link {
flex-direction: row;
align-items: stretch;
}

.category-cards-grid.list-view .category-card-image {
width: 150px;
min-width: 150px;
height: 100px;
flex-shrink: 0;
}