/* ============================================================
   M.P Events & Tours — Utility Classes
   utilities.css — Helpers, spacing, visibility, text utilities
   ============================================================ */

/* ── Display ─────────────────────────────────────────────────── */
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-none    { display: none; }
.d-hidden  { visibility: hidden; }

.hide-mobile  { display: block; }
.show-mobile  { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
}

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

@media (max-width: 768px) {
  .text-center-mobile { text-align: center; }
}

/* ── Font sizes ──────────────────────────────────────────────── */
.fs-hero  { font-size: var(--fs-hero); }
.fs-h1    { font-size: var(--fs-h1); }
.fs-h2    { font-size: var(--fs-h2); }
.fs-h3    { font-size: var(--fs-h3); }
.fs-lead  { font-size: var(--fs-lead); }
.fs-body  { font-size: var(--fs-body); }
.fs-sm    { font-size: var(--fs-sm); }
.fs-xs    { font-size: var(--fs-xs); }

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

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

/* ── Colours ─────────────────────────────────────────────────── */
.text-primary   { color: var(--clr-primary); }
.text-secondary { color: var(--clr-secondary); }
.text-gold      { color: var(--clr-gold); }
.text-muted     { color: var(--clr-text-muted); }
.text-white     { color: var(--clr-white); }
.text-body      { color: var(--clr-text); }

.bg-primary   { background-color: var(--clr-primary); }
.bg-secondary { background-color: var(--clr-secondary); }
.bg-cream     { background-color: var(--clr-cream); }
.bg-white     { background-color: var(--clr-white); }
.bg-gold      { background-color: var(--clr-gold); }

/* ── Spacing — Margin ────────────────────────────────────────── */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.mx-auto { margin-inline: auto; }

/* ── Spacing — Padding ───────────────────────────────────────── */
.p-0  { padding: 0; }
.p-4  { padding: var(--sp-4); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.py-4 { padding-block: var(--sp-4); }
.py-6 { padding-block: var(--sp-6); }
.py-8 { padding-block: var(--sp-8); }
.px-4 { padding-inline: var(--sp-4); }
.px-6 { padding-inline: var(--sp-6); }

/* ── Border ──────────────────────────────────────────────────── */
.border        { border: 1px solid var(--clr-border); }
.border-top    { border-top: 1px solid var(--clr-border); }
.border-bottom { border-bottom: 1px solid var(--clr-border); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded       { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-full  { border-radius: var(--radius-pill); }

/* ── Shadows ─────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Width ───────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.max-w-narrow { max-width: var(--max-w-narrow); }
.max-w        { max-width: var(--max-w); }

/* ── Position ────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.overflow-hidden { overflow: hidden; }

/* ── Italic / Caps ───────────────────────────────────────────── */
.italic    { font-style: italic; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tracking-wide  { letter-spacing: var(--ls-wide); }
.tracking-caps  { letter-spacing: var(--ls-caps); }
.tracking-tight { letter-spacing: var(--ls-tight); }

/* ── Line height ─────────────────────────────────────────────── */
.leading-tight   { line-height: var(--lh-tight); }
.leading-snug    { line-height: var(--lh-snug); }
.leading-base    { line-height: var(--lh-base); }
.leading-relaxed { line-height: var(--lh-relaxed); }

/* ── Image ───────────────────────────────────────────────────── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aspect-ratio-card   { aspect-ratio: var(--ratio-card); }
.aspect-ratio-hero   { aspect-ratio: var(--ratio-hero); }
.aspect-ratio-square { aspect-ratio: var(--ratio-square); }
.aspect-ratio-wide   { aspect-ratio: var(--ratio-wide); }

/* ── Scroll margin (for sticky header) ──────────────────────── */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ── Cursor ──────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ── Truncation ──────────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pointer Events ──────────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }

/* ── Accessibility ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.focus-ring:focus-visible {
  outline: 2px solid var(--clr-border-focus);
  outline-offset: 3px;
}