/**
 * ============================================================================
 * LAYOUT - Fluid Sections & Grid Systems
 * ============================================================================
 * 
 * Purpose: Provides responsive section padding system and equal-height grid
 * layouts with consistent spacing and breakpoint behavior.
 * 
 * Components:
 * - Fluid Sections: Variable-based responsive padding system
 * - Section Size Classes: XXL, XL, L, M, S, XS, XXS, Header
 * - Hero Sections: Full viewport height sections
 * - Width Modifiers: Full-width and narrow width variants
 * - Equal Grid: Equal-height responsive grid layout
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   GLOBAL SECTION VARIABLES
   ============================================================================
   CSS custom properties for consistent spacing across all sections. Adjust
   these values to control padding globally at different breakpoints.
   ============================================================================ */

:root {
  /* Horizontal padding for all sections */
  --section-side-padding: 3.125rem;
  /* 50px for desktop/tablet */

  /* Vertical padding sizes (desktop baseline ~1440px) */
  --section-xxl-padding-min: 9.375rem;
  /* 150px */
  --section-xxl-padding-max: 10rem;
  /* 160px */

  --section-xl-padding-min: 6.875rem;
  /* 110px */
  --section-xl-padding-max: 7.5rem;
  /* 120px */

  --section-l-padding-min: 5.625rem;
  /* 90px */
  --section-l-padding-max: 6.25rem;
  /* 100px */

  --section-m-padding-min: 5rem;
  /* 80px */
  --section-m-padding-max: 5rem;
  /* 80px (fixed) */

  --section-s-padding-min: 3.75rem;
  /* 60px */
  --section-s-padding-max: 3.75rem;
  /* 60px (fixed) */

  --section-xs-padding-min: 2.5rem;
  /* 40px */
  --section-xs-padding-max: 2.5rem;
  /* 40px (fixed) */

  --section-xxs-padding-min: 1.5rem;
  /* 24px */
  --section-xxs-padding-max: 1.5rem;
  /* 24px (fixed) */

  --section-header-padding-min: 1.25rem;
  /* 20px */
  --section-header-padding-max: 1.25rem;
  /* 20px (fixed) */

  /* Hero sections height variable */
  --section-hero-height: 100vh;

  /* Offset for overlay headers (negative margin compensation) */
  --section-offset-header: 80px;

  /* Width constraints for narrow sections */
  --section-narrow: 62.5rem;
  /* 1000px */
  --section-narrow-xs: 45rem;
  /* 720px */
}

/* === Tablet Adjustments (1024px and below) === */
@media (max-width: 1024px) {
  :root {
    --section-xxl-padding-min: 6.25rem;
    /* 100px */
    --section-xxl-padding-max: 7.5rem;
    /* 120px */

    --section-xl-padding-min: 5rem;
    /* 80px */
    --section-xl-padding-max: 6.25rem;
    /* 100px */

    --section-l-padding-min: 4.375rem;
    /* 70px */
    --section-l-padding-max: 5rem;
    /* 80px */
  }
}

/* === Mobile Adjustments (992px and below) === */
@media (max-width: 992px) {
  :root {
    /* Tighter side padding on mobile */
    --section-side-padding: 1rem;
    /* 16px */

    /* Reduced vertical spacing for mobile */
    --section-xxl-padding-min: 4.375rem;
    /* 70px */
    --section-xxl-padding-max: 5rem;
    /* 80px */

    --section-xl-padding-min: 3.75rem;
    /* 60px */
    --section-xl-padding-max: 4.375rem;
    /* 70px */

    --section-l-padding-min: 3.125rem;
    /* 50px */
    --section-l-padding-max: 3.75rem;
    /* 60px */

    --section-m-padding-min: 2.5rem;
    /* 40px */
    --section-m-padding-max: 2.5rem;
    /* 40px */
  }
}


/* ============================================================================
   SECTION PADDING CLASSES
   ============================================================================
   Apply these classes to section containers for consistent vertical and
   horizontal padding. Larger sections use fluid clamp() for smooth scaling.
   ============================================================================ */

/* XXL Sections - Very large spacing (hero-adjacent, major feature blocks) */
.section-xxl {
  padding-top: clamp(var(--section-xxl-padding-min),
      1vw + 8rem,
      var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min),
      1vw + 8rem,
      var(--section-xxl-padding-max));
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* XL Sections - Large spacing */
.section-xl {
  padding-top: clamp(var(--section-xl-padding-min),
      0.8vw + 6rem,
      var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min),
      0.8vw + 6rem,
      var(--section-xl-padding-max));
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* L Sections - Medium-large spacing */
.section-l {
  padding-top: clamp(var(--section-l-padding-min),
      0.7vw + 5rem,
      var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min),
      0.7vw + 5rem,
      var(--section-l-padding-max));
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* M Sections - Fixed medium spacing */
.section-m {
  padding-top: var(--section-m-padding-min);
  padding-bottom: var(--section-m-padding-min);
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* S Sections - Fixed small spacing */
.section-s {
  padding-top: var(--section-s-padding-min);
  padding-bottom: var(--section-s-padding-min);
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* XS Sections - Fixed extra-small spacing */
.section-xs {
  padding-top: var(--section-xs-padding-min);
  padding-bottom: var(--section-xs-padding-min);
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* XXS Sections - Fixed minimal spacing */
.section-xxs {
  padding-top: var(--section-xxs-padding-min);
  padding-bottom: var(--section-xxs-padding-min);
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}

/* Header Sections - Minimal top/bottom padding for header areas */
.section-header {
  padding-top: var(--section-header-padding-min);
  padding-bottom: var(--section-header-padding-min);
  padding-left: var(--section-side-padding) !important;
  padding-right: var(--section-side-padding) !important;
}


/* ============================================================================
   HERO SECTIONS
   ============================================================================
   Full viewport height sections with centered content. Uses modern dvh units
   where supported to handle mobile browser chrome correctly.
   ============================================================================ */

.section-hero {
  min-height: var(--section-hero-height) !important;
  /* Fallback: 100vh */
}

/* Better viewport handling on modern browsers (accounts for mobile URL bar) */
@supports (height: 100dvh) {
  .section-hero {
    min-height: 100dvh !important;
  }
}

/* Center hero content vertically */
.section-hero .e-con-inner {
  justify-content: center !important;
}


/* ============================================================================
   FULL-WIDTH SECTIONS
   ============================================================================
   Removes max-width constraints on Elementor containers to allow true
   full-width layouts while preserving inner block functionality.
   ============================================================================ */

.section-full>.elementor-container,
.section-full>.e-con,
.section-full>.e-con-inner {
  max-width: 100% !important;
}


/* ============================================================================
   NARROW SECTIONS
   ============================================================================
   Constrains content width for better readability on wide screens. Useful
   for text-heavy sections, forms, and focused content areas.
   ============================================================================ */

/* Standard narrow (1000px max) */
.section-narrow>.e-con,
.section-narrow>.elementor-container,
.section-narrow .e-con-inner {
  max-width: var(--section-narrow) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Extra narrow (720px max) - for forms and single-column content */
.section-narrow-xs>.e-con,
.section-narrow-xs>.elementor-container,
.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================================
   OFFSET SECTIONS (FOR OVERLAY HEADERS)
   ============================================================================
   Adds extra top padding to compensate for fixed/overlay headers with
   negative margins. Prevents content from being hidden under the header.
   ============================================================================ */

.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}


/* ============================================================================
   EQUAL GRID - Equal Height Grid Layout
   ============================================================================
   Creates a responsive grid with equal-height items. Desktop shows 3 columns,
   tablet shows 2 columns. All items stretch to match the tallest item in
   their row automatically.
   
   Usage: Add "equal-grid" class to container, "equal-item" to each child
   ============================================================================ */

/* Base layout (desktop, 1441px and above) - 3 columns */
.equal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  /* Equal height rows */
  gap: 16px;
  align-items: stretch;
}

/* Make each grid item stretch to full cell height */
.equal-grid>.equal-item {
  height: 100%;
  align-self: stretch;
}

/* Prevent Elementor inner flex from collapsing height */
.equal-grid>.equal-item.e-con {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* === Tablet Layout (1440px and below) - 2 columns === */
@media (max-width: 1440px) {
  .equal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}