/**
 * Custom Grid System for WordPress FSE Group Block (Grid Layout Variation)
 * 
 * IMPORTANT: This CSS is OPT-IN ONLY
 * These styles will ONLY apply to Group blocks (with Grid layout) where you manually add:
 * - "grid-parent-2-wide" class, OR
 * - "grid-parent-3-wide" class, OR
 * - "grid-parent-4-wide" class
 * 
 * Default WordPress grid elements are NOT affected.
 * You must explicitly add these classes in FSE → Block Settings → Advanced → Additional CSS class(es)
 * 
 * Supports: 2-wide, 3-wide, and 4-wide desktop layouts
 * Min child width: 12.5rem (200px)
 * 
 * Theme: ollie-cfp
 * Version: 1.0.0
 */

/* ============================================
   BASE GRID STYLES - OPT-IN ONLY
   These only apply when classes are manually added
   
   NOTE: Higher specificity needed to override WordPress's
   native .is-layout-grid styles
   ============================================ */

.wp-block-group.grid-parent-2-wide,
.wp-block-group.grid-parent-3-wide,
.wp-block-group.grid-parent-4-wide {
  display: grid !important;
  width: 100%;
  gap: var(--wp--custom--spacing--grid-gap, 1.5rem);
  row-gap: 1.5rem !important; /* Ensure vertical spacing between rows */
  align-items: stretch; /* Stretch children to fill grid cell height */
}

/* ============================================
   UTILITY: RESPONSIVE CARD GRID (1/2/3/4 COLUMNS + INNER CONSTRAINT)
   Variant of grid-card-responsive where each card spans the column width
   while its inner content stays between 220px and 300px.
   
   Breakpoints:
   - Mobile (≤512px): 1 column
   - Small tablets (513px–767px): 2 columns
   - Large tablets (768px–1024px): 3 columns
   - Desktop (≥1025px): 4 columns
   ============================================ */

.grid-card-responsive-full,
.is-layout-grid.grid-card-responsive-full,
.wp-block-group.grid-card-responsive-full {
  justify-items: stretch;
  align-items: stretch;
}

.grid-card-responsive-full > *,
.is-layout-grid.grid-card-responsive-full > *,
.wp-block-group.grid-card-responsive-full > * {
  width: 100%;
}

.grid-card-responsive-full .grid-card-responsive-inner,
.is-layout-grid.grid-card-responsive-full .grid-card-responsive-inner,
.wp-block-group.grid-card-responsive-full .grid-card-responsive-inner {
  width: clamp(220px, 100%, 300px);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1025px) {
  .grid-card-responsive-full,
  .is-layout-grid.grid-card-responsive-full,
  .wp-block-group.grid-card-responsive-full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-card-responsive-full,
  .is-layout-grid.grid-card-responsive-full,
  .wp-block-group.grid-card-responsive-full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 513px) and (max-width: 767px) {
  .grid-card-responsive-full,
  .is-layout-grid.grid-card-responsive-full,
  .wp-block-group.grid-card-responsive-full {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 512px) {
  .grid-card-responsive-full,
  .is-layout-grid.grid-card-responsive-full,
  .wp-block-group.grid-card-responsive-full {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   RESPONSIVE GRID LAYOUTS
   Auto-fit with graceful degradation
   ============================================ */

/* 2-Column Grid - Auto-fit with min 300px per column */
.wp-block-group.grid-parent-2-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

/* 3-Column Grid - Auto-fit with min 250px per column */
.wp-block-group.grid-parent-3-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
}

/* 4-Column Grid - Auto-fit with min 200px per column */
.wp-block-group.grid-parent-4-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
}

/* ============================================
   MOBILE LAYOUT (< 768px)
   Force single column for better readability
   ============================================ */

@media (max-width: 767px) {
  .wp-block-group.grid-parent-2-wide,
  .wp-block-group.grid-parent-3-wide,
  .wp-block-group.grid-parent-4-wide {
    grid-template-columns: 1fr !important; /* Single column */
    gap: var(--wp--custom--spacing--grid-gap-mobile, 1rem); /* Tighter gap on mobile */
  }
}

/* ============================================
   OPTIONAL: CONSTRAINED WIDTHS
   For centered content layouts
   ============================================ */

.wp-block-group.grid-parent-2-wide.is-constrained,
.wp-block-group.grid-parent-3-wide.is-constrained,
.wp-block-group.grid-parent-4-wide.is-constrained {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 767px) {
  .wp-block-group.grid-parent-2-wide.is-constrained,
  .wp-block-group.grid-parent-3-wide.is-constrained,
  .wp-block-group.grid-parent-4-wide.is-constrained {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================
   UTILITY: MOBILE SINGLE COLUMN OVERRIDE
   Universal classes for forcing single column on mobile
   
   Research-backed breakpoints based on:
   - MDN Web Docs responsive design guidance
   - StatCounter Global Stats device distribution
   - BrowserStack device testing recommendations
   ============================================ */

/**
 * Mobile Single Column Grid Override - WordPress Standard (767px)
 * 
 * DEFAULT: Aligns with WordPress/Bootstrap 'sm' breakpoint for consistency
 * with existing WordPress patterns and themes.
 * 
 * Use when: Maintaining WordPress ecosystem consistency is priority
 * Covers: All phones + small tablets in portrait
 * 
 * Browser Support: 18+ months backwards compatible (May 2024+)
 * - CSS Grid: 96%+ global support
 * - Media Queries: Universal support (10+ years)
 * - Verified via caniuse.com on 2025-11-14
 * 
 * Examples:
 *   <div class="wp-block-group grid-parent-3-wide mobile-single-column-grid-override">
 *   <div class="custom-grid mobile-single-column-grid-override">
 */
@media (max-width: 767px) {
  .mobile-single-column-grid-override,
  .is-layout-grid.mobile-single-column-grid-override,
  .wp-block-group.mobile-single-column-grid-override {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-width:360px !important;
  }
}

/**
 * Mobile Single Column Grid Override - Modern Recommended (600px)
 * 
 * RECOMMENDED: Pragmatic default for modern responsive design
 * 
 * Use when: Targeting contemporary devices with research-backed breakpoint
 * Covers: Most portrait phones (360-414px common) + larger phones + many foldables
 * Excludes: Small tablets (typically 600-768px) remain multi-column
 * 
 * Research: StatCounter shows most mobile viewports cluster at 360-420px
 * Common sizes: 360x800, 375x812, 390x844, 414x896
 * 
 * Examples:
 *   <div class="custom-grid mobile-single-column-grid-override-600">
 *   <div class="wp-block-group grid-parent-4-wide mobile-single-column-grid-override-600">
 */
@media (max-width: 500px) {
  .mobile-single-column-grid-override,
  .mobile-single-column-grid-override-600,
  .is-layout-grid.mobile-single-column-grid-override-600,
  .wp-block-group.mobile-single-column-grid-override-600 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-width:250px !important;
  }
}

@media (min-width: 501px) and (max-width: 1024px) {
  .wp-block-group.grid-parent-4-wide.mobile-single-column-grid-override-600 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1025px) {
  .wp-block-group.grid-parent-4-wide.mobile-single-column-grid-override-600 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/**
 * Mobile Single Column Grid Override - Strict Mobile (480px)
 * 
 * CONSERVATIVE: Targets only small phones in portrait
 * 
 * Use when: Analytics show >80% users ≤480px OR design requires strict mobile-only behavior
 * Covers: Small phones (320-480px)
 * Excludes: Larger phones, phablets, and tablets remain multi-column
 * 
 * Safe for: Designs where landscape phones should keep multi-column layout
 * 
 * Examples:
 *   <div class="custom-grid mobile-single-column-grid-override-480">
 *   <div class="is-layout-grid mobile-single-column-grid-override-480">
 */
@media (max-width: 480px) {
  .mobile-single-column-grid-override-480,
  .is-layout-grid.mobile-single-column-grid-override-480,
  .wp-block-group.mobile-single-column-grid-override-480 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
}

/* ============================================
   UTILITY: RESPONSIVE CARD GRID (1/2/4 COLUMNS)
   Universal class for card-based layouts
   
   Breakpoints:
   - Mobile (≤512px): 1 column
   - Tablet (513px–1024px): 2 columns (~48% width each)
   - Desktop (≥1025px): 4 columns
   
   Browser Support: 18+ months backwards compatible (May 2024+)
   - CSS Grid: 96%+ global support (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+)
   - repeat(): Same as CSS Grid
   - minmax(): Same as CSS Grid
   - calc(): 97%+ global support (all modern browsers)
   - gap: 96%+ (Chrome 84+, Firefox 63+, Safari 14.1+, Edge 84+)
   - Verified via caniuse.com
   
   Examples:
     <div class="wp-block-group grid-parent-4-wide grid-card-responsive">
     <div class="is-layout-grid grid-card-responsive">
   ============================================ */

/**
 * Desktop: 4 columns (≥1025px)
 * Using repeat(4, 1fr) for equal-width columns
 */
@media (min-width: 1025px) {
  .grid-card-responsive,
  .is-layout-grid.grid-card-responsive,
  .wp-block-group.grid-card-responsive {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/**
 * Tablet: 2 columns (513px–1024px)
 * Cards are ~48% width (accounting for gap)
 * Using repeat(2, 1fr) which naturally creates ~50% columns
 * Gap reduces effective card width to ~48%
 */
@media (min-width: 513px) and (max-width: 1024px) {
  .grid-card-responsive,
  .is-layout-grid.grid-card-responsive,
  .wp-block-group.grid-card-responsive {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/**
 * Mobile: 1 column (≤512px)
 * Full-width cards for optimal mobile readability
 */
@media (max-width: 512px) {
  .grid-card-responsive,
  .is-layout-grid.grid-card-responsive,
  .wp-block-group.grid-card-responsive {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   UTILITY: RESPONSIVE CARD GRID 3-COLUMN (1/2/3 COLUMNS)
   Optimized for 3-card layouts
   
   Breakpoints:
   - Mobile (≤512px): 1 column
   - Tablet (513px–1024px): 2 columns
   - Desktop (≥1025px): 3 columns
   
   Browser Support: 18+ months backwards compatible (May 2024+)
   - CSS Grid: 96%+ global support (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+)
   - repeat(): Same as CSS Grid
   - Verified via caniuse.com
   
   Examples:
     <div class="wp-block-group grid-card-responsive-3">
     <div class="is-layout-grid grid-card-responsive-3">
   ============================================ */

/**
 * Desktop: 3 columns (≥1025px)
 * Using repeat(3, 1fr) for equal-width columns
 */
@media (min-width: 1025px) {
  .grid-card-responsive-3,
  .is-layout-grid.grid-card-responsive-3,
  .wp-block-group.grid-card-responsive-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .offset-title-wrap-height{
    min-height: 100px !important;
  }
}

/**
 * Tablet: 2 columns (513px–1024px)
 * Cards are ~48% width (accounting for gap)
 */
@media (min-width: 513px) and (max-width: 1024px) {
  .grid-card-responsive-3,
  .is-layout-grid.grid-card-responsive-3,
  .wp-block-group.grid-card-responsive-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .offset-title-wrap-height{
    min-height: auto !important;
  }
}

/**
 * Mobile: 1 column (≤512px)
 * Full-width cards for optimal mobile readability
 */
@media (max-width: 512px) {
  .grid-card-responsive-3,
  .is-layout-grid.grid-card-responsive-3,
  .wp-block-group.grid-card-responsive-3 {
    grid-template-columns: 1fr !important;
  }
  .offset-title-wrap-height{
    min-height: auto !important;
  }
}