/**
 * Feature Content - Lazy Card Module (Enhanced v2)
 * 
 * 懶人包 / 連結卡片樣式 - 支援多種版面配置
 * 
 * @package Feature_Content
 */

/* ==========================================
   CSS Custom Properties (Defaults)
   ========================================== */
.fc-lazy-card-container {
--fc-lazy-columns: 2;
--fc-lazy-gap: 20px;
--fc-lazy-gap-tablet: 20px;
--fc-lazy-gap-mobile: 16px;
--fc-lazy-v-gap: 16px;
--fc-lazy-arrow-spacing: 50px;
--fc-lazy-ratio: 16/9;
--fc-lazy-img-width: 35%;
--fc-lazy-bg: #fff;
--fc-lazy-text: inherit;
--fc-lazy-radius: 12px;
}

/* ==========================================
   Base Container Styles
   ========================================== */
.fc-lazy-card-container {
width: 100%;
margin-bottom: 1.5rem;
}

.fc-lazy-card__grid {
display: grid;
gap: var(--fc-lazy-gap);
}

/* ==========================================
   Layout: Horizontal (Default) - Side by Side
   ========================================== */
.fc-lazy-card--horizontal .fc-lazy-card__grid,
.fc-lazy-card--left .fc-lazy-card__grid {
grid-template-columns: 1fr;
}

.fc-lazy-card--horizontal .fc-lazy-card__link,
.fc-lazy-card--left .fc-lazy-card__link {
display: flex;
flex-direction: row;
align-items: stretch;
}

.fc-lazy-card--horizontal .fc-lazy-card__media,
.fc-lazy-card--left .fc-lazy-card__media {
width: var(--fc-lazy-img-width);
min-width: 100px;
flex-shrink: 0;
aspect-ratio: var(--fc-lazy-ratio);
}

/* ==========================================
   Layout: Vertical - Image Top, Content Bottom
   ========================================== */
.fc-lazy-card--vertical .fc-lazy-card__grid {
grid-template-columns: repeat(var(--fc-lazy-columns), 1fr);
}

.fc-lazy-card--vertical .fc-lazy-card__link {
display: flex;
flex-direction: column;
}

.fc-lazy-card--vertical .fc-lazy-card__media {
width: 100%;
aspect-ratio: var(--fc-lazy-ratio);
}

/* ==========================================
   Layout: Grid - Multi-column Grid
   ========================================== */
.fc-lazy-card--grid .fc-lazy-card__grid {
grid-template-columns: repeat(var(--fc-lazy-columns), 1fr);
}

.fc-lazy-card--grid .fc-lazy-card__link {
display: flex;
flex-direction: column;
height: 100%;
}

.fc-lazy-card--grid .fc-lazy-card__media {
width: 100%;
aspect-ratio: var(--fc-lazy-ratio);
}

/* ==========================================
   Layout: List - Compact Horizontal List
   ========================================== */
.fc-lazy-card--list .fc-lazy-card__grid {
grid-template-columns: 1fr;
}

.fc-lazy-card--list .fc-lazy-card__link {
display: flex;
flex-direction: row;
align-items: center;
}

.fc-lazy-card--list .fc-lazy-card__media {
width: var(--fc-lazy-img-width, 100px);
min-width: 80px;
max-width: 200px;
aspect-ratio: var(--fc-lazy-ratio);
flex-shrink: 0;
}

.fc-lazy-card--list .fc-lazy-card__content {
padding: 12px 16px;
}

.fc-lazy-card--list .fc-lazy-card__title {
font-size: 1rem;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

.fc-lazy-card--list .fc-lazy-card__desc {
display: none;
}

/* ==========================================
   Layout: Compact - Minimal Style
   ========================================== */
.fc-lazy-card--compact .fc-lazy-card__grid {
grid-template-columns: repeat(var(--fc-lazy-columns), 1fr);
gap: calc(var(--fc-lazy-gap) / 2);
}

.fc-lazy-card--compact .fc-lazy-card__link {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
}

.fc-lazy-card--compact .fc-lazy-card__media {
width: var(--fc-lazy-img-width, 60px);
min-width: 40px;
max-width: 100px;
aspect-ratio: 1/1;
border-radius: 8px;
flex-shrink: 0;
}

.fc-lazy-card--compact .fc-lazy-card__content {
padding: 0 12px;
}

.fc-lazy-card--compact .fc-lazy-card__title {
font-size: 0.9rem;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.fc-lazy-card--compact .fc-lazy-card__desc,
.fc-lazy-card--compact .fc-lazy-card__meta,
.fc-lazy-card--compact .fc-lazy-card__more {
display: none;
}

/* ==========================================
   Image Position Modifiers
   ========================================== */
.fc-lazy-card--img-left .fc-lazy-card__link {
flex-direction: row;
}

.fc-lazy-card--img-right .fc-lazy-card__link {
flex-direction: row-reverse;
}

.fc-lazy-card--img-top .fc-lazy-card__link {
flex-direction: column;
}

.fc-lazy-card--img-bottom .fc-lazy-card__link {
flex-direction: column-reverse;
}

.fc-lazy-card--img-none .fc-lazy-card__media {
display: none;
}

/* ==========================================
   Shadow Modifier
   ========================================== */
.fc-lazy-card--shadow .fc-lazy-card__item {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.fc-lazy-card--shadow .fc-lazy-card__item:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* ==========================================
   Card Style Modifiers
   ========================================== */
/* Card Style (Default) - With shadow and border-radius */
.fc-lazy-card--style-card .fc-lazy-card__item {
background: var(--fc-lazy-bg);
border-radius: var(--fc-lazy-radius);
overflow: hidden;
}

/* Minimal Style - No background, subtle border */
.fc-lazy-card--style-minimal .fc-lazy-card__item {
background: transparent;
border-radius: 0;
box-shadow: none;
}

.fc-lazy-card--style-minimal .fc-lazy-card__link {
padding: 0;
}

/* Bordered Style - Visible border */
.fc-lazy-card--style-bordered .fc-lazy-card__item {
background: var(--fc-lazy-bg);
border: 2px solid var(--fc-lazy-border-color, #e0e0e0);
border-radius: var(--fc-lazy-radius);
box-shadow: none;
}

.fc-lazy-card--style-bordered .fc-lazy-card__item:hover {
border-color: #bbb;
}

/* Solid Border Style - Single solid border with accent color */
.fc-lazy-card--style-solid-border .fc-lazy-card__item {
background: var(--fc-lazy-bg);
border: 2px solid var(--fc-lazy-border-color, var(--fc-lazy-accent, #0073aa));
border-radius: var(--fc-lazy-radius);
box-shadow: none;
}

.fc-lazy-card--style-solid-border .fc-lazy-card__item:hover {
border-color: var(--fc-lazy-accent, #005177);
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.15);
}

/* Filled Style - Solid background */
.fc-lazy-card--style-filled .fc-lazy-card__item {
background: var(--fc-lazy-bg);
border-radius: var(--fc-lazy-radius);
}



/* ==========================================
   Card Item Base Styles
   ========================================== */
.fc-lazy-card__item {
position: relative;
background: var(--fc-lazy-bg);
color: var(--fc-lazy-text);
border-radius: var(--fc-lazy-radius);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}



.fc-lazy-card__item:hover {
transform: translateY(-3px);
}

.fc-lazy-card--hover-none .fc-lazy-card__item:hover {
transform: none;
box-shadow: inherit; /* Prevent extra shadow on hover if needed */
}

.fc-lazy-card--hover-scale .fc-lazy-card__item:hover {
transform: scale(1.02);
}

.fc-lazy-card--hover-glow .fc-lazy-card__item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(0, 115, 170, 0.25);
}

.fc-lazy-card--hover-border .fc-lazy-card__item {
transition: border-color 0.3s ease, transform 0.3s ease;
}

.fc-lazy-card--hover-border .fc-lazy-card__item:hover {
transform: translateY(-3px);
border-color: var(--fc-lazy-accent, #0073aa);
}

.fc-lazy-card__link {
display: flex;
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
}

/* ==========================================
   Media Element
   ========================================== */
.fc-lazy-card__media {
position: relative;
overflow: hidden;
flex-shrink: 0;
min-height: 0;
background: #f0f0f0;
}

.fc-lazy-card__media img,
.fc-lazy-card__image-bg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
background-size: cover;
background-position: center;
}

.fc-lazy-card__item:hover .fc-lazy-card__media img,
.fc-lazy-card__item:hover .fc-lazy-card__image-bg {
transform: scale(1.05);
}

/* ==========================================
   Content Area
   ========================================== */
.fc-lazy-card__content {
padding: var(--fc-lazy-v-gap, 16px) 20px;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
min-width: 0;
}

.fc-lazy-card__cat {
display: inline-block;
background: var(--fc-cat-bg, var(--primary-color, #007bff));
color: var(--fc-cat-color, #fff);
padding: 3px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 8px;
align-self: flex-start;
}

/* Category Style Variants */
/* Solid (default) - no additional styles needed */

/* Outline */
.fc-lazy-card--cat-outline .fc-lazy-card__cat {
background: transparent;
border: 1px solid var(--fc-cat-bg, var(--primary-color, #007bff));
color: var(--fc-cat-color, var(--fc-cat-bg, var(--primary-color, #007bff)));
}

/* Pill */
.fc-lazy-card--cat-pill .fc-lazy-card__cat {
border-radius: 50px;
padding: 4px 12px;
}

/* Flat */
.fc-lazy-card--cat-flat .fc-lazy-card__cat {
background: var(--fc-cat-bg, rgba(0, 123, 255, 0.1));
color: var(--fc-cat-color, var(--primary-color, #007bff));
border-radius: 2px;
}

/* Tag */
.fc-lazy-card--cat-tag .fc-lazy-card__cat {
background: var(--fc-cat-bg, #f0f0f0);
color: var(--fc-cat-color, #333);
border-radius: 2px;
font-weight: 500;
text-transform: none;
}

.fc-lazy-card__title {
margin: 0 0 8px 0;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.4;
color: inherit;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.fc-lazy-card__desc {
margin: 0 0 12px 0;
font-size: 0.9rem;
line-height: 1.5;
color: inherit;
opacity: 0.75;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.fc-lazy-card__meta {
display: flex;
gap: 12px;
font-size: 0.8rem;
color: inherit;
opacity: 0.6;
flex-wrap: wrap;
margin-top: auto;
}

.fc-lazy-card__date,
.fc-lazy-card__author {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}

.fc-lazy-card__more {
margin-top: 12px;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color, #007bff);
display: inline-flex;
align-items: center;
gap: 4px;
}

/* ==========================================
   RWD Image Width Override
   ========================================== */
@media (max-width: 1024px) {
.fc-lazy-card--horizontal .fc-lazy-card__media,
.fc-lazy-card--left .fc-lazy-card__media,
.fc-lazy-card--ranking .fc-lazy-card__media {
width: var(--fc-lazy-img-width-tablet, var(--fc-lazy-img-width));
}
}

@media (max-width: 768px) {
.fc-lazy-card--horizontal .fc-lazy-card__media,
.fc-lazy-card--left .fc-lazy-card__media,
.fc-lazy-card--ranking .fc-lazy-card__media {
width: var(--fc-lazy-img-width-mobile, var(--fc-lazy-img-width-tablet, var(--fc-lazy-img-width)));
}
}

/* ==========================================
   Responsive Design
   ========================================== */
@media (max-width: 992px) {
.fc-lazy-card--vertical .fc-lazy-card__grid,
.fc-lazy-card--grid .fc-lazy-card__grid {
grid-template-columns: repeat(min(var(--fc-lazy-columns), 2), 1fr);
}

.fc-lazy-card--compact .fc-lazy-card__grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.fc-lazy-card--horizontal .fc-lazy-card__link {
flex-direction: column;
}

.fc-lazy-card--horizontal .fc-lazy-card__media {
width: 100%;
max-width: none;
aspect-ratio: var(--fc-lazy-ratio);
}

.fc-lazy-card--vertical .fc-lazy-card__grid,
.fc-lazy-card--grid .fc-lazy-card__grid {
grid-template-columns: 1fr;
}

/*.fc-lazy-card--img-left .fc-lazy-card__link,
.fc-lazy-card--img-right .fc-lazy-card__link {
flex-direction: column;
}*/

.fc-lazy-card__title {
font-size: 1rem;
}

.fc-lazy-card__content {
padding: 12px 16px;
}

.fc-lazy-card__meta {
font-size: 0.75rem;
}
}

@media (max-width: 480px) {
.fc-lazy-card--list .fc-lazy-card__media {
width: 80px;
height: 60px;
}

.fc-lazy-card--compact .fc-lazy-card__media {
width: 50px;
height: 50px;
}
}

/* ==========================================
   Layout: Ranking - Numbered List with Medals
   ========================================== */
.fc-lazy-card--ranking .fc-lazy-card__grid {
grid-template-columns: 1fr;
}

.fc-lazy-card--ranking .fc-lazy-card__item {
display: flex;
align-items: stretch;
position: relative;
}

.fc-lazy-card--ranking .fc-lazy-card__media {
width: var(--fc-lazy-img-width, 100px);
min-width: 0;
aspect-ratio: var(--fc-lazy-ratio);
flex-shrink: 0;
margin-right: 15px;
}

/* Rank Positioning */

/* Default / Image Left */
.fc-lazy-card--rank-pos-image-left .fc-lazy-card__link { margin-left: 0; }
.fc-lazy-card--rank-pos-image-left .fc-lazy-card__media .fc-lazy-card__rank {
top: 50%;
left: 10px;
transform: translateY(-50%);
}

/* Image Top Left */
.fc-lazy-card--rank-pos-image-top-left .fc-lazy-card__link { margin-left: 0; }
.fc-lazy-card--rank-pos-image-top-left .fc-lazy-card__media .fc-lazy-card__rank {
top: 10px;
left: 10px;
transform: none;
}

/* Image Top Right */
.fc-lazy-card--rank-pos-image-top-right .fc-lazy-card__link { margin-left: 0; }
.fc-lazy-card--rank-pos-image-top-right .fc-lazy-card__media .fc-lazy-card__rank {
top: 10px;
right: 10px;
left: auto;
transform: none;
}

/* Outside Left */
.fc-lazy-card--rank-pos-outside-left .fc-lazy-card__link { margin-left: 45px; }
.fc-lazy-card--rank-pos-outside-left .fc-lazy-card__media .fc-lazy-card__rank {
left: -45px;
top: 50%;
transform: translateY(-50%);
}

.fc-lazy-card--ranking .fc-lazy-card__link {
display: flex;
flex-direction: row;
align-items: stretch;
flex: 1;
/* margin-left: 45px; Removed base margin, handled by pos modifiers */
}

.fc-lazy-card__rank {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
border-radius: 50%;
background: var(--fc-lazy-accent, #0073aa);
color: #fff;
z-index: 2;
}

.fc-lazy-card__rank--medal {
background: transparent !important;
font-size: 1.5rem;
}

/* Rank Colors (Gold, Silver, Bronze) */
.fc-lazy-card__rank--top-1 { background: #FFD700; color: #fff; }
.fc-lazy-card__rank--top-2 { background: #C0C0C0; color: #fff; }
.fc-lazy-card__rank--top-3 { background: #CD7F32; color: #fff; }

.fc-lazy-card__rank--badge {
border-radius: 4px;
width: auto;
padding: 4px 10px;
}

/* Top 3 Special Colors */
.fc-lazy-card__item--top1 .fc-lazy-card__rank { background: linear-gradient(135deg, #FFD700, #FFA500); }
.fc-lazy-card__item--top2 .fc-lazy-card__rank { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); }
.fc-lazy-card__item--top3 .fc-lazy-card__rank { background: linear-gradient(135deg, #CD7F32, #8B4513); }

/* ==========================================
   Block Header (Title & Description)
   ========================================== */
.fc-lazy-card__header {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
}

.fc-lazy-card__header-content {
flex: 1;
}

.fc-lazy-card__block-title {
margin: 0 0 8px 0;
font-size: 1.5rem;
font-weight: 700;
}

.fc-lazy-card__block-desc {
margin: 0;
opacity: 0.7;
font-size: 0.95rem;
}

/* Header Navigation Buttons */
.fc-lazy-card__header-nav {
display: flex;
gap: 8px;
flex-shrink: 0;
margin-bottom: 5px; /* Align with title baseline roughly */
}

.fc-lazy-card__header-nav .swiper-button-prev,
.fc-lazy-card__header-nav .swiper-button-next {
position: static !important; /* Override absolute positioning */
margin: 0 !important;
width: 32px !important;
height: 32px !important;
border-radius: 50%;
background: rgba(0, 0, 0, 0.05);
color: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.fc-lazy-card__header-nav .swiper-button-prev::after,
.fc-lazy-card__header-nav .swiper-button-next::after {
font-size: 14px !important;
font-weight: bold;
}

.fc-lazy-card__header-nav .swiper-button-prev:hover,
.fc-lazy-card__header-nav .swiper-button-next:hover {
background: var(--fc-lazy-accent, #0073aa);
color: #fff;
}


/* ==========================================
   Badge (On Image)
   ========================================== */
.fc-lazy-card__badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--fc-lazy-accent, #e74c3c);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}

/* ==========================================
   Favicon
   ========================================== */
.fc-lazy-card__favicon {
border-radius: 2px;
vertical-align: middle;
}

/* ==========================================
   Carousel Mode (Swiper Integration)
   ========================================== */
.fc-lazy-card--carousel.fc-lazy-card-container {
position: relative;
padding: 0 var(--fc-lazy-arrow-spacing, 50px); /* Space for external arrows */
}

.fc-lazy-card--carousel .fc-lazy-card__swiper {
position: relative;
overflow: hidden; /* Required for Swiper to work */
}

.fc-lazy-card--carousel .swiper-slide {
height: auto;
}

/* External Arrow Styling - positioned relative to carousel container */
/* High specificity to override Swiper defaults */
.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-prev,
.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-next,
.fc-lazy-card--carousel > .swiper-button-prev,
.fc-lazy-card--carousel > .swiper-button-next {
position: absolute !important;
top: var(--fc-lazy-arrow-top, 50%) !important;
color: var(--fc-arrow-color, var(--fc-lazy-accent, #0073aa)) !important;
background: var(--fc-arrow-bg, rgba(255, 255, 255, 0.95)) !important;
width: var(--fc-arrow-size, 40px) !important;
height: var(--fc-arrow-size, 40px) !important;
min-width: var(--fc-arrow-size, 40px) !important;
max-width: var(--fc-arrow-size, 40px) !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
transition: all 0.3s ease !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
margin-top: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}

.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-prev::after,
.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-next::after,
.fc-lazy-card--carousel > .swiper-button-prev::after,
.fc-lazy-card--carousel > .swiper-button-next::after {
font-family: swiper-icons !important;
font-size: var(--fc-arrow-icon-size, 14px) !important;
font-weight: bold !important;
}

.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-prev::after,
.fc-lazy-card--carousel > .swiper-button-prev::after {
content: 'prev' !important;
}

.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-next::after,
.fc-lazy-card--carousel > .swiper-button-next::after {
content: 'next' !important;
}

.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-prev:hover,
.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-next:hover,
.fc-lazy-card--carousel > .swiper-button-prev:hover,
.fc-lazy-card--carousel > .swiper-button-next:hover {
background: var(--fc-arrow-hover-bg, var(--fc-lazy-accent, #0073aa)) !important;
color: var(--fc-arrow-hover-color, #fff) !important;
transform: translateY(-50%) scale(1.1) !important;
}

/* Position arrows at container edges */
.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-prev,
.fc-lazy-card--carousel > .swiper-button-prev {
left: 5px !important;
}

.fc-lazy-card--carousel.fc-lazy-card-container > .swiper-button-next,
.fc-lazy-card--carousel > .swiper-button-next {
right: 5px !important;
}

/* Swiper container spacing */
.fc-lazy-card--carousel .fc-lazy-card__swiper {
padding-top: var(--fc-swiper-pt, 0);
padding-bottom: var(--fc-swiper-pb, 0);
}

.fc-lazy-card--carousel .swiper-pagination {
position: relative;
margin-top: 15px;
}

.fc-lazy-card--carousel .swiper-pagination-bullet-active {
background: var(--fc-lazy-accent, #0073aa);
}

/* ==========================================
   Carousel Arrow Style Variants
   ========================================== */
/* Arrow Size - CSS Variable */
.fc-lazy-card--carousel {
--fc-arrow-size: 44px;
--fc-arrow-icon-size: 18px;
}

/* Circle Style */
.fc-lazy-card--arrow-circle > .swiper-button-prev,
.fc-lazy-card--arrow-circle > .swiper-button-next {
width: var(--fc-arrow-size, 44px) !important;
height: var(--fc-arrow-size, 44px) !important;
min-width: var(--fc-arrow-size, 44px);
max-width: var(--fc-arrow-size, 44px);
background: var(--fc-lazy-accent, #0073aa);
color: #fff;
border-radius: 50%;
}

.fc-lazy-card--arrow-circle > .swiper-button-prev::after,
.fc-lazy-card--arrow-circle > .swiper-button-next::after {
font-size: var(--fc-arrow-icon-size, 18px);
}

/* Square Style */
.fc-lazy-card--arrow-square > .swiper-button-prev,
.fc-lazy-card--arrow-square > .swiper-button-next {
width: var(--fc-arrow-size, 44px) !important;
height: var(--fc-arrow-size, 44px) !important;
min-width: var(--fc-arrow-size, 44px);
max-width: var(--fc-arrow-size, 44px);
background: var(--fc-lazy-accent, #0073aa);
color: #fff;
border-radius: 0;
}

.fc-lazy-card--arrow-square > .swiper-button-prev::after,
.fc-lazy-card--arrow-square > .swiper-button-next::after {
font-size: var(--fc-arrow-icon-size, 18px);
}

/* Rounded Style */
.fc-lazy-card--arrow-rounded > .swiper-button-prev,
.fc-lazy-card--arrow-rounded > .swiper-button-next {
width: calc(var(--fc-arrow-size, 44px) + 4px) !important;
height: var(--fc-arrow-size, 44px) !important;
min-width: calc(var(--fc-arrow-size, 44px) + 4px);
max-width: calc(var(--fc-arrow-size, 44px) + 4px);
background: var(--fc-lazy-accent, #0073aa);
color: #fff;
border-radius: 8px;
}

.fc-lazy-card--arrow-rounded > .swiper-button-prev::after,
.fc-lazy-card--arrow-rounded > .swiper-button-next::after {
font-size: var(--fc-arrow-icon-size, 18px);
}

/* Minimal Style */
.fc-lazy-card--arrow-minimal > .swiper-button-prev,
.fc-lazy-card--arrow-minimal > .swiper-button-next {
width: auto;
height: auto;
background: transparent;
color: var(--fc-lazy-accent, #0073aa);
box-shadow: none;
}

.fc-lazy-card--arrow-minimal > .swiper-button-prev::after,
.fc-lazy-card--arrow-minimal > .swiper-button-next::after {
font-size: calc(var(--fc-arrow-icon-size, 18px) + 6px);
font-weight: bold;
}

.fc-lazy-card--arrow-minimal > .swiper-button-prev:hover,
.fc-lazy-card--arrow-minimal > .swiper-button-next:hover {
background: transparent;
color: var(--fc-lazy-text, #333);
}

/* Link hover - no underline */
.fc-lazy-card__link:hover,
.fc-lazy-card__link:focus,
.fc-lazy-card__link:active {
text-decoration: none !important;
}

.fc-lazy-card__link *,
.fc-lazy-card__link *:hover {
text-decoration: none !important;
}

/* Responsive Gap - Tablet */
@media (max-width: 1024px) {
.fc-lazy-card__grid {
gap: var(--fc-lazy-gap-tablet, var(--fc-lazy-gap));
}
}

/* Responsive Gap - Mobile */
@media (max-width: 768px) {
.fc-lazy-card__grid {
gap: var(--fc-lazy-gap-mobile, var(--fc-lazy-gap-tablet));
}

.fc-lazy-card--carousel.fc-lazy-card-container {
padding: 0 calc(var(--fc-lazy-arrow-spacing, 50px) - 10px);
}

.fc-lazy-card--carousel > .swiper-button-prev,
.fc-lazy-card--carousel > .swiper-button-next {
width: 34px !important;
height: 34px !important;
min-width: 34px;
max-width: 34px;
}

.fc-lazy-card--carousel > .swiper-button-prev::after,
.fc-lazy-card--carousel > .swiper-button-next::after {
font-size: 12px;
}
}

@media (max-width: 768px) {
.fc-lazy-card--ranking .fc-lazy-card__link {
margin-left: 40px;
}

.fc-lazy-card__rank {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
}

/* ==========================================
   Dark Mode Support
   ========================================== */
@media (prefers-color-scheme: dark) {
.fc-lazy-card-container {
--fc-lazy-bg: #2d2d2d;
--fc-lazy-text: #e5e5e5;
}

.fc-lazy-card--style-bordered .fc-lazy-card__item {
border-color: rgba(255, 255, 255, 0.1);
}

.fc-lazy-card__media {
background: #3d3d3d;
}
}

/* ==========================================
   Legacy Support (Old Class Names)
   ========================================== */
.fc-lazy-card-container--left .fc-lazy-card__link { flex-direction: row; }
.fc-lazy-card-container--left .fc-lazy-card__media { width: 40%; max-width: 300px; }
.fc-lazy-card-container--right .fc-lazy-card__link { flex-direction: row-reverse; }
.fc-lazy-card-container--right .fc-lazy-card__media { width: 40%; max-width: 300px; }
.fc-lazy-card-container--top .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card-container--top .fc-lazy-card__media { width: 100%; aspect-ratio: 16/9; }
.fc-lazy-card-container--bottom .fc-lazy-card__link { flex-direction: column-reverse; }
.fc-lazy-card-container--bottom .fc-lazy-card__media { width: 100%; aspect-ratio: 16/9; }

/* Old element names */
.fc-lazy-card { 
position: relative;
border-radius: var(--fc-lazy-radius, 12px);
background-color: var(--fc-lazy-bg, #fff);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fc-lazy-card--shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.fc-lazy-card__category { 
background: var(--primary-color, #007bff);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.fc-lazy-card__excerpt { 
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.85;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fc-lazy-card__meta-top { margin-bottom: 10px; }
.fc-lazy-card__meta-bottom { 
display: flex;
gap: 15px;
font-size: 0.85rem;
opacity: 0.75;
margin-top: auto;
}
.fc-lazy-card__footer { 
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(0,0,0,0.05);
}
.fc-lazy-card__read-more {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-color, #007bff);
display: inline-flex;
align-items: center;
gap: 5px;
}

/* ==========================================
   Category Position Variants
   ========================================== */
/* On Image - Category badge overlaid on image */
.fc-lazy-card--cat-on-image .fc-lazy-card__cat {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}

.fc-lazy-card--cat-on-image .fc-lazy-card__media {
position: relative;
}

/* Below Title */
.fc-lazy-card--cat-below-title .fc-lazy-card__cat {
order: 1;
margin-top: 8px;
margin-bottom: 0;
}

.fc-lazy-card--cat-below-title .fc-lazy-card__title {
order: 0;
}

/* Left of Image */
.fc-lazy-card--cat-left-image .fc-lazy-card__cat {
writing-mode: vertical-rl;
text-orientation: mixed;
padding: 8px 5px;
border-radius: 0 4px 4px 0;
margin: 0;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}

.fc-lazy-card--cat-left-image .fc-lazy-card__item {
position: relative;
}

.fc-lazy-card--cat-left-image .fc-lazy-card__link {
margin-left: 24px;
}

/* ==========================================
   Read More Button Styles
   ========================================== */
/* Link Style (default) */

.fc-lazy-card__more,
.fc-lazy-card__more--link {
background: transparent;
color: var(--fc-more-color, var(--primary-color, #007bff));
font-size: 0.85rem;
font-weight: 600;
margin-top: 10px;
display: inline-flex;
align-items: center;
}

.fc-lazy-card__more:hover,
.fc-lazy-card__more--link:hover {
opacity: 0.8;
}

/* Button Style */
.fc-lazy-card__more--button,
.fc-lazy-card__read-more-btn {
background: var(--fc-more-bg, var(--primary-color, #007bff));
color: var(--fc-more-color, #fff) !important;
padding: 8px 16px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
font-size: 0.85rem;
margin-top: 10px;
transition: all 0.2s ease;
}

.fc-lazy-card__more--button:hover,
.fc-lazy-card__read-more-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Arrow Only Style (Circle) */
.fc-lazy-card__more--arrow,
.fc-lazy-card__read-more-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--fc-more-bg, var(--primary-color, #007bff));
color: var(--fc-more-color, #fff);
border-radius: 50%;
font-size: 16px;
margin-top: 10px;
margin-left: auto;
transition: all 0.2s ease;
}

.fc-lazy-card__more--arrow:hover,
.fc-lazy-card__read-more-arrow:hover {
transform: translateX(3px) scale(1.05);
}

/* Common Arrow Span */
.fc-read-more-arrow {
margin-left: 6px;
display: inline-block;
transition: transform 0.2s;
}

.fc-lazy-card__more:hover .fc-read-more-arrow,
.fc-lazy-card__read-more-btn:hover .fc-read-more-arrow {
transform: translateX(4px);
}

/* ==========================================
   Favicon with Site URL
   ========================================== */
.fc-lazy-card__favicon-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
}

.fc-lazy-card__site-url {
font-size: 0.75rem;
color: #888;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}




/* ==========================================
   Responsive Layout Utilities
   ========================================== */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
/* Tablet: Horizontal */
.fc-lazy-card--tablet-horizontal .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--tablet-horizontal .fc-lazy-card__link { flex-direction: row; }
.fc-lazy-card--tablet-horizontal .fc-lazy-card__media { width: var(--fc-lazy-img-width); min-width: 100px; margin: 0; }

/* Tablet: Vertical */
.fc-lazy-card--tablet-vertical .fc-lazy-card__grid { grid-template-columns: repeat(var(--fc-lazy-columns), 1fr); }
.fc-lazy-card--tablet-vertical .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--tablet-vertical .fc-lazy-card__media { width: 100%; margin: 0; }

/* Tablet: List */
.fc-lazy-card--tablet-list .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--tablet-list .fc-lazy-card__link { flex-direction: row; align-items: center; }
.fc-lazy-card--tablet-list .fc-lazy-card__media { width: var(--fc-lazy-img-width, 100px); max-width: 200px; margin: 0; }

/* Tablet: Grid */
.fc-lazy-card--tablet-grid .fc-lazy-card__grid { grid-template-columns: repeat(var(--fc-lazy-columns), 1fr); }
.fc-lazy-card--tablet-grid .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--tablet-grid .fc-lazy-card__media { width: 100%; margin: 0; }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
/* Mobile: Horizontal */
.fc-lazy-card--mobile-horizontal .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--mobile-horizontal .fc-lazy-card__link { flex-direction: row; }
.fc-lazy-card--mobile-horizontal .fc-lazy-card__media { width: var(--fc-lazy-img-width); min-width: 100px; margin: 0; }

/* Mobile: Vertical (Force 1 column for better stacking) */
.fc-lazy-card--mobile-vertical .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--mobile-vertical .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--mobile-vertical .fc-lazy-card__media { width: 100%; margin-bottom: 12px; }

/* Mobile: List */
.fc-lazy-card--mobile-list .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--mobile-list .fc-lazy-card__link { flex-direction: row; align-items: center; }
.fc-lazy-card--mobile-list .fc-lazy-card__media { width: 80px; min-width: 60px; margin-right: 12px; }

/* Mobile: Grid (Respect columns or default to 1 if too cramped) */
.fc-lazy-card--mobile-grid .fc-lazy-card__grid { grid-template-columns: repeat(var(--fc-lazy-columns), 1fr); }
.fc-lazy-card--mobile-grid .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--mobile-grid .fc-lazy-card__media { width: 100%; margin-bottom: 10px; }

/* Mobile: Compact */
.fc-lazy-card--mobile-compact .fc-lazy-card__grid { grid-template-columns: 1fr; }
.fc-lazy-card--mobile-compact .fc-lazy-card__link { padding: 8px; }
}

/* --- Tablet: Image Position Overrides --- */
@media (max-width: 1024px) {
.fc-lazy-card--tablet-img-left .fc-lazy-card__link { flex-direction: row; }
.fc-lazy-card--tablet-img-left .fc-lazy-card__media { width: var(--fc-lazy-img-width); aspect-ratio: var(--fc-lazy-ratio); margin-right: 20px; margin-bottom: 0; }

.fc-lazy-card--tablet-img-right .fc-lazy-card__link { flex-direction: row-reverse; }
.fc-lazy-card--tablet-img-right .fc-lazy-card__media { width: var(--fc-lazy-img-width); aspect-ratio: var(--fc-lazy-ratio); margin-left: 20px; margin-bottom: 0; }

.fc-lazy-card--tablet-img-top .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--tablet-img-top .fc-lazy-card__media { width: 100%; aspect-ratio: var(--fc-lazy-ratio); margin: 0 0 16px 0; }

.fc-lazy-card--tablet-img-bottom .fc-lazy-card__link { flex-direction: column-reverse; }
.fc-lazy-card--tablet-img-bottom .fc-lazy-card__media { width: 100%; aspect-ratio: var(--fc-lazy-ratio); margin: 16px 0 0 0; }

.fc-lazy-card--tablet-img-none .fc-lazy-card__media { display: none !important; }

/* Tablet: Responsive Columns Override */
.fc-lazy-card--tablet-vertical .fc-lazy-card__grid,
.fc-lazy-card--tablet-grid .fc-lazy-card__grid {
grid-template-columns: repeat(var(--fc-lazy-columns-tablet), 1fr);
}
}

/* --- Mobile: Image Position Overrides --- */
@media (max-width: 768px) {
.fc-lazy-card--mobile-img-left .fc-lazy-card__link { flex-direction: row; }
.fc-lazy-card--mobile-img-left .fc-lazy-card__media { width: 35%; min-width: 100px; margin-right: 12px; margin-bottom: 0; }

.fc-lazy-card--mobile-img-right .fc-lazy-card__link { flex-direction: row-reverse; }
.fc-lazy-card--mobile-img-right .fc-lazy-card__media { width: 35%; min-width: 100px; margin-left: 12px; margin-bottom: 0; }

.fc-lazy-card--mobile-img-top .fc-lazy-card__link { flex-direction: column; }
.fc-lazy-card--mobile-img-top .fc-lazy-card__media { width: 100%; margin: 0 0 12px 0; }

.fc-lazy-card--mobile-img-bottom .fc-lazy-card__link { flex-direction: column-reverse; }
.fc-lazy-card--mobile-img-bottom .fc-lazy-card__media { width: 100%; margin: 12px 0 0 0; }

.fc-lazy-card--mobile-img-none .fc-lazy-card__media { display: none !important; }

/* Mobile: Responsive Columns Override */
.fc-lazy-card--mobile-vertical .fc-lazy-card__grid,
.fc-lazy-card--mobile-grid .fc-lazy-card__grid {
grid-template-columns: repeat(var(--fc-lazy-columns-mobile), 1fr);
}
}

/* Width Utilities (Self-contained backup) */
/* Width Utilities (Self-contained backup) */
.fc-lazy-card.fc-width-fullwidth,
.fc-lazy-card-container.fc-width-fullwidth {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

.fc-lazy-card.fc-width-wide,
.fc-lazy-card-container.fc-width-wide {
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}

.fc-lazy-card.fc-width-normal,
.fc-lazy-card-container.fc-width-normal {
width: 100% !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}

.fc-lazy-card.fc-width-centered,
.fc-lazy-card-container.fc-width-centered {
width: 100% !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* ==========================================
   Title Line Clamp (Dynamic via CSS Variable)
   ========================================== */
.fc-lazy-card__title {
-webkit-line-clamp: var(--fc-lazy-title-lines, 2);
}

/* ==========================================
   Hover Animation Variants
   ========================================== */
/* Default: Lift (already defined in base) */

/* Scale */
.fc-lazy-card--hover-scale .fc-lazy-card__item:hover {
transform: scale(1.02);
}

/* Glow */
.fc-lazy-card--hover-glow .fc-lazy-card__item:hover {
transform: none;
box-shadow: 0 0 20px rgba(0, 115, 170, 0.3), 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Border */
.fc-lazy-card--hover-border .fc-lazy-card__item {
border: 2px solid transparent;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.fc-lazy-card--hover-border .fc-lazy-card__item:hover {
transform: none;
border-color: var(--fc-lazy-accent, #0073aa);
}

/* None - Disable all hover effects */
.fc-lazy-card--hover-none .fc-lazy-card__item:hover {
transform: none;
box-shadow: inherit;
}


.fc-lazy-card--hover-none .fc-lazy-card__item:hover .fc-lazy-card__media img {
transform: none;
}

/* Image Position: None (Desktop) */
.fc-lazy-card--img-none .fc-lazy-card__media {
display: none !important;
}

/* ==========================================
   Image Lazy Load + Fade In Animation
   ========================================== */
.fc-lazy-card__media img {
opacity: 0;
animation: fcLazyFadeIn 0.5s ease forwards;
}

.fc-lazy-card__media img[loading="lazy"] {
opacity: 0;
}

.fc-lazy-card__media img.loaded,
.fc-lazy-card__media img:not([loading="lazy"]) {
opacity: 1;
}

@keyframes fcLazyFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* Read More Position Alignment */
.fc-read-more-pos--left {
align-self: flex-start;
}

.fc-read-more-pos--center {
align-self: center;
}


/* Footer Container (Author + Favicon) */
.fc-lazy-card__footer {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
}

/* Ensure Footer pushes to bottom if Meta is empty or missing */
.fc-lazy-card__meta + .fc-lazy-card__footer {
margin-top: 8px;
}

/* .fc-lazy-card__content > .fc-lazy-card__footer:last-child,
.fc-lazy-card__content > .fc-lazy-card__footer:nth-last-child(2) {
   margin-top: auto;  Let Meta handle auto margin if present, otherwise Footer
} */

/* Favicon Wrapper */
.fc-lazy-card__favicon-wrap {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
color: inherit;
opacity: 0.9;
}

.fc-lazy-card__favicon {
flex-shrink: 0;
}

.fc-lazy-card__site-url {
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}


/* ==========================================
   Customization Overrides
   ========================================== */
/* Carousel Arrow Vertical Position */
.fc-lazy-card--carousel .swiper-button-next,
.fc-lazy-card--carousel .swiper-button-prev {
top: var(--fc-lazy-arrow-top, 50%) !important;
}

/* Ensure border color applies if explicitly set, even for hover states if desired */
.fc-lazy-card-container[style*="--fc-lazy-border-color"] .fc-lazy-card--style-bordered .fc-lazy-card__item:hover,
.fc-lazy-card-container[style*="--fc-lazy-border-color"] .fc-lazy-card--style-solid-border .fc-lazy-card__item:hover {
border-color: var(--fc-lazy-border-color) !important;
}