/**
 * GlobalStudyLab Homepage Full-Width Layout
 * Phases 2-5: Complete Homepage Optimization
 */

/* ============================================
   PHASE 2: FULL-WIDTH LAYOUT - NO GAPS
   ============================================ */

/* Force full-width for frontpage */
body.pagelayout-frontpage {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

/* Remove all container restrictions */
body.pagelayout-frontpage .container,
body.pagelayout-frontpage .container-fluid,
body.pagelayout-frontpage #page-wrapper,
body.pagelayout-frontpage #page,
body.pagelayout-frontpage #page-content,
body.pagelayout-frontpage #region-main-box,
body.pagelayout-frontpage #region-main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* GSL Homepage Full Width */
.gsl-homepage-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.gsl-homepage-wrapper > section,
.gsl-homepage-wrapper > div {
    width: 100% !important;
    margin: 0 !important;
}

/* Hero Section Full Width */
.gsl-hero-section {
    width: 100% !important;
    padding: 4rem 0;
    margin: 0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Content constrained for readability */
.gsl-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 576px) {
    .gsl-hero-section { padding: 3rem 0; }
    .gsl-hero-container { padding: 0 1rem; }
    .gsl-main-title { font-size: 1.5rem !important; }
    .gsl-hero-title { font-size: 1.75rem !important; }
    .gsl-audience-nav { flex-direction: column; }
    .gsl-audience-tab { width: 100%; }
    .gsl-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .gsl-btn { width: 100%; }
}

@media (min-width: 577px) and (max-width: 768px) {
    .gsl-hero-section { padding: 3.5rem 0; }
    .gsl-main-title { font-size: 2rem !important; }
    .gsl-audience-slide { grid-template-columns: 1fr; }
    .gsl-hero-visual { display: none; }
}

@media (min-width: 1201px) {
    .gsl-hero-container { max-width: 1400px; }
}

@media (min-width: 1920px) {
    .gsl-hero-container { max-width: 1600px; }
}

/* ============================================
   PHASE 3: ACCESSIBILITY
   ============================================ */

*:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

.gsl-audience-tab:focus-visible,
.gsl-btn:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.gsl-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 10000;
}

.gsl-skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.gsl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ============================================
   PHASE 4: PERFORMANCE
   ============================================ */

.gsl-audience-slide,
.gsl-audience-tab,
.gsl-btn {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

body.pagelayout-frontpage {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   PHASE 5: CONVERSION OPTIMIZATION
   ============================================ */

.gsl-btn-primary {
    position: relative;
    overflow: hidden;
}

.gsl-btn-primary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gsl-btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}