/* Component Styles */

@layer components {

    /* Base */
    .btn {
        /* core layout & interaction */
        @apply inline-flex items-center justify-center gap-2 select-none rounded-[14px] font-semibold;

        /* motion (safe in v3) */
        @apply transition-colors duration-150;

        /* accessibility rings */
        @apply focus-visible:outline-none focus-visible:ring-2 ring-0 ring-offset-1 ring-offset-transparent;

        /* states */
        @apply disabled:opacity-60 disabled:pointer-events-none active:ring-2 active:ring-offset-2;
    }

    .btn-sm {
        @apply px-4 py-2 text-sm;
    }

    .btn-md {
        @apply px-5 py-3 text-sm;
    }

    .btn-lg {
        @apply px-6 py-3.5 text-base;
    }

    /* Primary (orange) */
    .btn-primary {
        @apply text-white bg-[hsl(var(--flame))] hover:bg-[hsl(var(--flame)/0.9)] active:bg-[hsl(var(--flame)/0.85)] focus-visible:ring-[hsl(var(--electric))] active:ring-[hsl(var(--flame))];
    }

    /* Accent (blue) */
    .btn-accent {
        @apply text-white bg-[hsl(var(--electric))] hover:bg-[hsl(var(--electric)/0.9)] active:bg-[hsl(var(--electric)/0.85)] focus-visible:ring-[hsl(var(--electric))] active:ring-[hsl(var(--electric))];
    }

    /* Secondary (neutral) */
    .btn-secondary {
        @apply text-white border border-white/10 bg-white/5 hover:bg-white/10 active:bg-white/15 focus-visible:ring-[hsl(var(--electric))] active:ring-[hsl(var(--electric))];
    }

    /* ============================================
       RESPONSIVE COMPARISON COMPONENT
       Prevents horizontal scroll on all devices
       - Mobile (<768px): Stacked cards with labels
       - Desktop (>=768px): Clean table layout
       ============================================ */
    
    /* Mobile-first: Stacked card layout */
    .comparison-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .comparison-row {
        display: flex;
        flex-direction: column;
        gap: clamp(0.75rem, 2vw, 1rem);
        padding: clamp(1rem, 3vw, 1.5rem);
        border-bottom: 1px solid hsl(var(--border) / 0.3);
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    
    .comparison-row:last-child {
        border-bottom: none;
    }
    
    .comparison-label {
        font-weight: 600;
        font-size: clamp(0.875rem, 2vw, 1rem);
        color: hsl(var(--foreground));
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    }
    
    .comparison-values {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(0.75rem, 3vw, 1rem);
    }
    
    .comparison-value {
        padding: clamp(0.75rem, 2vw, 1rem);
        border-radius: 0.5rem;
        font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
        line-height: 1.5;
        word-break: break-word;
        box-sizing: border-box;
    }
    
    .comparison-value-traditional {
        background: hsl(var(--muted) / 0.3);
        color: hsl(var(--muted-foreground));
        border: 1px solid hsl(var(--border) / 0.2);
    }
    
    .comparison-value-agnite {
        background: hsl(var(--primary) / 0.1);
        color: hsl(var(--accent));
        font-weight: 600;
        border: 1px solid hsl(var(--primary) / 0.2);
    }
    
    .comparison-value-label {
        display: block;
        font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.7;
        margin-bottom: 0.25rem;
    }
    
    /* Desktop: Table layout */
    @media (min-width: 768px) {
        .comparison-table-wrapper {
            overflow-x: visible;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: clamp(1rem, 2vw, 1.5rem);
            text-align: center;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .comparison-table th:first-child,
        .comparison-table td:first-child {
            text-align: left;
            font-weight: 600;
        }
        
        .comparison-table thead tr {
            border-bottom: 2px solid hsl(var(--primary) / 0.2);
        }
        
        .comparison-table tbody tr {
            border-bottom: 1px solid hsl(var(--border) / 0.1);
        }
        
        .comparison-table tbody tr:last-child {
            border-bottom: none;
        }
        
        .comparison-table th {
            font-weight: 700;
            font-size: clamp(0.875rem, 1.5vw, 1.125rem);
            padding-bottom: clamp(0.75rem, 2vw, 1rem);
        }
        
        .comparison-table td {
            font-size: clamp(0.875rem, 1.2vw, 1rem);
        }
        
        .comparison-table .traditional-col {
            color: hsl(var(--muted-foreground));
        }
        
        .comparison-table .agnite-col {
            color: hsl(var(--accent));
            font-weight: 600;
        }
    }

    /* ============================================
       ABOUT: OUR STORY MOBILE SPACING FIXES
       Cause: Excess vertical spacing from stacked paddings (section + card + inner flex)
       Fix: Use clamp() paddings on mobile, ensure border-box, normalize gaps and image sizing.
       Desktop/tablet remain unchanged.
       ============================================ */
    .about-our-story {
        box-sizing: border-box;
    }

    @media (max-width: 767.98px) {
        .about-our-story {
            /* Tighter vertical rhythm on mobile using fluid clamp */
            padding-top: clamp(1rem, 4vw, 1.5rem);
            padding-bottom: clamp(1.25rem, 5vw, 1.75rem);
        }

        .about-our-story .story-grid {
            /* Normalize grid gap between text and visual */
            gap: clamp(0.75rem, 4vw, 1rem);
        }

        .about-our-story .story-card {
            /* Reduce inner padding to avoid double-padding stacking with section */
            padding: clamp(0.75rem, 4vw, 1rem);
            box-sizing: border-box;
        }

        .about-our-story .story-visual {
            /* Reduce fixed height on mobile for better balance */
            height: clamp(10rem, 35vw, 14rem);
        }

        .about-our-story img,
        .about-our-story svg {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
}