/* Profile Grid Layout - Main Import File */
/* CRITICAL: This file imports all modular CSS files for profile grid layout */
/* Refactored from 2860 lines to modular architecture following REFACTORING_ESSENTIALS.md */

/* Card Contract Documentation */
/* ============================================
   🔒 CARD CONTRACT (OFFICIAL PROJECT RULES)
   ============================================
   
   This contract defines the official rules for card components.
   Any code that violates these rules MUST be removed or isolated.
   
   CARD COMPONENT:
   - Single component unit
   - aspect-ratio: 4 / 5 (mobile/tablet) → 4 / 6 (desktop) - responsive via media query
   - NO fixed height values
   - NO internal media queries (media queries only for aspect-ratio at grid level)
   
   IMAGE:
   - ONLY object-fit: cover (MANDATORY)
   - NO other object-fit values
   
   INTERNAL LAYOUT:
   - display: grid
   - grid-template-rows: auto 1fr auto (MANDATORY for most cards)
   - grid-template-rows: 3fr 2fr auto (for publication cards - future-proof)
   - grid-template-columns: 1fr
   
   RESPONSIVE BEHAVIOR:
   - ONLY through grid columns (grid-template-columns)
   - NO responsive rules inside .card
   
   FORBIDDEN INSIDE CARDS:
   ❌ vw / vh units
   ❌ clamp() functions
   ❌ @media queries inside .card
   ❌ Fixed height values (px, rem, em)
   ❌ JavaScript layout manipulation (height, width, positioning)
   
   SEPARATION OF CONCERNS:
   - Card component: card.component.css (card structure only)
   - Grid layout: card-grid.layout.css (grid columns, responsive)
   - Behavior: card.behavior.js (interactions, not layout)
   
   ============================================
   GOLDEN CHECKLIST (When Card Layout Breaks)
   ============================================
   
   If you see a broken card layout, check these:
   
   ❓ Is there a fixed height somewhere? → Remove it
   ❓ Is padding using px? → Convert to em / rem
   ❓ Is there position:absolute inside body? → Danger
   ❓ Is object-fit consistent everywhere? → cover only
   
   ============================================
   CARD INVARIANTS (Non-negotiable rules)
   ============================================
   
   1. Card height is never set directly.
      Height is derived exclusively from aspect-ratio.
   
   2. Card responds only to:
      - aspect-ratio
      - grid-controlled width (columns)
   
   3. Cards must NOT contain:
      - viewport units (vw, vh, vmin, vmax)
      - media queries
   
   4. Responsive behavior is owned by the parent grid,
      never by the card itself.
   
   5. Card variants should be explicit:
      .card--publication
      .card--review
      .card--post
      .card--study
   
   6. Variants may change ONLY internal layout:
      - grid-template-rows
      - internal spacing
   
      Variants must NOT change:
      - aspect-ratio (controlled by responsive breakpoint)
      - object-fit (always cover)
      - overall card dimensions
   
   ============================================
   FINAL SUMMARY
   ============================================
   
   🔑 Card height control = aspect-ratio
   🔑 Internal distribution control = grid rows
   🔑 Responsive control = columns only
   
   ============================================
   END OF CARD CONTRACT
   ============================================
*/

/* Step 1: CSS Variables - Magic numbers as custom properties */
@import url('./profile/_variables.css');

/* Step 1.5: Card System Core (shared across Profile + Explore) */
@import url('./card-core.css');
@import url('./card-layout.css');
@import url('./card-behavior.css');

/* Step 2: Base Grid Layout - Desktop/Tablet grid container rules */
@import url('./profile/_grid-layout.css');

/* Step 3: Mobile Styles (Phase 5: Consolidated) */
@import url('./profile/_mobile.css');

/* NOTE: Additional rules from the original file may need to be extracted if issues arise */
/* The original file had extensive mobile expansion and card-specific rules */
/* If functionality breaks, check the backup file: profile-grid-layout.css.backup */