/****************************************************************** 
 * Shared Responsive Utilities
 * Reusable responsive patterns for all themes
 ******************************************************************/

/* ================================================================
   Stack Patterns
   Convert side-by-side layouts to stacked on mobile
   ================================================================ */

/* Stack children vertically below mobile-large breakpoint */
.responsive-stack {
  display: flex;
  flex-direction: row;
}

@media (max-width: 767px) {
  .responsive-stack {
    flex-direction: column;
  }
}

/* Stack children vertically below tablet breakpoint */
.responsive-stack-tablet {
  display: flex;
  flex-direction: row;
}

@media (max-width: 991px) {
  .responsive-stack-tablet {
    flex-direction: column;
  }
}

/* ================================================================
   Grid Patterns
   Responsive grid utilities
   ================================================================ */

/* 2 columns desktop, 1 mobile */
.responsive-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 767px) {
  .responsive-grid-2 {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* 3 columns desktop, 2 tablet, 1 mobile */
.responsive-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .responsive-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 767px) {
  .responsive-grid-3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 4 columns desktop, 2 tablet, 1 mobile */
.responsive-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .responsive-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 767px) {
  .responsive-grid-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ================================================================
   Table Patterns
   Responsive table handling
   ================================================================ */

/* Horizontal scroll on mobile */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table table {
  min-width: 600px;
}

/* Convert table to card layout on mobile */
.responsive-table-stack {
  width: 100%;
}

@media (max-width: 767px) {
  .responsive-table-stack table,
  .responsive-table-stack thead,
  .responsive-table-stack tbody,
  .responsive-table-stack th,
  .responsive-table-stack td,
  .responsive-table-stack tr {
    display: block;
  }
  
  .responsive-table-stack thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .responsive-table-stack tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
  }
  
  .responsive-table-stack td {
    border: none;
    position: relative;
    padding-left: 50%;
    text-align: left;
  }
  
  .responsive-table-stack td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 6px;
    width: 45%;
    font-weight: bold;
  }
}

/* ================================================================
   Navigation Patterns
   Mobile-friendly navigation
   ================================================================ */

/* Vertical stack on mobile */
.responsive-nav-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .responsive-nav-stack {
    flex-direction: column;
  }
}

/* ================================================================
   Container Patterns
   Responsive containers
   ================================================================ */

/* Full width on mobile, constrained on desktop */
.responsive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 767px) {
  .responsive-container {
    padding: 10px;
  }
}

/* Reduced padding on mobile */
.responsive-padding {
  padding: 20px;
}

@media (max-width: 991px) {
  .responsive-padding {
    padding: 15px;
  }
}

@media (max-width: 767px) {
  .responsive-padding {
    padding: 10px;
  }
}

/* ================================================================
   Image/Media Patterns
   Responsive media
   ================================================================ */

/* Responsive images */
.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive video/iframe containers */
.responsive-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ================================================================
   Utility Classes
   Quick responsive utilities
   ================================================================ */

/* Hide on mobile */
.hide-mobile {
  display: block;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* Hide on tablet and below */
.hide-tablet {
  display: block;
}

@media (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Show only on tablet and below */
.show-tablet {
  display: none;
}

@media (max-width: 991px) {
  .show-tablet {
    display: block !important;
  }
}

/* Full width on mobile */
.full-width-mobile {
  width: auto;
}

@media (max-width: 767px) {
  .full-width-mobile {
    width: 100% !important;
  }
}

/* Center align on mobile */
.center-mobile {
  text-align: left;
}

@media (max-width: 767px) {
  .center-mobile {
    text-align: center;
  }
}
