/* =========================================================================
   2026 MODERN DESIGN — RESPONSIVE UTILITIES & LAYOUT HELPERS
   
   Breakpoints:
   • Mobile: < 480px
   • Tablet: 480px - 768px
   • Desktop: 768px - 1024px
   • Widescreen: 1024px - 1920px
   • Ultrawide: 1920px+
   ========================================================================= */

/* ────────────────────────────────────────────────────────────────────
   RESPONSIVE DISPLAY UTILITIES
   ──────────────────────────────────────────────────────────────────── */

/* Mobile-only (< 480px) */
.show-mobile { display: none; }
.hide-mobile { display: block; }

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

/* Tablet-only (480px - 768px) */
.show-tablet { display: none; }
.hide-tablet { display: block; }

@media (min-width: 480px) and (max-width: 767px) {
  .show-tablet { display: block !important; }
  .hide-tablet { display: none !important; }
}

/* Desktop-only (768px+) */
.show-desktop { display: none; }
.hide-desktop { display: block; }

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

/* Widescreen-only (1024px+) */
.show-widescreen { display: none; }
.hide-widescreen { display: block; }

@media (min-width: 1024px) {
  .show-widescreen { display: block !important; }
  .hide-widescreen { display: none !important; }
}

/* Ultrawide-only (1920px+) */
.show-ultrawide { display: none; }
.hide-ultrawide { display: block; }

@media (min-width: 1920px) {
  .show-ultrawide { display: block !important; }
  .hide-ultrawide { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   RESPONSIVE PADDING
   ──────────────────────────────────────────────────────────────────── */

/* Mobile defaults */
.px-mobile { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.py-mobile { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

@media (min-width: 768px) {
  .px-tablet { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .py-tablet { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
}

@media (min-width: 1024px) {
  .px-desktop { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
  .py-desktop { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
}

/* ────────────────────────────────────────────────────────────────────
   RESPONSIVE SECTION PADDING
   ──────────────────────────────────────────────────────────────────── */

.section {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

@media (min-width: 768px) {
  .section {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--spacing-3xl) var(--spacing-2xl);
  }
}

.section-sm {
  padding: var(--spacing-lg) var(--spacing-md);
}

.section-lg {
  padding: var(--spacing-3xl) var(--spacing-lg);
}

.section-xl {
  padding: var(--spacing-3xl) var(--spacing-2xl);
}

/* ────────────────────────────────────────────────────────────────────
   TWO-COLUMN RESPONSIVE LAYOUT
   ──────────────────────────────────────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
  
  .two-col-reverse {
    direction: rtl;
  }
  
  .two-col-reverse > * {
    direction: ltr;
  }
}

@media (max-width: 767px) {
  .two-col-no-stack {
    grid-template-columns: 1fr 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────
   THREE-COLUMN RESPONSIVE LAYOUT
   ──────────────────────────────────────────────────────────────────── */

.three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 480px) {
  .three-col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .three-col {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────
   SIDEBAR LAYOUT
   ──────────────────────────────────────────────────────────────────── */

.with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .with-sidebar {
    grid-template-columns: 1fr 300px;
  }
  
  .with-sidebar-left {
    grid-template-columns: 300px 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TYPOGRAPHY RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }
  
  .hero-title { font-size: 2rem !important; }
  .hero-subtitle { font-size: 1rem !important; }
}

/* ────────────────────────────────────────────────────────────────────
   GRID RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

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

.grid-responsive {
  display: grid;
  gap: var(--spacing-lg);
}

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

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

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

/* ────────────────────────────────────────────────────────────────────
   FLEX RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .flex-responsive {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.flex-center-responsive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .flex-center-responsive {
    flex-direction: row;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TABLE RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

thead {
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-subtle);
}

th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

tbody tr {
  transition: background-color var(--transition-fast);
}

tbody tr:hover {
  background-color: var(--bg-hover);
}

/* Responsive Table */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { margin-bottom: var(--spacing-lg); }
  
  td {
    position: relative;
    padding-left: 50%;
    border: none;
    border-bottom: 1px solid var(--border-light);
  }
  
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--text-secondary);
  }
}

/* ────────────────────────────────────────────────────────────────────
   CARD GRID RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  gap: var(--spacing-lg);
}

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

@media (min-width: 480px) and (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1920px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ────────────────────────────────────────────────────────────────────
   BUTTON RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
  }
  
  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
  }
}

/* ────────────────────────────────────────────────────────────────────
   CONTAINER RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

.container-responsive {
  width: 100%;
  padding: 0 var(--spacing-md);
}

@media (min-width: 480px) {
  .container-responsive {
    padding: 0 var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .container-responsive {
    padding: 0 var(--spacing-xl);
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: 960px;
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1200px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ──────────────────────────────────────────────────────────────────── */

@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }
}

/* ────────────────────────────────────────────────────────────────────
   SCROLL & OVERFLOW UTILITIES
   ──────────────────────────────────────────────────────────────────── */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.scroll-smooth { scroll-behavior: smooth; }

/* ────────────────────────────────────────────────────────────────────
   POSITION UTILITIES
   ──────────────────────────────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }

/* ────────────────────────────────────────────────────────────────────
   ASPECT RATIO UTILITIES
   ──────────────────────────────────────────────────────────────────── */

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-[3/2] {
  aspect-ratio: 3 / 2;
}

/* ────────────────────────────────────────────────────────────────────
   WIDTH & HEIGHT UTILITIES
   ──────────────────────────────────────────────────────────────────── */

.w-full { width: 100%; }
.w-1/2 { width: 50%; }
.w-1/3 { width: 33.333%; }
.w-2/3 { width: 66.666%; }
.w-1/4 { width: 25%; }
.w-3/4 { width: 75%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

.max-w-full { max-width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 768px; }
.max-w-lg { max-width: 1024px; }
.max-w-xl { max-width: 1280px; }

/* ────────────────────────────────────────────────────────────────────
   EDGE CASES & MOBILE-FIRST UTILITIES
   ──────────────────────────────────────────────────────────────────── */

.no-scroll { overflow: hidden; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}