/**
 * Feature Content - Shared Utilities
 * 
 * 共用元件樣式（按鈕、標籤、覆蓋層等）
 * 
 * @package Feature_Content
 * @since 2.1.0
 */

/* =========================================================================
   Buttons
   ========================================================================= */
.fc-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border-radius: var(--fc-border-radius);
    transition: all var(--fc-transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
}

.fc-btn--primary {
    background: var(--fc-primary-color);
    color: #fff;
    border-color: var(--fc-primary-color);
}
.fc-btn--primary:hover {
    background: var(--fc-primary-dark);
    border-color: var(--fc-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--fc-shadow-md);
}

.fc-btn--secondary {
    background: transparent;
    color: currentColor;
    border-color: currentColor;
}
.fc-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.fc-btn--gradient {
    background: linear-gradient(135deg, var(--fc-primary-color) 0%, var(--fc-secondary-color) 100%);
    color: #fff;
    border: none;
}
.fc-btn--gradient:hover {
    background: linear-gradient(135deg, var(--fc-primary-dark) 0%, #0090c9 100%);
    transform: translateY(-2px);
    box-shadow: var(--fc-shadow-md);
}

.fc-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: currentColor;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}
.fc-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.fc-btn--sm {
    padding: 8px 20px;
    font-size: 14px;
}

.fc-btn--lg {
    padding: 16px 36px;
    font-size: 18px;
}

/* =========================================================================
   Labels & Badges
   ========================================================================= */
.fc-label {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--fc-font-xs);
    font-weight: 600;
    border-radius: var(--fc-border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-label--pr {
    background: #e74c3c;
    color: #fff;
}

.fc-label--sponsor {
    background: var(--fc-primary-color);
    color: #fff;
}

.fc-label--new {
    background: #27ae60;
    color: #fff;
}

/* Sponsor Display */
.fc-sponsor {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fc-font-sm);
}

.fc-sponsor__label {
    background: #e74c3c;
    color: #fff;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 2px;
}

.fc-sponsor__name {
    opacity: 0.9;
}

/* =========================================================================
   Overlay
   ========================================================================= */
.fc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fc-overlay--dark {
    background: rgba(0, 0, 0, 0.4);
}

.fc-overlay--gradient {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* =========================================================================
   Text Utilities
   ========================================================================= */
.fc-text-left { text-align: left; }
.fc-text-center { text-align: center; }
.fc-text-right { text-align: right; }

.fc-text-primary { color: var(--fc-primary-color); }
.fc-text-light { color: var(--fc-text-light); }
.fc-text-muted { color: var(--fc-text-muted); }
.fc-text-white { color: #fff; }

/* Typography utilities */
.fc-line-height-tight { line-height: var(--fc-line-height-tight); }
.fc-line-height-snug { line-height: var(--fc-line-height-snug); }
.fc-line-height-normal { line-height: var(--fc-line-height-normal); }
.fc-line-height-relaxed { line-height: var(--fc-line-height-relaxed); }
.fc-line-height-loose { line-height: var(--fc-line-height-loose); }

.fc-font-weight-normal { font-weight: 400; }
.fc-font-weight-medium { font-weight: 500; }
.fc-font-weight-semibold { font-weight: 600; }
.fc-font-weight-bold { font-weight: 700; }

/* =========================================================================
   Spacing Utilities
   ========================================================================= */
.fc-mt-0 { margin-top: 0; }
.fc-mt-sm { margin-top: var(--fc-spacing-sm); }
.fc-mt-md { margin-top: var(--fc-spacing-md); }
.fc-mt-lg { margin-top: var(--fc-spacing-lg); }

.fc-mb-0 { margin-bottom: 0; }
.fc-mb-sm { margin-bottom: var(--fc-spacing-sm); }
.fc-mb-md { margin-bottom: var(--fc-spacing-md); }
.fc-mb-lg { margin-bottom: var(--fc-spacing-lg); }

.fc-py-sm { padding-top: var(--fc-spacing-sm); padding-bottom: var(--fc-spacing-sm); }
.fc-py-md { padding-top: var(--fc-spacing-md); padding-bottom: var(--fc-spacing-md); }
.fc-py-lg { padding-top: var(--fc-spacing-lg); padding-bottom: var(--fc-spacing-lg); }
.fc-py-xl { padding-top: var(--fc-spacing-xl); padding-bottom: var(--fc-spacing-xl); }

/* Padding Top - Block Level Spacing */
.fc-pt-none { padding-top: 0 !important; }
.fc-pt-xs { padding-top: 8px !important; }
.fc-pt-sm { padding-top: 16px !important; }
.fc-pt-md { padding-top: 32px !important; }
.fc-pt-lg { padding-top: 48px !important; }
.fc-pt-xl { padding-top: 64px !important; }
.fc-pt-xxl { padding-top: 96px !important; }

/* Padding Bottom - Block Level Spacing */
.fc-pb-none { padding-bottom: 0 !important; }
.fc-pb-xs { padding-bottom: 8px !important; }
.fc-pb-sm { padding-bottom: 16px !important; }
.fc-pb-md { padding-bottom: 32px !important; }
.fc-pb-lg { padding-bottom: 48px !important; }
.fc-pb-xl { padding-bottom: 64px !important; }
.fc-pb-xxl { padding-bottom: 96px !important; }

/* Padding Left - Block Level Spacing */
.fc-pl-none { padding-left: 0 !important; }
.fc-pl-xs { padding-left: 8px !important; }
.fc-pl-sm { padding-left: 16px !important; }
.fc-pl-md { padding-left: 32px !important; }
.fc-pl-lg { padding-left: 48px !important; }
.fc-pl-xl { padding-left: 64px !important; }
.fc-pl-xxl { padding-left: 96px !important; }

/* Padding Right - Block Level Spacing */
.fc-pr-none { padding-right: 0 !important; }
.fc-pr-xs { padding-right: 8px !important; }
.fc-pr-sm { padding-right: 16px !important; }
.fc-pr-md { padding-right: 32px !important; }
.fc-pr-lg { padding-right: 48px !important; }
.fc-pr-xl { padding-right: 64px !important; }
.fc-pr-xxl { padding-right: 96px !important; }


/* =========================================================================
   Grid & Flex Utilities
   ========================================================================= */
.fc-flex { display: flex; }
.fc-flex-center { display: flex; align-items: center; justify-content: center; }
.fc-flex-between { display: flex; align-items: center; justify-content: space-between; }
.fc-flex-wrap { flex-wrap: wrap; }
.fc-flex-col { flex-direction: column; }

.fc-gap-sm { gap: var(--fc-spacing-sm); }
.fc-gap-md { gap: var(--fc-spacing-md); }
.fc-gap-lg { gap: var(--fc-spacing-lg); }

/* Grid */
.fc-grid {
    display: grid;
    gap: var(--fc-spacing-md);
}

.fc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .fc-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .fc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fc-grid--4,
    .fc-grid--3,
    .fc-grid--2 { grid-template-columns: 1fr; }
}