/**
 * PHC TOP Pro 2.0.0 - RESPONSIVE SYSTEM
 * 
 * 5-point breakpoint system for true device-agnostic design
 * Mobile-first approach with intelligent scaling
 * 
 * Breakpoints:
 * - 320px:  Small mobile (iPhone SE)
 * - 480px:  Large mobile (iPhone 12+)
 * - 768px:  Tablet (iPad)
 * - 1024px: Desktop/iPad Pro
 * - 1440px: Large desktop
 * 
 * @package PHC_TOP
 * 
 */

/* ========================================
   BASE RESPONSIVE VARIABLES
   ======================================== */

:root {
  /* Typography scale (mobile-first) */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   28px;
  --text-4xl:   32px;
  --text-5xl:   36px;
  
  /* Header sizes */
  --h1-size:    28px;
  --h2-size:    24px;
  --h3-size:    20px;
  --h4-size:    18px;
  
  /* Line heights */
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;
  --lh-loose:   2;
  
  /* Container widths */
  --container-full:   100%;
  --container-max:    1200px;
  --container-padding: 1rem;
}

/* ========================================
   BREAKPOINT: Small Mobile (320px)
   ======================================== */

@media (min-width: 320px) {
  :root {
    --text-xs:    12px;
    --text-sm:    13px;
    --text-base:  14px;
    --text-lg:    15px;
    --h1-size:    24px;
    --h2-size:    20px;
    --h3-size:    18px;
    --container-padding: 16px;
  }
}

/* ========================================
   BREAKPOINT: Large Mobile (480px)
   ======================================== */

@media (min-width: 480px) {
  :root {
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-lg:    17px;
    --h1-size:    26px;
    --h2-size:    22px;
    --h3-size:    19px;
    --container-padding: 20px;
  }
}

/* ========================================
   BREAKPOINT: Tablet (768px)
   ======================================== */

@media (min-width: 768px) {
  :root {
    --text-xs:    13px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-lg:    18px;
    --h1-size:    28px;
    --h2-size:    24px;
    --h3-size:    20px;
    --h4-size:    18px;
    --container-padding: 32px;
  }
}

/* ========================================
   BREAKPOINT: Desktop (1024px)
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-lg:    18px;
    --text-xl:    20px;
    --h1-size:    32px;
    --h2-size:    28px;
    --h3-size:    24px;
    --h4-size:    20px;
    --container-padding: 40px;
  }
}

/* ========================================
   BREAKPOINT: Large Desktop (1440px+)
   ======================================== */

@media (min-width: 1440px) {
  :root {
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-lg:    18px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --h1-size:    36px;
    --h2-size:    32px;
    --h3-size:    28px;
    --h4-size:    24px;
    --container-padding: 48px;
  }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

body {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

h1, .h1 {
  font-size: var(--h1-size);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-lg);
}

h2, .h2 {
  font-size: var(--h2-size);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-lg);
}

h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-md);
}

h4, .h4 {
  font-size: var(--h4-size);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-md);
}

p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-md);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

/* ========================================
   RESPONSIVE LAYOUTS
   ======================================== */

/* Container with responsive padding */
.container,
.phc-container {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin: 0 auto;
  max-width: var(--container-max);
}

/* Responsive grid - auto columns */
.phc-grid-auto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--component-gap);
}

@media (min-width: 480px) {
  .phc-grid-auto {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .phc-grid-auto {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .phc-grid-auto {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .phc-grid-auto {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive grid - 2 columns */
.phc-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--component-gap);
}

@media (min-width: 768px) {
  .phc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive grid - 3 columns */
.phc-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--component-gap);
}

@media (min-width: 768px) {
  .phc-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .phc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.phc-img-responsive {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Aspect ratio containers */
.phc-aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.phc-aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.phc-aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* ========================================
   RESPONSIVE DISPLAY
   ======================================== */

/* Hide on mobile, show on tablet+ */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Show on mobile, hide on tablet+ */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/* ========================================
   TOUCH-FRIENDLY ELEMENTS
   ======================================== */

/* Minimum touch target size: 48px */
button,
a,
.phc-button,
.phc-link,
input[type="button"],
input[type="submit"] {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
}

/* Adequate spacing between touch targets */
button + button,
.phc-button + .phc-button {
  margin-left: var(--space-md);
}

/* ========================================
   RESPONSIVE FLEX
   ======================================== */

/* Flex row on desktop, column on mobile */
.phc-flex-row-mobile-col {
  display: flex;
  flex-direction: column;
  gap: var(--component-gap);
}

@media (min-width: 768px) {
  .phc-flex-row-mobile-col {
    flex-direction: row;
  }
}

/* Flex with responsive gap */
.phc-flex-responsive-gap {
  display: flex;
  gap: var(--component-gap);
  flex-wrap: wrap;
}

/* ========================================
   VISIBILITY HELPERS
   ======================================== */

/* Show only on small mobile */
@media (min-width: 480px) {
  .show-small-mobile {
    display: none;
  }
}

/* Show only on large mobile */
@media (max-width: 479px) {
  .show-large-mobile {
    display: none;
  }
}

/* Show only on tablet */
@media (max-width: 767px) or (min-width: 1024px) {
  .show-tablet {
    display: none;
  }
}

/* Show only on desktop */
@media (max-width: 1023px) {
  .show-desktop {
    display: none;
  }
}

/* ========================================
   RESPONSIVE OVERFLOW
   ======================================== */

/* Prevent overflow on small screens */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  
  .phc-container,
  .container {
    overflow-x: hidden;
  }
}

/* ========================================
   MEDIA QUERY VARIABLES
   ======================================== */

/* Quick reference for custom styling */
/* @media (max-width: 479px) { } - Small mobile */
/* @media (min-width: 480px) { } - Large mobile */
/* @media (min-width: 768px) { } - Tablet */
/* @media (min-width: 1024px) { } - Desktop */
/* @media (min-width: 1440px) { } - Large desktop */