/* ==========================================================================
   core/page-layout.css - Standard Page Layout & Spacing

   Purpose: Provides consistent padding and layout for ALL non-home pages
   Requires: Load after variables.css, before page-specific CSS
   Pages: About, Contact, Careers, Blog, Services, Client Success, Legal
   NOT used by: Home page (has its own slider-based layout)

   Standard Padding Values (EXACTLY matches home page intro-split section):
   - Desktop: clamp(20px, 4vw, 40px)
   - 767px: ~50px (home page has ~49px)
   - 480px: ~41px (home page has ~41px)
   - 430px: ~36px (home page has ~39px)
   - 393px: 32px (home page has ~36px)
   - 375px: 30px (home page has ~34px)
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES - Page Layout Variables
   ========================================================================== */

:root {
  /* Standard horizontal padding */
  --page-padding-x: clamp(20px, 4vw, 40px);
  /* Mobile padding: EXACTLY matches home page intro-split effective spacing */
  /* Home page edge-to-text: 375px=34px, 480px=41px, 767px=49px */
  /* Formula: 10px container + 2.5% margin + clamp(10px, 4vw, 20px) internal */
  --page-padding-x-mobile: clamp(40px, 6.5vw, 52px);

  /* Standard vertical section spacing */
  --section-padding-y: clamp(60px, 8vw, 100px);
  --section-padding-y-mobile: clamp(40px, 6vw, 60px);

  /* Standard content max-width */
  --content-max-width: 1400px;

  /* Header offset for scroll calculations */
  --header-offset: 100px;
}

/* ==========================================================================
   VIEWPORT STABILITY - Modern scrollbar handling (CSS Scrollbars Level 1)
   scrollbar-gutter: stable reserves space for scrollbar, ensuring 100vw
   is consistent whether scrollbar is visible or not
   ========================================================================== */

/* Viewport stability handled by header.css with !important rules */
/* These are fallbacks only - header.css takes precedence */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll; /* Match header.css for consistent scrollbar */
}

/* Note: overflow-x is controlled by header.css on html element for consistent viewport width */
/* DO NOT set overflow on body - it conflicts with scrollbar-gutter and header positioning */

/* ==========================================================================
   BASE PAGE CONTAINER
   Applied to main content wrapper (e.g., .about-main, .contact-main, etc.)
   ========================================================================== */

.page-main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--page-padding-x);
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   STANDARD SECTION CONTAINER
   For sections within the main content area
   ========================================================================== */

.page-section {
  padding: var(--section-padding-y) 0;
}

.page-section-content {
  padding: 0 var(--page-padding-x);
}

/* ==========================================================================
   FULL-WIDTH SECTION BREAKOUT
   For sections that need to span full viewport width
   Usage: Add .full-width-section to break out of container
   ========================================================================== */

.full-width-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
}

/* Alternative: margin-left: 50%; transform: translateX(-50%); */
.full-width-section-alt {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   STANDARD HEADER/TITLE CONTAINERS
   For section headers that need consistent padding
   ========================================================================== */

.section-header {
  padding: 0 var(--page-padding-x);
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
}

/* ==========================================================================
   STANDARD CARD/GRID CONTAINERS
   For card grids, lists, and grid layouts
   ========================================================================== */

.card-grid {
  padding: 0 var(--page-padding-x);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.card-list {
  padding: 0 var(--page-padding-x);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .page-main {
    padding: var(--section-padding-y) var(--page-padding-x);
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    --page-padding-x: var(--page-padding-x-mobile);
    --section-padding-y: var(--section-padding-y-mobile);
  }

  /* Page content containers - NOT header */
  main .container,
  .page-main .container,
  section:not(header) .container {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }

  .page-main {
    padding: var(--section-padding-y-mobile) var(--page-padding-x-mobile);
    width: 100%;
    max-width: 100%;
  }

  /* Page-specific main containers - ensure they use our variables */
  .about-main,
  .blog-main,
  .legal-main,
  .contact-main,
  .careers-main,
  .service-main,
  .client-success-main {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }

  .page-section-content,
  .section-header,
  .card-grid,
  .card-list {
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }

  /* Full-width sections on mobile - same technique as desktop */
  .full-width-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }
}

/* Small Mobile (max-width: 480px) */
/* Home page at 480px: 10px + 11.5px margin + 19px internal = ~41px */
@media (max-width: 480px) {
  :root {
    /* Matches home page intro-split at 480px (~41px edge spacing) */
    --page-padding-x-mobile: clamp(36px, 8.5vw, 44px);
  }

  .page-main {
    padding: var(--section-padding-y-mobile) var(--page-padding-x-mobile);
  }

  /* Page content containers */
  main .container,
  .page-main .container {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }

  /* Page-specific main containers */
  .about-main,
  .blog-main,
  .legal-main,
  .contact-main,
  .careers-main,
  .service-main,
  .client-success-main {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }
}

/* iPhone 14 Pro Max, 13 Pro Max, 12 Pro Max (430px, 428px) */
/* Home page at 430px: ~39px */
@media (max-width: 430px) {
  :root {
    --page-padding-x-mobile: clamp(34px, 8vw, 40px);
  }
}

/* iPhone 14 Pro, 13 Pro, 12 Pro (393px) */
/* Home page at 393px: ~36px */
@media (max-width: 393px) {
  :root {
    --page-padding-x-mobile: 32px;
  }
}

/* Very Small Mobile (max-width: 375px) - iPhone SE, mini */
/* Home page at 375px: 10px + 9px margin + 15px internal = ~34px */
@media (max-width: 375px) {
  :root {
    --page-padding-x-mobile: 30px;  /* Match home page ~34px edge spacing */
    --section-padding-y-mobile: clamp(32px, 5vw, 48px);
  }

  /* Page content containers */
  main .container,
  .page-main .container {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }

  .page-main {
    padding: var(--section-padding-y-mobile) var(--page-padding-x-mobile);
  }

  /* Page-specific main containers */
  .about-main,
  .blog-main,
  .legal-main,
  .contact-main,
  .careers-main,
  .service-main,
  .client-success-main {
    padding-left: var(--page-padding-x-mobile) !important;
    padding-right: var(--page-padding-x-mobile) !important;
  }

  .page-section-content,
  .section-header,
  .card-grid,
  .card-list {
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }
}

/* ==========================================================================
   HIGH RESOLUTION DISPLAYS
   ========================================================================== */

/* Large Screens (1920px+) */
@media (min-width: 1920px) {
  :root {
    --content-max-width: 1600px;
  }
}

/* 2K/QHD Displays (2560px+) */
@media (min-width: 2560px) {
  :root {
    --page-padding-x: clamp(40px, 4vw, 80px);
    --content-max-width: 1800px;
  }
}

/* 4K Displays (3840px+) */
@media (min-width: 3840px) {
  :root {
    --page-padding-x: clamp(60px, 4vw, 120px);
    --content-max-width: 2200px;
  }
}

/* 5K+ Displays (5120px+) */
@media (min-width: 5120px) {
  :root {
    --page-padding-x: clamp(80px, 4vw, 160px);
    --content-max-width: 2800px;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   Quick helpers for common spacing patterns
   ========================================================================== */

/* Horizontal padding utilities */
.px-page { padding-left: var(--page-padding-x); padding-right: var(--page-padding-x); }
.pl-page { padding-left: var(--page-padding-x); }
.pr-page { padding-right: var(--page-padding-x); }

/* Vertical section padding utilities */
.py-section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.pt-section { padding-top: var(--section-padding-y); }
.pb-section { padding-bottom: var(--section-padding-y); }

/* Combined padding */
.p-page { padding: var(--section-padding-y) var(--page-padding-x); }

/* Max-width container */
.max-w-content { max-width: var(--content-max-width); margin-left: auto; margin-right: auto; }