/* SCARAL MULTI-DEVICE RESPONSIVE PROTOCOLS (CORE V1.5) - STICKY RESTORATION
 * Split protocols to ensure Desktop Sticky works while Mobile Overflow is killed.
 */

:root {
    /* --- EXECUTIVE TYPOGRAPHY STANDARDS --- */
    --fs-h1: 2.2rem;
    /* Desktop Main Heading */
    --fs-h1-mobile: 1.8rem;
    /* Mobile Main Heading */

    --fs-h2: 1.8rem;
    /* Desktop Section Heading */
    --fs-h2-mobile: 1.5rem;
    /* Mobile Section Heading */

    --fs-stat: 2.0rem;
    /* Desktop Stats/Value */
    --fs-stat-mobile: 1.8rem;
    /* Mobile Stats/Value */

    --fs-logo: 1.5rem;
    /* Global Logo Size */
}

/* --- 0. THE TOTAL RESET --- */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

html,
body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

/* Force Overflow hidden ONLY on Mobile to save sticky on Desktop */
@media (max-width: 1100px) {

    html,
    body {
        overflow-x: hidden !important;
    }
}

/* 1. Mobile & Safe Containers (The Overflow Killers) */
.sc-container,
.content-stream,
.projects-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
}

/* 2. Main Layout (Special Handling for Sticky) */
.main-layout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile: layout must be strict to stop overflow */
@media (max-width: 1100px) {
    .main-layout {
        display: block !important;
        overflow: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Desktop: layout must allow overflow for sticky sidebar */
@media (min-width: 1101px) {
    .main-layout {
        display: grid !important;
        grid-template-columns: 1fr 380px !important;
        gap: 40px !important;
        padding: 0 8% !important;
        overflow: visible !important;
        /* ENABLE STICKY ON PC */
        position: relative !important;
    }
}

/* 3. Master Card */
.sc-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px !important;
    margin: 15px 0 !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: block !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Media Safety - Relaxed */
img,
video,
iframe,
canvas {
    max-width: 100%;
}

/* Text Safety - Relaxed */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div {
    overflow-wrap: break-word;
}

/* Tablet & Desktop Escalation */
@media (min-width: 769px) {
    .sc-container {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    .sc-card {
        padding: 40px !important;
        margin: 30px 0 !important;
    }
}