/* ==========================================================================
   HOMEPAGE SPECIFIC STYLES
   ========================================================================== */

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

.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: 15px;
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: #f9a825;
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;
}

.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: #90a4ae;
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: #90a4ae;
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, #667eea, #764ba2);
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, #667eea, #764ba2);
}

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

.ranking-badge.pr-badge {
background: #90a4ae; /* 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;
}

/* =========================================
   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: 0;
margin-right: 0;
padding-top: var(--block-padding-top, 25px);
padding-bottom: var(--block-padding-bottom, 25px);
padding-left: 25px;
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 {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

.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, #667eea, #764ba2);
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, #667eea, #764ba2);
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, #667eea 0%, #764ba2 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;
}

.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: #667eea;
}

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

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

.category-card-more:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}

/* ==========================================================================
   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: #667eea;
}

.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: #667eea;
background: #fff;
}

/* Gradient Style */
.category-cards-block.style-gradient .category-card-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 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, #667eea, #764ba2);
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: #667eea;
}

.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, #667eea, #764ba2);
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, #667eea, #764ba2);
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, #667eea, #764ba2);
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, #667eea, #764ba2);
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, #667eea, #764ba2);
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;
}

/* 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 {
padding-top: 0;
padding-bottom: 0;
}

.hp-padding--small {
padding-top: 20px;
padding-bottom: 20px;
}

.hp-padding--normal {
padding-top: 40px;
padding-bottom: 40px;
}

.hp-padding--large {
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 {
padding-top: 15px;
padding-bottom: 15px;
}

.hp-padding--normal {
padding-top: 30px;
padding-bottom: 30px;
}

.hp-padding--large {
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 { padding-top: 0; padding-bottom: 0; }
.hp-padding--small { padding-top: 20px; padding-bottom: 20px; }
.hp-padding--normal { padding-top: 40px; padding-bottom: 40px; }
.hp-padding--large { padding-top: 80px; padding-bottom: 80px; }

/* Responsive adjustments */
@media screen and (max-width: 767px) {
.hp-padding--normal { padding-top: 30px; padding-bottom: 30px; }
.hp-padding--large { 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, #667eea, #764ba2);
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, #667eea 0%, #764ba2 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;
}