/* ========================================
   RESPONSIVE DESIGN
   Mobile-First Approach
   ======================================== */

/* ========================================
   MOBILE (< 768px) - Base Styles
   These are the default styles
   ======================================== */

/* ========================================
   MOBILE OVERRIDES
   Landing page responsive handled in main.css
   ======================================== */

/* Mobile utility controls adjustments */
@media (max-width: 480px) {
  .utility-controls {
    padding: 0.75rem;
  }

  .language-widget {
    padding: 0.35rem;
  }

  .accessibility-widget {
    padding: 0.3rem;
    gap: 0.25rem;
  }

  .a11y-btn {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .a11y-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* Header mobile adjustments */
.site-header {
  padding: calc(var(--spacing-md) * 3.75) 0; /* Slightly smaller on mobile, 25% increase */
}

.site-header .site-title a {
  font-size: 1.75rem;
}

.main-nav {
  gap: 0.5rem;
  font-size: 0.9rem;
}

.main-nav a {
  padding: 0.5rem 0.75rem;
}

/* Category grid on mobile - single column */
.category-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1rem 2rem;
}

.category-card {
  max-width: 100%;
}

/* Carousel on mobile - 2 columns */
.carousel-container {
  padding: 0 50px;
}

.category-carousel {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Article mobile adjustments */
article {
  padding: 1.5rem;
}

.article-container {
  padding: 1rem;
}

/* Form mobile adjustments */
.form-container {
  padding: 1rem;
}

form {
  padding: 1.5rem;
}

/* Footer mobile adjustments */
.footer-nav {
  flex-direction: column;
  gap: 0.5rem;
}

/* Typography mobile adjustments */
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Page header mobile adjustments */
.page-header {
  min-height: 400px;
  padding: var(--space-12) var(--space-4) var(--space-16);
}

.page-header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.page-header p {
  font-size: clamp(0.95rem, 2vw, 1.125rem);
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */

@media (min-width: 768px) {
  /* Header */
  .site-header {
    padding: calc(var(--spacing-md) * 4.375) 0; /* Tablet size, 25% increase */
  }

  .site-header .site-title a {
    font-size: 2rem;
  }

  .main-nav {
    gap: 1rem;
    font-size: 1rem;
  }

  /* Category grid - 2 columns on tablet */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 2rem 3rem;
  }

  /* Carousel on tablet - 2 columns */
  .category-carousel {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Article */
  article {
    padding: 2rem;
  }

  .article-container {
    padding: 1.5rem;
  }

  /* Form */
  .form-container {
    padding: 1.5rem;
  }

  form {
    padding: 2rem;
  }

  /* Footer */
  .footer-nav {
    flex-direction: row;
    gap: 1rem;
  }

  /* Typography */
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.65rem; }
  h4 { font-size: 1.4rem; }
  h5 { font-size: 1.2rem; }
  h6 { font-size: 1rem; }

  body {
    font-size: 17px;
  }

  /* Page header tablet adjustments */
  .page-header {
    min-height: 500px;
    padding: var(--space-16) var(--space-6) var(--space-20);
  }

  .page-header h2 {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
  }

  .page-header p {
    font-size: clamp(1.0625rem, 2.25vw, 1.375rem);
  }
}

/* ========================================
   DESKTOP (1024px and above)
   ======================================== */

@media (min-width: 1024px) {
  /* Header */
  .site-header {
    padding: calc(var(--spacing-md) * 5) 0; /* Full height on desktop, 25% increase */
  }

  .site-header .site-title a {
    font-size: 2.5rem;
  }

  .main-nav {
    gap: 1.5rem;
  }

  /* Category grid - 3 columns on desktop */
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Carousel on desktop - 3 columns */
  .category-carousel {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Article */
  article {
    padding: 3rem;
  }

  .article-container {
    padding: 2rem;
  }

  /* Form */
  .form-container {
    padding: 2rem;
  }

  form {
    padding: 2.5rem;
  }

  /* Footer */
  .footer-nav {
    gap: 1.5rem;
  }

  /* Typography */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1rem; }

  body {
    font-size: 18px;
  }

  /* Page header desktop adjustments */
  .page-header {
    min-height: 600px;
    padding: var(--space-20) var(--space-6) var(--space-24);
  }

  .page-header h2 {
    font-size: clamp(3rem, 6vw, 5rem);
  }

  .page-header p {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  }

  /* Hover effects on desktop only */
  .category-card:hover {
    transform: translateY(-4px);
  }

  .enter-button:hover {
    transform: scale(1.05);
  }
}

/* ========================================
   LARGE DESKTOP (1440px and above)
   ======================================== */

@media (min-width: 1440px) {
  /* Wider max-width for large screens */
  .category-grid {
    max-width: 1400px;
  }

  .header-container,
  .footer-container {
    max-width: 1400px;
  }

  /* Typography adjustments */
  body {
    font-size: 19px;
  }

  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.9rem; }
}

/* ========================================
   EXTRA LARGE DESKTOP (1920px and above)
   ======================================== */

@media (min-width: 1920px) {
  /* Even wider for very large screens */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
  }

  body {
    font-size: 20px;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION (Mobile/Tablet)
   ======================================== */

@media (max-height: 600px) and (orientation: landscape) {
  /* Landscape adjustments handled in main.css */
  .utility-controls {
    padding: 0.5rem;
  }
}

/* ========================================
   HIGH RESOLUTION DISPLAYS (Retina)
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp rendering on high-DPI displays */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* SVG icons will automatically scale well */
  /* Use @2x images for raster graphics if needed */
}

/* ========================================
   CONTAINER QUERIES (Modern Browsers)
   ======================================== */

/* Future-proof: Container queries for component-level responsiveness */
@supports (container-type: inline-size) {
  .category-grid {
    container-type: inline-size;
  }

  @container (min-width: 600px) {
    .category-card {
      /* Adjust card layout based on container width */
    }
  }
}

/* ========================================
   DARK MODE SUPPORT (Experimental)
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Respect system dark mode preference */
  /* This is optional and can be enabled later */

  /* Example:
  body:not(.high-contrast) {
    background-color: #1a202c;
    color: #e2e8f0;
  }
  */
}

/* ========================================
   TOUCH VS NON-TOUCH DEVICES
   ======================================== */

/* Larger touch targets for touch devices */
@media (pointer: coarse) {
  /* Coarse pointer = touch device */
  button,
  .button,
  a.enter-button {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1.25rem;
  }

  .category-link {
    padding: 1.5rem;
  }

  .main-nav a {
    padding: 0.75rem 1rem;
  }
}

/* Hover effects only for devices with precise pointers */
@media (hover: hover) and (pointer: fine) {
  /* Fine pointer + hover = mouse/trackpad */
  /* Hover effects are already defined in main.css */
  /* This media query ensures they only apply on appropriate devices */
}

/* ========================================
   REDUCED DATA MODE
   ======================================== */

@media (prefers-reduced-data: reduce) {
  /* Load fewer resources for users with data constraints */
  .owl-logo,
  .category-icon svg {
    /* Could load simpler versions or skip decorative images */
  }
}

/* ========================================
   ACCESSIBILITY: INCREASED CONTRAST
   ======================================== */

@media (prefers-contrast: more) {
  /* Enhance contrast for users who request it */
  :root {
    --primary-color: #1A365D;
    --text-color: #000000;
    --border-color: #718096;
  }

  button,
  .button {
    border: 2px solid currentColor;
  }

  a {
    text-decoration: underline;
  }
}

/* ========================================
   PRINT RESPONSIVE ADJUSTMENTS
   ======================================== */

@media print {
  /* Ensure print layout is readable */
  * {
    background: white !important;
    color: black !important;
  }

  .category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .category-card {
    page-break-inside: avoid;
  }
}