/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
            /* Colors */
            --surface: #f9f9f9;
            --surface-container-lowest: #ffffff;
            --surface-container: #eeeeee;
            --surface-variant: #e2e2e2;
            --surface-dim: #dadada;
            --primary: #000000;
            --secondary: #5d5f5f;
            --on-surface: #1a1c1c;
            --on-surface-variant: #4c4546;
            --on-primary: #ffffff;

            /* Spacing */
            --container-max: 128.0rem;
            --margin-desktop: 4.0rem;
            --margin-mobile: 1.6rem;
            --gutter: 2.4rem;
            --space-16-24: clamp(1.6rem, 1.182rem + 0.896vw, 2.4rem);
            --space-32-64: clamp(3.2rem, 1.6rem + 4.0vw, 6.4rem);

            /* Typography */
            --font-main: 'Inter', sans-serif;
            --font-code: 'JetBrains Mono', monospace;
            
            --text-body-md: 1.6rem;
            --text-body-lg: clamp(1.8rem, 1.591rem + 0.448vw, 2.2rem);
            --text-headline-md: clamp(2.0rem, 1.6rem + 0.8vw, 2.8rem);
            --text-headline-lg: clamp(2.4rem, 1.8rem + 1.2vw, 3.6rem);
            --text-display: clamp(4.0rem, 3.2rem + 2.0vw, 6.4rem);
            --text-code-size: 1.4rem;
        }

        /* Reset & Base */
        html { 
            font-size: 62.5%; 
            scroll-behavior: smooth; 
            box-sizing: border-box;
        }
        *, *:before, *:after { box-sizing: inherit; }
        body { 
            font-family: var(--font-main);
            font-size: var(--text-body-md); 
            background-color: var(--surface); 
            color: var(--on-surface); 
            line-height: 1.6;
            margin: 0;
            -webkit-font-smoothing: antialiased;
        }
        a { text-decoration: none; color: inherit; }
        p { margin: 0; }
        h1, h2, h3 { margin: 0; font-family: var(--font-main); }
        button { border: none; background: none; cursor: pointer; padding: 0; font: inherit; }
        img { max-width: 100%; height: auto; display: block; }

        /* Typography Classes */
        .font-display { font-size: var(--text-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
        .font-headline-lg { font-size: var(--text-headline-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
        .font-headline-md { font-size: var(--text-headline-md); font-weight: 600; line-height: 1.3; }
        .font-body-lg { font-size: var(--text-body-lg); font-weight: 400; line-height: 1.6; }
        .font-body-md { font-size: var(--text-body-md); font-weight: 400; line-height: 1.6; }
        .font-code { font-family: var(--font-code); font-size: var(--text-code-size); font-weight: 400; line-height: 1.5; }

        /* Material Symbols */
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-flex;
            align-items: center;
        }

        /* Structure */
        .brxe-section { padding: var(--space-32-64) 0; }
        .brxe-container {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--margin-mobile);
        }
        @media (min-width: 768px) {
            .brxe-container { padding: 0 var(--margin-desktop); }
        }

        /* Header */
        .header {
            background: var(--surface-container-lowest);
            border-bottom: 1px solid var(--primary);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50;
            height: 8rem;
        }
        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--margin-desktop);
        }
        .header-brand { color: var(--primary); font-weight: bold; letter-spacing: -0.02em; }
        .header-nav { display: none; gap: var(--gutter); align-items: center; }
        .header-nav a { color: var(--secondary); padding: 0.8rem 1.6rem; transition: background 0.2s, color 0.2s; }
        .header-nav a:hover { background: var(--primary); color: var(--on-primary); }
        .header-cta {
            display: none;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: var(--on-primary);
            padding: 1.2rem 2.4rem;
            border: 1px solid var(--primary);
            transition: background 0.2s, color 0.2s;
        }
        .header-cta:hover { background: var(--surface); color: var(--primary); }
        .header-mobile-toggle { display: block; color: var(--primary); }
        @media (min-width: 768px) {
            .header-nav, .header-cta { display: flex; }
            .header-mobile-toggle { display: none; }
        }

        /* Main Offset */
        .main-content { padding-top: 8rem; }

        /* Hero Section */
        .hero { background: var(--surface-container-lowest); border-bottom: 1px solid var(--surface-variant); }
        .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); align-items: center; }
        @media (min-width: 768px) {
            .hero-grid { grid-template-columns: repeat(12, 1fr); }
        }
        .hero-text { display: flex; flex-direction: column; gap: var(--space-16-24); align-items: flex-start; }
        @media (min-width: 768px) { .hero-text { grid-column: span 6; } }
        .hero-badge { background: var(--surface-container); padding: 0.4rem 1.2rem; border: 1px solid var(--surface-variant); color: var(--secondary); }
        .hero-title { color: var(--primary); }
        .hero-desc { color: var(--on-surface-variant); max-width: 60rem; }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: var(--on-primary);
            padding: 1.6rem 3.2rem;
            border: 1px solid var(--primary);
            transition: all 0.2s;
        }
        .btn-primary:hover { background: var(--surface); color: var(--primary); }
        .btn-primary .icon { margin-left: 0.8rem; transition: transform 0.2s; }
        .btn-primary:hover .icon { transform: translateX(0.4rem); }

        .hero-visual { position: relative; margin-top: 3.2rem; }
        @media (min-width: 768px) { 
            .hero-visual { grid-column: span 6; margin-top: 0; }
        }
        .visual-container {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            background: var(--surface-container);
            border: 1px solid var(--primary);
            display: flex;
            overflow: hidden;
        }
        .visual-left, .visual-right { width: 50%; height: 100%; padding: var(--space-16-24); display: flex; flex-direction: column; gap: 1.6rem; transition: transform 0.5s; }
        .visual-left { background: var(--surface-container-lowest); border-right: 1px dashed var(--primary); }
        .visual-right { background: var(--primary); color: var(--on-primary); gap: 0.8rem; }
        .visual-container:hover .visual-left, .visual-container:hover .visual-right { transform: scale(1.02); }
        .visual-header { display: flex; justify-content: space-between; align-items: center; opacity: 0.5; }
        .visual-right .visual-header { opacity: 0.7; }
        .visual-mock-bar { border: 1px solid var(--surface-variant); background: rgba(226,226,226,0.3); }
        .visual-center-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--surface);
            border: 1px solid var(--primary);
            padding: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        /* Cards Grid */
        .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
        @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
        
        /* Features */
        .feature-intro { margin-bottom: var(--space-32-64); display: flex; flex-direction: column; gap: 1.6rem; border-left: 4px solid var(--primary); padding-left: 2.4rem; }
        .feature-title { color: var(--primary); }
        .feature-desc { color: var(--secondary); max-width: 80rem; }
        .feature-card {
            border: 1px solid var(--surface-variant);
            background: var(--surface-container-lowest);
            padding: var(--space-16-24);
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
            transition: border-color 0.2s;
        }
        .feature-card:hover { border-color: var(--primary); }
        .feature-icon {
            width: 4.8rem; height: 4.8rem;
            background: var(--surface-container);
            border: 1px solid var(--surface-variant);
            display: flex; align-items: center; justify-content: center;
            color: var(--primary);
        }

        /* Portfolio */
        .portfolio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-32-64); border-bottom: 1px solid var(--surface-variant); padding-bottom: 2.4rem; }
        .portfolio-link { display: none; align-items: center; color: var(--primary); text-decoration: none; }
        .portfolio-link:hover { text-decoration: underline; text-underline-offset: 4px; }
        @media (min-width: 768px) { .portfolio-link { display: inline-flex; } }
        
        .project-card { display: flex; flex-direction: column; border: 1px solid var(--surface-variant); background: var(--surface-container-lowest); overflow: hidden; }
        .project-image-wrap { height: 40rem; width: 100%; overflow: hidden; position: relative; }
        .project-image { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); transition: filter 3s ease-in-out, object-position 3s ease-in-out; }
        .project-card:hover .project-image { filter: grayscale(0%); object-position: bottom; }
        .project-info { padding: 2.4rem; border-top: 1px solid var(--surface-variant); }
        .project-title { color: var(--primary); margin-bottom: 0.8rem; font-size: 2.0rem; }
        .project-meta { color: var(--secondary); font-size: 1.4rem; }

        /* Stages */
        .stages-title { color: var(--primary); margin-bottom: var(--space-32-64); border-bottom: 1px solid var(--primary); padding-bottom: 1.6rem; display: inline-block; }
        .stages-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--surface-variant); border-left: 1px solid var(--surface-variant); }
        @media (min-width: 768px) { .stages-grid { grid-template-columns: repeat(4, 1fr); } }
        .stage-card { padding: var(--space-16-24); border-bottom: 1px solid var(--surface-variant); border-right: 1px solid var(--surface-variant); background: var(--surface-container-lowest); display: flex; flex-direction: column; gap: 1.6rem; position: relative; transition: background 0.2s; }
        .stage-card:hover { background: var(--surface); }
        .stage-num { font-family: var(--font-code); font-size: 3.2rem; position: absolute; top: 1.6rem; right: 1.6rem; font-weight: bold; line-height: 1; }
        .stage-num.light { color: var(--surface-variant); }
        .stage-num.dark { color: var(--primary); }
        .stage-content { margin-top: 3.2rem; }

        /* FAQ */
        .faq-title { color: var(--primary); text-align: center; margin-bottom: var(--space-32-64); }
        .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--surface-variant); max-width: 80rem; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid var(--surface-variant); padding: 1.6rem 0; cursor: pointer; }
        .faq-summary { display: flex; justify-content: space-between; align-items: center; color: var(--primary); list-style: none; outline: none; }
        .faq-summary::-webkit-details-marker { display: none; }
        .faq-icon { color: var(--secondary); transition: transform 0.3s; }
        .faq-item[open] .faq-icon { transform: rotate(180deg); }
        .faq-content { margin-top: 1.6rem; color: var(--secondary); padding-right: 4.8rem; }

        /* CTA */
        .cta-section { background: var(--primary); color: var(--on-primary); border-top: 1px solid var(--primary); text-align: center; }
        .cta-content { display: flex; flex-direction: column; items-center: center; align-items: center; gap: 3.2rem; padding: 6.4rem 0; }
        .cta-icon-wrap { width: 6.4rem; height: 6.4rem; border-radius: 50%; border: 1px solid rgba(226,226,226,0.3); background: rgba(226,226,226,0.1); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
        .cta-title { font-size: 4.8rem; max-width: 80rem; }
        .cta-desc { color: rgba(226,226,226,0.8); max-width: 60rem; }
        .btn-inverse {
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--surface-container-lowest); color: var(--primary);
            font-size: 1.8rem; font-weight: bold; padding: 2rem 4rem;
            transition: background 0.2s;
        }
        .btn-inverse:hover { background: var(--surface-variant); }
        .btn-inverse .icon { margin-left: 1.2rem; transition: transform 0.2s; }
        .btn-inverse:hover .icon { transform: translateX(0.4rem); }

        /* Footer */
        .footer { background: var(--surface-container-lowest); border-top: 1px solid var(--primary); }
        .footer-inner { padding: var(--space-32-64) var(--margin-desktop); display: flex; flex-direction: column; justify-content: space-between; align-items: center; max-width: var(--container-max); margin: 0 auto; gap: 3.2rem; }
        @media (min-width: 768px) { .footer-inner { flex-direction: row; gap: 0; } }
        .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
        @media (min-width: 768px) { .footer-brand { align-items: flex-start; } }
        .footer-logo { color: var(--primary); font-weight: bold; }
        .footer-copy { color: var(--secondary); }
        .footer-links { display: flex; gap: 2.4rem; align-items: center; }
        .footer-link { color: var(--secondary); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem; font-weight: 500; opacity: 0.8; transition: all 0.2s; font-family: var(--font-code); }
        .footer-link:hover { color: var(--primary); opacity: 1; }

        /* Animations */
        @media (prefers-reduced-motion: no-preference) {
            .reveal-item {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .reveal-item.is-revealed {
                opacity: 1;
                transform: translateY(0);
            }
            .delay-100 { transition-delay: 100ms; }
            .delay-200 { transition-delay: 200ms; }
            .delay-300 { transition-delay: 300ms; }
        }