/**
 * Responsive Styles
 * Mobile-first breakpoints and responsive utilities
 */

/* ============================================
   Bootstrap 5.3 Breakpoints
   - Mobile: < 576px (base styles)
   - Tablet: ≥ 768px
   - Desktop: ≥ 992px
   - Large: ≥ 1200px
   ============================================ */

/* ============================================
   Mobile (Base Styles - Already Applied)
   ============================================ */

/* ============================================
   Tablet and Up (≥ 768px)
   ============================================ */
@media (min-width: 768px) {
  /* Typography */
  .section-title {
    font-size: var(--text-2xl);
  }

  .section-description {
    font-size: var(--text-xl);
  }

  /* Spacing */
  section {
    padding-block: var(--section-spacing);
  }

  /* Note: Bootstrap column classes (col-md-*) are handled by Bootstrap CSS */
}

/* ============================================
   Desktop and Up (≥ 992px)
   ============================================ */
@media (min-width: 992px) {
  /* Typography */
  .section-title {
    font-size: var(--text-3xl);
  }

  /* Note: Bootstrap column classes (col-lg-*) are handled by Bootstrap CSS */
}

/* ============================================
   Large Desktop and Up (≥ 1200px)
   ============================================ */
@media (min-width: 1200px) {
  /* Container */
  .container {
    max-width: var(--container-max);
  }
}

/* ============================================
   Responsive Utilities
   ============================================ */

/* Display utilities */
@media (max-width: 767px) {
  .d-md-none {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .d-none.d-md-block {
    display: block !important;
  }
}

/* Text alignment */
@media (max-width: 767px) {
  .text-md-start {
    text-align: start;
  }
}

@media (min-width: 768px) {
  .text-md-start {
    text-align: start;
  }
}

/* ============================================
   Mobile Navigation Adjustments
   ============================================ */
@media (max-width: 767px) {
  /* Stack buttons vertically on mobile */
  .btn-group-mobile {
    flex-direction: column;
    gap: var(--space-3);
  }

  .btn-group-mobile .btn {
    width: 100%;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 2cm;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}