/* ============================================================
   utilities.css — Zazenware MVP1
   Reusable layout and helper classes.
   Every class is prefixed zw-.
   Depends on: tokens.css
   ============================================================ */

/* -------------------------------------------------------
   SKIP LINK
   Must be the very first focusable element on every page.
------------------------------------------------------- */
.zw-skip-link {
  position: absolute;
  top: -100%;
  left: var(--zw-space-4);
  z-index: calc(var(--zw-z-header) + 10);
  background-color: var(--zw-block);
  color: var(--zw-block-text);
  padding: var(--zw-space-3) var(--zw-space-6);
  font-family: var(--zw-font-body);
  font-size: var(--zw-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: var(--zw-border-width-heavy) solid var(--zw-border);
  box-shadow: var(--zw-shadow-sm);
}

.zw-skip-link:focus {
  top: var(--zw-space-4);
  outline: 3px solid var(--zw-focus-ring);
  outline-offset: 2px;
}

/* -------------------------------------------------------
   CONTAINER
------------------------------------------------------- */
.zw-container {
  width: 100%;
  max-width: var(--zw-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--zw-container-pad);
  padding-right: var(--zw-container-pad);
}

@media (min-width: 48em) {
  .zw-container {
    padding-left: var(--zw-container-pad-md);
    padding-right: var(--zw-container-pad-md);
  }
}

/* -------------------------------------------------------
   STACK — vertical flex column with gap
------------------------------------------------------- */
.zw-stack {
  display: flex;
  flex-direction: column;
  gap: var(--zw-space-6);
}

.zw-stack--sm  { gap: var(--zw-space-3); }
.zw-stack--md  { gap: var(--zw-space-6); }
.zw-stack--lg  { gap: var(--zw-space-12); }
.zw-stack--xl  { gap: var(--zw-space-16); }

/* -------------------------------------------------------
   CLUSTER — horizontal wrapping group
------------------------------------------------------- */
.zw-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zw-space-4);
  align-items: center;
}

.zw-cluster--sm    { gap: var(--zw-space-2); }
.zw-cluster--lg    { gap: var(--zw-space-6); }
.zw-cluster--start { align-items: flex-start; }
.zw-cluster--end   { justify-content: flex-end; }
.zw-cluster--between { justify-content: space-between; }

/* -------------------------------------------------------
   GRID — responsive card grid
   Mobile (≤767px): 1 column
   Desktop (768px+): 2 columns
------------------------------------------------------- */
.zw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zw-space-6);
}

@media (min-width: 768px) {
  .zw-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grid modifiers */
.zw-grid--tight { gap: var(--zw-space-4); }
.zw-grid--wide  { gap: var(--zw-space-8); }

/* Named column layouts (override responsive) */
.zw-grid--1 { grid-template-columns: 1fr; }
.zw-grid--2 { grid-template-columns: 1fr 1fr; }
.zw-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 767px) {
  .zw-grid--2,
  .zw-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Full-width spanning for loading/empty states */
.zw-grid > .zw-panel[aria-busy="true"],
.zw-grid > .zw-panel:empty,
.zw-grid > article:has(> .zw-text-muted) {
  grid-column: 1 / -1;
}

/* -------------------------------------------------------
   FLOW — prose content spacing between children
------------------------------------------------------- */
.zw-flow > * + * {
  margin-top: var(--zw-space-4);
}

.zw-flow--sm > * + * { margin-top: var(--zw-space-2); }
.zw-flow--lg > * + * { margin-top: var(--zw-space-8); }

/* -------------------------------------------------------
   SECTION SPACING
------------------------------------------------------- */
.zw-section {
  padding-top: var(--zw-space-16);
  padding-bottom: var(--zw-space-16);
}

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

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

/* -------------------------------------------------------
   VISUALLY HIDDEN — accessible text, hide from sight only
------------------------------------------------------- */
.zw-vh,
.zw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal on focus (for skip links etc.) */
.zw-vh--focusable:focus,
.zw-vh--focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* -------------------------------------------------------
   TEXT UTILITIES
------------------------------------------------------- */
.zw-text-display {
  font-family: var(--zw-font-display);
  text-transform: lowercase;
  font-weight: 400;
}

.zw-text-muted {
  color: var(--zw-text-muted);
}

.zw-text-accent {
  color: var(--zw-accent);
}

.zw-text-xs   { font-size: var(--zw-text-xs); }
.zw-text-sm   { font-size: var(--zw-text-sm); }
.zw-text-base { font-size: var(--zw-text-base); }
.zw-text-lg   { font-size: var(--zw-text-lg); }
.zw-text-xl   { font-size: var(--zw-text-xl); }

.zw-text-center { text-align: center; }
.zw-text-left   { text-align: left; }
.zw-text-right  { text-align: right; }

.zw-font-bold   { font-weight: 700; }
.zw-uppercase   { text-transform: uppercase; letter-spacing: 0.05em; }

/* -------------------------------------------------------
   BLOCK UTILITIES — primary and secondary block surfaces
------------------------------------------------------- */
.zw-block-primary {
  background-color: var(--zw-block);
  color: var(--zw-block-text);
  border: var(--zw-border-width-heavy) solid var(--zw-border);
  padding: var(--zw-space-6) var(--zw-space-8);
}

.zw-block-surface {
  background-color: var(--zw-surface);
  border: var(--zw-border-width-heavy) solid var(--zw-border);
  padding: var(--zw-space-6) var(--zw-space-8);
}

/* -------------------------------------------------------
   HARD-SHADOW UTILITIES
------------------------------------------------------- */
.zw-shadow    { box-shadow: var(--zw-shadow-md); }
.zw-shadow-sm { box-shadow: var(--zw-shadow-sm); }
.zw-shadow-lg { box-shadow: var(--zw-shadow-lg); }

/* -------------------------------------------------------
   DIVIDER
------------------------------------------------------- */
.zw-divider {
  width: 100%;
  border: none;
  border-top: var(--zw-border-width) solid var(--zw-border);
  margin: var(--zw-space-8) 0;
}

/* -------------------------------------------------------
   BADGE
------------------------------------------------------- */
.zw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--zw-space-2);
  background-color: var(--zw-badge-bg);
  color: var(--zw-badge-text);
  font-family: var(--zw-font-body);
  font-size: var(--zw-text-xs);
  font-weight: 700;
  border: var(--zw-border-width) solid var(--zw-border);
  border-radius: var(--zw-radius);
  line-height: 1;
  white-space: nowrap;
}

/* -------------------------------------------------------
   EMPTY STATE
------------------------------------------------------- */
.zw-empty-state {
  text-align: center;
  padding: var(--zw-space-16) var(--zw-space-8);
  color: var(--zw-text-muted);
  border: var(--zw-border-width) dashed var(--zw-border);
  background-color: var(--zw-surface);
}

.zw-empty-state__title {
  font-family: var(--zw-font-display);
  font-size: var(--zw-text-xl);
  text-transform: lowercase;
  margin-bottom: var(--zw-space-3);
  color: var(--zw-text);
}

.zw-empty-state__desc {
  font-size: var(--zw-text-sm);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------
   LOADING STATE
------------------------------------------------------- */
.zw-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zw-space-4);
  padding: var(--zw-space-12) 0;
  color: var(--zw-text-muted);
  font-size: var(--zw-text-sm);
}

/* -------------------------------------------------------
   RESPONSIVE SHOW / HIDE
------------------------------------------------------- */
@media (max-width: 767px) {
  .zw-hide-mobile { display: none !important; }
}

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

/* -------------------------------------------------------
   SPACING HELPERS (margin / padding)
   Only add what you need; keep this list short.
------------------------------------------------------- */
.zw-mt-0  { margin-top: 0; }
.zw-mt-4  { margin-top: var(--zw-space-4); }
.zw-mt-8  { margin-top: var(--zw-space-8); }
.zw-mb-0  { margin-bottom: 0; }
.zw-mb-4  { margin-bottom: var(--zw-space-4); }
.zw-mb-8  { margin-bottom: var(--zw-space-8); }