/**
 * CSS Bundle: homepage
 * Generated: 2026-06-02 05:58:56
 * Files: 9
 * Signature: 7c4209ee4a234e2768ef5ba0b6bad7b6b3e4a0ec
 */

/* === page-home.css === */
/* ==========================================================================
   HOMEPAGE SPECIFIC STYLES
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE CONTAINER
   ========================================================================== */

.homepage-layout-missing {
padding: 40px;
text-align: center;
}

.homepage-container {
max-width: 1280px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
overflow-x: hidden;
}

/* ==========================================================================
   SLIDESHOW & TOP BLOCK
   ========================================================================== */

/* --- Slideshow --- */
.slideshow-a {
width: calc(100% - 30px);
margin: 10px 15px 15px;
}

/* --- Top Block Layout --- */
.top-block {
margin-bottom: 30px;
}

.top-block-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}

/* --- Slider Section --- */
.slider-section {
flex: 2;
min-width: 0;
max-width: 880px;
}

/* Popular Content Section (Sidebar) */
.popular-content-section {
flex: 1;
min-width: 280px;
max-width: 320px;
}

/* ==========================================================================
   POPULAR SECTION
   ========================================================================== */

.popular-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
text-decoration: none;
}

/* --- Popular Item --- */
.popular-item {
display: flex;
gap: 10px;
padding: 10px;
background-color: #fff;
transition: background-color 0.3s ease;
}

.popular-item:hover {
background-color: #f9f9f9;
}

.popular-item img {
float: left;
padding-right: 10px;
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 4px;
margin: 0;
}

.popular-item-title {
height: auto;
text-decoration: none;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
color: #1f1d1d;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1.1rem;
line-height: 1.8em;
font-weight: 400;
}

.popular-item-ad {
min-width: 300px;
min-height: 250px;
max-width: 300px;
max-height: 250px;
margin: 0 auto;
padding-bottom: 15px;
}

/* --- Popular Content Section --- */
.popular-content-section.design-image-layout-wrapper {
flex: 1;
min-width: 200px;
max-width: 300px;
box-sizing: border-box;
}

.popular-content-scroll-wrapper {
max-height: 550px;
overflow-y: auto;
}

.no-popular-items {
padding: 20px;
text-align: center;
color: #777;
}

/* ==========================================================================
   DESIGN IMAGE LAYOUT
   ========================================================================== */

.homepage-popular-items-container {
/* Container styles */
}

/* --- Featured Image --- */
.design-image-featured {
position: relative;
line-height: 0;
margin-bottom: 0;
}

.design-image-featured a {
display: block;
text-decoration: none;
}

.design-image-featured .featured-image {
display: block;
width: 100%;
height: auto;
max-height: 320px;
object-fit: cover;
aspect-ratio: 16 / 9;
background-color: #e9e9e9;
}

.design-image-featured .default-img {
/* Default image styles */
}

.design-image-featured .featured-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
padding: 10px 12px;
box-sizing: border-box;
}

.design-image-featured .featured-title-on-image {
color: #ffffff;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.35;
margin: 0;
}

/* --- Image List --- */
.design-image-list {
list-style: none;
padding: 0;
margin: 0;
}

.design-image-list .homepage-list-item {
display: flex;
align-items: flex-start;
padding: 12px 14px;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9rem;
line-height: 1.45;
transition: background-color 0.3s ease;
}

.design-image-list .homepage-list-item:hover {
background-color: #f9f9f9;
}

.design-image-list .homepage-list-item:last-child {
border-bottom: none;
}

.design-image-list .homepage-list-item a {
text-decoration: none;
color: #222222;
display: block;
}

.design-image-list .homepage-list-item a:hover {
color: #0073aa;
}

.design-image-list .homepage-list-item .list-item-link {
display: flex;
align-items: flex-start;
text-decoration: none;
color: #222222;
width: 100%;
}

.design-image-list .homepage-list-item .list-item-link:hover {
color: #0073aa;
}

.design-image-list .homepage-list-item .list-item-thumbnail-wrapper {
flex-shrink: 0;
margin-right: 12px;
}

.design-image-list .homepage-list-item .list-item-thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
background-color: #e9e9e9;
}

.design-image-list .homepage-list-item .list-item-text-wrapper {
flex-grow: 1;
max-height: 100px;
overflow: hidden;
}

.design-image-list .homepage-list-item .list-item-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/* ==========================================================================
   RANKING STYLE POPULAR CONTENT
   ========================================================================== */

.popular-content-section.layout-ranking {
flex: 1;
min-width: 200px;
max-width: 320px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
overflow: hidden;
}

/* ==========================================================================
   POPULAR HERO IMAGE SECTION
   ========================================================================== */

.popular-hero-section {
position: relative;
width: 100%;
height: var(--hero-height-desktop, 400px);
overflow: hidden;
border-radius: 8px;
margin-bottom: 15px;
}

.popular-hero-wrapper {
display: block;
width: 100%;
height: 100%;
position: relative;
text-decoration: none;
}

a.popular-hero-wrapper:hover .popular-hero-overlay {
background: rgba(0, 0, 0, calc(var(--hero-overlay-opacity, 0.3) + 0.1));
}

.popular-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.popular-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.3));
transition: background 0.3s ease;
}

.popular-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
color: var(--hero-text-color, #ffffff);
text-align: left;
}

.popular-hero-title {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 5px 0;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.popular-hero-subtitle {
font-size: 0.9rem;
margin: 0;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media (max-width: 767px) {
.popular-hero-section {
height: var(--hero-height-mobile, 250px);
border-radius: 0;
margin-bottom: 10px;
}

.popular-hero-content {
padding: 15px;
}

.popular-hero-title {
font-size: 1.1rem;
}

.popular-hero-subtitle {
font-size: 0.8rem;
}
}

.popular-content-ranking {
display: flex;
flex-direction: column;
}

/* PR Section */
.ranking-pr-section {
position: relative;
padding: 10px 0px;
border-bottom: 1px solid #f0f0f0;
display: flex; /* Fix stack issue */
align-items: center; /* Center items vertically */
gap: 12px;
}

.pr-badge {
flex-shrink: 0; /* Prevent badge from being crushed */
display: inline-flex;
align-items: center;
justify-content: center;
background: #8a4b00;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
margin-bottom: 0; /* Remove bottom margin as it's now flex row */
text-transform: uppercase;
letter-spacing: 0.5px;
height: 20px;
}

.ranking-pr-link {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
flex: 1 1 auto;
}

.ranking-pr-link:hover {
opacity: 0.85;
}

.ranking-pr-image {
width: 100%;
height: auto;
max-height: 180px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 10px;
}

.ranking-pr-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}

.ranking-pr-title {
flex: 1;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: #333;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.ranking-pr-icon {
font-size: 14px;
color: #999;
flex-shrink: 0;
margin-top: 2px;
}

.ranking-pr-description {

font-size: 12px;
color: #666;
margin-top: 8px;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Ranking List Section */
.ranking-list-section {
padding: 15px;
}

.ranking-section-title {
font-size: 15px;
font-weight: 700;
color: #333;
margin: 0 0 15px 0;
padding-bottom: 10px;
border-bottom: 2px solid #333;
display: flex;
align-items: center;
gap: 6px;
}

.ranking-icon {
font-size: 16px;
color: #333;
}

/* Ranking List */
.ranking-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: ranking;
}

.ranking-item {
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}

.ranking-item:last-child {
border-bottom: none;
}

.ranking-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #333;
transition: color 0.2s ease;
}

.ranking-category {
display: inline-block;
padding: 3px 10px;
margin-right: 6px;
margin-bottom: 6px;
font-size: 13px; /* Increased size as requested */
font-weight: 500;
line-height: 1.2;
color: #fff;
background-color: #6c757d; /* Match short tag gray */
border-radius: 3px;
text-decoration: none;
vertical-align: middle;
}


.ranking-link:hover {
color: #1a73e8;
}

/* Base Thumbnail Styles */
.ranking-thumbnail {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 6px;
overflow: hidden;
}

.ranking-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.ranking-number {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #546e7a;
border-radius: 4px;
}

/* Top 3 special styling */
.ranking-item.rank-1 .ranking-number {
background: linear-gradient(135deg, #ffd700, #f9a825);
box-shadow: 0 2px 4px rgba(249, 168, 37, 0.3);
}

.ranking-item.rank-2 .ranking-number {
background: linear-gradient(135deg, #c0c0c0, #90a4ae);
box-shadow: 0 2px 4px rgba(144, 164, 174, 0.3);
}

.ranking-item.rank-3 .ranking-number {
background: linear-gradient(135deg, #cd7f32, #a1887f);
box-shadow: 0 2px 4px rgba(161, 136, 127, 0.3);
}

.popular-content-ranking.no-ranking-numbers .ranking-item.rank-1 .ranking-number,
.popular-content-ranking.no-ranking-numbers .ranking-item.rank-2 .ranking-number,
.popular-content-ranking.no-ranking-numbers .ranking-item.rank-3 .ranking-number {
background: #546e7a;
box-shadow: none;
}

/* Hide all ranking numbers */
.popular-content-ranking.hide-all-numbers .ranking-number {
display: none;
}

/* Ranking item meta info */
.ranking-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
font-size: 11px;
color: #888;
}

.ranking-meta span {
display: inline-flex;
align-items: center;
}

.ranking-meta .meta-category {
color: #1a73e8;
}

.ranking-meta .meta-views::before {
content: "👁";
margin-right: 2px;
}

.ranking-meta .meta-author::before {
content: "✍";
margin-right: 2px;
}

/* Hover effect */
.ranking-item.hover-effect .ranking-link {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ranking-item.hover-effect:hover .ranking-link {
transform: translateX(5px);
}

.ranking-item.hover-effect:hover .ranking-post-title {
color: #1a73e8;
}

/* ========================================
   LIST ITEM LAYOUT OPTIONS
   ======================================== */

/* Default layout (right-image): ranking number | content | image */
.ranking-list.layout-right-image .ranking-item .ranking-link,
.ranking-list .ranking-item .ranking-link {
display: flex;
flex-direction: row;
align-items: center;
}

.ranking-list.layout-right-image .ranking-item .ranking-content,
.ranking-list .ranking-item .ranking-content {
flex: 1;
order: 1;
}

.ranking-list.layout-right-image .ranking-item .ranking-thumbnail,
.ranking-list .ranking-item .ranking-thumbnail {
order: 2;
margin-left: 12px;
margin-right: 0;
}

/* Left-image layout: ranking number | image | content */
.ranking-list.layout-left-image .ranking-item .ranking-link {
display: flex;
flex-direction: row;
align-items: center;
}

.ranking-list.layout-left-image .ranking-item .ranking-thumbnail {
order: 1;
margin-left: 0;
margin-right: 12px;
}

.ranking-list.layout-left-image .ranking-item .ranking-content {
flex: 1;
order: 2;
}

/* Top-image layout: image on top, content below */
.ranking-list.layout-top-image .ranking-item .ranking-link {
display: flex;
flex-direction: column;
align-items: stretch;
}

.ranking-list.layout-top-image .ranking-item .ranking-thumbnail {
order: 1;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 0 10px 0;
border-radius: 6px;
}

.ranking-list.layout-top-image .ranking-item .ranking-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.ranking-list.layout-top-image .ranking-item .ranking-content {
order: 2;
width: 100%;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 1;
padding: 8px 0;
}

.ranking-list.layout-top-image .ranking-item .ranking-post-title {
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5 !important;
min-height: 42px;
text-overflow: ellipsis;
}

.ranking-list.layout-top-image .ranking-item {
position: relative;
}

.ranking-list.layout-top-image .ranking-number {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}

/* Bottom-image layout: content on top, image below */
.ranking-list.layout-bottom-image .ranking-item .ranking-link {
display: flex;
flex-direction: column;
align-items: stretch;
}

.ranking-list.layout-bottom-image .ranking-item .ranking-content {
order: 1;
width: 100%;
margin-bottom: 10px;
}

.ranking-list.layout-bottom-image .ranking-item .ranking-thumbnail {
order: 2;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
border-radius: 6px;
}

.ranking-list.layout-bottom-image .ranking-item .ranking-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Grid layout for top/bottom image on larger screens */
@media (min-width: 768px) {
.ranking-list.layout-top-image,
.ranking-list.layout-bottom-image {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.ranking-list.layout-top-image .ranking-item,
.ranking-list.layout-bottom-image .ranking-item {
border-bottom: none;
padding: 12px;
background: #f9f9f9;
border-radius: 8px;
}
}

/* ========================================
   PER-ITEM LAYOUT OVERRIDES
   Applied directly on li.layout-* class
   ======================================== */

/* Per-item left-image layout */
.ranking-item.layout-left-image .ranking-link {
display: flex;
flex-direction: row;
align-items: center;
}
.ranking-item.layout-left-image .ranking-thumbnail {
order: 1;
margin-left: 0;
margin-right: 12px;
}
.ranking-item.layout-left-image .ranking-content {
flex: 1;
order: 2;
}

/* Per-item right-image layout */
.ranking-item.layout-right-image .ranking-link {
display: flex;
flex-direction: row;
align-items: center;
}
.ranking-item.layout-right-image .ranking-thumbnail {
order: 2;
margin-left: 12px;
margin-right: 0;
}
.ranking-item.layout-right-image .ranking-content {
flex: 1;
order: 1;
}

/* Per-item top-image layout */
.ranking-item.layout-top-image .ranking-link {
display: flex;
flex-direction: column;
align-items: stretch;
}
.ranking-item.layout-top-image .ranking-thumbnail {
order: 1;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 0 10px 0;
border-radius: 6px;
}
.ranking-item.layout-top-image .ranking-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ranking-item.layout-top-image .ranking-content {
order: 2;
width: 100%;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 1;
padding: 8px 0;
}
.ranking-item.layout-top-image .ranking-post-title {
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5 !important;
min-height: 42px; /* Ensure minimum height for 2 lines */
text-overflow: ellipsis;
}

/* Per-item bottom-image layout */
.ranking-item.layout-bottom-image .ranking-link {
display: flex;
flex-direction: column;
align-items: stretch;
}
.ranking-item.layout-bottom-image .ranking-content {
order: 1;
width: 100%;
margin-bottom: 10px;
}
.ranking-item.layout-bottom-image .ranking-thumbnail {
order: 2;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
border-radius: 6px;
}
.ranking-item.layout-bottom-image .ranking-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.ranking-title {
flex: 1;
font-size: 13px;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Item Badges */
.item-badge {
display: inline-block;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
border-radius: 3px;
margin-right: 5px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.3px;
}

.badge-feature {
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
}

.badge-live {
background: linear-gradient(135deg, #e53935, #ff5252);
color: #fff;
animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}

/* Ad Area */
.popular-aside-ad-area {
margin-top: 15px;
/*padding: 0 15px 15px;*/
}

.popular-aside-ad-area:empty {
display: none;
}

/* Live Embed Section */
.live-embed-section {
margin-bottom: 15px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
border-radius: 8px;
overflow: hidden;
}

.live-embed-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: rgba(255, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.live-indicator {
width: 10px;
height: 10px;
background: #e53935;
border-radius: 50%;
animation: live-pulse 2s infinite;
box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
}

.live-title {
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
}

.live-embed-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}

.live-embed-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.live-embed-link {
display: block;
padding: 12px 15px;
text-align: center;
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
background: linear-gradient(135deg, #e53935, #c62828);
transition: background 0.3s ease;
}

.live-embed-link:hover {
background: linear-gradient(135deg, #f44336, #d32f2f);
color: #fff;
}

/* Video Mode (non-live) */
.live-embed-section.video-mode {
background: linear-gradient(135deg, #2d3436, #636e72);
}

.live-embed-section.video-mode .live-embed-header {
background: rgba(0, 0, 0, 0.2);
}

.video-indicator {
font-size: 14px;
margin-right: 4px;
}

.live-embed-section.video-mode .live-embed-link {
background: linear-gradient(135deg, #0984e3, #6c5ce7);
}

.live-embed-section.video-mode .live-embed-link:hover {
background: linear-gradient(135deg, #74b9ff, #a29bfe);
}

/* ==========================================================================
   LATEST SECTION
   ========================================================================== */

.latest-section {
flex: 1;
background: #fff;
border-radius: 8px;
}

/* ==========================================================================
   CATEGORY ITEMS
   ========================================================================== */

.category-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.category-item {
text-align: center;
transition: transform 0.3s ease;
}

.category-item:hover {
transform: translateY(-5px);
}

.category-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin-bottom: 10px;
border-radius: 8px;
}

.category-title {
min-height: 1.2em;
height: auto;
text-decoration: none;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
color: #1f1d1d;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1.1rem;
line-height: 1.8em;
font-weight: 400;
}

.more-articles {
text-align: center;
margin-top: 20px;
padding: 20px;
}

/* ==========================================================================
   HOMEPAGE TABS
   ========================================================================== */

.tab-wrap {
width: 100%;
margin: 0 auto;
margin-bottom: 40px;
}

/* Tab-group 基礎樣式 - 用於實際的 tabs 功能（不是標題樣式）*/
.tab-wrap .tab-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}

/* only apply interactive tab styles within .tab-wrap context */
.tab-wrap .tab {
display: inline-block;
flex-grow: 1;
margin: 0 auto;
padding: 10px 0;
color: #000;
font-weight: 700;
text-align: center;
vertical-align: bottom;
cursor: pointer;
transition: all 0.3s ease;
}

.tab-wrap .tab:hover {
background-color: #f0f0f0;
}

.tab-wrap .tab h3,
.tab-wrap .tab h4,
.tab-wrap .tab h5,
.tab-wrap .tab h6 {
margin: 0;
}

.tab-wrap .tab h3 {
font-size: 1.1rem;
}

.tab-wrap .tab.is-active {
position: relative;
background: #0273aa;
color: #fff;
}

/* Arrow only for actual tabs within .tab-wrap */
.tab-wrap .tab.is-active::after {
opacity: 1;
position: absolute;
bottom: -8px;
left: 50%;
width: 0;
height: 0;
margin-left: -8px;
border-top: 8px solid #0273aa;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
content: "";
}

/* Prevent title-style blocks from inheriting tab active styles */
.tab-group[class*="title-style-"] .tab.is-active {
background: transparent;
color: inherit;
}

.tab-group[class*="title-style-"] .tab.is-active::after {
display: none !important;
content: none !important;
}

.panel-group {
min-height: 100px;
}

.panel {
display: none;
}

.panel.is-show {
display: block;
/*padding-top: 20px;*/
}

/* --- Tabs Block --- */
.tabs-block {
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 0;
}

/* Tabs with sidebar container - centered like top-block */
.tabs-with-sidebar-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
align-items: flex-start;
}

.tabs-block a {
text-decoration: none;
}

.tabs-section {
flex: 3;
background: #fff;
border-radius: 8px;
overflow: hidden;
transition: height 0.3s ease;
}

/* --- Tabs Header --- */
.tabs-header-container {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background: #f7f7f7;
border-bottom: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
}

.tabs-header {
display: flex;
gap: 10px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}

.tabs-header::-webkit-scrollbar {
display: none;
}

.tab-btn {
flex: 0 0 auto;
padding: 10px 15px;
cursor: pointer;
border: none;
background: #ddd;
font-size: 14px;
font-weight: 700;
color: #333;
text-align: center;
transition: all 0.3s ease;
}

.tab-btn:hover {
background: #ccc;
}

.tab-btn.active {
background-color: #0073aa;
color: #fff;
}

.tabs-content {
padding-top: 20px;
}

.tabs-content.hidden {
display: none;
}

/* --- Scroll Buttons --- */
.scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
transition: all 0.3s ease;
}

.scroll-btn.left {
left: 5px;
}

.scroll-btn.right {
right: 5px;
}

.scroll-btn:hover {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}


/* ==========================================================================
   HOMEPAGE POST LIST ITEMS
   ========================================================================== */

.changeCard ul {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 17px;
margin-top: 20px;
}

li.changeItem.grid {
width: 32%;
margin-bottom: 5px;
}

li.changeItem.grid a {
height: 100%;
flex-direction: column;
display: flex;
text-decoration: none;
transition: transform 0.3s ease;
}

li.changeItem.grid a:hover {
transform: translateY(-5px);
}

.changeItemTxt .itemTitle {
font-size: 1.1rem;
line-height: 1.8em;
font-weight: 400;
}

p.itemCat {
position: absolute;
left: 22px;
top: 22px;
background: #6bb6ff;
color: #FFF;
border-radius: 9999px;
font-size: 0.7rem;
padding: 4px 12px;
}

/* --- Postcard (Homepage Version) --- */
.postcard {
margin: 0 0 1em;
}

.postcard a {
display: flex;
flex-wrap: wrap;
align-content: center;
padding: 0;
border: 1px solid #eee;
background: #fff;
text-decoration: none;
transition: all 0.3s ease;
}

.postcard a:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.postcard_thumbnail {
width: 38%;
height: auto;
display: flex;
}

.postcard_thumbnail img {
width: 100%;
object-fit: cover;
}

.postcard_content {
display: flex;
flex-direction: column;
justify-content: start;
width: 56%;
}

.postcard_title h3 {
display: -webkit-box;
opacity: 0.9;
padding-top: 0;
padding-bottom: 7px;
overflow: hidden;
color: #1f1d1d;
font-weight: 900;
font-size: 1.3rem;
line-height: 1.5;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}

.postcard_description p {
color: #565656;
font-size: 90%;
}

.postcard_meta {
color: #333;
font-size: 12px;
text-align: right;
}

/* ==========================================================================
   RESPONSIVE DESIGN - HOMEPAGE
   ========================================================================== */

/* --- Tablet Landscape (820px and below) --- */
@media (max-width: 820px) {
.popular-content-section.design-image-layout-wrapper {
display: none;
}

.top-block-container {
flex-direction: column;
}

.slider-section {
flex-basis: auto;
width: 100%;
}
}

/* --- Tablet Portrait (767px and below) --- */
@media screen and (max-width: 767px) {
/* Article List Items */
li.changeItem.grid {
width: 100%;
margin: 0;
padding: 0;
}

/* Postcard */
.postcard {
/*padding: 15px 0;*/
margin: 0;
border-bottom: 1px solid #eee;
}

.postcard a {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: center;
padding: 0;
border-radius: 2px;
background: #fff;
text-decoration: none;
cursor: pointer;
border: none;
}

.postcard_content {
flex-direction: unset !important;
width: 56% !important;
}

.postcard_title h3 {
padding-left: 0;
padding-right: 0;
height: auto;
text-decoration: none;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 1rem;
line-height: 1.8em;
font-weight: 400;
}

.postcard_description p,
.postcard_meta {
display: none;
}

/* Latest Section */
.latest-section {
display: none;
}

.latest-img {
margin-bottom: 0;
}

.latest-info {
width: 100%;
}

/* Popular Buttons */
.popular-buttons {
flex-wrap: wrap;
gap: 10px;
}

.popular-buttons a {
flex: 1 1 calc(50% - 10px);
text-align: center;
}

/* Block Layout */
.slider-section,
.popular-section {
flex: 1 1 100%;
}

.popular-section {
display: none;
}

.tabs-section {
flex: unset;
}

/* Category Items */
.category-items {
grid-template-columns: 1fr;
gap: 0;
}

.category-item {
display: flex;
gap: 15px;
align-items: center;
text-align: left;
background-color: #fff;
padding: 10px;
border-radius: 8px;
}

.category-img {
float: left;
padding-right: 10px;
width: 160px;
height: 120px;
object-fit: cover;
margin: 0;
}

.category-title {
padding-left: 0;
padding-right: 0;
height: auto;
text-decoration: none;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 1rem;
line-height: 1.8em;
font-weight: 400;
}

.popular-item {
padding: 0;
padding-top: 15px;
}
}

/* --- Mobile Small (479px and below) --- */
@media (max-width: 479px) {
li.changeItem.grid {
width: 100%;
}

.slideshow-a {
margin: 10px 0 15px;
width: 100%;
}
}

/* --- Mobile Medium (480px - 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
li.changeItem.grid {
width: 48%;
}
}

/* ==========================================================================
   FIXES & ADDITIONS FOR RANKING WIDGET
   ========================================================================== */

/* Badge Mappings (Matching PHP classes) */
.ranking-badge {
display: inline-block;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
border-radius: 3px;
margin-right: 5px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #fff;
background: #999; /* Fallback */
}

.ranking-badge.feature-badge {
background: linear-gradient(135deg, #1e40af, #581c87);
}

.ranking-badge.live-badge {
background: linear-gradient(135deg, #e53935, #ff5252);
animation: live-pulse 2s infinite;
}

.ranking-badge.pr-badge {
background: #546e7a; /* Grey for list PR */
}

.ranking-badge.custom-badge {
background: #455a64;
}

/* Item Title (Correcting class name match) */
.ranking-post-title {
flex: 1;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: #333;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Section Header (H2) */
.ranking-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 15px;
border-bottom: 2px solid #333;
margin-bottom: 0;
background: #fff;
}

.ranking-title {
font-size: 16px;
font-weight: 700;
color: #333;
margin: 0;
line-height: 1.2;
}

/* Ranking Content Layout (Fixing User Issue) */
.ranking-content {
flex: 1;
min-width: 0; /* Prevents flex item from overflowing */
display: flex; /* Ensure title and badge align if needed, or simply contain them */
flex-direction: column; /* Stack Title and Badge vertically usually looks best, or row if preferred */
justify-content: center;
}

/* If user wants Badge inline with title: */
/* But given the HTML structure (Block Title), column is safer to prevent breaking. */
/* If styling for "row" was intended: */
/* 
.ranking-content {
flex-direction: row; 
align-items: center; 
justify-content: space-between;
} 
*/
/* Let's stick to column for robustness, or handle the badge specifically */

/* Hide All Numbers Option */
.popular-content-ranking.hide-all-numbers .ranking-number {
display: none !important;
}

/* Ad Section Styling (Inherits ranking-pr-section but ensures spacing) */
.ranking-ad-section {
background: #fafafa;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0px;
}

.ranking-ad-section .pr-badge {
    margin-bottom: 0px;
    margin-left: 10px;
}

.ranking-ad-section .wp-ad-position-wrapper,
.ranking-ad-section .wp-ad-position-fallback {
width: 100%;
margin: 10px auto;
}

/* =========================================
   Strong Overrides for Large Image Layout
   ========================================= */
.ranking-list .ranking-item.ranking-item-large {
padding: 16px 0;
}

.ranking-list .ranking-item.ranking-item-large .ranking-link {
display: flex;
flex-direction: column !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}

.ranking-list .ranking-item.ranking-item-large .ranking-large-image {
order: 1 !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
border-radius: 8px;
overflow: hidden;
}

.ranking-list .ranking-item.ranking-item-large .ranking-large-image img {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.ranking-list .ranking-item.ranking-item-large:hover .ranking-large-image img {
transform: scale(1.02);
}

.ranking-list .ranking-item.ranking-item-large .ranking-content {
order: 2 !important;
width: 100% !important;
flex: none !important;
margin: 0 !important;
}

/* Adjust ranking number position for large image if needed */
.ranking-list .ranking-item.ranking-item-large .ranking-number {
top: 8px;
left: 8px;
}

/* ===============================================
   ULTIMATE OVERRIDE: Top-Image Layout Title Fix
   Forces title visibility for top-image layouts
   Added: 2026-01-02
   =============================================== */
.ranking-item.layout-top-image .ranking-content,
.ranking-list.layout-top-image .ranking-item .ranking-content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
background: transparent !important;
padding: 12px 0 !important;
order: 2 !important;
width: 100% !important;
}

.ranking-item.layout-top-image .ranking-post-title,
.ranking-list.layout-top-image .ranking-item .ranking-post-title {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #333 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}

/* Thumbnail positioning for top-image layout */
.ranking-item.layout-top-image .ranking-thumbnail,
.ranking-list.layout-top-image .ranking-item .ranking-thumbnail {
order: 1 !important;
width: 100% !important;
margin-bottom: 8px !important;
}

/* Content positioned after thumbnail */
.ranking-item.layout-top-image .ranking-link,
.ranking-list.layout-top-image .ranking-item .ranking-link {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}

/* ==========================================================================
   HOMEPAGE FEATURE BLOCKS (Enhanced v2)
   分類卡片、專題區塊、標籤雲、輪播
   ========================================================================== */

/* --- Global Wrapper --- */
.homepage-features-wrapper {
padding: 40px 0;
margin: 0 -15px;
}

.homepage-features-fullwidth,
.homepage-feature-block.is-fullwidth {
width: 100vw;
max-width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}

.homepage-features-contained {
max-width: 1280px;
margin: 0 auto;
}

.homepage-features-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 15px;
}

.homepage-features-ad {
margin: 25px 0;
text-align: center;
}

/* --- Feature Block Base --- */
.homepage-feature-block {
/* Use CSS custom properties for dynamic spacing from admin settings */
/* Fallback to default values if properties are not set */
margin-top: var(--block-margin-top, 30px);
margin-bottom: var(--block-margin-bottom, 30px);
margin-left: var(--block-margin-left, 0);
margin-right: var(--block-margin-right, 0);
padding-top: var(--block-padding-top, 25px);
padding-bottom: var(--block-padding-bottom, 25px);
padding-left: var(--block-padding-left, 25px);
padding-right: var(--block-padding-right, 25px);
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
/* Shadows disabled by default - enable with .homepage-feature-block--with-shadow */
box-shadow: none;
backdrop-filter: blur(10px);
}

/* Enable shadows for specific feature blocks - full block shadow */
.homepage-feature-block--with-shadow,
.homepage-feature-block.hp-section--with-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.homepage-feature-block:last-child {
margin-bottom: 0;
}

/* When a legacy feature block is rendered inside the newer hp-section wrapper,
   let the wrapper own the outer spacing to avoid double top/bottom margins. */
.hp-section .homepage-feature-block {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

.feature-block-container {
max-width: 1200px;
margin: 0 auto;
}

.feature-block-title {
font-size: 1.5rem;
font-weight: 800;
margin: 0 0 25px;
padding-bottom: 15px;
border-bottom: 3px solid linear-gradient(90deg, #1e40af, #581c87);
color: #1a1a2e;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}

.feature-block-title::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 80px;
height: 3px;
background: linear-gradient(90deg, #1e40af, #581c87);
border-radius: 2px;
}

/* --- Category Cards Block (v3 - Articles per Category) --- */
.category-cards-grid {
display: grid;
gap: 20px;
}

.category-cards-block.layout-3x2 .category-cards-grid {
grid-template-columns: repeat(3, 1fr);
}

.category-cards-block.layout-2x3 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
}

.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: repeat(6, 1fr);
}

/* Category Card Wrapper */
.category-card-wrapper {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.category-card-wrapper:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Category Card Header */
.category-card-header {
padding: 16px 18px;
background: linear-gradient(135deg, #1e40af 0%, #581c87 100%);
color: #fff;
}

.category-card-title-link {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: #fff;
}

.category-card-name {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}

.category-card-count {
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.2);
padding: 3px 10px;
border-radius: 12px;
font-weight: 500;
}

/* Category Posts List */
.category-card-posts {
padding: 12px;
}

.category-post-item {
margin-bottom: 12px;
}

.category-post-item:last-child {
margin-bottom: 0;
}

.category-post-item a {
display: flex;
gap: 12px;
text-decoration: none;
color: inherit;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
}

.category-post-item a:hover {
background: #f8f9fa;
text-decoration: none;
}

.category-post-thumb {
flex: 0 0 80px;
position: relative;
border-radius: 6px;
overflow: hidden;
}

.category-post-thumb img {
width: 80px;
height: 60px;
object-fit: cover;
display: block;
}

.category-post-content {
flex: 1;
min-width: 0;
}

.category-post-title {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 6px;
line-height: 1.4;
color: #1a1a2e;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.category-post-item a:hover .category-post-title {
color: #1e40af;
text-decoration: none;
}

.category-post-date {
font-size: 0.75rem;
color: #888;
}

/* View More Link */
.category-card-more {
display: block;
text-align: center;
padding: 12px;
color: #1e40af;
font-weight: 600;
text-decoration: none;
border-top: 1px solid #f0f0f0;
transition: all 0.2s;
}

.category-card-more:hover {
background: linear-gradient(135deg, #1e40af 0%, #581c87 100%);
color: #fff;
text-decoration: none;
}

/* ==========================================================================
   CATEGORY POST ITEM LAYOUT VARIATIONS
   ========================================================================== */

/* Layout: Top Image (default) - vertical stack */
.category-card-posts.layout-top-image .category-post-item a {
flex-direction: column;
align-items: stretch;
}

.category-card-posts.layout-top-image .category-post-thumb {
flex: 0 0 auto;
width: 100%;
height: 140px !important;
max-height: 140px !important;
min-height: 140px !important;
margin-bottom: 10px;
overflow: hidden !important;
}

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

/* Layout: Bottom Image - text on top, image below */
.category-card-posts.layout-bottom-image .category-post-item a {
flex-direction: column;
align-items: stretch;
}

.category-card-posts.layout-bottom-image .category-post-thumb {
flex: 0 0 auto;
width: 100%;
margin-top: 10px;
order: 1;
}

.category-card-posts.layout-bottom-image .category-post-content {
order: 0;
}

.category-card-posts.layout-bottom-image .category-post-thumb img {
width: 100%;
height: 140px;
object-fit: cover;
}

/* Layout: Left Image (default flex) - image on left, text on right */
.category-card-posts.layout-left-image .category-post-item a {
flex-direction: row;
align-items: flex-start;
}

.category-card-posts.layout-left-image .category-post-thumb {
flex: 0 0 100px;
}

.category-card-posts.layout-left-image .category-post-thumb img {
width: 100px;
height: 75px;
object-fit: cover;
}

/* Layout: Right Image - text on left, image on right */
.category-card-posts.layout-right-image .category-post-item a {
flex-direction: row;
align-items: flex-start;
}

.category-card-posts.layout-right-image .category-post-thumb {
flex: 0 0 100px;
order: 1;
}

.category-card-posts.layout-right-image .category-post-content {
order: 0;
}

.category-card-posts.layout-right-image .category-post-thumb img {
width: 100px;
height: 75px;
object-fit: cover;
}

/* Carousel Placeholder */
.carousel-placeholder {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
border-radius: 12px;
border: 2px dashed #ddd;
}

.carousel-placeholder p {
margin: 0 0 10px;
color: #666;
}

.carousel-placeholder .description {
font-size: 0.85rem;
color: #999;
}

.carousel-slider-container {
border-radius: 12px;
overflow: hidden;
}

/* Card Style */
.category-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}

.category-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.category-card-image {
position: relative;
width: 100%;
aspect-ratio: 1.6;
overflow: hidden;
}

.category-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.category-card:hover .category-card-image img {
transform: scale(1.08);
}

.category-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s;
}

.category-card:hover .category-card-overlay {
opacity: 1;
}

.category-card-content {
padding: 16px 18px;
background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.category-card-name {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 6px;
color: #1a1a2e;
transition: color 0.2s;
}

.category-card:hover .category-card-name {
color: #1e40af;
}

.category-card-count {
font-size: 0.85rem;
color: #888;
font-weight: 500;
background: #f0f2f5;
padding: 3px 10px;
border-radius: 12px;
display: inline-block;
}

/* Minimal Style */
.category-cards-block.style-minimal .category-card {
background: transparent;
box-shadow: none;
border: 2px solid #e8e8e8;
}

.category-cards-block.style-minimal .category-card:hover {
border-color: #1e40af;
background: #fff;
}

/* Gradient Style */
.category-cards-block.style-gradient .category-card-content {
background: linear-gradient(135deg, #1e40af 0%, #581c87 100%);
}

/* Single Category Grid Mode: Post Card Items */
.post-card-item .post-card-link {
text-decoration: none;
color: inherit; 
display: flex; 
flex-direction: column; 
height: 100%;
}

.post-card-item .post-card-title {
font-size: 1.1rem;
margin-bottom: 8px;
}

.post-card-item .post-card-excerpt {
font-size: 0.9rem;
color: #666;
margin-bottom: 10px;
line-height: 1.5;
}

.post-card-item .post-card-date {
background: transparent;
padding-left: 0;
color: #999;
font-size: 0.85rem;
margin-top: auto; /* Push to bottom if flex */
}

.category-cards-block.style-gradient .category-card-name {
color: #fff;
}

.category-cards-block.style-gradient .category-card-count {
background: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
}

/* --- Collection Slider Block --- */
.collection-slider-wrapper {
position: relative;
padding: 0px;
overflow: hidden; /* Prevent overlapping other content */
}

.collection-slider-block {
position: relative;
z-index: 1; /* Normal stacking context */
overflow: hidden; /* Contain all children */
}

.collection-slider {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 10px 5px;
scrollbar-width: none;
-ms-overflow-style: none;
}

.collection-slider::-webkit-scrollbar {
display: none;
}

.collection-item {
flex: 0 0 300px;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collection-item:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.collection-item a {
display: block;
text-decoration: none;
color: inherit;
}

.collection-item-image {
position: relative;
padding-top: 56%;
overflow: hidden;
}

.collection-item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

/* Image fit variants based on admin settings */
.collection-item-image.img-cover img {
object-fit: cover;
}

.collection-item-image.img-contain img {
object-fit: contain;
background: #f5f5f5;
}

.collection-item:hover .collection-item-image img {
transform: scale(1.05);
}

.collection-item-cat {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.collection-item-content {
padding: 16px 18px;
}

.collection-item-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 10px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1a1a2e;
transition: color 0.2s;
}

.collection-item:hover .collection-item-title {
color: #1e40af;
}

.collection-item-date {
font-size: 0.8rem;
color: #999;
font-weight: 500;
}

/* Slider navigation */
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
font-size: 1.4rem;
color: #1a1a2e;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
}

.slider-nav:hover {
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev { left: 0; }
.slider-nav.next { right: 0; }

/* Grid style */
.collection-slider-block.style-grid .collection-slider {
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow: visible;
}

.collection-slider-block.style-grid .slider-nav {
display: none;
}

/* --- Tag Cloud Block --- */
.tagcloud-wrapper {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
padding: 10px 0;
}

.tagcloud-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: #fff;
border-radius: 25px;
text-decoration: none;
color: #444;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
transition: all 0.25s ease;
border: 2px solid transparent;
}

.tagcloud-tag:hover {
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.tagcloud-tag .tag-name {
font-weight: 600;
}

.tagcloud-tag .tag-count {
font-size: 0.75rem;
background: rgba(0, 0, 0, 0.06);
color: #666;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
transition: all 0.2s;
}

.tagcloud-tag:hover .tag-count {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}

/* Tag sizes */
.tagcloud-tag.size-1 { font-size: 0.85rem; padding: 8px 14px; }
.tagcloud-tag.size-2 { font-size: 0.9rem; }
.tagcloud-tag.size-3 { font-size: 1rem; }
.tagcloud-tag.size-4 { font-size: 1.1rem; font-weight: 600; }
.tagcloud-tag.size-5 { font-size: 1.2rem; font-weight: 700; padding: 12px 22px; }

/* Pills style */
.tagcloud-block.style-pills .tagcloud-tag {
background: linear-gradient(135deg, #f0f2f5, #e8e8e8);
border-radius: 8px;
padding: 8px 16px;
}

/* --- Image Carousel Block --- */
.carousel-wrapper {
position: relative;
padding: 0 55px;
}

.carousel-track-container {
overflow: hidden;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.carousel-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
flex: 0 0 100%;
position: relative;
opacity: 0.5;
transition: opacity 0.4s;
}

.carousel-slide.active {
opacity: 1;
}

.carousel-slide a {
display: block;
text-decoration: none;
color: inherit;
}

.carousel-slide img {
width: 100%;
height: 450px;
object-fit: cover;
display: block;
}

.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 60px 30px 30px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
color: #fff;
}

.carousel-cat {
display: inline-block;
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.carousel-caption h3 {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
line-height: 1.4;
}

.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
font-size: 1.6rem;
color: #1a1a2e;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
}

.carousel-nav:hover {
background: linear-gradient(135deg, #1e40af, #581c87);
color: #fff;
transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }

.carousel-indicators {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}

.carousel-indicators .indicator {
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.25s ease;
padding: 0;
}

.carousel-indicators .indicator.active,
.carousel-indicators .indicator:hover {
background: linear-gradient(135deg, #1e40af, #581c87);
transform: scale(1.3);
}

/* Cards style */
.image-carousel-block.style-cards .carousel-track-container {
overflow: visible;
}

.image-carousel-block.style-cards .carousel-track {
gap: 20px;
}

.image-carousel-block.style-cards .carousel-slide {
flex: 0 0 calc(33.333% - 14px);
border-radius: 12px;
overflow: hidden;
opacity: 1;
}

.image-carousel-block.style-cards .carousel-slide img {
height: 280px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
.homepage-features-wrapper {
padding: 30px 0;
}

.homepage-feature-block {
padding: 25px 20px;
margin-bottom: 25px;
}

.category-cards-block.layout-3x2 .category-cards-grid,
.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
}

.collection-item {
flex: 0 0 260px;
}

.collection-slider-block.style-grid .collection-slider {
grid-template-columns: repeat(2, 1fr);
}

.carousel-slide img {
height: 350px;
}

.image-carousel-block.style-cards .carousel-slide {
flex: 0 0 calc(50% - 10px);
}
}

@media (max-width: 576px) {
.homepage-features-wrapper {
padding: 20px 0;
}

.homepage-feature-block {
padding: 20px 15px;
margin-bottom: 20px;
border-radius: 12px;
}

.feature-block-title {
font-size: 1.25rem;
margin-bottom: 18px;
padding-bottom: 12px;
}

.category-cards-block.layout-3x2 .category-cards-grid,
.category-cards-block.layout-2x3 .category-cards-grid,
.category-cards-block.layout-6x1 .category-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.category-card-content {
padding: 12px 14px;
}

.collection-slider-wrapper {
padding: 0;
}

.collection-item {
flex: 0 0 220px;
}

.collection-slider-block.style-grid .collection-slider {
grid-template-columns: 1fr;
}

.carousel-wrapper {
padding: 0 45px;
}

.carousel-slide img {
height: 220px;
}

.carousel-caption {
padding: 40px 20px 20px;
}

.carousel-caption h3 {
font-size: 1.1rem;
}

.carousel-nav {
width: 38px;
height: 38px;
font-size: 1.3rem;
}

.image-carousel-block.style-cards .carousel-slide {
flex: 0 0 100%;
}

.image-carousel-block.style-cards .carousel-slide img {
height: 200px;
}

.tagcloud-wrapper {
gap: 8px;
}

.tagcloud-tag {
padding: 8px 14px;
font-size: 0.9rem;
}
}

/* ============================================================================
   Homepage Layout Manager Styles
   ============================================================================ */

/* Section Wrapper */
.hp-section {
position: relative;
width: 100%;
/* box-sizing: border-box; */
}

.hp-section-inner {
position: relative;
}

.hp-section--breadcrumb .hp-section-inner,
.hp-section--breadcrumb nav#breadcrumb,
.hp-section--breadcrumb .breadcrumb {
    margin-top: 0;
    margin-bottom: 0;
}

/* Section Title */
.hp-section-title {
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 1.5rem 0;
color: #333;
}

/* Layout Variations */

/* Contained mode - content centered at max 1280px */
/* Layout Variations */

/* Contained mode - content centered at max 1280px */
.hp-layout--contained .hp-section-inner {
max-width: 1280px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}

/* 
   Fullwidth/Hero mode - Background spans full width (via .hp-section--fullwidth),
   but CONTENT is constrained to 1280px and centered.
   We use !important here to ensure this overrides any specific layout styles 
   or the default breakout behavior for the inner container.
*/
.hp-layout--fullwidth .hp-section-inner,
.hp-layout--hero .hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}

/* Special layout - background full width, content centered */
.hp-layout--special .hp-section-inner {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}

.hp-layout--special .hp-section-inner > * {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}

/* Padding Options */
.hp-padding--none:not(.hp-section) {
padding-top: 0;
padding-bottom: 0;
}

.hp-padding--small:not(.hp-section) {
padding-top: 20px;
padding-bottom: 20px;
}

.hp-padding--normal:not(.hp-section) {
padding-top: 40px;
padding-bottom: 40px;
}

.hp-padding--large:not(.hp-section) {
padding-top: 60px;
padding-bottom: 60px;
}

/* .hp-section--fullwidth moved to V8 block to ensure precedence */

/* Hero Layout Specific */
.hp-section--hero {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
.hp-section--title {
font-size: 1.5rem;
}

.hp-padding--small:not(.hp-section) {
padding-top: 15px;
padding-bottom: 15px;
}

.hp-padding--normal:not(.hp-section) {
padding-top: 30px;
padding-bottom: 30px;
}

.hp-padding--large:not(.hp-section) {
padding-top: 45px;
padding-bottom: 45px;
}

.hp-layout--contained .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
padding-left: 15px;
padding-right: 15px;
}
}
/* Category Card - Ad Card Styling */
.category-card-wrapper.ad-card {
background: linear-gradient(135deg, #fff9e6 0%, #ffedd5 100%);
border: 2px dashed #f59e0b;
}

.category-card-wrapper.ad-card .category-card-header.ad-header {
background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
display: flex;
justify-content: space-between;
align-items: center;
}

.category-card-wrapper.ad-card .category-card-badge {
background: rgba(255, 255, 255, 0.9);
color: #d97706;
padding: 2px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}

.category-card-wrapper.ad-card .category-card-ad-content {
padding: 20px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}

.category-card-wrapper.ad-card .category-card-ad-content > * {
max-width: 100%;
}

/* ==========================================================================
   HOMEPAGE LAYOUT MANAGER V8
   ========================================================================== */

/* Spacing and fullwidth are now handled by global homepage-layouts.css to ensure consistency. */

/* ==========================================================================
   GLOBAL SPACING & CARD STYLE
   ========================================================================== */

/* Card Style (Glassmorphism & Shadow) */
.hp-section--card-style {
/* Reset margins on inner to avoid double spacing if applied to section */
/* apply background and shadow to section wrapper */
}

.hp-section--card-style .hp-section-inner {
background: rgba(255, 255, 255, 0.85);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft shadow */
backdrop-filter: blur(12px);
/* Ensure padding is sufficient */
padding: var(--block-padding-top, 30px) var(--block-padding-bottom, 30px); /* Use vertical padding variables for horizontal too or fixed? User said "Padding Top/Bottom". Side padding usually fixed 20-30px */
padding-left: 30px;
padding-right: 30px;
}

/* Dark mode support for card style if needed */
/* Dark mode support removed per user request */

/* Card Style (Glassmorphism & Shadow) - User Requested */
/* Card Style Rules (Replaces previous placeholder) */
.hp-section--card-style {
/* Variables handle spacing */
}

/* Reset for Start/End sections if needed */
.hp-section:first-of-type {
margin-top: 0;
}

/* Fix Title Layout (Left Name, Right More Link) */
.tab {
display: flex !important; /* Force flex layout */
justify-content: space-between !important; /* Push items apart */
align-items: center !important; /* Vertically align */
width: 100%;
}
.tab h3 {
margin: 0; /* Remove default margins */
display: flex;
align-items: center;
}

/* Layout Variations */
.hp-layout--fullwidth .hp-section-inner {
/* Consolidated above: max-width 1280px for content centering */
}

/* Contained layout */
.hp-layout--contained .hp-section-inner {
/* Uses base styles */
}

/* Hero Section Special handling */
.hp-section--hero .hp-section-inner,
.hp-layout--hero .hp-section-inner {
/* Consolidated above: max-width 1280px for content centering */
}

/* Padding Utilities */
.hp-padding--none:not(.hp-section) { padding-top: 0; padding-bottom: 0; }
.hp-padding--small:not(.hp-section) { padding-top: 20px; padding-bottom: 20px; }
.hp-padding--normal:not(.hp-section) { padding-top: 40px; padding-bottom: 40px; }
.hp-padding--large:not(.hp-section) { padding-top: 80px; padding-bottom: 80px; }

/* Responsive adjustments */
@media screen and (max-width: 767px) {
.hp-padding--normal:not(.hp-section) { padding-top: 30px; padding-bottom: 30px; }
.hp-padding--large:not(.hp-section) { padding-top: 40px; padding-bottom: 40px; }
}

/* ==========================================================================
   POPULAR/RANKING SECTION - MOBILE RWD
   ========================================================================== */

/* Mobile: Full width for ranking section */
@media (max-width: 991px) {
.popular-content-section.layout-ranking {
max-width: 100%;
min-width: 100%;
width: 100%;
}

/* Top block should stack on tablet */
.top-block-container {
flex-direction: column;
}

.slider-section {
max-width: 100%;
}
}

@media (max-width: 767px) {
.popular-content-section.layout-ranking {
padding: 0;
border-radius: 0;
margin: 0 auto;
width: calc(100% + 20px);
}

/* PR Section mobile styles */
.ranking-pr-section {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 12px;
}

.ranking-pr-image {
max-height: 150px;
border-radius: 6px;
}

.ranking-pr-title {
font-size: 13px;
}

/* Ranking list items mobile */
.ranking-list .ranking-item {
padding: 10px 0;
}

.ranking-thumbnail {
width: 80px;
height: 80px;
}

.ranking-post-title {
font-size: 1rem;
line-height: 1.4;
}

/* Section title mobile */
.ranking-header {
font-size: 16px;
padding: 10px 12px;
}
}

/* PR Section Layout Options */
.ranking-pr-section.pr-layout-horizontal {
flex-direction: row;
align-items: center;
}

.ranking-pr-section.pr-layout-vertical {
flex-direction: column;
align-items: flex-start;
}

.ranking-pr-section.pr-layout-vertical .ranking-pr-image {
width: 100%;
max-height: 200px;
margin-bottom: 10px;
}

/* Hide PR image option */
.ranking-pr-section.hide-pr-image .ranking-pr-image {
display: none;
}

/* ==========================================================================
   TITLE STYLE OPTIONS - Latest Articles Block
   ========================================================================== */

/* Base tab-group styles - MINIMAL to allow variants to override */
.tab-group {
margin-bottom: 15px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}

.tab-group .tab {
padding: 0;
background: transparent;
}

.tab-group .tab h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #333;
display: flex;
align-items: center;
/* Clean base - no padding or background by default */
padding: 0;
background: transparent;
border: none;
}

/* Default Title Style - clean, minimal with bottom border */
.tab-group.title-style-default {
background: transparent !important;
border: none !important;
}

.tab-group.title-style-default .tab {
padding: 0 !important;
background: transparent !important;
}

.tab-group.title-style-default .tab h3 {
background: transparent !important;
padding: 12px 0 !important;
border-bottom: 2px solid #333 !important;
color: #333 !important;
}

/* Underline Title Style - accent underline */
.tab-group.title-style-underline {
position: relative;
background: transparent !important;
border: none !important;
}

.tab-group.title-style-underline .tab {
padding: 0 !important;
background: transparent !important;
}

.tab-group.title-style-underline .tab h3 {
position: relative;
padding: 12px 0 15px 0 !important;
background: transparent !important;
border: none !important;
color: #333 !important;
}

.tab-group.title-style-underline .tab h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #1e40af, #581c87);
border-radius: 2px;
}

/* Boxed Title Style - full background box */
.tab-group.title-style-boxed {
background: #f8f9fa !important;
border-radius: 8px !important;
overflow: hidden;
border: none !important;
}

.tab-group.title-style-boxed .tab {
padding: 0 !important;
background: transparent !important;
}

.tab-group.title-style-boxed .tab h3 {
background: #333 !important;
color: #fff !important;
padding: 14px 20px !important;
border-radius: 0 !important;
border: none !important;
}

.tab-group.title-style-boxed .tab h3 i {
color: #fff !important;
}

/* Gradient Title Style - modern gradient background */
.tab-group.title-style-gradient {
background: linear-gradient(135deg, #1e40af 0%, #581c87 100%) !important;
border-radius: 8px !important;
overflow: hidden;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
border: none !important;
}

.tab-group.title-style-gradient .tab {
padding: 0 !important;
background: transparent !important;
}

.tab-group.title-style-gradient .tab h3 {
color: #fff !important;
padding: 16px 20px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background: transparent !important;
border: none !important;
}

.tab-group.title-style-gradient .tab h3 i {
color: #fff !important;
}

/* RWD adjustments for title styles */
@media (max-width: 767px) {
.tab-group .tab h3 {
font-size: 1.1rem;
}

.tab-group.title-style-default .tab h3 {
padding: 10px 0 !important;
}

.tab-group.title-style-underline .tab h3 {
padding: 10px 0 12px 0 !important;
}

.tab-group.title-style-underline .tab h3::after {
width: 50px;
height: 3px;
}

.tab-group.title-style-boxed .tab h3 {
padding: 12px 16px !important;
}

.tab-group.title-style-gradient .tab h3 {
padding: 12px 16px !important;
}
}

/* ==========================================================================
   MOBILE RWD - Category Cards & Collection Slider
   這些是基礎樣式，實際布局由動態 CSS 控制（在 PHP 中根據用戶設定生成）
   ========================================================================== */

@media (max-width: 767px) {
/* 基礎 Flex 設定 - 讓動態 CSS 可以正確覆蓋 */
.category-cards-block .category-card-posts .category-post-item a,
.category-cards-block .category-card-wrapper .category-card-link,
.category-cards-block .post-card-item .post-card-link {
display: flex;
/* flex-direction 由動態 CSS 根據用戶設定決定 */
}

/* 圖片基礎尺寸 - 當使用左圖右文或右圖左文時套用 */
.category-cards-block .category-card-posts .category-post-thumb,
.category-cards-block .post-card-item .category-card-image {
max-width: 100%;
}

/* 內容區自動填滿 */
.category-cards-block .category-card-posts .category-post-content,
.category-cards-block .post-card-item .category-card-content {
flex: 1;
min-width: 0;
}
}

/* Collection Slider - 專題區塊修正 */
.collection-slider-block {
position: relative;
z-index: 1;
margin-bottom: 30px;
clear: both;
}

.collection-slider-wrapper {
position: relative;
overflow: hidden;
}

/* 專題區塊導航箭頭 - 確保顯示 */
.collection-slider-wrapper .slider-nav {
display: flex !important;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 40px;
height: 40px;
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
align-items: center;
justify-content: center;
}

.collection-slider-wrapper .slider-nav.prev {
left: 5px;
}

.collection-slider-wrapper .slider-nav.next {
right: 5px;
}

@media (max-width: 767px) {
.collection-slider-wrapper .slider-nav {
width: 32px;
height: 32px;
font-size: 16px;
}
}

/* Latest Articles - Title Styles */
.tab-group.title-style-none {
border-bottom: none;
background: transparent;
padding-bottom: 0;
margin-bottom: 20px;
}

.tab-group.title-style-none .tab h3 {
border: none;
padding: 0;
margin: 0;
background: transparent;
}


/* === homepage-latest.css === */
/* Split Column Layout (Left Image, Right Content) */
.hd-layout-split_column {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.hd-layout-split_column .hd-split-item {
display: flex;
flex-direction: row;
background: #fff;
border: 1px solid rgba(0,0,0,0.05); /* Softer border */
border-radius: 12px; /* More rounded */
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}

.hd-layout-split_column .hd-split-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Enhanced hover */
}

.hd-layout-split_column .hd-split-item > a {
display: flex;
flex-direction: row;
width: 100%;
text-decoration: none;
color: inherit;
}

.hd-layout-split_column .postcard_thumbnail {
width: 38%; /* Slightly smaller image */
min-width: 140px;
position: relative;
overflow: hidden;
margin: 0;
border-radius: 0;
flex-shrink: 0;
}

.hd-layout-split_column .postcard_thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease;
}

/* Keep hover state without image zoom */
.hd-layout-split_column .hd-split-item:hover .postcard_thumbnail img {
transform: none;
}

.hd-layout-split_column .postcard_content {
width: 62%;
padding: 20px; /* More padding */
display: flex;
flex-direction: column;
justify-content: center;
}

.hd-layout-split_column .postcard_title h3 {
font-size: 1.15rem;
line-height: 1.5;
margin-bottom: 10px;
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-layout-split_column .postcard_meta {
margin-top: auto;
font-size: 0.85rem;
color: #888;
display: flex;
align-items: center;
gap: 8px;
}

/* RWD for mobile */
@media (max-width: 768px) {
.hd-layout-split_column {
grid-template-columns: 1fr; /* Single column on mobile */
gap: 15px;
}

/* Keep Left-Right layout even on mobile if space allows, or stack? 
   Usually stack on very small screens, but maybe side-by-side on large phones.
   Let's stick to stacked for simplest reliable mobile view, OR side-by-side if requested.
   User didn't specify, but uploaded desktop image.
*/
.hd-layout-split_column .hd-split-item > a {
 /* Keep flex-direction row (Left-Right) on mobile too? 
Often "Left Image Right Text" on mobile is too cramped.
Let's keep it row but adjust width.
 */
}

.hd-layout-split_column .postcard_thumbnail {
width: 100px; /* Fixed width on mobile */
min-width: 100px; 
}

.hd-layout-split_column .postcard_content {
width: calc(100% - 100px);
padding: 12px;
}

.hd-layout-split_column .postcard_title h3 {
font-size: 1rem;
}
}


/* === homepage-layouts.css === */
/* Homepage Layouts CSS */

/* =============================================================================
   General Postcard Content Alignment (Applies to All Layouts)
   ============================================================================= */
.postcard.ex {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.postcard.ex > a {
width: 100%;
display: flex;
box-sizing: border-box;
/*padding: 10px;*/
}

.postcard_content {
text-align: left !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.postcard_title,
.postcard_excerpt,
.postcard_meta {
text-align: left !important;
width: 100%;
box-sizing: border-box;
}

.hp-section.hp-section--disable-hover-underline a:hover,
.hp-section.hp-section--disable-hover-underline a:hover *,
.hp-section.hp-section--disable-hover-underline a:focus,
.hp-section.hp-section--disable-hover-underline a:focus *,
.popular-content-section.popular-content-section--disable-hover-underline a:hover,
.popular-content-section.popular-content-section--disable-hover-underline a:hover *,
.popular-content-section.popular-content-section--disable-hover-underline a:focus,
.popular-content-section.popular-content-section--disable-hover-underline a:focus * {
text-decoration: none !important;
}

/* Dynamic Alignment Overrides */
.text-align-left,
.text-align-left .postcard_title,
.text-align-left .post-card-title,
.text-align-left .postcard_excerpt,
.text-align-left .postcard_meta,
.text-align-left .category-card-name,
.text-align-left .category-post-title,
.text-align-left .category-post-excerpt,
.text-align-left .category-post-date,
.text-align-left .category-card-count,
.text-align-left .category-card-content,
.text-align-left .post-card-date,
.text-align-left .hp-section-title {
text-align: left !important;
}

.text-align-center,
.text-align-center .postcard_title,
.text-align-center .post-card-title,
.text-align-center .postcard_excerpt,
.text-align-center .postcard_meta,
.text-align-center .category-card-name,
.text-align-center .category-post-title,
.text-align-center .category-post-excerpt,
.text-align-center .category-post-date,
.text-align-center .category-card-count,
.text-align-center .category-card-content,
.text-align-center .post-card-date,
.text-align-center .hp-section-title {
text-align: center !important;
}

.text-align-right,
.text-align-right .postcard_title,
.text-align-right .post-card-title,
.text-align-right .postcard_excerpt,
.text-align-right .postcard_meta,
.text-align-right .category-card-name,
.text-align-right .category-post-title,
.text-align-right .category-post-excerpt,
.text-align-right .category-post-date,
.text-align-right .category-card-count,
.text-align-right .category-card-content,
.text-align-right .post-card-date,
.text-align-right .hp-section-title {
text-align: right !important;
}

/* Explicit Item Layout Directions */
.postcard--left-image > a {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}

.postcard--right-image > a {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: 20px;
}

.postcard--top-image > a {
display: flex;
flex-direction: column;
}

/* Ensure content takes available space in row layouts */
.postcard--left-image .postcard_content,
.postcard--right-image .postcard_content {
flex: 1;
min-width: 0;
padding: 0 15px;
}

.postcard--top-image .postcard_content {
width: 100%;
padding-top: 15px;
}

/* Ensure thumbnail sizing for row layouts */
.postcard--left-image .postcard_thumbnail,
.postcard--right-image .postcard_thumbnail {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
}

.postcard--top-image .postcard_thumbnail {
width: 100%;
height: 200px;
}

/* Allow custom thumbnail sizing when explicitly set - Must override specific layouts */
.has-custom-thumb-size .postcard_thumbnail,
article.has-custom-thumb-size .postcard_thumbnail,
.has-fixed-small .postcard_thumbnail,
.has-fixed-medium .postcard_thumbnail,
.has-fixed-large .postcard_thumbnail {
flex: initial !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: initial !important;
}

/* Fixed Preset Sizes (Square & Centered) */
.has-fixed-small .postcard_thumbnail {
width: 120px !important;
height: 120px !important;
flex: 0 0 120px !important;
}

.has-fixed-medium .postcard_thumbnail {
width: 150px !important;
height: 150px !important;
flex: 0 0 150px !important;
}

.has-fixed-large .postcard_thumbnail {
width: 200px !important;
height: 200px !important;
flex: 0 0 200px !important;
}

.has-fixed-small .postcard_thumbnail img,
.has-fixed-medium .postcard_thumbnail img,
.has-fixed-large .postcard_thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}

.has-custom-thumb-size .postcard_thumbnail img,
article.has-custom-thumb-size .postcard_thumbnail img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
}

/* Global hp-section variables */
.hp-section {
background-color: var(--hp-bg-color, transparent);
padding-top: var(--hp-padding-top, 0);
padding-bottom: var(--hp-padding-bottom, 0);
padding-left: var(--hp-padding-left, 0);
padding-right: var(--hp-padding-right, 0);
/* Bridge variables: Support both --hp-margin and --block-margin */
margin-top: var(--hp-margin-top, var(--block-margin-top, 30px)) !important;
margin-bottom: var(--hp-margin-bottom, var(--block-margin-bottom, 30px)) !important;
margin-left: var(--hp-margin-left, var(--block-margin-left, 0)) !important;
margin-right: var(--hp-margin-right, var(--block-margin-right, 0)) !important;
min-height: var(--hp-min-height-desktop, auto);
}

/* Global Container Max Width */
.category-cards-block .feature-block-container,
.collection-slider-block .feature-block-container,
.tagcloud-block .feature-block-container,
.image-carousel-block .feature-block-container,
.hp-main-layout-wrapper {
display: flex; /* Ensure flex for main layout */
flex-wrap: wrap;
max-width: var(--rwd-max-width-desktop, 1280px);
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; /* Crucial for percentage widths */
}

.hp-section-header--inner-width {
max-width: var(--rwd-max-width-desktop, 1280px);
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}

.hp-main-layout-wrapper.main-layout-wrapper--reverse {
flex-direction: row-reverse;
}

.hp-main-layout-wrapper > #postshow-a {
max-width: var(--hp-main-layout-main-width, 70%) !important;
flex: 1 1 var(--hp-main-layout-main-width, 70%) !important;
width: var(--hp-main-layout-main-width, 70%) !important;
box-sizing: border-box;
}

.hp-main-layout-wrapper > #postshow-b {
max-width: var(--hp-main-layout-sidebar-width, 30%) !important;
flex: 1 1 var(--hp-main-layout-sidebar-width, 30%) !important;
width: var(--hp-main-layout-sidebar-width, 30%) !important;
box-sizing: border-box;
}

.custom-sidebar-section--has-bg {
padding: 15px;
border-radius: 4px;
background-color: var(--custom-sidebar-bg, transparent);
}

.hp-category-header {
padding: 20px 40px;
margin: 20px auto;
border: 0;
border-radius: 8px;
background-color: var(--hp-category-header-bg, #f5f5f5);
color: var(--hp-category-header-color, #333);
}

.hp-category-header__title {
margin: 0 0 10px;
color: inherit;
font-size: 1.5rem;
}

.hp-category-header__description {
color: inherit;
}

/* Fix unwanted aspect ratio from CLS prevention */
.hp-main-layout-wrapper .postcard_thumbnail {
aspect-ratio: auto !important;
min-height: auto !important;
}

.postcard_thumbnail--relative {
    position: relative;
}

.main-layout-header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-layout-title--inline {
    display: flex;
    align-items: center;
    margin: 0;
}

.main-layout-title-icon {
    margin-right: 10px;
    font-size: 1.3rem;
}

.feature-block-title--left-accent {
    border-color: var(--accent-color);
    text-align: left;
}

/* Layout Row & Columns */
.hd-layout-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
clear: both;
margin-left: -10px;
margin-right: -10px;
}

.hd-layout-col {
flex: 0 0 var(--col-width, 100%);
max-width: var(--col-width, 100%);
box-sizing: border-box;
padding: 0 10px;
}

.hd-layout-col.hd-mode-right {
margin-left: auto;
}

.hd-layout-col--push-right {
margin-left: auto;
}

.search-block:not(.style-minimal) {
    background-color: var(--search-block-bg, #f5f5f5);
}

.load-more-container--centered {
    text-align: center;
    margin-top: 30px;
}

.infinite-scroll-trigger--sentinel {
    height: 20px;
}

/* Ensure contained sections have centered content */
.hp-layout--contained .feature-block-container,
.hp-layout--contained .hp-main-layout-wrapper {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
}

/* Fullwidth sections - content inside hp-section-inner should fill the inner container */
.hp-section--fullwidth .hp-section-inner .feature-block-container,
.hp-layout--fullwidth .hp-section-inner .feature-block-container,
.hp-section--fullwidth .hp-section-inner .hp-main-layout-wrapper,
.hp-layout--fullwidth .hp-section-inner .hp-main-layout-wrapper {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0;
padding-right: 0;
}


/* =============================================================================
   Visual Layout Editor Row Styles
   ============================================================================= */
.hd-layout-row {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}

.hd-layout-col {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

/* Ensure child modules fill the column */
.hd-layout-col .feature-block-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}

@media (max-width: 768px) {
.hd-layout-row {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
display: block !important; /* Stack columns */
}

.hd-layout-col {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 20px;
}
}


/* Mobile Full Width Helper */
@media (max-width: 768px) {
.mobile-full-width {
margin-left: -15px !important;
margin-right: -15px !important;
width: auto !important;
max-width: none !important;
border-radius: 0 !important;
}

.mobile-full-width .feature-block-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
 


/* =============================================================================
   Homepage Section Layout Styles (hp-section)
   ============================================================================= */

/* Base section styles - Only fullwidth when explicitly set */
.hp-section {
width: 100%;
box-sizing: border-box;
position: relative;
--hp-section-shadow-base: 0 0 0 rgba(0, 0, 0, 0);
--hp-section-shadow-edge-top: 0 0 0 rgba(0, 0, 0, 0);
--hp-section-shadow-edge-bottom: 0 0 0 rgba(0, 0, 0, 0);
/* Shadows disabled by default - enable with .hp-section--with-shadow */
box-shadow: var(--hp-section-shadow-base);
}

/* Enable shadows for specific sections - full block shadow */
.hp-section--with-shadow {
--hp-section-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08);
box-shadow: var(--hp-section-shadow-base);
}

/* Base section inner - always centered at 1280px */
.hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
width: 100% !important;
display: block !important;
}

/* Contained layout (default) - 1280px max width, centered */
.hp-layout--contained .hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
display: block !important;
}

/* Custom layout - respects custom percentage width */
.hp-layout--custom .hp-section-inner {
max-width: var(--hp-custom-width, 100%) !important;
width: var(--hp-custom-width, 100%) !important;
}

/* Alignment Modes for Custom Width */
.hp-layout--custom:not(.hp-custom-width--narrow) .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

.hp-layout--custom.hp-custom-width--narrow.hp-mode--left .hp-section-inner {
margin-left: 0 !important;
margin-right: auto !important;
}

.hp-layout--custom.hp-custom-width--narrow.hp-mode--right .hp-section-inner {
margin-left: auto !important;
margin-right: 0 !important;
}

.hp-mode--full .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

/* Fullwidth layout - background full width, content centered at 1280px */
/* Only apply fullwidth when explicitly set */
.hp-section--fullwidth,
.hp-layout--fullwidth {
width: 100vw !important;
max-width: 100vw !important;
position: relative;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
/* Shadows disabled by default */
box-shadow: var(--hp-section-shadow-base);
}

/* Enable shadows for fullwidth sections if needed - top and bottom shadow */
.hp-section--fullwidth.hp-section--with-shadow,
.hp-layout--fullwidth.hp-section--with-shadow {
--hp-section-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08);
box-shadow: var(--hp-section-shadow-base);
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
max-width: 1280px !important; /* Content should still be centered at 1280px */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px;
padding-right: 20px;
width: 100% !important;
display: block !important;
}

/* Override parent container max-width constraints for homepage sections */
/* Break out of .site-main, #main, .fc-content-wrapper max-width: 1200px */
/* Only apply fullwidth breakout for sections that have fullwidth class */
.site-main .hp-section--fullwidth,
#main .hp-section--fullwidth,
.fc-content-wrapper .hp-section--fullwidth,
.site-main .hp-layout--fullwidth,
#main .hp-layout--fullwidth,
.fc-content-wrapper .hp-layout--fullwidth {
width: 100vw !important;
max-width: 100vw !important;
position: relative;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}

/* Prevent horizontal scroll from viewport width technique */
body {
overflow-x: hidden;
}

/* Reset inner container to normal flow and center at 1280px */
.site-main .hp-section-inner,
#main .hp-section-inner,
.fc-content-wrapper .hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
position: relative;
left: auto !important;
right: auto !important;
}

/* Ensure tabs and carousel containers are centered */
.site-main .hp-section-inner .tabs-with-sidebar-container,
#main .hp-section-inner .tabs-with-sidebar-container,
.fc-content-wrapper .hp-section-inner .tabs-with-sidebar-container,
.site-main .hp-section-inner .rwd-slider-main-area,
#main .hp-section-inner .rwd-slider-main-area,
.fc-content-wrapper .hp-section-inner .rwd-slider-main-area,
.site-main .hp-section-inner .rwd-slider-wrapper,
#main .hp-section-inner .rwd-slider-wrapper,
.fc-content-wrapper .hp-section-inner .rwd-slider-wrapper,
.site-main .hp-section-inner .collection-slider-block,
#main .hp-section-inner .collection-slider-block,
.fc-content-wrapper .hp-section-inner .collection-slider-block,
.site-main .hp-section-inner .image-carousel-block,
#main .hp-section-inner .image-carousel-block,
.fc-content-wrapper .hp-section-inner .image-carousel-block {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}


/* Padding variations */
.hp-padding--none .hp-section-inner {
padding-top: 0;
padding-bottom: 0;
}

.hp-padding--small .hp-section-inner {
padding-top: 15px;
padding-bottom: 15px;
}

.hp-padding--normal .hp-section-inner {
padding-top: 25px;
padding-bottom: 25px;
}

.hp-padding--large .hp-section-inner {
padding-top: 40px;
padding-bottom: 40px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
.hp-section-inner {
padding-left: 15px;
padding-right: 15px;
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
padding-left: 15px;
padding-right: 15px;
}
}

@media (max-width: 767px) {
.hp-section-inner {
padding-left: 10px;
padding-right: 10px;
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
padding-left: 10px;
padding-right: 10px;
}

.hp-padding--normal .hp-section-inner {
padding-top: 20px;
padding-bottom: 20px;
}

.hp-padding--large .hp-section-inner {
padding-top: 30px;
padding-bottom: 30px;
}
}

@media (max-width: 767px) {
/* Mobile Full Width Layout */
/* Keep a single configurable mobile gutter on the outer section container. */
.hp-mobile-fullwidth > .hp-section-inner {
padding-left: var(--hp-mobile-gutter-left, 0) !important;
padding-right: var(--hp-mobile-gutter-right, 0) !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}

/* Inner containers stay full width so the configured gutter is not doubled. */
.hp-mobile-fullwidth > .hp-section-inner > .feature-block-container,
.hp-mobile-fullwidth > .hp-section-inner > .hp-main-layout-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

/* Module group sections add an extra row/column chain that also needs to defer to
   the outer mobile gutter, otherwise tabs + widgets end up with double spacing. */
.hp-mobile-fullwidth.hp-section--module_group > .hp-section-inner > .hd-layout-row {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

.hp-mobile-fullwidth.hp-section--module_group > .hp-section-inner > .hd-layout-row > .hd-layout-col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container,
.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container .tabs-section,
.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container .latest-section,
.hp-mobile-fullwidth.hp-section--module_group .widget-area-wrapper {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}

.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container {
padding-left: 0 !important;
padding-right: 0 !important;
}

.hp-mobile-fullwidth .hp-section-header--inner-width {
padding-left: 0 !important;
padding-right: 0 !important;
}

/* Ensure internal items don't have double padding if they expect container padding */
.hp-mobile-fullwidth .hp-main-layout-wrapper .postcard {
border-radius: 0 !important; /* Remove border radius for full width look */
border-left: none !important;
border-right: none !important;
}

/* Restore proper box sizing for layout columns on mobile to prevent overflow */
.hd-layout-col {
 box-sizing: border-box !important;
}

/* Ensure custom width sections are full width on mobile */
.hp-layout--custom .hp-section-inner {
    max-width: 100% !important;
    width: 100% !important;
}

.hp-section {
min-height: var(--hp-min-height-mobile, var(--hp-min-height-desktop, auto));
}
}

/* Responsive Visibility Utilities */
@media (min-width: 1024px) {
.hide-on-desktop {
display: none !important;
}
}

@media (min-width: 768px) and (max-width: 1023px) {
.hide-on-tablet {
display: none !important;
}
}

@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}

/* =============================================================================
   Slider Width Fix (Module Separation)
   ============================================================================= */
/* Ensure slider section takes full width now that it is decoupled from popular aside */
.slider-section,
.slider-content-wrapper,
.rwd-slider-wrapper {
width: 100%;
max-width: 100%;
flex: 1 1 100%; 
}

/* Ensure top block container allows full width children */
.top-block-container {
width: 100%;
}

/* =============================================================================
   Responsive Visibility Utilities
   ============================================================================= */
@media (min-width: 1025px) {
.hd-hide-desktop {
display: none !important;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.hd-hide-tablet {
display: none !important;
}
}

@media (max-width: 767px) {
.hd-hide-mobile {
display: none !important;
}
}

/* Final alignment guard: only true narrow custom sections may align to an edge. */
.hp-section:not(.hp-layout--custom) > .hp-section-inner,
.hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
.site-main .hp-section:not(.hp-layout--custom) > .hp-section-inner,
#main .hp-section:not(.hp-layout--custom) > .hp-section-inner,
.fc-content-wrapper .hp-section:not(.hp-layout--custom) > .hp-section-inner,
.site-main .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
#main .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
.fc-content-wrapper .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

.hp-section.hp-section--module_group.hp-layout--custom.hp-custom-width--narrow.hp-mode--left > .hp-section-inner,
.hp-section--module_group.hp-mode--left > .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

/* =============================================================================
   Fullwidth Shadow Effects (Top/Bottom)
   ============================================================================= */
/* Edge shadows are directional pseudo-elements, so bottom-only shadow never leaks upward. */
.hp-section.has-shadow-top {
--hp-section-shadow-edge-top: linear-gradient(to top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}

.hp-section.has-shadow-bottom {
--hp-section-shadow-edge-bottom: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}

.hp-section.has-shadow-top::before,
.hp-section.has-shadow-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 14px;
pointer-events: none;
z-index: 2;
}

.hp-section.has-shadow-top::before {
top: 0;
transform: translateY(-100%);
background: var(--hp-section-shadow-edge-top);
}

.hp-section.has-shadow-bottom::after {
bottom: 0;
transform: translateY(100%);
background: var(--hp-section-shadow-edge-bottom);
}


/* === layout-category-modules.css === */
/* =============================================================================
   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;
max-width: var(--hd-category-card-max-width, none);
margin-left: auto;
margin-right: auto;
}

/* 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;
aspect-ratio: var(--hd-category-card-image-ratio, 1.6);
max-width: var(--hd-category-card-image-width, 100%);
height: var(--hd-category-card-image-height, auto);
margin-left: auto;
margin-right: auto;
}

.category-cards-block .category-card-image img {
display: block;
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;
aspect-ratio: var(--hd-category-card-image-ratio, 1.6);
max-width: var(--hd-category-card-image-width, 100%);
height: var(--hd-category-card-image-height, auto);
margin-left: auto;
margin-right: auto;
}

/* 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 {
display: block;
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: 1180px) {
.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: 1181px) {
.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 (min-width: 768px) and (max-width: 1180px) {
    /* Tablet: clamp long titles to avoid excessive row height */
    .category-cards-block.layout-left-image .category-card-name,
    .category-cards-block.layout-right-image .category-card-name,
    .category-cards-block.layout-left-image .post-card-title,
    .category-cards-block.layout-right-image .post-card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35 !important;
        max-height: calc(1.35em * 2);
    }
}

@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: 1181px) {
/* 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, #1e40af 0%, #581c87 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, #1e40af 0%, #581c87 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(30, 64, 175, 0.35);
}

/* 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: #1e40af;
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: #1e40af;
color: #fff;
border-color: #1e40af;
}

/* 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, #1e40af 0%, #581c87 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: #1e40af;
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 #1e40af;
color: #1e40af;
}

.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: #1e40af;
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, #1e40af 0%, #581c87 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, #1e40af 0%, #581c87 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, #1e40af 0%, #581c87 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: #1e40af;
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: 1180px) {
.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: #1e40af;
}

@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;
}

/* =============================================================================
   Category Cards: Dynamic Size Overrides
   ============================================================================= */
.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,
.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-flex: 0 0 var(--hd-category-card-thumb-width, 150px) !important;
-ms-flex: 0 0 var(--hd-category-card-thumb-width, 150px) !important;
flex: 0 0 var(--hd-category-card-thumb-width, 150px) !important;
width: var(--hd-category-card-thumb-width, 150px) !important;
min-width: var(--hd-category-card-thumb-width, 150px) !important;
max-width: var(--hd-category-card-thumb-width, 150px) !important;
height: var(--hd-category-card-thumb-height, 120px) !important;
}


/* === layout-article-lists.css === */
/* Latest Articles: Grid Style (Card) */
/* Latest Articles: Grid Style (Card) */
#arte-t6-t.hd-layout-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}

/* Grid layout: adjust excerpt for multi-column cards */
#arte-t6-t.hd-layout-grid .postcard_description {
    --excerpt-lines-desktop: 2 !important;
    --excerpt-lines-tablet: 2 !important;
    --excerpt-lines-mobile: 2 !important;
    --listing-excerpt-content-height-desktop: 3.44em !important;
    --listing-excerpt-content-height-tablet: 3.44em !important;
    --listing-excerpt-content-height-mobile: 3.44em !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    line-height: var(--listing-excerpt-line-height, 1.72) !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    max-height: calc(3.44em + (var(--listing-excerpt-pad-block, 12px) * 2) + 0.85em) !important;
}

/* Latest Articles: Two Column Layout */
/* Only apply grid layout if NOT list style */
#arte-t6-t.hd-layout-two-column:not(.hd-layout-list) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

/* Two column + List style: use grid layout with 2 columns, but each item is list style */
#arte-t6-t.hd-layout-two-column.hd-layout-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px;
}

#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard.ex {
display: flex !important;
flex-direction: row !important;
width: 100%;
margin-bottom: 0;
background: #fff;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 0 20px 0;
}

/* Two column layout: ensure proper spacing and alignment */
#arte-t6-t.hd-layout-two-column {
padding: 0 !important; /* Remove padding for two-column layout */
}

#arte-t6-t.hd-layout-two-column .postcard.ex {
margin-bottom: 0;
width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
}

/* Two column: content alignment */
/* Only apply card-like padding when NOT in list layout */
#arte-t6-t.hd-layout-two-column:not(.hd-layout-list) .postcard_content {
width: 100%;
text-align: left; /* Text left aligned */
padding: 15px;
box-sizing: border-box;
}

/* Two column + List: use list content styles */
#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard_content {
flex: 1;
min-width: 0;
text-align: left !important;
padding: 0 15px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}

/* Two column layout: image alignment and sizing */
/* Only apply card-like styles when NOT in list layout */
#arte-t6-t.hd-layout-two-column:not(.hd-layout-list) .postcard_thumbnail {
position: relative;
width: 100%;
height: 200px; /* Fixed height for consistent sizing */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

#arte-t6-t.hd-layout-two-column:not(.hd-layout-list) .postcard_thumbnail img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: 5px;
}

/* Two column + List: use list thumbnail styles */
#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard_thumbnail {
flex: 0 0 200px !important;
width: 200px !important;
max-width: 200px !important;
height: auto !important;
min-height: 150px;
margin-right: 15px;
margin-bottom: 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
}

/* Two column layout: adjust excerpt for narrower cards */
#arte-t6-t.hd-layout-two-column .postcard_description {
    --excerpt-lines-desktop: 2 !important;
    --excerpt-lines-tablet: 2 !important;
    --excerpt-lines-mobile: 2 !important;
    --listing-excerpt-content-height-desktop: 3.44em !important;
    --listing-excerpt-content-height-tablet: 3.44em !important;
    --listing-excerpt-content-height-mobile: 3.44em !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    line-height: var(--listing-excerpt-line-height, 1.72) !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    max-height: calc(3.44em + (var(--listing-excerpt-pad-block, 12px) * 2) + 0.85em) !important;
}

#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard_thumbnail img {
width: 100%;
height: auto;
min-height: 150px;
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: 5px;
}

/* Center small images - detected via JavaScript */
#arte-t6-t.hd-layout-two-column .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}

/* Card layout: image alignment */
.hd-layout-card .postcard_thumbnail,
.postcard--card-style .postcard_thumbnail {
position: relative;
width: 100%;
height: 200px; /* Fixed height for consistent sizing */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

/* Card layout: content alignment */
.hd-layout-card .postcard_content,
.postcard--card-style .postcard_content {
width: 100%;
text-align: left !important; /* Text left aligned */
padding: 20px; /* Increased desktop padding */
box-sizing: border-box;
}

.hd-layout-card .postcard_thumbnail img,
.postcard--card-style .postcard_thumbnail img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: 5px;
aspect-ratio: 16/9; /* Enforce desktop ratio */
}

/* 99. Mobile Optimizations for Latest Articles */
@media (max-width: 767px) {
    .hd-layout-card .postcard_thumbnail img,
    .postcard--card-style .postcard_thumbnail img {
        aspect-ratio: 3/2; /* Mobile ratio */
    }
    .hd-layout-card .postcard_content,
    .postcard--card-style .postcard_content {
        padding: 15px !important;
    }
    .postcard_title h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
}

/* Center small images in card layout */
.hd-layout-card .postcard_thumbnail img.small-image,
.postcard--card-style .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}

/* Two column: title should span full width */
.tab-wrap .tab-group .tab.is-active {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.tab-wrap .tab-group .tab.is-active h3 {
margin: 0;
display: flex;
align-items: center;
}

.tab-wrap .tab-group .tab.is-active .tab-header-link {
margin-left: auto;
}

/* Latest Articles: More Link Button Styling - Improved */
.main-layout-more-link,
.tab-header-link.main-layout-more-link,
.main-layout-more-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 8px 18px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
color: var(--more-btn-color, #2271b1) !important;
background-color: transparent !important;
border: 1.5px solid var(--more-btn-color, #2271b1) !important;
border-radius: 6px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
box-shadow: none !important;
white-space: nowrap !important;
}

.main-layout-more-link:hover,
.tab-header-link.main-layout-more-link:hover,
.main-layout-more-button:hover {
background-color: var(--more-btn-color, #2271b1) !important;
border-color: var(--more-btn-color, #2271b1) !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 8px rgba(34, 113, 177, 0.25) !important;
}

/* Main Layout Header Improvements */
.main-layout-header {
/* border-bottom: 2px solid #e5e5e5 !important;*/
}

.main-layout-title {
font-size: 1.5rem !important;
font-weight: 600 !important;
color: #333 !important;
letter-spacing: -0.02em !important;
}

.main-layout-more-link:active,
.tab-header-link.main-layout-more-link:active,
.main-layout-more-button:active {
transform: translateY(0) !important;
box-shadow: none !important;
}

.main-layout-more-link .more-link-text,
.tab-header-link.main-layout-more-link .more-link-text,
.main-layout-more-button .more-link-text {
display: inline-block;
}

.main-layout-more-link .more-link-arrow,
.tab-header-link.main-layout-more-link .more-link-arrow,
.main-layout-more-button .more-link-arrow {
display: inline-block !important;
width: auto !important;
height: auto !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1 !important;
background: none !important;
color: inherit !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
margin-left: 2px !important;
}

.main-layout-more-link:hover .more-link-arrow,
.tab-header-link.main-layout-more-link:hover .more-link-arrow,
.main-layout-more-button:hover .more-link-arrow {
transform: none !important;
background: none !important;
box-shadow: none !important;
}

/* Remove previous pseudo-element arrow */
.main-layout-more-button .more-link-arrow::before {
content: none !important;
}

/* Remove animation */
.main-layout-more-button:hover .more-link-arrow::before {
animation: none !important;
}

@media (max-width: 767px) {
#arte-t6-t.hd-layout-two-column {
grid-template-columns: 1fr;
}
}

/* =============================================================================
   Latest Articles: Responsive Layout Settings (Desktop/Tablet/Mobile)
   ============================================================================= */

/* Desktop Layout Override (≥1181px) */
@media (min-width: 1181px) {
#arte-t6-t[data-layout-desktop="list"] {
/* List layout for desktop */
}

#arte-t6-t[data-layout-desktop="grid"] {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 20px !important;
}

#arte-t6-t[data-layout-desktop="masonry"] {
column-count: 3 !important;
column-gap: 20px !important;
}

#arte-t6-t[data-layout-desktop="card"] {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 20px !important;
}
}

/* Tablet Layout Override (768px - 1180px) */
@media (min-width: 768px) and (max-width: 1180px) {
#arte-t6-t[data-layout-tablet="list"] {
/* List layout for tablet */
}

#arte-t6-t[data-layout-tablet="grid"] {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
gap: 15px !important;
}

#arte-t6-t[data-layout-tablet="masonry"] {
column-count: 2 !important;
column-gap: 15px !important;
}

#arte-t6-t[data-layout-tablet="card"] {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 15px !important;
}

/* Tablet List: Thumbnail */
.hd-layout-list .postcard_thumbnail {
flex: 0 0 180px;
width: 180px;
max-width: 180px;
min-height: 120px;
}

/* Tablet Content padding */
.postcard_content {
padding: 18px;
}

/* Tablet Title */
.postcard_title h3 {
font-size: 1.05rem;
margin-bottom: 10px;
}
}

/* Mobile Layout Override (≤767px) */
@media (max-width: 767px) {
#arte-t6-t[data-layout-mobile="list"] {
/* List layout for mobile */
}

#arte-t6-t[data-layout-mobile="grid"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 15px !important;
}

#arte-t6-t[data-layout-mobile="masonry"] {
column-count: 1 !important;
column-gap: 15px !important;
}

#arte-t6-t[data-layout-mobile="card"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 15px !important;
}
}
.hd-layout-grid .postcard.ex.hd-grid-item {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
overflow: hidden;
transition: transform 0.2s;
/*height: 100%;*/
display: flex;
flex-direction: column;
}
.hd-layout-grid .postcard.ex.hd-grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Grid layout: image container */
.hd-layout-grid .postcard_thumbnail {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

/* Ensure images fill width */
.hd-layout-grid .postcard_thumbnail img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
}

/* Center small images in grid layout */
.hd-layout-grid .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}
.hd-layout-grid .postcard_content {
padding: 15px;
flex: 1;
display: flex;
flex-direction: column;
text-align: left; /* Text left aligned */
width: 100%;
box-sizing: border-box;
}
.hd-layout-grid .postcard_title h3 {
font-size: 1.1em;
margin-top: 0;
}
.hd-layout-grid .postcard_meta {
margin-top: auto;
font-size: 0.85em;
color: #999;
text-align: left !important; /* Force left align */
width: 100%;
box-sizing: border-box;
}

/* Latest Articles: List Style */
.hd-layout-list .postcard.ex {
display: flex !important; /* Force flex layout for list style */
margin-bottom: 20px;
background: #fff;
/* border-bottom: 1px solid #f0f0f0; - Removed per user request */
width: 100%;
box-sizing: border-box;
max-width: 100%;
flex-direction: row; /* Ensure horizontal layout */
}

/* Ensure image/text gap applies to inner flex container */
.hd-layout-list .postcard.ex > a {
display: flex;
gap: 20px;
align-items: stretch;
width: 100%;
}

/* Latest Articles (Homepage) - Modern spacing */
#arte-t6-t.hd-layout-list .postcard.ex {
gap: 20px;
align-items: stretch;
margin-bottom: 20px;
padding: 0px;
}

/* List style: override any card/grid styles */
.hd-layout-list .postcard.ex.hd-split-item {
display: flex !important;
flex-direction: row !important;
background: #fff;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 0 20px 0;
}

/* List layout: content alignment */
.hd-layout-list .postcard_content {
flex: 1;
min-width: 0;
text-align: left ; /* Force left align */
padding: 0 15px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
display: flex ;
flex-direction: column ;
}

/* Latest Articles (Homepage) - Typography + spacing */
#arte-t6-t.hd-layout-list .postcard_content {
padding: 8px 24px 8px 0px;
display: flex ;
flex-direction: column ;
justify-content: center ;
}

#arte-t6-t.hd-layout-list .postcard_thumbnail {
margin-right: 0;
}

#arte-t6-t.hd-layout-list .postcard_title h3 {
font-size: 1.15rem;
line-height: 1.55;
margin-bottom: 12px;
}

#arte-t6-t.hd-layout-list .postcard_excerpt {
font-size: 1rem;
line-height: 1.65;
}

#arte-t6-t.hd-layout-list .postcard_meta {
font-size: 0.9rem;
}

/* List layout with split item: ensure proper thumbnail sizing */
.hd-layout-list .postcard.ex.hd-split-item .postcard_thumbnail {
flex: 0 0 200px !important;
width: 200px !important;
max-width: 200px !important;
height: auto !important;
min-height: 150px;
margin-right: 15px;
margin-bottom: 0;
}

.hd-layout-list .postcard.ex.hd-split-item .postcard_thumbnail img {
width: 100%;
height: auto;
min-height: 150px;
object-fit: cover;
}
.hd-layout-list .postcard_thumbnail {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
margin-right: 15px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align by default */
background: #f5f5f5;
height: auto;
min-height: 180px;
}

#arte-t6-t.hd-layout-list .postcard_thumbnail,
#arte-t6-t.hd-layout-list .postcard_thumbnail img {
border-radius: 0;
}

.hd-layout-list .postcard_thumbnail img {
border-radius: 5px;
width: 100%;
height: auto;
min-height: 180px;
max-width: 100%;
object-fit: cover;
object-position: center;
}

/* Center small images in list layout */
.hd-layout-list .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}

/* Two column split item: image alignment */
.hd-split-item {
width: 100%;
box-sizing: border-box;
}

.hd-split-item .postcard_thumbnail {
position: relative;
width: 100%;
min-height: 200px;
height: 200px; /* Fixed height for consistent sizing */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

/* Split item: content alignment */
.hd-split-item .postcard_content {
width: 100%;
text-align: left; /* Text left aligned */
padding: 15px;
box-sizing: border-box;
}

.hd-split-item .postcard_thumbnail img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: 5px;
}

/* Center small images in split item */
.hd-split-item .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}
@media (max-width: 767px) {
/* 列表模式 - 手機版維持左圖右文布局 */
.hd-layout-list .postcard.ex,
.hd-layout-list .postcard.ex > a {
display: flex;
flex-direction: row;
}
.hd-layout-list .postcard_thumbnail {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
margin-right: 15px;
margin-bottom: 0;
min-height: 180px;
height: 180px;
}
.hd-layout-list .postcard_thumbnail img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
}
.hd-layout-list .postcard_content {
flex: 1;
min-width: 0;
}
.hd-layout-list .postcard_title h3 {
font-size: 0.95em;
line-height: 1.4;
}
.hd-layout-list .postcard_meta {
font-size: 0.8em;
}
}

/* Latest Articles (Homepage) - Mobile layout: reduce cramped text */
@media (max-width: 767px) {
#arte-t6-t.hd-layout-list .postcard.ex,
#arte-t6-t.hd-layout-list .postcard.ex > a {
flex-direction: row;
gap: 20px !important;
align-items: stretch !important;
height: 150px !important;
min-height: 150px !important;
}
#arte-t6-t.hd-layout-list .postcard_thumbnail {
flex: 0 0 150px !important;
width: 150px !important;
max-width: 150px !important;
height: 150px !important;
min-height: 150px !important;
margin-right: 0;
margin-bottom: 0;
}
#arte-t6-t.hd-layout-list .postcard_thumbnail img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
}
#arte-t6-t.hd-layout-list .postcard_content {
padding: 12px 20px 9px 0 !important;
width: 100% !important;
flex-direction: column !important;
justify-content: flex-start;
height: 150px !important;
gap: 6px !important;
}
#arte-t6-t.hd-layout-list .postcard_excerpt,
#arte-t6-t.hd-layout-list .postcard_meta {
display: none !important;
}
#arte-t6-t.hd-layout-list .postcard_title h3 {
font-size: 1.15rem;
line-height: 1.55;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
letter-spacing: 0.2px !important;
}
 #arte-t6-t.hd-layout-list .tag-above-title {
margin-bottom: 4px !important;
}
}

/* Item Layout: Right Image */
.hd-layout-list .postcard--right-image > a,
.postcard--right-image > a {
display: flex;
flex-direction: row-reverse !important;
gap: 20px;
}

.hd-layout-list .postcard--right-image .postcard_thumbnail,
.postcard--right-image .postcard_thumbnail {
margin-right: 0 !important;
margin-left: 0;
flex: 0 0 200px;
}

.hd-layout-list .postcard--right-image .postcard_content,
.postcard--right-image .postcard_content {
padding-left: 0 !important;
padding-right: 15px !important;
}

/* Item Layout: Top Image */
.postcard--top-image > a {
flex-direction: column !important;
}

.postcard--top-image .postcard_thumbnail {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
height: 200px !important;
margin-right: 0 !important;
margin-bottom: 15px !important;
}

.postcard--top-image .postcard_content {
padding: 0 15px 15px 15px !important;
width: 100%;
}

@media (max-width: 767px) {
/* On mobile, adjust layouts if needed, but often top-image is good for mobile */
.postcard--right-image > a {
/* Keep right image on mobile? Or stack? */
/* If user wants responsive, maybe stack */
/* But for now preserving structure requested */
}
}


.hd-layout-list .postcard--right-image .postcard_thumbnail {
margin-right: 0;
margin-left: 20px;
justify-content: center; /* Center align */
}

.hd-layout-list .postcard--right-image .postcard_thumbnail img {
object-position: center;
}

@media (max-width: 767px) {
.hd-layout-list .postcard--right-image,
.hd-layout-list .postcard--right-image > a {
flex-direction: row-reverse;
}
.hd-layout-list .postcard--right-image .postcard_thumbnail {
margin-right: 0;
margin-left: 12px;
}
}

/* Card Style Modifier for Latest Articles */
/* Only apply card styles when NOT in list layout */
.postcard--card-style:not(.hd-layout-list .postcard.ex) {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
padding: 15px !important;
margin-bottom: 20px;
}

.postcard--card-style:not(.hd-layout-list .postcard.ex):hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* List layout: override card styles */
.hd-layout-list .postcard.ex.postcard--card-style {
background: #fff !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 0 20px 0 !important;
margin-bottom: 20px;
}

/* Block Titles */
.feature-block-title, .main-layout-title, .widget-title {
font-size: 1.5rem !important;
font-weight: bold !important;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.feature-block-title i, .main-layout-title i, .widget-title i {
margin-right: 10px;
}

/* Ensure title spans full width in grid container */
.hd-layout-grid .main-layout-title,
.hd-layout-grid .sticky-post {
grid-column: 1 / -1;
}

/* Fix sticky post container in grid */
.hd-layout-grid .sticky-post {
display: flex; /* Or block depending on design */
margin-bottom: 20px;
background: #fff;
border: 1px solid #ffd700; /* Gold border for sticky */
padding: 15px;
}

/* Latest Articles: Masonry Style */
#arte-t6-t.hd-layout-masonry {
column-count: 3;
column-gap: 20px;
display: block; /* Override default if needed */
}

#arte-t6-t.hd-layout-masonry .hd-masonry-item {
break-inside: avoid;
margin-bottom: 20px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
/* Use flex for content alignment inside card */
display: flex;
flex-direction: column;
}

#arte-t6-t.hd-layout-masonry .postcard_thumbnail {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; /* Center align */
background: #f5f5f5;
}

#arte-t6-t.hd-layout-masonry .postcard_thumbnail img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
object-position: center;
display: block;
}

/* Center small images in masonry layout */
#arte-t6-t.hd-layout-masonry .postcard_thumbnail img.small-image {
object-fit: contain;
object-position: center;
}

#arte-t6-t.hd-layout-masonry .postcard_content {
padding: 15px;
text-align: left !important; /* Text left aligned */
width: 100%;
box-sizing: border-box;
}

#arte-t6-t.hd-layout-masonry .main-layout-title,
#arte-t6-t.hd-layout-masonry .sticky-post {
column-span: all;
margin-bottom: 20px;
width: 100%;
}

@media (max-width: 900px) {
#arte-t6-t.hd-layout-masonry {
column-count: 2;
}
}

@media (max-width: 600px) {
#arte-t6-t.hd-layout-masonry {
column-count: 1;
}
}

/* Excerpt Styling */
.postcard_excerpt {
color: #333 !important; /* Force override link color */
text-align: left !important; /* Force left align */
/*margin-top: 10px;*/
font-size: 0.95em;
line-height: 1.5;
text-decoration: none !important; /* Remove underline */
width: 100%;
box-sizing: border-box;
}
/* Ensure link doesn't underline the excerpt on hover */
.postcard:hover .postcard_excerpt {
text-decoration: none;
}

/* Line clamp for title and excerpt */
.postcard_title {
text-align: left !important; /* Force left align */
width: 100%;
box-sizing: border-box;
}

.postcard_title h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
max-height: 2.8em; /* Fallback */
text-align: left !important; /* Force left align */
margin: 0 0 12px 0; /* Updated margin-bottom */
}

.postcard_excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/* ============================================
   Enhanced RWD (Responsive Web Design) Rules
   ============================================ */

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) {
.hd-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#arte-t6-t.hd-layout-masonry {
column-count: 2;
}

/* NOTE: category-cards-grid layout-specific rules are in lines 73-93 */
/* Do not override here with general rules */

.hp-main-layout-wrapper {
padding-left: 10px;
padding-right: 10px;
}

/* Tabs with sidebar - stack on tablet */
.tabs-with-sidebar-container {
flex-direction: column;
}
.tabs-with-sidebar-container .tabs-section {
flex: 1 1 100%;
max-width: 100%;
}
.tabs-with-sidebar-container .latest-section {
flex: 1 1 100%;
max-width: 100%;
}
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
/* NOTE: hd-layout-list mobile styles are consolidated above (lines 216-248) */

.feature-block-title, .main-layout-title {
font-size: 1.25rem;
}

/* NOTE: category-cards-grid mobile rules are in lines 82-93 (layout-specific) */
/* Only override auto layout here */
.category-cards-block.layout-auto .category-cards-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}

/* Mobile Portrait (< 576px) */
@media (max-width: 575px) {
.hd-layout-grid {
grid-template-columns: 1fr;
gap: 15px;
}

#arte-t6-t.hd-layout-masonry {
column-count: 1;
}

.hd-layout-grid .postcard_thumbnail img {
height: 180px;
}

.postcard_title h3 {
font-size: 1em;
}

.postcard_excerpt {
font-size: 0.9em;
-webkit-line-clamp: 2;
}

.hp-main-layout-wrapper {
padding-left: 8px;
padding-right: 8px;
}

/* Pagination buttons mobile sizing */
.hd-load-more-btn {
width: 100%;
padding: 12px 20px;
font-size: 1em;
}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.hd-layout-grid .postcard.ex.hd-grid-item:hover {
transform: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
}

/* =============================================================================
   New Layout Styles: Latest Articles
   ============================================================================= */

/* Style: Featured Grid */
.hd-layout-featured-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.hd-layout-featured-grid .postcard:first-child {
grid-column: span 2;
display: flex;
flex-direction: column;
}

.hd-layout-featured-grid .postcard:first-child .postcard_thumbnail {
height: 400px;
width: 100%;
}

.hd-layout-featured-grid .postcard:first-child .postcard_title h3 {
font-size: 1.8rem;
margin-top: 15px;
}

.hd-layout-featured-grid .postcard:not(:first-child) {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Style: Compact List */
.hd-layout-compact-list .postcard {
display: flex;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #eee;
}

.hd-layout-compact-list .postcard_thumbnail {
flex: 0 0 60px !important;
width: 60px !important;
height: 60px !important;
border-radius: 4px;
margin-right: 15px !important;
}

.hd-layout-compact-list .postcard_content {
padding: 0 !important;
}

.hd-layout-compact-list .postcard_title h3 {
font-size: 0.95rem;
margin: 0;
line-height: 1.3;
}

.hd-layout-compact-list .postcard_excerpt {
display: none;
}

.hd-layout-compact-list .postcard_meta {
font-size: 0.8rem;
margin-top: 2px;
}

@media (max-width: 767px) {
.hd-layout-featured-grid {
grid-template-columns: 1fr;
}
.hd-layout-featured-grid .postcard:first-child {
grid-column: span 1;
}
.hd-layout-featured-grid .postcard:first-child .postcard_thumbnail {
height: 250px;
}
}
/* Style: Featured Grid */
.hd-layout-featured-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.hd-layout-featured-grid .postcard:first-child {
grid-column: span 2;
display: flex;
flex-direction: column;
}

.hd-layout-featured-grid .postcard:first-child .postcard_thumbnail {
height: 400px;
width: 100%;
}

.hd-layout-featured-grid .postcard:first-child .postcard_title h3 {
font-size: 1.8rem;
margin-top: 15px;
}

.hd-layout-featured-grid .postcard:not(:first-child) {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Style: Compact List */
.hd-layout-compact-list .postcard {
display: flex;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #eee;
}

.hd-layout-compact-list .postcard_thumbnail {
flex: 0 0 60px !important;
width: 60px !important;
height: 60px !important;
border-radius: 4px;
margin-right: 15px !important;
}

.hd-layout-compact-list .postcard_content {
padding: 0 !important;
}

.hd-layout-compact-list .postcard_title h3 {
font-size: 0.95rem;
margin: 0;
line-height: 1.3;
}

.hd-layout-compact-list .postcard_excerpt {
display: none;
}

.hd-layout-compact-list .postcard_meta {
font-size: 0.8rem;
margin-top: 2px;
}

@media (max-width: 767px) {
.hd-layout-featured-grid {
grid-template-columns: 1fr;
}
.hd-layout-featured-grid .postcard:first-child {
grid-column: span 1;
}
.hd-layout-featured-grid .postcard:first-child .postcard_thumbnail {
height: 250px;
}
}
/* =============================================================================
   Elegant List Layout (Re-introduced & Optimized)
   ============================================================================= */
.hd-layout-elegant-list .postcard.ex {
    border-bottom: 1px solid #eee;
    padding: 25px 0;
    transition: all 0.3s ease;
}

.hd-layout-elegant-list .postcard.ex:last-child {
    border-bottom: none;
}

.hd-layout-elegant-list .postcard.ex:hover {
    background: #fafafa;
}

.hd-layout-elegant-list .postcard_content {
    padding-top: 5px;
}

.hd-layout-elegant-list .postcard_title h3 {
    font-size: 20px;
    font-weight: 600;
    color: #332d28;
    margin-bottom: 10px;
}

.hd-layout-elegant-list .postcard_excerpt {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

/* Category Tag Above Title */
.tag-above-title {
    margin-bottom: 12px;
}

.tag-above-title .hd-cat-tag {
    position: static;
    display: inline-block;
}

/* Elegant List Meta Styling */
.hd-layout-elegant-list .postcard_meta {
    margin-top: 15px;
    font-size: 13px;
    color: #9a9084;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.4px;
}

.hd-layout-elegant-list .postcard_meta .meta-tags {
    color: #a79e92;
}

@media (max-width: 767px) {
    .hd-layout-elegant-list .postcard.ex {
        padding: 20px 15px;
    }
    .hd-layout-elegant-list .postcard_title h3 {
        font-size: 18px;
    }
}

/* =============================================================================
   Main Layout Wrapper Responsive Overrides (Moved from homepage-layouts.css)
   ============================================================================= */
@media (max-width: 991px) {
.hp-main-layout-wrapper {
flex-direction: column !important;
display: block !important; /* Simplified stacking */
}

.hp-main-layout-wrapper > #postshow-a,
.hp-main-layout-wrapper > #postshow-b {
max-width: 100% !important;
flex: none !important;
width: 100% !important;
padding-right: 0 !important; /* Reset any padding if needed */
}

/* Ensure sidebar has top margin when stacked */
.hp-main-layout-wrapper > #postshow-b {
margin-top: 30px;
padding-left: 0;
}
}

/* Mobile specific styling for Latest Articles module items */
@media (max-width: 768px) {
.hp-main-layout-wrapper .postcard--left-image > a,
.hp-main-layout-wrapper .postcard--right-image > a {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 15px !important;
}
.hp-main-layout-wrapper .postcard--left-image .postcard_thumbnail,
.hp-main-layout-wrapper .postcard--right-image .postcard_thumbnail {
flex: 0 0 160px !important;
width: 160px !important;
max-width: 160px !important;
min-height: auto !important;
}
.hp-main-layout-wrapper .postcard_content {
padding: 0 !important;
flex: 1 !important;
min-width: 0;
}
.hp-main-layout-wrapper .postcard_title h3 {
font-size: 1.1rem !important;
line-height: 1.4 !important;
margin-bottom: 5px !important;
}
.hp-main-layout-wrapper .postcard_meta {
font-size: 0.85rem !important;
}
}

/* Ensure Main Layout Wrapper (Latest Articles) fits perfectly inside Layout Column */
.hd-layout-col .hp-main-layout-wrapper {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}

/* Ensure content inside doesn't overflow */
.hd-layout-col .hp-main-layout-wrapper #postshow-a {
max-width: 100% !important;
flex: 0 0 100% !important;
}

@media (max-width: 1180px) {
#arte-t6-t.hd-layout-two-column.hd-layout-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px;
}

#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard_thumbnail {
flex: 0 0 176px !important;
width: 176px !important;
max-width: 176px !important;
min-height: 128px;
}
}

@media (max-width: 768px) {
#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard.ex {
padding-bottom: 18px;
}

#arte-t6-t.hd-layout-two-column.hd-layout-list .postcard_thumbnail {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0;
margin-right: 0;
}
}


/* === layout-features-v8.css === */
/* =============================================================================
   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, #1e40af 0%, #581c87 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;
}

/* Tags rendered inside content (e.g., .tag-above-title) should stay in flow */
#arte-t6-t .postcard_content .hd-cat-tag,
#arte-t6-t .tag-above-title .hd-cat-tag {
position: static;
top: auto;
left: auto;
margin-bottom: 8px;
max-width: 100%;
}

/* Category cards: frontend owner for the admin "category position" setting. */
.category-cards-block.category-position-left .collection-item-cat,
.category-cards-block.category-position-top .collection-item-cat,
.category-cards-block.category-position-overlay .collection-item-cat {
top: 12px;
right: auto;
bottom: auto;
left: 12px;
}

.category-cards-block.category-position-right .collection-item-cat {
top: 12px;
right: 12px;
bottom: auto;
left: auto;
}

.category-cards-block.category-position-bottom .collection-item-cat {
top: auto;
right: auto;
bottom: 12px;
left: 12px;
margin-bottom: 0;
}

.category-cards-block.category-position-bottom .category-card-wrapper:not(.ad-card) .category-card-header {
order: 2;
margin-top: 12px;
margin-bottom: 0;
}

.category-cards-block.category-position-bottom .category-card-wrapper:not(.ad-card) .category-card-posts {
order: 1;
}

.category-cards-block.category-position-right .category-card-title-link {
justify-content: flex-end;
text-align: right;
}

/* 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(30, 64, 175, 0.35);
}

/* 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: #1e40af;
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: #1e40af;
color: #fff;
border-color: #1e40af;
}

/* 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, #1e40af 0%, #581c87 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: #1e40af;
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 #1e40af;
color: #1e40af;
}

.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: #1e40af;
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, #1e40af 0%, #581c87 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, #1e40af 0%, #581c87 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, #1e40af 0%, #581c87 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: #1e40af;
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: 1180px) {
.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: #1e40af;
}

@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;
}
}

/* =============================================================================
   Additional Category Blocks - Title Link Styling (Issue: blue color)
   ============================================================================= */
.block-title-link {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}

.block-title-link:hover {
color: #1e40af;
}

.block-title-link .view-all-arrow {
font-size: 0.8em;
opacity: 0.7;
transition: transform 0.2s ease, opacity 0.2s ease;
}

.block-title-link:hover .view-all-arrow {
transform: translateX(4px);
opacity: 1;
}

/* Block Title Icon (Emoji) */
.block-title-icon {
font-size: 1.1em;
margin-right: 4px;
}

/* Additional Category Block Specific Styles */
.additional-category-block {
margin-top: 30px;
margin-bottom: 30px;
}

.additional-category-block .single-category-posts-grid {
display: grid;
gap: 20px;
}

/* Layout variations for additional blocks */
.additional-category-block.layout-3x2 .single-category-posts-grid {
grid-template-columns: repeat(3, 1fr);
}

.additional-category-block.layout-2x3 .single-category-posts-grid {
grid-template-columns: repeat(2, 1fr);
}

.additional-category-block.layout-4x2 .single-category-posts-grid {
grid-template-columns: repeat(4, 1fr);
}

.additional-category-block.layout-1x4 .single-category-posts-grid {
grid-template-columns: 1fr;
}

.additional-category-block.layout-auto .single-category-posts-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Responsive for additional blocks */
@media (max-width: 991px) {
.additional-category-block.layout-3x2 .single-category-posts-grid,
.additional-category-block.layout-4x2 .single-category-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 767px) {
.additional-category-block.layout-3x2 .single-category-posts-grid,
.additional-category-block.layout-4x2 .single-category-posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.additional-category-block.layout-2x3 .single-category-posts-grid {
grid-template-columns: 1fr;
}

.additional-category-block {
margin-top: 20px;
margin-bottom: 20px;
}
}

/* =============================================================================
   Enhanced Category Block Features
   ============================================================================= */

/* Block Header Row - Flexbox layout */
.additional-category-block .block-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}

.additional-category-block .block-header-row .feature-block-title {
margin-bottom: 0;
}

/* =============================================================================
   Additional Category Block - Card Styling (Consistent with First Block)
   ============================================================================= */
.additional-category-block .category-card-title {
font-size: 15px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 8px 0;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.additional-category-block .category-card-content {
padding: 12px;
background: #fff;
}

.additional-category-block .post-meta {
font-size: 12px;
color: #999;
}

.additional-category-block .post-date {
font-size: 12px;
}

/* =============================================================================
   Phase 2: Excerpt Display
   ============================================================================= */
.additional-category-block .post-excerpt {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* =============================================================================
   Phase 2: Category Badge
   ============================================================================= */
.additional-category-block .category-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--block-accent-color, rgba(0, 123, 255, 0.9));
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 3px;
z-index: 2;
}

.additional-category-block .category-card-image {
position: relative;
}

/* =============================================================================
   Phase 2: Hover Effects
   ============================================================================= */
/* Lift Effect */
.additional-category-block.hover-lift .category-card-wrapper {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.additional-category-block.hover-lift .category-card-wrapper:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Zoom Effect */
.additional-category-block.hover-zoom .category-card-image img {
transition: transform 0.4s ease;
}

.additional-category-block.hover-zoom .category-card-wrapper:hover .category-card-image img {
transform: scale(1.08);
}

.additional-category-block.hover-zoom .category-card-image {
overflow: hidden;
}

/* Glow Effect */
.additional-category-block.hover-glow .category-card-wrapper {
transition: box-shadow 0.3s ease;
}

.additional-category-block.hover-glow .category-card-wrapper:hover {
box-shadow: 0 0 25px var(--block-accent-color, rgba(0, 123, 255, 0.4));
}

/* =============================================================================
   Phase 2: Image Aspect Ratios
   ============================================================================= */
.additional-category-block.ratio-16-9 .category-card-image {
aspect-ratio: 16 / 9;
}

.additional-category-block.ratio-4-3 .category-card-image {
aspect-ratio: 4 / 3;
}

.additional-category-block.ratio-1-1 .category-card-image {
aspect-ratio: 1 / 1;
}

.additional-category-block.ratio-3-2 .category-card-image {
aspect-ratio: 3 / 2;
}

.additional-category-block .category-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Mobile adjustments for card typography */
@media (max-width: 767px) {
.additional-category-block .category-card-title {
font-size: 14px;
-webkit-line-clamp: 2;
}

.additional-category-block .category-card-content {
padding: 10px;
}

.additional-category-block .post-excerpt {
font-size: 12px;
-webkit-line-clamp: 2;
}

.additional-category-block .category-badge {
font-size: 10px;
padding: 3px 8px;
}
}

/* =============================================================================
   Filter Tabs (Subcategory Navigation)
   ============================================================================= */
.category-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.filter-tab {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 20px;
padding: 6px 16px;
font-size: 14px;
color: #555;
cursor: pointer;
transition: all 0.2s ease;
}

.filter-tab:hover {
background: #e0e0e0;
color: #333;
}

.filter-tab.active {
background: var(--theme-primary-color, #007bff);
border-color: var(--theme-primary-color, #007bff);
color: #fff;
}

/* =============================================================================
   View Toggle Buttons (Grid/List)
   ============================================================================= */
.view-toggle-buttons {
display: flex;
gap: 4px;
background: #f5f5f5;
padding: 3px;
border-radius: 6px;
}

.view-toggle-btn {
background: transparent;
border: none;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
color: #666;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

.view-toggle-btn:hover {
background: #e0e0e0;
color: #333;
}

.view-toggle-btn.active {
background: #fff;
color: var(--theme-primary-color, #007bff);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.view-toggle-btn svg {
width: 16px;
height: 16px;
}

/* =============================================================================
   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;
}

.category-cards-grid.list-view .category-card-content {
flex: 1;
padding: 12px 15px;
display: flex;
flex-direction: column;
justify-content: center;
}

/* Mobile list view */
@media (max-width: 767px) {
.category-cards-grid.list-view .category-card-image {
width: 100px;
min-width: 100px;
height: 80px;
}

.category-cards-grid.list-view .category-card-content {
padding: 8px 12px;
}

.category-cards-grid.list-view .category-card-title {
font-size: 14px;
}
}

/* =============================================================================
   Load More Button
   ============================================================================= */
.load-more-wrapper {
text-align: center;
margin-top: 25px;
padding-top: 20px;
}

.load-more-btn {
background: linear-gradient(135deg, #1e40af 0%, #581c87 100%);
color: #fff;
border: none;
padding: 12px 40px;
border-radius: 25px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.load-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 64, 175, 0.35);
}

.load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.load-more-btn .btn-loading {
display: inline-flex;
align-items: center;
gap: 8px;
}

.hp-d-none {
display: none !important;
}

.hd-loadmore-complete {
color: #999;
margin-top: 10px;
}

.no-posts-found--center {
text-align: center;
}

/* =============================================================================
   Loading State for Grid
   ============================================================================= */
.category-cards-grid.loading {
opacity: 0.5;
pointer-events: none;
position: relative;
}

.category-cards-grid.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--theme-primary-color, #007bff);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* =============================================================================
   Responsive Adjustments for Enhanced Features
   ============================================================================= */
@media (max-width: 767px) {
.additional-category-block .block-header-row {
flex-direction: column;
align-items: flex-start;
}

.category-filter-tabs {
gap: 6px;
}

.filter-tab {
padding: 5px 12px;
font-size: 13px;
}

.load-more-btn {
padding: 10px 30px;
font-size: 14px;
}
}

/* =============================================================================
   Phase 3: Sorting Dropdown
   ============================================================================= */
.sorting-dropdown-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}

.sorting-dropdown {
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
font-size: 13px;
color: #333;
cursor: pointer;
transition: border-color 0.2s;
}

.sorting-dropdown:hover,
.sorting-dropdown:focus {
border-color: var(--block-accent-color, #007bff);
outline: none;
}

/* =============================================================================
   Phase 3: Author Avatar
   ============================================================================= */
.additional-category-block .post-author {
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: 10px;
}

.additional-category-block .author-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}

/* =============================================================================
   Phase 3: Reading Time & Comments Count
   ============================================================================= */
.additional-category-block .reading-time,
.additional-category-block .comments-count {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 8px;
font-size: 12px;
color: #888;
}

.additional-category-block .post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}

/* =============================================================================
   Phase 3: Scroll Animations
   ============================================================================= */
.additional-category-block[data-animation="fade"] .category-card-wrapper {
opacity: 0;
transition: opacity 0.6s ease-out;
}

.additional-category-block[data-animation="fade"] .category-card-wrapper.animate-in {
opacity: 1;
}

.additional-category-block[data-animation="slide-up"] .category-card-wrapper {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.additional-category-block[data-animation="slide-up"] .category-card-wrapper.animate-in {
opacity: 1;
transform: translateY(0);
}

.additional-category-block[data-animation="zoom"] .category-card-wrapper {
opacity: 0;
transform: scale(0.9);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.additional-category-block[data-animation="zoom"] .category-card-wrapper.animate-in {
opacity: 1;
transform: scale(1);
}

/* Staggered animation delay for cards */
.additional-category-block .category-card-wrapper:nth-child(1) { transition-delay: 0s; }
.additional-category-block .category-card-wrapper:nth-child(2) { transition-delay: 0.1s; }
.additional-category-block .category-card-wrapper:nth-child(3) { transition-delay: 0.2s; }
.additional-category-block .category-card-wrapper:nth-child(4) { transition-delay: 0.3s; }
.additional-category-block .category-card-wrapper:nth-child(5) { transition-delay: 0.4s; }
.additional-category-block .category-card-wrapper:nth-child(6) { transition-delay: 0.5s; }

/* =============================================================================
   Phase 3: Mobile Responsive Adjustments
   ============================================================================= */
@media (max-width: 767px) {
.sorting-dropdown-wrapper {
margin-left: 0;
margin-top: 10px;
width: 100%;
}

.sorting-dropdown {
width: 100%;
}

.additional-category-block .post-author {
display: none;
}

.additional-category-block .reading-time,
.additional-category-block .comments-count {
font-size: 11px;
}
}

/* =============================================================================
   Phase 3: Post Meta Enhancements (Reading Time & Comment Count)
   ============================================================================= */

/* Reading Time */
.post-reading-time {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #888;
margin-right: 10px;
}

.post-reading-time .reading-time-icon {
font-size: 12px;
}

/* Comment Count */
.post-comment-count {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #888;
}

.post-comment-count .comment-count-icon {
font-size: 12px;
}

/* Meta group container */
.category-card-content .post-reading-time,
.category-card-content .post-comment-count {
margin-top: 4px;
}

/* =============================================================================
   Phase 3: Scroll Animation Effects
   ============================================================================= */

/* Base scroll animation class */
.scroll-animate {
opacity: 0;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.animated {
opacity: 1;
}

/* Fade In Animation */
.scroll-animate.fade-in {
/* Default fade uses only opacity transition */
transform: none;
}

.scroll-animate.fade-in.animated {
opacity: 1;
}

/* Slide Up Animation */
.scroll-animate.slide-up {
transform: translateY(30px);
}

.scroll-animate.slide-up.animated {
transform: translateY(0);
}

/* Slide Left Animation */
.scroll-animate.slide-left {
transform: translateX(-30px);
}

.scroll-animate.slide-left.animated {
transform: translateX(0);
}

/* Zoom In Animation */
.scroll-animate.zoom-in {
transform: scale(0.9);
}

.scroll-animate.zoom-in.animated {
transform: scale(1);
}

/* Staggered animation delays for cards */
.category-cards-grid .scroll-animate:nth-child(1) { transition-delay: 0s; }
.category-cards-grid .scroll-animate:nth-child(2) { transition-delay: 0.1s; }
.category-cards-grid .scroll-animate:nth-child(3) { transition-delay: 0.15s; }
.category-cards-grid .scroll-animate:nth-child(4) { transition-delay: 0.2s; }
.category-cards-grid .scroll-animate:nth-child(5) { transition-delay: 0.25s; }
.category-cards-grid .scroll-animate:nth-child(6) { transition-delay: 0.3s; }
.category-cards-grid .scroll-animate:nth-child(7) { transition-delay: 0.35s; }
.category-cards-grid .scroll-animate:nth-child(8) { transition-delay: 0.4s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.scroll-animate {
transition: none;
opacity: 1;
transform: none;
}
}

/* =============================================================================
   Tabs with Sidebar Container (Moved from homepage-layouts.css)
   ============================================================================= */
.tabs-with-sidebar-container {
display: flex;
gap: 20px;
align-items: flex-start;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

.tabs-with-sidebar-container .tabs-section {
flex: 2;
min-width: 0;
}

.tabs-with-sidebar-container .latest-section {
flex: 1;
min-width: 280px;
max-width: 320px;
}

/* No sidebar modifier - tabs section takes full width */
.tabs-with-sidebar-container.no-sidebar .tabs-section {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}

/* Tabs scroll buttons (arrows) - matching page-home.css style */
.tabs-header-container .scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
transition: all 0.3s ease;
z-index: 10;
font-size: 18px;
line-height: 1;
padding: 0;
}

.tabs-header-container .scroll-btn[hidden] {
display: none !important;
}

.tabs-header-container .scroll-btn:not([hidden]) {
display: flex;
}

.tabs-header-container .scroll-btn.left {
left: 5px;
}

.tabs-header-container .scroll-btn.right {
right: 5px;
}

.tabs-header-container .scroll-btn:hover {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}

/* Ensure tabs container and carousel/slider are centered */
.hp-section-inner .tabs-with-sidebar-container,
.hp-section-inner .rwd-slider-main-area,
.hp-section-inner .rwd-slider-wrapper,
.hp-section-inner .collection-slider-block,
.hp-section-inner .image-carousel-block {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}


/* === layout-misc-blocks.css === */
/* =============================================================================
   Search Block Styles
   ============================================================================= */
.search-block {
margin: 30px 0;
}

.search-block .hd-search-form {
position: relative;
max-width: 600px;
margin: 0 auto;
}

.search-block .search-field {
width: 100%;
padding: 15px 60px 15px 20px;
border-radius: 30px;
border: 1px solid #ddd;
font-size: 16px;
box-sizing: border-box;
transition: all 0.3s ease;
}

.search-block .search-field:focus {
outline: none;
border-color: #2271b1;
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.search-block .search-submit {
position: absolute;
right: 5px;
top: 5px;
height: calc(100% - 10px);
border-radius: 25px;
border: none;
background: #333;
color: #fff;
padding: 0 25px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}

.search-block .search-submit:hover {
background: #2271b1;
transform: scale(1.05);
}

.search-block .search-submit .dashicons {
line-height: 1;
font-size: 20px;
}

/* Search Block Styles */
.search-block.style-standard {
background-color: #f5f5f5;
padding: 40px 20px;
border-radius: 8px;
}

.search-block.style-minimal {
background-color: transparent;
padding: 20px 0;
}

.search-block.style-minimal .search-field {
background-color: #fff;
border: 2px solid #ddd;
}

.search-block.style-minimal .search-field:focus {
border-color: #2271b1;
}

.search-block.style-colorful {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 50px 20px;
border-radius: 12px;
color: #fff;
}

.search-block.style-colorful .feature-block-title {
color: #fff;
}

.search-block.style-colorful .search-field {
background-color: rgba(255, 255, 255, 0.95);
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.search-block.style-colorful .search-field:focus {
background-color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.search-block.style-colorful .search-submit {
background: #333;
}

/* Default Standard Style Improvements */
.search-block.style-standard {
border-radius: 8px;
padding: 30px 20px;
}

.search-block .search-field {
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.search-block .search-field:focus {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #aaa;
outline: none;
}

.search-block .search-submit {
transition: all 0.3s ease;
background: #444;
}

.search-block .search-submit:hover {
background: #000;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.search-block.style-colorful .search-submit:hover {
background: #000;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 767px) {
.search-block .hd-search-form {
max-width: 100%;
}

.search-block .search-field {
padding: 12px 50px 12px 15px;
font-size: 14px;
}

.search-block .search-submit {
padding: 0 15px;
}

.search-block .search-submit .dashicons {
font-size: 18px;
}
}

/* =============================================================================
   Search Hub Block
   ============================================================================= */
.search-hub-block {
--search-hub-bg: #f7f8fb;
--search-hub-accent: #1f6feb;
--search-hub-ink: #172033;
--search-hub-muted: #667085;
margin: 30px 0;
}

.search-hub-block .feature-block-container {
background: var(--search-hub-bg);
border: 1px solid rgba(23, 32, 51, 0.08);
border-radius: 22px;
padding: 28px;
box-shadow: 0 18px 45px rgba(20, 32, 54, 0.08);
}

.search-hub-card {
display: grid;
gap: 18px;
}

.search-hub-header {
display: grid;
gap: 8px;
}

.search-hub-title {
margin-bottom: 0;
}

.search-hub-subtitle {
margin: 0;
color: var(--search-hub-muted);
font-size: 0.98rem;
line-height: 1.7;
}

.search-hub-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}

.search-hub-input {
width: 100%;
min-height: 52px;
border: 1px solid rgba(23, 32, 51, 0.16);
border-radius: 999px;
padding: 0 20px;
font-size: 1rem;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.search-hub-input:focus {
outline: none;
border-color: var(--search-hub-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--search-hub-accent) 16%, transparent);
}

.search-hub-submit,
.search-hub-overlay-trigger {
min-height: 52px;
border: 0;
border-radius: 999px;
padding: 0 22px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.search-hub-submit {
background: var(--search-hub-accent);
color: #fff;
box-shadow: 0 12px 24px color-mix(in srgb, var(--search-hub-accent) 24%, transparent);
}

.search-hub-overlay-trigger {
grid-column: 1 / -1;
justify-self: start;
background: #fff;
color: var(--search-hub-ink);
border: 1px solid rgba(23, 32, 51, 0.12);
}

.search-hub-submit:hover,
.search-hub-overlay-trigger:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(20, 32, 54, 0.14);
}

.search-hub-keywords,
.search-hub-tag-cloud {
display: grid;
gap: 10px;
margin-top: 18px;
}

.search-hub-section-title {
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--search-hub-muted);
}

.search-hub-chip-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.search-hub-chip {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
padding: 8px 13px;
background: #fff;
border: 1px solid rgba(23, 32, 51, 0.1);
color: var(--search-hub-ink);
text-decoration: none;
line-height: 1.35;
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.search-hub-chip:hover {
border-color: var(--search-hub-accent);
color: var(--search-hub-accent);
transform: translateY(-1px);
}

.search-hub-chip-count {
display: inline-grid;
place-items: center;
min-width: 1.65em;
height: 1.65em;
border-radius: 999px;
background: color-mix(in srgb, var(--search-hub-accent) 12%, transparent);
color: var(--search-hub-accent);
font-size: 0.78em;
font-weight: 800;
}

.search-hub-block.style-hero .feature-block-container {
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--search-hub-accent) 22%, transparent), transparent 38%),
linear-gradient(135deg, #101828 0%, #1b2740 100%);
color: #fff;
}

.search-hub-block.style-hero .search-hub-subtitle,
.search-hub-block.style-hero .search-hub-section-title {
color: rgba(255, 255, 255, 0.72);
}

.search-hub-block.style-hero .search-hub-chip,
.search-hub-block.style-hero .search-hub-overlay-trigger {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
}

.search-hub-block.style-compact .feature-block-container {
padding: 18px;
border-radius: 16px;
box-shadow: none;
}

.search-hub-block.style-compact .search-hub-form {
grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 767px) {
.search-hub-block .feature-block-container {
padding: 20px;
border-radius: 18px;
}

.search-hub-form {
grid-template-columns: 1fr;
}

.search-hub-submit,
.search-hub-overlay-trigger {
width: 100%;
justify-content: center;
}
}

/* =============================================================================
   Regional Link Grid Block
   ============================================================================= */
.regional-link-grid-block {
--regional-link-grid-bg: transparent;
--regional-link-grid-card: #f8f8f8;
--regional-link-grid-accent: #1f6feb;
--regional-link-grid-ink: #202632;
--regional-link-grid-muted: #6b7280;
margin: 30px 0;
}

.regional-link-grid-block .feature-block-container {
background: var(--regional-link-grid-bg);
}

.regional-link-grid-header {
display: grid;
gap: 8px;
margin-bottom: 18px;
}

.regional-link-grid-title {
margin: 0;
}

.regional-link-grid-subtitle {
margin: 0;
color: var(--regional-link-grid-muted);
line-height: 1.7;
}

.regional-link-grid {
display: grid;
grid-template-columns: repeat(var(--regional-link-grid-columns, 3), minmax(0, 1fr));
gap: 14px;
}

.regional-link-grid-card {
background: var(--regional-link-grid-card);
border: 1px solid rgba(32, 38, 50, 0.05);
border-radius: 3px;
padding: 18px 20px;
min-width: 0;
}

.regional-link-grid-card-title {
margin: 0 0 12px;
font-size: 0.96rem;
font-weight: 800;
color: var(--regional-link-grid-ink);
}

.regional-link-grid-links {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}

.regional-link-grid-link {
color: var(--regional-link-grid-muted);
font-size: 0.9rem;
line-height: 1.6;
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
}

.regional-link-grid-link:hover {
color: var(--regional-link-grid-accent);
transform: translateY(-1px);
}

.regional-link-grid-block.style-card .regional-link-grid-card {
border-radius: 18px;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.regional-link-grid-block.style-minimal .regional-link-grid-card {
background: transparent;
border-color: rgba(32, 38, 50, 0.08);
border-width: 0 0 1px;
border-radius: 0;
padding: 16px 0;
}

@media (max-width: 900px) {
.regional-link-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 600px) {
.regional-link-grid {
grid-template-columns: 1fr;
}
}

/* =============================================================================
   Content Showcase Block
   ============================================================================= */
.content-showcase-block {
--content-showcase-bg: transparent;
--content-showcase-accent: #ef3d63;
--content-showcase-ink: #1f2933;
--content-showcase-muted: #697586;
margin: 36px 0;
}

.content-showcase-block .feature-block-container {
background: var(--content-showcase-bg);
}

.content-showcase-title {
margin-bottom: 22px;
}

.content-showcase-grid {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
gap: 32px;
align-items: start;
}

.content-showcase-side,
.content-showcase-panel {
display: grid;
gap: 22px;
}

.content-showcase-panel-header {
display: grid;
gap: 7px;
margin-bottom: 2px;
}

.content-showcase-panel-header--inline {
grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
align-items: end;
gap: 18px;
}

.content-showcase-panel-header h4 {
margin: 0;
font-size: clamp(1.35rem, 2.2vw, 2rem);
line-height: 1.25;
color: var(--content-showcase-ink);
}

.content-showcase-panel-header p {
margin: 0;
color: var(--content-showcase-accent);
font-weight: 700;
}

.content-showcase-feature-intro {
color: var(--content-showcase-muted) !important;
font-size: 0.9rem;
font-weight: 500 !important;
line-height: 1.7;
}

.content-showcase-campaign-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.content-showcase-campaign-card {
display: grid;
gap: 13px;
color: var(--content-showcase-ink);
text-decoration: none;
min-width: 0;
}

.content-showcase-campaign-media,
.content-showcase-feature-media,
.content-showcase-hero-media,
.content-showcase-thumb-media {
display: block;
overflow: hidden;
background: linear-gradient(135deg, rgba(239, 61, 99, 0.18), rgba(31, 111, 235, 0.16));
}

.content-showcase-campaign-media {
aspect-ratio: 1.82;
border-radius: 2px;
}

.content-showcase-campaign-image,
.content-showcase-feature-image,
.content-showcase-hero-image,
.content-showcase-thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.content-showcase-campaign-copy {
display: grid;
gap: 4px;
font-weight: 800;
line-height: 1.55;
}

.content-showcase-campaign-copy small {
color: var(--content-showcase-muted);
font-weight: 600;
}

.content-showcase-feature-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}

.content-showcase-feature-card {
display: grid;
justify-items: center;
gap: 13px;
text-align: center;
color: var(--content-showcase-ink);
text-decoration: none;
}

.content-showcase-feature-media {
width: 120px;
height: 92px;
border-radius: 999px;
background: radial-gradient(circle, rgba(239, 61, 99, 0.15), rgba(239, 61, 99, 0.04) 58%, transparent 59%);
}

.content-showcase-feature-copy {
display: grid;
gap: 8px;
}

.content-showcase-feature-copy strong {
color: var(--content-showcase-accent);
font-weight: 900;
}

.content-showcase-feature-copy small {
color: var(--content-showcase-muted);
line-height: 1.8;
}

.content-showcase-hero {
display: grid;
gap: 18px;
}

.content-showcase-hero-card {
position: relative;
display: block;
min-height: min(54vw, 600px);
overflow: hidden;
color: #fff;
text-decoration: none;
background: #15181f;
}

.content-showcase-hero-media {
position: absolute;
inset: 0;
}

.content-showcase-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.78));
}

.content-showcase-hero-overlay {
position: absolute;
left: 28px;
right: 28px;
bottom: 28px;
display: grid;
gap: 13px;
z-index: 1;
}

.content-showcase-hero-overlay strong {
font-size: clamp(1.4rem, 2.3vw, 2.25rem);
line-height: 1.35;
letter-spacing: 0.01em;
}

.content-showcase-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.content-showcase-hero-badges span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
background: var(--content-showcase-accent);
font-size: 0.82rem;
font-weight: 800;
}

.content-showcase-thumb-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}

.content-showcase-thumb-card {
display: grid;
gap: 9px;
color: var(--content-showcase-ink);
font-weight: 800;
line-height: 1.45;
text-decoration: none;
min-width: 0;
}

.content-showcase-thumb-media {
aspect-ratio: 1.55;
}

.content-showcase-thumb-card strong {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.content-showcase-media-placeholder {
display: block;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
linear-gradient(135deg, color-mix(in srgb, var(--content-showcase-accent) 24%, #e5e7eb), #f3f4f6);
}

.content-showcase-block.style-minimal .content-showcase-hero-card,
.content-showcase-block.style-minimal .content-showcase-campaign-media,
.content-showcase-block.style-minimal .content-showcase-thumb-media {
border-radius: 0;
}

.content-showcase-block.style-magazine .content-showcase-grid {
grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
}

@media (max-width: 1100px) {
.content-showcase-grid,
.content-showcase-block.style-magazine .content-showcase-grid {
grid-template-columns: 1fr;
}

.content-showcase-hero-card {
min-height: 460px;
}
}

@media (max-width: 760px) {
.content-showcase-campaign-list,
.content-showcase-feature-list,
.content-showcase-thumb-list {
grid-template-columns: 1fr;
}

.content-showcase-panel-header--inline {
grid-template-columns: 1fr;
}

.content-showcase-hero-card {
min-height: 360px;
}

.content-showcase-hero-overlay {
left: 18px;
right: 18px;
bottom: 18px;
}
}

/* =============================================================================
   Tag Cloud Block
   ============================================================================= */
.tagcloud-block .tagcloud-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tagcloud-block.style-cloud a {
display: inline-block;
padding: 6px 14px;
background: #f5f5f5;
border-radius: 20px;
text-decoration: none;
color: #555;
transition: all 0.2s ease;
border: 1px solid transparent;
}

.tagcloud-block.style-cloud a:hover {
background: #2271b1;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(34, 113, 177, 0.2);
}

.tagcloud-block.style-cloud .size-1 { font-size: 0.85em; opacity: 0.9; }
.tagcloud-block.style-cloud .size-2 { font-size: 1.0em; font-weight: 500; }
.tagcloud-block.style-cloud .size-3 { font-size: 1.25em; font-weight: bold; }

/* =============================================================================
   Feature Content Block
   ============================================================================= */
.hd-feature-content-embed {
position: relative;
padding: 20px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}

.hd-feature-content-embed .fc-feature-image {
margin: -20px -20px 20px -20px;
}

.hd-feature-content-embed .fc-feature-image img {
width: 100%;
height: auto;
display: block;
}

.hd-feature-content-embed .fc-title {
font-size: 1.6em;
margin-bottom: 20px;
line-height: 1.3;
}

/* =============================================================================
   Collection Block: Grid Style
   ============================================================================= */
.collection-slider-block.style-grid .collection-slider {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
overflow: visible; /* Override slider overflow */
white-space: normal; /* Override slider nowrap */
}

.collection-slider-block.style-grid .collection-item {
display: block; /* Override slider inline-block */
width: auto !important; /* Override slider width */
margin-right: 0;
}

@media (max-width: 900px) {
.collection-slider-block.style-grid .collection-slider {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.collection-slider-block.style-grid .collection-slider {
grid-template-columns: 1fr;
}
}

/* ============================================
   Mobile Excerpt Hiding
   ============================================ */
@media (max-width: 767px) {
.hide-excerpt-mobile .postcard_excerpt {
display: none !important;
}
}

/* ============================================
   Title Style Variants
   ============================================ 
   NOTE: Title styles are fully defined in 
   /css/style/page-home.css to avoid conflicts.
   Do not add duplicate definitions here.
   ============================================ */

/* =========================================
   Search Block Styles
   ========================================= */
.homepage-feature-block.search-block .feature-block-container {
text-align: center;
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}

.homepage-feature-block.search-block .feature-block-title {
display: flex;
justify-content: center;
margin-bottom: 25px;
font-size: 1.5em;
color: inherit;
}

.hd-search-form {
max-width: 600px;
margin: 0 auto;
position: relative;
}

.hd-search-form__inner {
position: relative;
width: 100%;
}

.hd-search-form__input {
width: 100%;
padding: 15px 60px 15px 25px; /* Right padding for button */
border-radius: 30px;
border: 1px solid #ddd;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.hd-search-form__input:focus {
border-color: #333;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hd-search-form__submit {
position: absolute;
right: 5px;
top: 5px;
height: calc(100% - 10px);
width: 50px; /* Specific width for circle/pill button */
border-radius: 50%; /* Circle by default if only icon */
border: none;
background: #333;
color: #fff;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.hd-search-form__submit:hover {
background-color: #000;
transform: scale(1.05);
}

.hd-search-form__submit .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.homepage-feature-block.search-block .feature-block-container {
padding: 30px 15px;
}

.hd-search-form__input {
font-size: 14px;
padding: 12px 50px 12px 20px;
}
}

/* Enhanced Search Button Hover */
.hd-search-form__submit {
transition: all 0.3s ease;
}

.hd-search-form__submit:hover {
background-color: #0073aa !important; /* Use WordPress primary blue for clear contrast */
color: #fff !important;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3);
}
/* =============================================================================
   Widget Area: Inner Widget Styling
   ============================================================================= */

/* Default Style: Reset if needed */
.widget-area-wrapper.inner-style-default .widget-title {
border-left: 5px solid var(--inner-accent-color, #2271b1);
padding-left: 15px;
}

/* Theme sidebar title style */
.widget-area-wrapper.inner-style-sidebar-title .widget-title {
font-weight: 600;
text-align: left;
margin-top: 0;
margin-bottom: 10px;
padding: 10px 20px;
background-color: var(--inner-accent-color, #6E0304);
color: #fff;
font-size: 1.1rem;
}
.widget-area-wrapper.inner-style-sidebar-title .widget-title a {
color: inherit;
}

/* Centered Style */
.widget-area-wrapper.inner-style-centered .widget-title {
text-align: center;
position: relative;
padding-bottom: 15px;
margin-bottom: 20px;
}
.widget-area-wrapper.inner-style-centered .widget-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: var(--inner-accent-color, #2271b1);
margin: 10px auto 0;
}

/* Left Border Style */
.widget-area-wrapper.inner-style-left-border .widget-title {
border-left: 5px solid var(--inner-accent-color, #2271b1);
padding-left: 15px;
margin-bottom: 20px;
}

/* Bottom Border Style */
.widget-area-wrapper.inner-style-bottom-border .widget-title {
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
position: relative;
}
.widget-area-wrapper.inner-style-bottom-border .widget-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background-color: var(--inner-accent-color, #2271b1);
}


/* === homepage-title-styles.css === */
/* =============================================================================
   標題樣式系統 (Title Styles System) - v3.0
   現代化重新設計版本
   ============================================================================= */

/* 基礎樣式 - 所有標題共用 */
.hp-section-header {
margin-bottom: 20px;
}

.main-layout-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 15px;
--hp-link-color: #2271b1; /* Default link color */
}

.main-layout-title {
margin: 0;
display: flex;
align-items: center;
}

.main-layout-title i {
margin-right: 10px;
font-size: 1.3rem;
}

.main-layout-more-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--hp-link-color);
border: 1px solid var(--hp-link-color);
padding: 6px 12px;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 500;
}

.main-layout-more-link:hover {
background-color: var(--hp-link-color);
color: #fff !important;
}

.hp-section-title {
margin: 0;
display: flex;
align-items: center;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.4;
color: #1a1a2e;
}

/* 移除所有樣式的預設 :after */
.hp-section-title:after {
content: none;
}

/* =============================================================================
   樣式 1: 無樣式 (None)
   ============================================================================= */
.title-style-none .main-layout-header {
padding: 0;
margin-bottom: 15px;
}

.title-style-none .hp-section-title {
color: inherit;
}

/* =============================================================================
   樣式 2: 預設樣式 (Default) - 底部細線
   ============================================================================= */
.title-style-default .main-layout-header {
padding: 12px 0;
margin-bottom: 20px;
border-bottom: 2px solid var(--header-accent-color, #e5e5e5);
}

.title-style-default .hp-section-title {
color: #1a1a2e;
}

/* =============================================================================
   樣式 3: 左側色塊 (Side Accent) - 簡潔左邊框
   ============================================================================= */
.title-style-modern .main-layout-header,
.title-style-modern h3.hp-section-title {
padding-left: 12px;
border-left: 4px solid var(--header-accent-color, #3b82f6);
}

.title-style-modern .hp-section-title {
color: #1a1a2e;
}

/* =============================================================================
   樣式 4: 圓角標籤 (Tag) - 現代化標籤設計
   ============================================================================= */
.title-style-ribbon .hp-section-title,
.title-style-ribbon h3.hp-section-title {
background: var(--header-accent-color, #3b82f6);
color: #fff !important;
padding: 8px 16px;
border-radius: 6px;
display: inline-flex;
font-size: 1.2rem;
}

.title-style-ribbon .hp-section-title i {
color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   樣式 5: 漸層底線 (Gradient Underline) - 短漸層線
   ============================================================================= */
.title-style-purple-underline .hp-section-title,
.title-style-purple-underline h3.hp-section-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 1.4em;
font-weight: 700;
color: #1a1a1a;
}

.title-style-purple-underline .hp-section-title:after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 80px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}

/* =============================================================================
   樣式 6: 雙層底線 (Dual Line) - 主線加輔線
   ============================================================================= */
.title-style-gradient-underline .hp-section-title,
.title-style-gradient-underline h3.hp-section-title {
position: relative;
padding-bottom: 12px;
}

.title-style-gradient-underline .hp-section-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, 
var(--header-accent-color, #3b82f6) 0%,
var(--header-accent-color, #3b82f6) 60px,
#e5e5e5 60px,
#e5e5e5 100%
);
}

/* =============================================================================
   樣式 7: 點綴圓點 (Dot Accent) - 左側小圓點
   ============================================================================= */
.title-style-modern-double .hp-section-title,
.title-style-modern-double h3.hp-section-title {
position: relative;
padding-left: 18px;
}

.title-style-modern-double .hp-section-title:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: var(--header-accent-color, #3b82f6);
border-radius: 50%;
}

/* =============================================================================
   樣式 8: 居中樣式 (Centered) - 兩側短線
   ============================================================================= */
.title-style-accent-bracket .main-layout-header {
justify-content: center !important;
}

.title-style-accent-bracket .hp-section-title,
.title-style-accent-bracket h3.hp-section-title {
display: flex;
align-items: center;
gap: 12px;
}

.title-style-accent-bracket .hp-section-title:before,
.title-style-accent-bracket .hp-section-title:after {
content: '';
display: block;
width: 40px;
height: 2px;
background-color: var(--header-accent-color, #3b82f6);
}

.title-style-accent-bracket .main-layout-more-link {
position: absolute;
right: 0;
}

/* =============================================================================
   樣式 9: 左側粗線 (Left Border) - 經典左邊框
   ============================================================================= */
.title-style-left-border .hp-section-title,
.title-style-left-border h3.hp-section-title {
border-left: 5px solid var(--header-accent-color, #3b82f6);
padding-left: 15px;
}

/* =============================================================================
   樣式 10: 背景色塊 (Solid Background) - 全寬背景
   ============================================================================= */
.title-style-centered-line .main-layout-header {
background-color: var(--header-accent-color, #3b82f6);
padding: 10px 16px !important;
border-radius: 4px;
margin-bottom: 20px;
}

.title-style-centered-line .hp-section-title {
color: #fff !important;
}

.title-style-centered-line .hp-section-title i {
color: rgba(255,255,255,0.9);
}

.title-style-centered-line .main-layout-more-link {
color: #fff !important;
border-color: rgba(255,255,255,0.5) !important;
}

.title-style-centered-line .main-layout-more-link:hover {
background-color: #fff !important;
color: var(--header-accent-color, #3b82f6) !important;
}

/* =============================================================================
   樣式 11: 底線圓點 (Underline Dot) - 底線末端圓點
   ============================================================================= */
.title-style-block-bg .hp-section-title,
.title-style-block-bg h3.hp-section-title {
position: relative;
padding-bottom: 10px;
}

.title-style-block-bg .hp-section-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--header-accent-color, #3b82f6);
border-radius: 3px;
}

.title-style-block-bg .hp-section-title:before {
content: '';
position: absolute;
left: 63px;
bottom: -2px;
width: 7px;
height: 7px;
background-color: var(--header-accent-color, #3b82f6);
border-radius: 50%;
}

/* =============================================================================
   樣式 12: 簡約底線 (Simple Underline) - 純色短底線
   ============================================================================= */
.title-style-dot-accent .hp-section-title,
.title-style-dot-accent h3.hp-section-title {
position: relative;
padding-bottom: 10px;
}

.title-style-dot-accent .hp-section-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: var(--header-accent-color, #3b82f6);
border-radius: 3px;
}

/* =============================================================================
   樣式 13: 陰影標籤 (Shadow Tag) - 帶陰影的標籤
   ============================================================================= */
.title-style-two-tone .hp-section-title,
.title-style-two-tone h3.hp-section-title {
background: var(--header-accent-color, #3b82f6);
color: #fff !important;
padding: 10px 20px;
border-radius: 4px;
display: inline-flex;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.title-style-two-tone .hp-section-title i {
color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   樣式 14: 斜角標籤 (Angled Tag) - 簡化版
   ============================================================================= */
.title-style-angled-tag .hp-section-title,
.title-style-angled-tag h3.hp-section-title {
background: var(--header-accent-color, #3b82f6);
color: #fff !important;
padding: 8px 24px 8px 16px;
display: inline-flex;
border-radius: 4px 20px 20px 4px;
}

.title-style-angled-tag .hp-section-title i {
color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   樣式 15: 輕量發光 (Subtle Glow) - 柔和發光效果
   ============================================================================= */
.title-style-neon .hp-section-title,
.title-style-neon h3.hp-section-title {
color: var(--header-accent-color, #3b82f6);
text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
font-weight: 800;
}

/* =============================================================================
   樣式 16: 側邊漸層 (Side Gradient Border) - 現代感垂直漸層
   ============================================================================= */
.title-style-side-gradient-border .hp-section-title,
.title-style-side-gradient-border h3.hp-section-title {
position: relative;
padding-left: 15px;
}

.title-style-side-gradient-border .hp-section-title:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(180deg, var(--header-accent-color, #3b82f6) 0%, rgba(59, 130, 246, 0.2) 100%);
border-radius: 4px;
}

/* =============================================================================
   樣式 17: 現代粗底線 (Modern Bold Underline) - 簡約粗底線
   ============================================================================= */
.title-style-modern-bold-underline .hp-section-title,
.title-style-modern-bold-underline h3.hp-section-title {
position: relative;
padding-bottom: 12px;
}

.title-style-modern-bold-underline .hp-section-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 45px;
height: 5px;
background-color: var(--header-accent-color, #3b82f6);
border-radius: 2px;
}

/* =============================================================================
   樣式 18: 柔和玻璃 (Glass Soft)
   ============================================================================= */
.title-style-glass-soft .main-layout-header,
.title-style-glass-soft .hp-section-title {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: inline-block;
}

/* =============================================================================
   樣式 19: 霓虹發光 (Neon Glow)
   ============================================================================= */
.title-style-neon-glow .main-layout-header,
.title-style-neon-glow .hp-section-title {
color: var(--header-accent-color, #3b82f6);
text-shadow: 0 0 8px var(--header-accent-color, rgba(59, 130, 246, 0.5));
border-bottom: 2px solid var(--header-accent-color, #3b82f6);
padding-bottom: 5px;
display: inline-block;
}

/* =============================================================================
   響應式調整
   ============================================================================= */
@media (max-width: 767px) {
.hp-section-title {
font-size: 1.2rem;
}

.title-style-accent-bracket .hp-section-title:before,
.title-style-accent-bracket .hp-section-title:after {
width: 25px;
}

.title-style-ribbon .hp-section-title,
.title-style-angled-tag .hp-section-title,
.title-style-two-tone .hp-section-title {
padding: 6px 12px;
font-size: 1.1rem;
}

.title-style-centered-line .main-layout-header {
padding: 8px 12px !important;
}
}


/* === frontend-carousel.css === */
/* Image Carousel Responsive Styles */
.hd-image-carousel .swiper-pagination,
.hd-swiper-container .swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0;
row-gap: 0;
column-gap: 0;
max-width: 100%;
overflow: visible;
}

.hd-image-carousel .swiper-pagination-bullet,
.hd-swiper-container .swiper-pagination-bullet {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
margin: 0 -10px !important;
background: transparent !important;
opacity: 1;
flex: 0 0 40px;
touch-action: manipulation;
}

.hd-image-carousel .swiper-pagination-bullet::before,
.hd-swiper-container .swiper-pagination-bullet::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.8);
transition: background-color 0.2s ease, transform 0.2s ease;
}

.hd-image-carousel .swiper-pagination-bullet-active::before,
.hd-swiper-container .swiper-pagination-bullet-active::before {
background: #1e40af;
transform: scale(1.18);
}

@media (max-width: 768px) {
.hd-image-carousel .swiper-slide {
height: var(--m-height) !important;
}
}