/* =============================================================================
   Krakti — Utilities
   assets/css/utilities.css  —  enqueued LAST as 'krakti-utilities'
   (deps: krakti-components) so utilities win the cascade. Keep minimal.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   VISIBILITY
   ----------------------------------------------------------------------------- */
.k-u-hidden {
  display: none !important;
}

/* Screen-reader-only (alias of .k-visually-hidden). */
.k-u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Responsive show/hide at the desktop breakpoint (1024px). */
.k-u-hide-mobile {
  display: none;
}

@media (min-width: 64rem) {
  .k-u-hide-mobile {
    display: revert;
  }

  .k-u-hide-desktop {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   TEXT
   ----------------------------------------------------------------------------- */
.k-u-text-center {
  text-align: center;
}

.k-u-text-balance {
  text-wrap: balance;
}

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

.k-u-clamp-2,
.k-u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.k-u-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.k-u-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* -----------------------------------------------------------------------------
   COLOR (sparingly)
   ----------------------------------------------------------------------------- */
.k-u-accent {
  color: var(--k-color-accent);
}

.k-u-muted {
  color: var(--k-color-muted);
}

.k-u-soft {
  color: var(--k-color-soft);
}

/* -----------------------------------------------------------------------------
   FLOW — vertical stack + horizontal cluster
   ----------------------------------------------------------------------------- */
.k-u-stack {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-sm);
}

.k-u-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2xs);
}

/* -----------------------------------------------------------------------------
   RHYTHM — named spacing per the tokens RHYTHM CONTRACT (finding 4).
   Deliberate loose/tight contrast instead of defaulting everything to space-md:
   breathe around top-level structure, compress inside dense card stacks.
   Builders reach for these so the loose/tight intent stays legible + consistent.
   ----------------------------------------------------------------------------- */
.k-u-rhythm-loose {
  margin-top: var(--k-rhythm-loose);
}

.k-u-rhythm-lead {
  margin-top: var(--k-rhythm-lead);
}

/* Stack whose gap is the tight in-card rhythm (title/dek/meta cluster). */
.k-u-stack-card {
  display: flex;
  flex-direction: column;
  gap: var(--k-rhythm-card);
}

/* Cluster whose gap is the tightest meta-chip rhythm (time · readtime · share),
   so a meta row reads as one unit, not loose siblings. */
.k-u-cluster-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-rhythm-meta);
}

/* -----------------------------------------------------------------------------
   SURFACE — token-only card plane + category wash helpers (findings 2 + 3).
   For grid-breaking bento composition: lift a lead onto a real surface, or wash
   a block in its section hue. Hue comes from the section scope (.k-section--{slug}
   remaps --k-section-wash); unknown categories fall back to neutral surface-2.
   ----------------------------------------------------------------------------- */
.k-u-surface {
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-faint);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-sm);
}

/* A surface that OVERLAPS a tinted wash/neighbour reads as depth, not a seam. */
.k-u-surface-overlap {
  box-shadow: var(--k-shadow-overlap);
}

.k-u-wash {
  background-color: var(--k-section-wash, var(--k-color-surface-2));
  border-radius: var(--k-radius-md);
}

/* -----------------------------------------------------------------------------
   ASPECT-RATIO BOXES
   ----------------------------------------------------------------------------- */
.k-u-aspect-16x9 {
  aspect-ratio: 16 / 9;
}

.k-u-aspect-4x3 {
  aspect-ratio: 4 / 3;
}

.k-u-aspect-3x2 {
  aspect-ratio: 3 / 2;
}

.k-u-aspect-1x1 {
  aspect-ratio: 1 / 1;
}

/* -----------------------------------------------------------------------------
   SCROLL LOCK — paired with the mobile drawer.
   ----------------------------------------------------------------------------- */
.k-u-no-scroll,
.k-no-scroll {
  overflow: hidden !important;
  touch-action: none;
}

/* -----------------------------------------------------------------------------
   MARGIN RESETS — cut rhythm where needed.
   ----------------------------------------------------------------------------- */
.k-u-mt-0 {
  margin-top: 0 !important;
}

.k-u-mb-0 {
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   DIVIDER — standalone hairline rule.
   ----------------------------------------------------------------------------- */
.k-u-divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--k-color-rule);
}