/* ═══════════════════════════════════════════════════════════════════════════
   09 - UTILITIES
   A short, deliberate list. Utilities here exist because a template genuinely
   needs to vary one property; they are not a substitute for a component.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer utilities {

  /* ── Flow ───────────────────────────────────────────────────────────── */

  .u-hidden { display: none !important; }
  .u-block { display: block; }
  .u-flex { display: flex; }
  .u-grid { display: grid; }

  /* Visible to a screen reader and to keyboard focus, invisible otherwise. */
  .u-sr-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── Spacing (tokens only - never a raw value) ──────────────────────── */

  .u-mt-0 { margin-top: 0; }
  .u-mt-3 { margin-top: var(--sp-3); }
  .u-mt-4 { margin-top: var(--sp-4); }
  .u-mt-5 { margin-top: var(--sp-5); }
  .u-mt-6 { margin-top: var(--sp-6); }
  .u-mt-7 { margin-top: var(--sp-7); }
  .u-mt-8 { margin-top: var(--sp-8); }

  .u-mb-0 { margin-bottom: 0; }
  .u-mb-4 { margin-bottom: var(--sp-4); }
  .u-mb-5 { margin-bottom: var(--sp-5); }
  .u-mb-6 { margin-bottom: var(--sp-6); }
  .u-mb-7 { margin-bottom: var(--sp-7); }

  /* ── Measure ────────────────────────────────────────────────────────── */

  .u-measure { max-width: var(--measure-body); }
  .u-measure-narrow { max-width: var(--measure-lead); }
  .u-measure-none { max-width: none; }

  /* ── Text ───────────────────────────────────────────────────────────── */

  .u-center { text-align: center; }
  .u-right { text-align: right; }
  .u-nowrap { white-space: nowrap; }
  .u-balance { text-wrap: balance; }

  .u-ivory { color: var(--ivory-100); }
  .u-muted { color: var(--ivory-500); }
  .u-gold { color: var(--gold-500); }

  /* Truncate to n lines without a magic pixel height. */
  .u-clamp-2,
  .u-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

  /* ── Ornament ───────────────────────────────────────────────────────── */

  .u-hairline-top { border-top: 1px solid var(--hairline); }
  .u-hairline-bottom { border-bottom: 1px solid var(--hairline); }

  /* ── Motion opt-outs ────────────────────────────────────────────────── */

  .u-no-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* ── Breakpoint visibility ──────────────────────────────────────────── */

  @media (max-width: 639px) { .u-sm-hidden { display: none !important; } }
  @media (min-width: 640px) { .u-sm-only { display: none !important; } }
  @media (max-width: 899px) { .u-md-hidden { display: none !important; } }
  @media (min-width: 900px) { .u-md-only { display: none !important; } }

  /* ── Print ──────────────────────────────────────────────────────────── */

  @media print {
    .u-print-hidden { display: none !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLESHEET (§15.10)
   White ground, black text, chrome hidden, accordions expanded, link URLs
   printed. Outside the layers so it is unambiguous.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

  @page {
    margin: 18mm 16mm;
  }

  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
    line-height: 1.55;
  }

  h1, h2, h3, h4 {
    color: #000 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  p, blockquote, li, figure, tr, .card, .mini-card, .concert-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a { color: #000 !important; text-decoration: underline; }

  /* Print the destination of real links, but not of every nav item. */
  .prose a[href^='http']::after,
  .rich a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: .82em;
    word-break: break-all;
  }

  /* Every disclosure opens. */
  details { display: block !important; }
  details > *:not(summary) { display: block !important; }
  .accordion__panel { height: auto !important; overflow: visible !important; }

  /* Tabs and carousels print all their panels, not just the active one. */
  [role='tabpanel'][hidden],
  .carousel__slide[hidden] { display: block !important; }

  .picture, img { break-inside: avoid; max-width: 100% !important; }

  .empty { border-color: rgba(0, 0, 0, .2); }

  /* A short masthead so a printed page identifies itself. */
  body::before {
    content: 'Bhagirath Bhatt - bhagirathbhatt.com';
    display: block;
    margin-bottom: 8mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid #999;
    font-size: 9pt;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555;
  }
}