/**
 * Utility Classes
 *
 * Meaningful, purposeful utility helpers only.
 * Not a utility framework. Each class has a clear
 * semantic reason to exist.
 *
 * @package Anna_Baylis
 * @since   1.0.0
 */

/* ── Display ──────────────────────────────────────────────────────────────── */
.anna-hidden          { display: none !important; }
.anna-visually-hidden { /* identical to .anna-sr-only — see base.css */ }
.anna-block           { display: block; }
.anna-inline-block    { display: inline-block; }

/* ── Text alignment ───────────────────────────────────────────────────────── */
.anna-text-left   { text-align: left; }
.anna-text-center { text-align: center; }
.anna-text-right  { text-align: right; }

/* ── Text color ───────────────────────────────────────────────────────────── */
.anna-text-primary { color: var(--color-primary); }
.anna-text-accent  { color: var(--color-accent); }
.anna-text-muted   { color: var(--color-text-muted); }
.anna-text-light   { color: var(--color-text-light); }
.anna-text-white   { color: var(--color-white); }
.anna-text-heading { color: var(--color-heading); }

/* ── Font weight ──────────────────────────────────────────────────────────── */
.anna-font-light    { font-weight: var(--font-weight-light); }
.anna-font-regular  { font-weight: var(--font-weight-regular); }
.anna-font-medium   { font-weight: var(--font-weight-medium); }
.anna-font-semibold { font-weight: var(--font-weight-semibold); }
.anna-font-bold     { font-weight: var(--font-weight-bold); }

/* ── Font family ──────────────────────────────────────────────────────────── */
.anna-font-heading { font-family: var(--font-heading); }
.anna-font-body    { font-family: var(--font-body); }

/* ── Margins ──────────────────────────────────────────────────────────────── */
.anna-mt-0  { margin-top: 0; }
.anna-mt-4  { margin-top: var(--space-4); }
.anna-mt-6  { margin-top: var(--space-6); }
.anna-mt-8  { margin-top: var(--space-8); }
.anna-mt-12 { margin-top: var(--space-12); }
.anna-mb-0  { margin-bottom: 0; }
.anna-mb-4  { margin-bottom: var(--space-4); }
.anna-mb-6  { margin-bottom: var(--space-6); }
.anna-mb-8  { margin-bottom: var(--space-8); }
.anna-mb-12 { margin-bottom: var(--space-12); }

/* ── Overflow ─────────────────────────────────────────────────────────────── */
.anna-overflow-hidden { overflow: hidden; }
.anna-overflow-clip   { overflow: clip; }

/* ── Position helpers ─────────────────────────────────────────────────────── */
.anna-relative { position: relative; }
.anna-absolute { position: absolute; }
.anna-sticky   { position: sticky; }

/* ── Object fit ───────────────────────────────────────────────────────────── */
.anna-img-cover {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center;
}

.anna-img-contain {
  width:       100%;
  height:      100%;
  object-fit:  contain;
}

/* ── Aspect ratios ────────────────────────────────────────────────────────── */
.anna-aspect-square    { aspect-ratio: 1 / 1; }
.anna-aspect-portrait  { aspect-ratio: 3 / 4; }
.anna-aspect-landscape { aspect-ratio: 16 / 9; }
.anna-aspect-golden    { aspect-ratio: 1.618 / 1; }
.anna-aspect-wide      { aspect-ratio: 21 / 9; }

/* ── Border radius ────────────────────────────────────────────────────────── */
.anna-rounded-sm   { border-radius: var(--radius-sm); }
.anna-rounded-md   { border-radius: var(--radius-md); }
.anna-rounded-lg   { border-radius: var(--radius-lg); }
.anna-rounded-xl   { border-radius: var(--radius-xl); }
.anna-rounded-full { border-radius: var(--radius-full); }

/* ── Section labels (overlines) ───────────────────────────────────────────── */
.anna-overline {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-primary);
  margin-bottom:  var(--space-4);
}

/* ── Decorative divider ───────────────────────────────────────────────────── */
.anna-divider {
  width:        60px;
  height:       3px;
  background:   linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  margin:        var(--space-6) 0;
}

.anna-divider--center {
  margin-left:  auto;
  margin-right: auto;
}

/* ── Gradient text ────────────────────────────────────────────────────────── */
.anna-text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animated underline link ──────────────────────────────────────────────── */
.anna-underline-link {
  position:         relative;
  display:          inline-block;
  text-decoration:  none;
  color:            var(--color-primary);
  font-weight:      var(--font-weight-semibold);
}

.anna-underline-link::after {
  content:          '';
  position:         absolute;
  left:             0;
  bottom:           -2px;
  width:            0;
  height:           2px;
  background:       var(--color-primary);
  border-radius:    var(--radius-full);
  transition:       width var(--transition-base);
}

.anna-underline-link:hover::after,
.anna-underline-link:focus-visible::after {
  width: 100%;
}

/* ── Responsive helpers ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .anna-hidden--tablet { display: none !important; }
  .anna-text-center--tablet { text-align: center; }
}

@media (max-width: 768px) {
  .anna-hidden--mobile { display: none !important; }
  .anna-text-center--mobile { text-align: center; }
}

@media (min-width: 769px) {
  .anna-hidden--desktop { display: none !important; }
}