/* ============================================
   RESPONSIVE.CSS
   Mobile-First Breakpoint Overrides
   Bootstrap-compatible responsive utilities
   ============================================ */

/* ============================================
   SECTION 1: SMALL DEVICES (576px+)
   ============================================ */
@media (min-width: 576px) {
  .d-none-sm {
    display: none;
  }

  .d-block-sm {
    display: block;
  }

  .d-flex-sm {
    display: flex;
  }

  .fs-sm-lg {
    font-size: var(--fs-lg);
  }

  .fs-sm-xl {
    font-size: var(--fs-xl);
  }
}

/* ============================================
   SECTION 2: MEDIUM DEVICES (768px+)
   ============================================ */
@media (min-width: 768px) {
  .d-none-md {
    display: none;
  }

  .d-block-md {
    display: block;
  }

  .d-flex-md {
    display: flex;
  }

  h1, .h1 {
    font-size: var(--fs-6xl);
  }

  h2, .h2 {
    font-size: var(--fs-5xl);
  }

  h3, .h3 {
    font-size: var(--fs-4xl);
  }

  /* Custom grid layouts (use .grid-custom-2 instead of Bootstrap grid) */
  .grid-custom-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .grid-custom-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* Text alignment */
  .text-md-center {
    text-align: center;
  }

  .text-md-left {
    text-align: left;
  }

  /* Flex utilities for tablets */
  .flex-md-row {
    flex-direction: row;
  }

  .flex-md-column {
    flex-direction: column;
  }

  /* Spacing overrides */
  .mt-md-4 {
    margin-top: var(--space-4);
  }

  .mb-md-4 {
    margin-bottom: var(--space-4);
  }

  .px-md-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .py-md-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  /* Button sizing */
  .btn-md-lg {
    padding: 14px 28px;
    font-size: var(--fs-lg);
  }

  /* Card adjustments */
  .card {
    padding: var(--space-4);
  }

  /* Navbar adjustments */
  .navbar {
    padding: var(--space-2) 0;
  }

  /* Hero section */
  .hero {
    /* min-height: 500px;
    padding: var(--space-8) 0; */
  }

  /* Hidden on mobile, shown on tablet */
  .hidden-mobile {
    display: block;
  }

  /* Visible on mobile, hidden on tablet */
  .visible-mobile {
    display: none;
  }
}

/* ============================================
   SECTION 3: LARGE DEVICES (992px+)
   ============================================ */
@media (min-width: 992px) {
  .d-none-lg {
    display: none;
  }

  .d-block-lg {
    display: block;
  }

  .d-flex-lg {
    display: flex;
  }

  .grid-custom-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .text-lg-right {
    text-align: right;
  }

  .text-lg-center {
    text-align: center;
  }

  .mt-lg-6 {
    margin-top: var(--space-6);
  }

  .mb-lg-6 {
    margin-bottom: var(--space-6);
  }

  .px-lg-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .py-lg-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  /* Navbar on large screens */
  .navbar {
    padding: var(--space-3) 0;
  }

  .navbar-menu {
    display: flex !important;
    align-items: center;
    gap: var(--space-4);
  }

  .navbar-toggle {
    display: none;
  }

  /* Hero section */
  .hero {
    /* min-height: 600px;
    padding: var(--space-12) 0; */
  }

  /* Two-column layout */
  .cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }

  .cols-2 img {
    width: 100%;
    height: auto;
  }

  /* Featured section */
  .featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  /* Sidebar layout */
  .sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-6);
  }

  .sidebar {
    padding: var(--space-4);
    background: var(--color-light-bg);
    border-radius: var(--radius-lg);
    height: fit-content;
    position: sticky;
    top: 100px;
  }
}

/* ============================================
   SECTION 4: EXTRA LARGE DEVICES (1200px+)
   ============================================ */
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 4rem;
  }

  h2, .h2 {
    font-size: 3.5rem;
  }

  h3, .h3 {
    font-size: 2.75rem;
  }

  .grid-custom-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
  }

  .d-none-xl {
    display: none;
  }

  .d-block-xl {
    display: block;
  }

  /* Enhanced spacing on XL */
  .px-xl-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .py-xl-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  /* Wide layout */
  .wide-layout {
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Full width on XL */
  .full-width-xl {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .featured-lg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* ============================================
   SECTION 5: ULTRA LARGE DEVICES (1400px+)
   ============================================ */
@media (min-width: 1400px) {
  .d-none-2xl {
    display: none;
  }

  .d-block-2xl {
    display: block;
  }

  /* Premium spacing on ultra-wide */
  .mt-2xl-10 {
    margin-top: var(--space-10);
  }

  .mb-2xl-10 {
    margin-bottom: var(--space-10);
  }

  .px-2xl-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }

  .py-2xl-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .hero {
    /* min-height: 700px;
    padding: var(--space-16) 0; */
  }
}

/* ============================================
   SECTION 6: MOBILE-SPECIFIC OVERRIDES
   ============================================ */
@media (max-width: 767px) {
  /* Hide elements on mobile */
  .d-none-mobile {
    display: none;
  }

  .d-block-mobile {
    display: block;
  }

  .d-flex-mobile {
    display: flex;
  }

  /* Mobile-optimized spacing */
  .p-mobile {
    padding: var(--space-2);
  }

  .m-mobile {
    margin: var(--space-2);
  }

  /* Mobile-optimized buttons */
  .btn {
    padding: 12px 16px;
    font-size: var(--fs-sm);
    width: 100%;
    display: flex;
  }

  /* Mobile-optimized forms */
  input,
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
  }

  /* Stack elements on mobile */
  .flex-mobile-column {
    flex-direction: column;
  }

  /* Full width on mobile */
  .w-mobile-100 {
    width: 100%;
  }

  /* Mobile navigation */
  .navbar-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-white);
    padding: var(--space-3);
    box-shadow: var(--shadow-lg);
    z-index: 999;
  }

  .navbar-menu.active {
    display: flex;
  }

  .navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }

  .navbar-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-dark-text);
    margin: 5px 0;
    transition: all var(--transition-base);
  }

  /* Mobile card layout */
  .card {
    margin-bottom: var(--space-3);
  }

  /* Mobile grid single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  /* Hero on mobile */
  .hero {
    /* min-height: 300px;
    padding: var(--space-4) var(--space-2); */
  }

  h1, .h1 {
    font-size: var(--fs-4xl);
  }

  h2, .h2 {
    font-size: var(--fs-3xl);
  }

  h3, .h3 {
    font-size: var(--fs-2xl);
  }

  /* Two-column to single on mobile */
  .cols-2 {
    grid-template-columns: 1fr;
  }

  /* Sidebar to single column on mobile */
  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    top: auto;
  }
}

/* ============================================
   SECTION 7: LANDSCAPE MODE (Mobile)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 300px;
    padding: var(--space-4) 0;
  }

  h1, .h1 {
    font-size: var(--fs-3xl);
  }

  .navbar {
    padding: var(--space-1) 0;
  }
}

/* ============================================
   SECTION 8: TOUCH DEVICES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .btn {
    padding: 14px 20px; /* Larger touch target */
  }

  .btn:active {
    transform: scale(0.98);
  }

  a:active {
    opacity: 0.8;
  }

  /* Disable hover effects on touch */
  .card:hover {
    box-shadow: var(--shadow-base);
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ============================================
   SECTION 9: DARK MODE ADJUSTMENTS
   ============================================ */
@media (prefers-color-scheme: dark) {
  .card {
    background: #2A2A2A;
    border-color: #444444;
  }

  .alert-success {
    background-color: #1E4620;
    border-color: #2D5C2E;
    color: #90EE90;
  }

  .alert-danger {
    background-color: #4D1D26;
    border-color: #6B2A35;
    color: #FF6B7A;
  }

  .btn-secondary {
    background-color: #3A3A3A;
    border-color: #555555;
    color: #E0E0E0;
  }
}

/* ============================================
   SECTION 10: PRINT MEDIA
   ============================================ */
@media print {
  body {
    background: white;
    color: black;
  }

  .navbar,
  .navbar-menu,
  .navbar-toggle,
  .no-print,
  .btn-primary,
  .btn-secondary {
    display: none !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  img {
    max-width: 100%;
  }

  .page-break {
    page-break-after: always;
  }
}

/* ============================================
   SECTION 11: UTILITY ALIGNMENT RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
  .flex-md-start {
    justify-content: flex-start;
  }

  .flex-md-center {
    justify-content: center;
  }

  .flex-md-end {
    justify-content: flex-end;
  }

  .flex-md-between {
    justify-content: space-between;
  }

  .items-md-start {
    align-items: flex-start;
  }

  .items-md-center {
    align-items: center;
  }

  .items-md-end {
    align-items: flex-end;
  }
}

@media (min-width: 992px) {
  .flex-lg-start {
    justify-content: flex-start;
  }

  .flex-lg-center {
    justify-content: center;
  }

  .flex-lg-end {
    justify-content: flex-end;
  }

  .flex-lg-between {
    justify-content: space-between;
  }

  .items-lg-start {
    align-items: flex-start;
  }

  .items-lg-center {
    align-items: center;
  }

  .items-lg-end {
    align-items: flex-end;
  }
}