/*
 * File: css/base/breakpoints.css
 * Logic: Mobile-first responsive utilities & media-query reference.
 * Sync: websdt_theme_master.breakpoints.yml (768 / 1024 / 1280 px).
 * Note: @media cannot use var() — values are duplicated intentionally.
 */

/* ==========================================================================
   VISIBILITY — mobile-first show/hide
   ========================================================================== */
.wsdt-hidden { display: none; }

/* Visible only below tablet (< 768px) */
.wsdt-only-mobile { display: block; }
.wsdt-only-mobile.wsdt-flex { display: flex; }
.wsdt-only-mobile.wsdt-inline-flex { display: inline-flex; }
@media (min-width: 768px) {
  .wsdt-only-mobile { display: none; }
}

/* Hidden on mobile, visible from tablet up */
.wsdt-from-tablet { display: none; }
@media (min-width: 768px) {
  .wsdt-from-tablet { display: block; }
  .wsdt-from-tablet.wsdt-flex { display: flex; }
  .wsdt-from-tablet.wsdt-inline-flex { display: inline-flex; }
}

/* Visible on mobile, hidden from tablet up */
.wsdt-until-tablet { display: block; }
.wsdt-until-tablet.wsdt-flex { display: flex; }
.wsdt-until-tablet.wsdt-inline-flex { display: inline-flex; }
@media (min-width: 768px) {
  .wsdt-until-tablet { display: none; }
}

/* Hidden until desktop (visible < 1024px) */
.wsdt-until-desktop { display: block; }
.wsdt-until-desktop.wsdt-flex { display: flex; }
@media (min-width: 1024px) {
  .wsdt-until-desktop { display: none; }
}

/* Visible from desktop up */
.wsdt-from-desktop { display: none; }
@media (min-width: 1024px) {
  .wsdt-from-desktop { display: block; }
  .wsdt-from-desktop.wsdt-flex { display: flex; }
}

/* Visible from wide up */
.wsdt-from-wide { display: none; }
@media (min-width: 1280px) {
  .wsdt-from-wide { display: block; }
  .wsdt-from-wide.wsdt-flex { display: flex; }
}

/* ==========================================================================
   FLEX DIRECTION — tablet / desktop upgrades
   ========================================================================== */
@media (min-width: 768px) {
  .wsdt-flex-row-tablet { flex-direction: row; }
  .wsdt-flex-col-tablet { flex-direction: column; }
  .wsdt-justify-end-tablet { justify-content: flex-end; }
  .wsdt-justify-self-end-tablet { justify-self: end; }
  .py-2xl-tablet {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  .wsdt-action-row { flex-direction: row; }
  .wsdt-w-auto-tablet { width: auto; }
}

@media (min-width: 1024px) {
  .wsdt-flex-row-desktop { flex-direction: row; }
  .wsdt-flex-col-desktop { flex-direction: column; }
  .py-3xl-desktop {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
  .wsdt-text-left-desktop { text-align: left; }
  .wsdt-text-right-desktop { text-align: right; }
}

/* ==========================================================================
   GAP — responsive upgrades
   ========================================================================== */
@media (min-width: 768px) {
  .wsdt-gap-md-tablet { gap: var(--space-md); }
  .wsdt-gap-lg-tablet { gap: var(--space-lg); }
  .wsdt-gap-xl-tablet { gap: var(--space-xl); }
}

@media (min-width: 1024px) {
  .wsdt-gap-lg-desktop { gap: var(--space-lg); }
  .wsdt-gap-xl-desktop { gap: var(--space-xl); }
  .wsdt-gap-2xl-desktop { gap: var(--space-2xl); }
}

/* ==========================================================================
   TYPOGRAPHY — responsive scale upgrades
   ========================================================================== */
@media (min-width: 768px) {
  .wsdt-text-h1-tablet {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
  }
  .wsdt-text-h2-tablet {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
  }
}

@media (min-width: 1024px) {
  .wsdt-text-h1-desktop {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
  }
}

/* ==========================================================================
   LAYOUT — container padding upgrades (macro wrappers)
   ========================================================================== */
.wsdt-container-pad {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

@media (min-width: 768px) {
  .wsdt-container-pad {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .wsdt-container-pad {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

@media (min-width: 1280px) {
  .wsdt-container-pad {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}