/* ========================================================================
   TrinetraWatch — Layout Stylesheet
   Containers · Grid System · Breakpoints · Sidebar · Card Strip · Mosaic
   ======================================================================== */

/* ========================================================================
   1. Containers
   ======================================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container--narrow {
  max-width: 740px;
}

.container--wide {
  max-width: 1536px;
}

/* ========================================================================
   2. 12-Column Grid System
   ======================================================================== */

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

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

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

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

/* ── Column Span Utilities ─────────────────────────────────────────── */

.col-span-1  { grid-column: span 1;  }
.col-span-2  { grid-column: span 2;  }
.col-span-3  { grid-column: span 3;  }
.col-span-4  { grid-column: span 4;  }
.col-span-5  { grid-column: span 5;  }
.col-span-6  { grid-column: span 6;  }
.col-span-7  { grid-column: span 7;  }
.col-span-8  { grid-column: span 8;  }
.col-span-9  { grid-column: span 9;  }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* ── Row Span Utilities ────────────────────────────────────────────── */

.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* ========================================================================
   3. Hero Grid
   ======================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-6);
}

.hero-grid__main {
  min-width: 0;
}

.hero-grid__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ========================================================================
   4. Section Spacing
   ======================================================================== */

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section--lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

.section--tinted {
  background-color: var(--color-surface);
}

/* ========================================================================
   5. Sidebar Layout
   ======================================================================== */

.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
}

.layout-with-sidebar__content {
  min-width: 0;
}

.layout-with-sidebar__sidebar {
  min-width: 0;
}

.sidebar-widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ========================================================================
   6. Card Strip (Horizontal Scroll)
   ======================================================================== */

.card-strip {
  display: flex;
  overflow-x: auto;
  gap: var(--space-6);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
}

.card-strip::-webkit-scrollbar {
  display: none;
}

.card-strip {
  scrollbar-width: none;
}

.card-strip__item {
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 320px);
  scroll-snap-align: start;
}

/* ========================================================================
   7. Mosaic Grid
   ======================================================================== */

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 240px);
  gap: var(--space-4);
}

.mosaic-grid__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.mosaic-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-grid__item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaic-grid__item--wide {
  grid-column: span 2;
}

/* ========================================================================
   8. Flexbox Utilities
   ======================================================================== */

.flex          { display: flex; }
.flex--center  { display: flex; align-items: center; justify-content: center; }
.flex--between { display: flex; align-items: center; justify-content: space-between; }
.flex--column  { display: flex; flex-direction: column; }
.flex--wrap    { flex-wrap: wrap; }

.gap-1  { gap: var(--space-1);  }
.gap-2  { gap: var(--space-2);  }
.gap-3  { gap: var(--space-3);  }
.gap-4  { gap: var(--space-4);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }

/* ========================================================================
   9. Responsive Visibility
   ======================================================================== */

/* Hidden on mobile (≤ 768px) */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Hidden on desktop (≥ 769px) */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Hidden on tablet (481px – 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

/* ========================================================================
   10. Responsive Breakpoints
   ======================================================================== */

/* ── xs: ≤ 480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ── sm: ≤ 768px (Tablet portrait & below) ─────────────────────── */
@media (max-width: 768px) {
  .grid--2col {
    grid-template-columns: 1fr;
  }

  .grid--3col {
    grid-template-columns: 1fr;
  }

  .grid--4col {
    grid-template-columns: 1fr;
  }

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

  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .mosaic-grid__item--large,
  .mosaic-grid__item--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ── md: ≤ 1024px (Tablet landscape) ────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── lg: ≥ 1280px ─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ── xl: ≥ 1536px ─────────────────────────────────────────────────── */
@media (min-width: 1536px) {
  .container--wide {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}