/**
 * Lumenoid Layout Utilities
 *
 * Replaces Tailwind CDN. Covers only what's actually used in markup.
 * No unused rules. No CDN dependency.
 */

/* ─── Reset (replaces Tailwind preflight) ─── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; }
body { min-height: 100%; }
img, video, svg, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; color: inherit; }

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

/* ─── Flex utilities ─── */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.self-start    { align-self: flex-start; }

/* ─── Grid ─── */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Gap ─── */
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-16 { gap: 4rem; }
.gap-y-10 { row-gap: 2.5rem; }

/* ─── Spacing ─── */
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.px-4  { padding-inline: 1rem; }
.py-6  { padding-block: 1.5rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }

/* ─── Width / max-width ─── */
.w-full  { width: 100%; }
.max-w-xs  { max-width: 20rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }

/* ─── Text ─── */
.text-sm    { font-size: 0.875rem; }
.text-3xl   { font-size: 1.875rem; }
.text-4xl   { font-size: 2.25rem; }
.text-white { color: #ffffff; }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.leading-relaxed { line-height: 1.7; }

/* ─── Opacity / transitions ─── */
.opacity-0   { opacity: 0; }
.transition-opacity { transition: opacity var(--duration-normal) var(--ease-out); }
.duration-300 { transition-duration: 300ms; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ─── Position ─── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* ─── Misc ─── */
.overflow-hidden { overflow: hidden; }

/* ─── Responsive breakpoints ─── */

@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:hidden      { display: none; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:items-end   { align-items: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
}

@media (min-width: 768px) {
  .md\:flex-row     { flex-direction: row; }
  .md\:items-end    { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .md\:hidden       { display: none; }
  .md\:inline-flex  { display: inline-flex; }
  .gap-16           { gap: 4rem; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.gap-3 { gap: 0.75rem; }
.gap-2 { gap: 0.5rem; }

/* Nav gap override — need actual gap between items */
.nav .flex { gap: 0; }

/* Prevent text-3xl etc from using browser default em sizing */
.text-3xl { font-size: 1.875rem; line-height: 1.2; }