/* Utilities ClashXLanding.tsx uses that the compiled landing.css does not carry.
 *
 * ⚠ WHY THIS FILE EXISTS. landing.css is a Tailwind build taken from the arenax
 * repo. The component has been edited since that build, so 56 of its 170
 * classes resolve to nothing — responsive variants, arbitrary values and
 * opacity modifiers that were never in the source Tailwind scanned. There is no
 * Tailwind in this repo (no config, no dependency), so they cannot be
 * regenerated; they are written out here.
 *
 * Values are Tailwind's own defaults so the page matches the filmed layout:
 * breakpoints sm 640 / md 768 / lg 1024 / xl 1280, spacing 1 unit = 0.25rem.
 * Gold is rgb(212 175 55), read out of landing.css rather than guessed.
 */

/* ── aspect + sizing ─────────────────────────────────────────────── */
.aspect-\[2\/3\]  { aspect-ratio: 2 / 3; }
.aspect-\[3\/2\]  { aspect-ratio: 3 / 2; }
.min-h-\[640px\]  { min-height: 640px; }
.max-w-\[220px\]  { max-width: 220px; }
.z-\[5\]          { z-index: 5; }
.leading-\[1\.05\]{ line-height: 1.05; }

/* ── spacing ─────────────────────────────────────────────────────── */
.px-1\.5  { padding-left: .375rem; padding-right: .375rem; }
.px-2\.5  { padding-left: .625rem; padding-right: .625rem; }
.py-0\.5  { padding-top: .125rem; padding-bottom: .125rem; }
.py-3\.5  { padding-top: .875rem; padding-bottom: .875rem; }
.mb-2\.5  { margin-bottom: .625rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .625rem; }

/* ── type ────────────────────────────────────────────────────────── */
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.tracking-\[0\.18em\] { letter-spacing: .18em; }
.tracking-\[0\.2em\]  { letter-spacing: .2em; }
.tracking-\[0\.25em\] { letter-spacing: .25em; }

/* ── colour with an opacity modifier ─────────────────────────────── */
.text-white\/90   { color: rgb(255 255 255 / .9); }
.text-gold\/40    { color: rgb(212 175 55 / .4); }
.text-muted\/60   { color: rgb(156 163 175 / .6); }
.border-white\/30 { border-color: rgb(255 255 255 / .3); }
.shadow-gold\/20  { --tw-shadow-color: rgb(212 175 55 / .2); --tw-shadow: var(--tw-shadow-colored); }

/* ── hover / group-hover ─────────────────────────────────────────── */
.hover\:text-gold:hover       { color: rgb(212 175 55); }
.hover\:border-gold:hover     { border-color: rgb(212 175 55); }
.hover\:bg-gold-light:hover   { background-color: rgb(226 196 96); }
.hover\:-translate-y-1:hover  { transform: translateY(-.25rem); }
.group:hover .group-hover\:scale-\[1\.03] { transform: scale(1.03); }

/* ── sm (≥640px) ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex-row    { flex-direction: row; }
  .sm\:gap-3       { gap: .75rem; }
  .sm\:gap-6       { gap: 1.5rem; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:px-4        { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-6        { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-sm     { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-5xl    { font-size: 3rem; line-height: 1; }
}

/* ── md (≥768px) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:flex-row        { flex-direction: row; }
  .md\:items-center    { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:col-span-1      { grid-column: span 1 / span 1; }
  .md\:grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-5     { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── lg (≥1024px) ────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:gap-6       { gap: 1.5rem; }
  .lg\:gap-8       { gap: 2rem; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:h-9         { height: 2.25rem; }
  .lg\:h-\[72px\]  { height: 72px; }
  .lg\:mb-14       { margin-bottom: 3.5rem; }
  .lg\:mb-16       { margin-bottom: 4rem; }
  .lg\:pt-4        { padding-top: 1rem; }
  .lg\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-28       { padding-top: 7rem; padding-bottom: 7rem; }
  .lg\:text-lg     { font-size: 1.125rem; line-height: 1.75rem; }
  .lg\:text-xl     { font-size: 1.25rem; line-height: 1.75rem; }
  .lg\:text-5xl    { font-size: 3rem; line-height: 1; }
  .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
}

/* ── xl (≥1280px) ────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .xl\:text-7xl { font-size: 4.5rem; line-height: 1; }
}