/* ==========================================================================
   TRYOOZEN TECH — Layout & Container System
   Version: 2.0.0 (Visual DNA & Design Foundation)
   Responsive container, grid utilities, section spacing, and dividers.
   Mobile-first breakpoint strategy per Skill 08 (6 viewport classes).
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   CONTAINERS (Titan 02 Section 15)
   ────────────────────────────────────────────────────────────────────────── */
.tz-container {
  width: 100%;
  max-width: var(--tz-container-xl);
  margin-inline: auto;
  padding-inline: var(--tz-container-padding);
}

.tz-container--sm {
  max-width: var(--tz-container-sm);
}

.tz-container--md {
  max-width: var(--tz-container-md);
}

.tz-container--lg {
  max-width: var(--tz-container-lg);
}

.tz-container--xl {
  max-width: var(--tz-container-xl);
}

.tz-container--full {
  max-width: var(--tz-container-full);
}

/* Backwards compatibility */
.tz-container--narrow {
  max-width: var(--tz-container-md);
}

.tz-container--wide {
  max-width: var(--tz-container-full);
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION SYSTEM & BACKGROUND VARIANTS (Titan 02 Section 72)
   ────────────────────────────────────────────────────────────────────────── */
.tz-section {
  padding-block: var(--tz-space-12);
  position: relative;
}

@media (min-width: 768px) {
  .tz-section {
    padding-block: var(--tz-space-16);
  }
}

@media (min-width: 1280px) {
  .tz-section {
    padding-block: var(--tz-space-20);
  }
}

/* Surface Variants */
.tz-section--default {
  background-color: transparent;
}

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

.tz-section--elevated {
  background-color: var(--tz-bg-elevated);
}

.tz-section--gradient {
  background-image: var(--tz-gradient-surface);
}

.tz-section--feature {
  background-color: var(--tz-bg-surface);
  background-image: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.08), transparent 70%);
}

.tz-section--glass {
  background-color: var(--tz-glass-bg);
  backdrop-filter: blur(var(--tz-glass-blur));
  -webkit-backdrop-filter: blur(var(--tz-glass-blur));
  border-top: 1px solid var(--tz-border-subtle);
  border-bottom: 1px solid var(--tz-border-subtle);
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION HEADER COMPONENT
   Standard title + subtitle + optional action link
   ────────────────────────────────────────────────────────────────────────── */
.tz-section-header {
  margin-bottom: var(--tz-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--tz-space-2);
}

.tz-section-header--center {
  text-align: center;
  align-items: center;
}

.tz-section-header__tag {
  color: var(--tz-accent-cyan);
  font-size: var(--tz-label-sm);
  font-weight: var(--tz-font-weight-semibold);
  letter-spacing: var(--tz-tracking-wider);
  text-transform: uppercase;
}

.tz-section-header__title {
  color: var(--tz-text-primary);
  font-size: var(--tz-heading-xl);
  font-weight: var(--tz-font-weight-bold);
  line-height: var(--tz-leading-snug);
}

@media (min-width: 768px) {
  .tz-section-header__title {
    font-size: var(--tz-display-md);
  }
}

.tz-section-header__desc {
  color: var(--tz-text-secondary);
  font-size: var(--tz-body-md);
  max-width: 680px;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE GRIDS (Titan 02 Section 18)
   ────────────────────────────────────────────────────────────────────────── */
.tz-grid {
  display: grid;
  gap: var(--tz-space-6);
}

/* Single column on mobile, 2 on tablet, 3 on desktop */
.tz-grid--cards {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tz-grid--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* 4-column product/deal grid */
.tz-grid--4col {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .tz-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Intent selector: 2 cols mobile, 3 cols tablet, 6 cols desktop */
.tz-grid--intents {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tz-space-3);
}

@media (min-width: 768px) {
  .tz-grid--intents {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tz-space-4);
  }
}

@media (min-width: 1280px) {
  .tz-grid--intents {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--tz-space-4);
  }
}

/* Feature Artwork Rail / Utility Cluster (Titan 02 Section 50) */
.tz-grid--artwork {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tz-space-4);
}

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

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

/* ──────────────────────────────────────────────────────────────────────────
   VISUAL DIVIDERS (Titan 02 Section 73)
   ────────────────────────────────────────────────────────────────────────── */
.tz-divider {
  height: 1px;
  width: 100%;
  background: var(--tz-border-subtle);
  border: none;
  margin: var(--tz-space-8) 0;
}

.tz-divider--gradient {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--tz-border-default) 50%, transparent 100%);
  border: none;
  margin: var(--tz-space-8) 0;
}

.tz-divider--brand {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--tz-accent-cyan) 30%, var(--tz-accent-purple) 70%, transparent 100%);
  border: none;
  margin: var(--tz-space-8) 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   FLEX UTILITIES
   ────────────────────────────────────────────────────────────────────────── */
.tz-flex {
  display: flex;
}

.tz-flex--center {
  align-items: center;
  justify-content: center;
}

.tz-flex--between {
  align-items: center;
  justify-content: space-between;
}

.tz-flex--col {
  flex-direction: column;
}

.tz-flex--wrap {
  flex-wrap: wrap;
}

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

/* ──────────────────────────────────────────────────────────────────────────
   STACK UTILITIES
   ────────────────────────────────────────────────────────────────────────── */
.tz-stack > * + * {
  margin-top: var(--tz-space-4);
}

.tz-stack--sm > * + * {
  margin-top: var(--tz-space-2);
}

.tz-stack--lg > * + * {
  margin-top: var(--tz-space-8);
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE VISIBILITY
   ────────────────────────────────────────────────────────────────────────── */
.tz-hide-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .tz-hide-mobile {
    display: initial !important;
  }
}

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