/* ==========================================================================
   Features Section — Reusable Component
   File: ~/css/shared/features-section.css
   Usage: <link href="~/css/shared/features-section.css" rel="stylesheet" />
   Compatible with: All tool pages — home, UUID, Base64, Password, Hash, etc.
   HTML prefix: fs-  (avoids collision with section-title/section-desc)
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — Light Mode Defaults
   ========================================================================== */
:root {
    --fs-bg-section:          #f8fafc;
    --fs-bg-card:             #ffffff;
    --fs-bg-card-hover:       #f8faff;
    --fs-bg-icon:             #f0f0ff;
    --fs-bg-icon-hover:       #e0e7ff;
    --fs-border-card:         #e5e7eb;
    --fs-border-hover:        #6366f1;
    --fs-shadow-card:         0 1px 4px rgba(0, 0, 0, 0.07);
    --fs-shadow-hover:        0 10px 32px rgba(99, 102, 241, 0.14);
    --fs-text-heading:        #111827;
    --fs-text-section-sub:    #6b7280;
    --fs-text-title:          #1f2937;
    --fs-text-desc:           #6b7280;
    --fs-text-desc-hover:     #4b5563;
    --fs-text-code:           #6366f1;
    --fs-bg-code:             #eef2ff;
    --fs-accent:              #6366f1;
    --fs-accent-soft:         rgba(99, 102, 241, 0.07);
    --fs-accent-gradient:     linear-gradient(135deg, #6366f1, #818cf8);
    --fs-radius-section:      20px;
    --fs-radius-card:         14px;
    --fs-radius-icon:         14px;
    --fs-transition:          all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES — Dark Mode Overrides
   ========================================================================== */
.dark-mode,
[data-theme="dark"],
[data-bs-theme="dark"] {
    --fs-bg-section:          #0f1117;
    --fs-bg-card:             #1a1d2e;
    --fs-bg-card-hover:       #1e2235;
    --fs-bg-icon:             #252840;
    --fs-bg-icon-hover:       #2d3155;
    --fs-border-card:         #2a2d3e;
    --fs-border-hover:        #6366f1;
    --fs-shadow-card:         0 1px 4px rgba(0, 0, 0, 0.35);
    --fs-shadow-hover:        0 10px 32px rgba(99, 102, 241, 0.22);
    --fs-text-heading:        #f1f5f9;
    --fs-text-section-sub:    #94a3b8;
    --fs-text-title:          #e2e8f0;
    --fs-text-desc:           #94a3b8;
    --fs-text-desc-hover:     #cbd5e1;
    --fs-text-code:           #a5b4fc;
    --fs-bg-code:             #1e2140;
    --fs-accent-soft:         rgba(99, 102, 241, 0.12);
}

/* OS-level dark mode fallback */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode):not([data-theme="light"]):not([data-bs-theme="light"]) {
        --fs-bg-section:          #0f1117;
        --fs-bg-card:             #1a1d2e;
        --fs-bg-card-hover:       #1e2235;
        --fs-bg-icon:             #252840;
        --fs-bg-icon-hover:       #2d3155;
        --fs-border-card:         #2a2d3e;
        --fs-border-hover:        #6366f1;
        --fs-shadow-card:         0 1px 4px rgba(0, 0, 0, 0.35);
        --fs-shadow-hover:        0 10px 32px rgba(99, 102, 241, 0.22);
        --fs-text-heading:        #f1f5f9;
        --fs-text-section-sub:    #94a3b8;
        --fs-text-title:          #e2e8f0;
        --fs-text-desc:           #94a3b8;
        --fs-text-desc-hover:     #cbd5e1;
        --fs-text-code:           #a5b4fc;
        --fs-bg-code:             #1e2140;
        --fs-accent-soft:         rgba(99, 102, 241, 0.12);
    }
}


/* ==========================================================================
   3. SECTION WRAPPER
   ========================================================================== */
.fs-section {
    background: var(--fs-bg-section);
    border-radius: var(--fs-radius-section);
    padding: 3.5rem 2.5rem;
    margin: 3rem 0 4rem;
    transition: background 0.2s ease;
}

/* Backward-compatible alias — existing pages using .features-section still work */
.features-section {
    background: var(--fs-bg-section);
    border-radius: var(--fs-radius-section);
    padding: 3.5rem 2.5rem;
    margin: 3rem 0 4rem;
    transition: background 0.2s ease;
}


/* ==========================================================================
   4. SECTION HEADER
   ========================================================================== */
.fs-header,
.features-section .features-header {
    text-align: center;
    margin-bottom: 2.75rem;
}

/* Section badge pill */
.fs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.125rem;
    background: var(--fs-accent-gradient);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}

/* Title */
.fs-title,
.features-section h2,
.features-section .features-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--fs-text-heading);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}

/* Subtitle / description */
.fs-desc,
.features-section .features-header p,
.features-section > p.features-subtitle {
    font-size: 1rem;
    color: var(--fs-text-section-sub);
    margin: 0 auto;
    max-width: 580px;
    line-height: 1.65;
    transition: color 0.2s ease;
}


/* ==========================================================================
   5. GRID LAYOUT
   ========================================================================== */

/* New fs- prefix grid */
.fs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.375rem;
}

.fs-grid-item {
    display: flex;
}

/* Column variants */
.fs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fs-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Legacy .features-grid — kept for backward compatibility */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.375rem;
}

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


/* ==========================================================================
   6. FEATURE CARD
   ========================================================================== */
.fs-card,
.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 2rem 1.5rem 1.75rem;
    background: var(--fs-bg-card);
    border: 1px solid var(--fs-border-card);
    border-radius: var(--fs-radius-card);
    box-shadow: var(--fs-shadow-card);
    text-align: center;
    overflow: hidden;
    transition: var(--fs-transition);
    width: 100%;                /* ensures flex children fill grid cell */
}

/* Top accent bar — revealed on hover */
.fs-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fs-accent-gradient);
    opacity: 0;
    transition: opacity 0.22s ease;
    border-radius: var(--fs-radius-card) var(--fs-radius-card) 0 0;
    pointer-events: none;
}

/* Soft background glow on hover */
.fs-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fs-accent-soft);
    opacity: 0;
    transition: opacity 0.22s ease;
    border-radius: var(--fs-radius-card);
    pointer-events: none;
}

.fs-card:hover,
.feature-card:hover {
    background: var(--fs-bg-card-hover);
    border-color: var(--fs-border-hover);
    box-shadow: var(--fs-shadow-hover);
    transform: translateY(-5px);
}

.fs-card:hover::before,
.feature-card:hover::before {
    opacity: 1;
}

.fs-card:hover::after,
.feature-card:hover::after {
    opacity: 1;
}


/* ==========================================================================
   7. FEATURE ICON
   ========================================================================== */
.fs-icon,
.feature-card .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    background: var(--fs-bg-icon);
    border-radius: var(--fs-radius-icon);
    font-size: 1.875rem;
    line-height: 1;
    flex-shrink: 0;
    transition: var(--fs-transition);
    position: relative;
    z-index: 1;
}

.fs-card:hover .fs-icon,
.feature-card:hover .feature-icon {
    background: var(--fs-bg-icon-hover);
    transform: scale(1.1) rotate(-3deg);
}


/* ==========================================================================
   8. CARD TEXT
   ========================================================================== */

/* Title */
.fs-card-title,
.feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fs-text-title);
    margin: 0;
    line-height: 1.3;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

/* Description */
.fs-card-desc,
.feature-card p {
    font-size: 0.9375rem;
    color: var(--fs-text-desc);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

.fs-card:hover .fs-card-title,
.feature-card:hover h3 {
    color: var(--fs-accent);
}

.fs-card:hover .fs-card-desc,
.feature-card:hover p {
    color: var(--fs-text-desc-hover);
}

/* Inline code in descriptions */
.fs-card-desc code,
.feature-card p code {
    font-size: 0.8125rem;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    color: var(--fs-text-code);
    background: var(--fs-bg-code);
    padding: 1px 6px;
    border-radius: 5px;
    transition: color 0.2s ease, background 0.2s ease;
}

/* kbd in descriptions */
.fs-card-desc kbd,
.feature-card p kbd {
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--fs-bg-code);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--fs-text-code);
    font-family: monospace;
}


/* ==========================================================================
   9. ICON COLOR UTILITIES
   Scoped to .fs-section and .features-section — no global pollution
   ========================================================================== */
.fs-section .bg-primary-soft,
.features-section .bg-primary-soft { background: rgba(102, 126, 234, 0.1); }

.fs-section .bg-success-soft,
.features-section .bg-success-soft { background: rgba( 40, 167,  69, 0.1); }

.fs-section .bg-warning-soft,
.features-section .bg-warning-soft { background: rgba(255, 193,   7, 0.1); }

.fs-section .bg-danger-soft,
.features-section .bg-danger-soft  { background: rgba(220,  53,  69, 0.1); }

.fs-section .bg-info-soft,
.features-section .bg-info-soft    { background: rgba( 23, 162, 184, 0.1); }

.fs-section .bg-purple-soft,
.features-section .bg-purple-soft  { background: rgba(118,  75, 162, 0.1); }

.fs-section .bg-orange-soft,
.features-section .bg-orange-soft  { background: rgba(253, 126,  20, 0.1); }

.fs-section .text-purple,
.features-section .text-purple { color: #764ba2; }

.fs-section .text-orange,
.features-section .text-orange { color: #fd7e14; }


/* ==========================================================================
   10. OPTIONAL — ICON COUNT BADGE
   Usage: <div class="fs-icon" data-count="01">...</div>
   NOTE: uses ::before to avoid conflict with card's ::after glow layer
   ========================================================================== */
.fs-icon[data-count]::before,
.feature-card .feature-icon[data-count]::before {
    content: attr(data-count);
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    background: var(--fs-accent);
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}


/* ==========================================================================
   11. BOTTOM CTA
   ========================================================================== */
.fs-cta {
    margin-top: 2rem;
    text-align: center;
}

.fs-btn-all {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.875rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--fs-accent-gradient);
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.32);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fs-btn-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.44);
    color: #ffffff;
    text-decoration: none;
}

.fs-btn-all:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet — 3 columns → 2 columns */
@media (max-width: 1024px) {
    .fs-grid    { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }

    .fs-section,
    .features-section { padding: 2.5rem 1.5rem; }
}

/* Large mobile — 2 columns, tighter gap */
@media (max-width: 640px) {
    .fs-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .fs-section,
    .features-section {
        padding: 2rem 1rem;
        margin: 2rem 0 3rem;
        border-radius: 14px;
    }

    .fs-title,
    .features-section h2,
    .features-section .features-header h2 {
        font-size: 1.375rem;
    }

    .fs-card,
    .feature-card {
        padding: 1.5rem 1rem 1.25rem;
        gap: 0.625rem;
    }

    .fs-icon,
    .feature-card .feature-icon {
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.625rem;
    }

    .fs-card-title,
    .feature-card h3 { font-size: 0.9375rem; }

    .fs-card-desc,
    .feature-card p  { font-size: 0.875rem; }
}

/* Small mobile — 1 column */
@media (max-width: 400px) {
    .fs-grid,
    .features-grid { grid-template-columns: 1fr; }
}