/*
F3L1X Unified Card System
Resolves conflicts between: service-card, glass-card, tilt-card, service-item, box-item
Version: 1.0.0
*/

/* ===========================================
   UNIFIED CSS VARIABLES
   Single source of truth for all card styling
   =========================================== */
:root {
    /* Card Backgrounds - unified */
    --card-bg: rgba(30, 41, 59, 0.6);
    --card-bg-hover: rgba(30, 41, 59, 0.8);
    --card-bg-glass: rgba(255, 255, 255, 0.03);
    --card-bg-glass-hover: rgba(255, 255, 255, 0.06);

    /* Card Borders */
    --card-border: rgba(59, 130, 246, 0.2);
    --card-border-hover: rgba(59, 130, 246, 0.4);
    --card-border-glass: rgba(255, 255, 255, 0.08);
    --card-border-glass-hover: rgba(255, 255, 255, 0.15);

    /* Card Effects */
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    --card-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.3);
    --card-blur: 16px;
    --card-radius: 20px;
    --card-radius-sm: 12px;

    /* Card Transforms */
    --card-lift: -6px;
    --card-lift-sm: -4px;
    --card-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===========================================
   BASE CARD CLASS
   Apply to any card element
   =========================================== */
.f3l1x-card {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    overflow: hidden;
    position: relative;
}

.f3l1x-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(var(--card-lift));
}

/* ===========================================
   CARD VARIANTS
   =========================================== */

/* Glass variant - more transparent */
.f3l1x-card--glass {
    background: var(--card-bg-glass);
    border-color: var(--card-border-glass);
}

.f3l1x-card--glass:hover {
    background: var(--card-bg-glass-hover);
    border-color: var(--card-border-glass-hover);
}

/* Solid variant - no transparency */
.f3l1x-card--solid {
    background: var(--f3l1x-bg-card, #1e293b);
    backdrop-filter: none;
}

/* Small variant */
.f3l1x-card--sm {
    border-radius: var(--card-radius-sm);
    --card-lift: var(--card-lift-sm);
}

/* No hover effect */
.f3l1x-card--static {
    --card-lift: 0;
}

.f3l1x-card--static:hover {
    transform: none;
}

/* ===========================================
   CARD INNER CONTENT
   =========================================== */
.f3l1x-card__content {
    padding: 30px;
}

.f3l1x-card__content--lg {
    padding: 40px;
}

.f3l1x-card__content--sm {
    padding: 20px;
}

.f3l1x-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    color: var(--f3l1x-blue-primary, #3b82f6);
}

.f3l1x-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--f3l1x-text-primary, #ffffff);
}

.f3l1x-card__description {
    color: var(--f3l1x-text-muted, #94a3b8);
    line-height: 1.6;
}

/* ===========================================
   SHINE EFFECT
   Glass shine on hover
   =========================================== */
.f3l1x-card--shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.f3l1x-card--shine:hover::before {
    left: 100%;
}

/* ===========================================
   3D TILT VARIANT
   For cards with perspective transforms
   =========================================== */
.f3l1x-card--3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.f3l1x-card--3d:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
}

.f3l1x-card--3d .f3l1x-card__content {
    transform: translateZ(20px);
}

/* ===========================================
   BACKWARDS COMPATIBILITY LAYER
   Maps old class names to new system
   =========================================== */

/* service-card (from style.css) */
.service-card {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(var(--card-lift));
}

/* service-item (from f3l1x-dark-theme.css) */
.service-item {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow) !important;
    transition: var(--card-transition);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-item:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(var(--card-lift));
}

/* box-item (from f3l1x-dark-theme.css) */
.box-item {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow) !important;
    transition: var(--card-transition);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.box-item:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(var(--card-lift));
}

/* glass-card (from bento-glass.css) - already consistent, just ensure uniformity */
.glass-card {
    background: var(--card-bg-glass);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border-glass);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.glass-card:hover {
    background: var(--card-bg-glass-hover);
    border-color: var(--card-border-glass-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(var(--card-lift));
}

/* tilt-card (from parallax.css) */
.tilt-card {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    transform-style: preserve-3d;
}

.tilt-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

/* stat-card-3d (from parallax.css) */
.stat-card-3d {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    transform-style: preserve-3d;
}

.stat-card-3d:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

/* testimonial-card (from style.css) */
.testimonial-card {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    padding: 2rem;
}

.testimonial-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(var(--card-lift-sm));
}

/* ===========================================
   CARD CONTENT TYPOGRAPHY & SPACING
   Uniform text styling across all card types
   =========================================== */

/* Card headers - consistent spacing */
.service-card h4,
.service-item h4,
.box-item h4,
.glass-card h4,
.tilt-card h4,
.testimonial-card h4 {
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Card paragraphs - balanced text */
.service-card p,
.service-item p,
.box-item p,
.glass-card p,
.tilt-card p,
.testimonial-card p {
    max-width: 45ch;
    text-wrap: balance;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Card CTAs - push to bottom */
.service-card .text-button,
.service-item .text-button,
.box-item .text-button,
.glass-card .text-button,
.service-card a[class*="button"],
.service-item a[class*="button"],
.box-item a[class*="button"] {
    margin-top: auto;
    padding-top: 16px;
}

/* Card icon spacing */
.service-card .icon,
.service-item .icon,
.box-item .icon {
    margin-bottom: 16px;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 768px) {
    :root {
        --card-blur: 10px;
        --card-lift: -4px;
        --card-lift-sm: -2px;
        --card-radius: 16px;
        --card-radius-sm: 10px;
    }

    .f3l1x-card__content {
        padding: 20px;
    }

    .f3l1x-card__content--lg {
        padding: 25px;
    }
}

/* ===========================================
   REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .f3l1x-card,
    .service-card,
    .service-item,
    .box-item,
    .glass-card,
    .tilt-card,
    .stat-card-3d,
    .testimonial-card {
        transition: none !important;
    }

    .f3l1x-card--shine::before {
        display: none;
    }
}

/* ===========================================
   GLOBAL LINK RESET
   Remove all underlines from links
   This section MUST be at the end to override Bootstrap
   =========================================== */

/* Universal link reset */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}

/* Navigation links */
.header-area a,
.header-area .nav a,
.header-area .main-nav a,
.header-area .main-nav .nav li a,
nav a,
.navbar a,
.nav-link {
    text-decoration: none !important;
}

/* Footer links */
footer a,
.footer-widget a,
.footer-widget ul li a,
.copyright-text a {
    text-decoration: none !important;
}

/* Button-style links */
.btn,
.btn-primary,
.btn-secondary,
.gradient-button a,
.border-button a,
.white-button a,
[class*="button"] a,
button {
    text-decoration: none !important;
}

/* Documentation and content links */
.docs-category a,
.docs-category ul li a,
.quick-link,
.quick-links a {
    text-decoration: none !important;
}

/* Card links */
.service-card a,
.f3l1x-card a,
.glass-card a,
.tilt-card a,
.box-item a,
.text-button a {
    text-decoration: none !important;
}

/* Override any hover underlines */
a:hover,
.footer-widget a:hover,
nav a:hover,
.docs-category a:hover {
    text-decoration: none !important;
}

/* ===========================================
   HEADING LINE DECORATION (CSS replacement for heading-line-dec.png)
   =========================================== */
.heading-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--f3l1x-blue-primary, #3b82f6), var(--f3l1x-purple, #8b5cf6));
    border-radius: 2px;
    margin: 20px auto;
    display: block;
}

.heading-line--left {
    margin-left: 0;
    margin-right: auto;
}

.heading-line--wide {
    width: 120px;
}

/* ===========================================
   Z-INDEX FIXES
   Ensure buttons are above floating images
   =========================================== */

/* Left content with buttons should be above floating images */
.main-banner .left-content,
.main-banner .header-text,
.left-content {
    position: relative;
    z-index: 10;
}

/* Buttons should always be clickable */
.white-button,
.gradient-button,
.border-button {
    position: relative;
    z-index: 20;
}

/* Floating/parallax images should be behind content */
.right-image,
.float-element,
[data-mouse-parallax],
[data-float] {
    z-index: 1;
}

/* Ensure clickable elements are above decorative elements */
a.white-button,
a.gradient-button,
.white-button a,
.gradient-button a,
.border-button a {
    position: relative;
    z-index: 25;
}