/**
 * Ben Live TV - Container Queries
 * Component-based responsive design using CSS Container Queries
 *
 * Container queries allow components to respond to their container's size
 * rather than the viewport size. This enables truly reusable responsive components.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
 */

/* ============================================================================
   Container Types
   ============================================================================ */

/*
 * Define container contexts for responsive components.
 * Apply these classes to parent elements that should define query contexts.
 */

/* Inline-size container (responds to width changes) */
.container-inline {
  container-type: inline-size;
}

/* Size container (responds to both width and height) */
.container-size {
  container-type: size;
}

/* Named containers for specific components */
.container-card {
  container-type: inline-size;
  container-name: card;
}

.container-nav {
  container-type: inline-size;
  container-name: nav;
}

.container-hero {
  container-type: inline-size;
  container-name: hero;
}

.container-chat {
  container-type: inline-size;
  container-name: chat;
}

.container-form {
  container-type: inline-size;
  container-name: form;
}

/* ============================================================================
   Utility Container Query Classes
   ============================================================================ */

/*
 * These utility classes show/hide content based on container size.
 * Use on child elements within a container context.
 *
 * Example:
 *   <div class="container-inline">
 *     <span class="cq-hide-sm">Full text for larger containers</span>
 *     <span class="cq-show-sm">Short</span>
 *   </div>
 */

/* Hide at container breakpoints */
@container (max-width: 320px) {
  .cq-hide-xs { display: none !important; }
}

@container (max-width: 480px) {
  .cq-hide-sm { display: none !important; }
}

@container (max-width: 640px) {
  .cq-hide-md { display: none !important; }
}

@container (max-width: 768px) {
  .cq-hide-lg { display: none !important; }
}

/* Show at container breakpoints (hidden by default) */
.cq-show-xs,
.cq-show-sm,
.cq-show-md,
.cq-show-lg {
  display: none !important;
}

@container (max-width: 320px) {
  .cq-show-xs { display: block !important; }
}

@container (max-width: 480px) {
  .cq-show-sm { display: block !important; }
}

@container (max-width: 640px) {
  .cq-show-md { display: block !important; }
}

@container (max-width: 768px) {
  .cq-show-lg { display: block !important; }
}

/* ============================================================================
   Responsive Card Component
   ============================================================================ */

/*
 * Cards that adapt their layout based on container width.
 * Horizontal layout in wide containers, vertical in narrow ones.
 */

.card-responsive {
  display: grid;
  gap: var(--space-md);
}

@container (min-width: 480px) {
  .card-responsive {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .card-responsive .card-media {
    max-width: 200px;
  }
}

@container (max-width: 479px) {
  .card-responsive {
    grid-template-columns: 1fr;
  }

  .card-responsive .card-media {
    max-width: 100%;
    aspect-ratio: var(--ratio-video);
  }
}

/* ============================================================================
   Responsive Navigation Component
   ============================================================================ */

/*
 * Navigation that collapses based on container width.
 */

.nav-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

@container nav (max-width: 480px) {
  .nav-responsive {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-responsive .nav-link {
    justify-content: center;
    min-height: var(--touch-target-min);
  }
}

/* ============================================================================
   Responsive Form Layout
   ============================================================================ */

/*
 * Form fields that stack vertically in narrow containers.
 */

.form-responsive {
  display: grid;
  gap: var(--space-md);
}

@container form (min-width: 480px) {
  .form-responsive {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-responsive .form-field-full {
    grid-column: 1 / -1;
  }
}

@container form (max-width: 479px) {
  .form-responsive {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Responsive Typography
   ============================================================================ */

/*
 * Text sizing based on container width.
 * Useful for cards, sidebars, and other contained content.
 */

.text-container-fluid {
  font-size: 1rem;
}

@container (max-width: 320px) {
  .text-container-fluid {
    font-size: 0.875rem;
  }

  .heading-container-fluid {
    font-size: 1.25rem;
  }
}

@container (min-width: 640px) {
  .text-container-fluid {
    font-size: 1.125rem;
  }

  .heading-container-fluid {
    font-size: 2rem;
  }
}

/* ============================================================================
   Responsive Spacing
   ============================================================================ */

/*
 * Padding that adapts to container size.
 */

.padding-container-fluid {
  padding: var(--space-sm);
}

@container (min-width: 480px) {
  .padding-container-fluid {
    padding: var(--space-md);
  }
}

@container (min-width: 768px) {
  .padding-container-fluid {
    padding: var(--space-lg);
  }
}

/* ============================================================================
   Container Query Fallback
   ============================================================================ */

/*
 * For browsers that don't support container queries,
 * provide fallback using media queries.
 */

@supports not (container-type: inline-size) {
  /* Fallback: use media queries instead of container queries */

  /* Display utility fallbacks */
  @media (max-width: 320px) {
    .cq-hide-xs { display: none !important; }
    .cq-show-xs { display: block !important; }
  }

  @media (max-width: 480px) {
    .cq-hide-sm { display: none !important; }
    .cq-show-sm { display: block !important; }
  }

  @media (max-width: 640px) {
    .cq-hide-md { display: none !important; }
    .cq-show-md { display: block !important; }
  }

  @media (max-width: 768px) {
    .cq-hide-lg { display: none !important; }
    .cq-show-lg { display: block !important; }
  }

  /* Component pattern fallbacks */
  @media (min-width: 480px) {
    .card-responsive {
      grid-template-columns: auto 1fr;
      align-items: start;
    }

    .card-responsive .card-media {
      max-width: 200px;
    }
  }

  @media (max-width: 479px) {
    .card-responsive {
      grid-template-columns: 1fr;
    }

    .card-responsive .card-media {
      max-width: 100%;
      aspect-ratio: var(--ratio-video);
    }
  }

  @media (max-width: 480px) {
    .nav-responsive {
      flex-direction: column;
      align-items: stretch;
    }

    .nav-responsive .nav-link {
      justify-content: center;
      min-height: var(--touch-target-min);
    }
  }

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

    .form-responsive .form-field-full {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 479px) {
    .form-responsive {
      grid-template-columns: 1fr;
    }
  }

  /* Typography utility fallbacks */
  @media (max-width: 320px) {
    .text-container-fluid {
      font-size: 0.875rem;
    }

    .heading-container-fluid {
      font-size: 1.25rem;
    }
  }

  @media (min-width: 640px) {
    .text-container-fluid {
      font-size: 1.125rem;
    }

    .heading-container-fluid {
      font-size: 2rem;
    }
  }

  /* Spacing utility fallbacks */
  @media (min-width: 480px) {
    .padding-container-fluid {
      padding: var(--space-md);
    }
  }

  @media (min-width: 768px) {
    .padding-container-fluid {
      padding: var(--space-lg);
    }
  }
}