/* 
 * Breakpoint system for The Channel website
 * This file provides responsive mixins and utilities
 * based on the breakpoints defined in variables.css
 */

/* Mobile-first approach: 
 * - Start with smallest/mobile design as the default
 * - Use min-width queries to progressively enhance for larger screens
 */

/* 
 * Standard min-width media queries
 * These use breakpoints from variables.css
 */

/* Mixin pattern with custom properties is not possible in CSS, but we can create utility classes */

/* 
 * sm: 576px+ (small phone landscape)
 * Applied from phone landscape size and above
 */
@media (min-width: 576px) {
  :root {
    /* Adjust fluid typography for small screens */
    --font-size-logo: clamp(4rem, 3rem + 5vw, 5rem);
    
    /* Adjust phone mockup size based on viewport width */
    --phone-width: clamp(13rem, 10rem + 15vw, 16rem);
    --phone-height: clamp(28rem, 20rem + 35vw, 34rem);
  }
  
  /* Space utility adjustments for this breakpoint */
  .sm\:hidden {
    display: none !important;
  }
  
  .sm\:block {
    display: block !important;
  }
  
  .sm\:flex {
    display: flex !important;
  }
  
  .sm\:grid {
    display: grid !important;
  }
}

/* 
 * md: 768px+ (tablet portrait)
 * Applied from tablet portrait size and above
 */
@media (min-width: 768px) {
  :root {
    /* Adjust fluid typography for medium screens */  
    --font-size-logo: clamp(5rem, 4rem + 5vw, 8rem);
    
    /* Adjust phone mockup size for tablet portrait */
    --phone-width: clamp(15rem, 12rem + 15vw, 18rem);
    --phone-height: clamp(32rem, 28rem + 20vw, 38rem);
  }
  
  /* Layout adjustments for this breakpoint */
  .md\:hidden {
    display: none !important;
  }
  
  .md\:block {
    display: block !important;
  }
  
  .md\:flex {
    display: flex !important;
  }
  
  .md\:grid {
    display: grid !important;
  }
  
  /* Common layouts for tablet portrait */
  .md\:flex-row {
    flex-direction: row !important;
  }
  
  .md\:flex-col {
    flex-direction: column !important;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 
 * lg: 992px+ (tablet landscape / small desktop)
 * Applied from tablet landscape size and above
 */
@media (min-width: 992px) {
  :root {
    /* Adjust fluid typography for large screens */
    --font-size-logo: clamp(6rem, 5rem + 5vw, 10rem);
    
    /* Maximize phone mockup size for large screens */
    --phone-width: 18rem;
    --phone-height: 38rem;
  }
  
  /* Layout adjustments for this breakpoint */
  .lg\:hidden {
    display: none !important;
  }
  
  .lg\:block {
    display: block !important;
  }
  
  .lg\:flex {
    display: flex !important;
  }
  
  .lg\:grid {
    display: grid !important;
  }
  
  /* Common layouts for tablet landscape */
  .lg\:flex-row {
    flex-direction: row !important;
  }
  
  .lg\:flex-col {
    flex-direction: column !important;
  }
  
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 
 * xl: 1200px+ (desktop)
 * Applied for desktop and above
 */
@media (min-width: 1400px) {
  :root {
    /* We can adjust spacing for very large screens */
    --container-width: 1400px; /* Fixed width for large screens */
  }
  
  /* Layout adjustments for this breakpoint */
  .xl\:hidden {
    display: none !important;
  }
  
  .xl\:block {
    display: block !important;
  }
  
  /* Additional desktop-specific layouts */
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 
 * Container queries - for modern browsers
 * These use container query units for components that need to respond
 * to their container size rather than the viewport
 */
@supports (container-type: inline-size) {
  /* Define container contexts */
  .cq-container {
    container-type: inline-size;
    container-name: component;
  }
  
  /* Responsive components based on their container width */
  @container component (min-width: 400px) {
    .cq\:flex-row {
      flex-direction: row;
    }
  }
  
  @container component (min-width: 600px) {
    .cq\:grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @container component (min-width: 800px) {
    .cq\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* Utility classes for screen readers and accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: scroll;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hide content based on breakpoint */
.xs-only {
  display: block;
}
@media (min-width: 576px) {
  .xs-only {
    display: none;
  }
}

.sm-only {
  display: none;
}
@media (min-width: 576px) and (max-width: 767px) {
  .sm-only {
    display: block;
  }
}

.md-only {
  display: none;
}
@media (min-width: 768px) and (max-width: 991px) {
  .md-only {
    display: block;
  }
}

.lg-only {
  display: none;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .lg-only {
    display: block;
  }
}

.xl-only {
  display: none;
}
@media (min-width: 1200px) {
  .xl-only {
    display: block;
  }
}