@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.js";


.numbers-grid {
  @apply  grid grid-cols-5 md:grid-cols-10 place-content-center gap-4 text-lg;

}

.number {
  @apply   rounded-lg bg-gray-50 place-content-center hover:underline hover:bg-gray-100 w-16 flex items-center justify-center text-lg;
}

body {
  @apply text-red-900 flex flex-col justify-start items-center min-h-screen bg-gray-50 min-w-screen prose p-2 md:p-8;
}
body > * {
  @apply  prose;
}

/* The Stack - Vertical spacing between children */
.stack {
  @apply flex flex-col;
}

.stack > * + * {
  @apply mt-4; /* Adjust spacing as needed: mt-2, mt-6, etc. */
}

/* The Box - Padding with optional border/background */
.box {
  @apply p-4 border border-gray-200;
  /* Optional: @apply bg-white rounded-lg shadow-sm; */
}

.box-invert {
  @apply p-4 bg-gray-900 text-white;
}

/* The Center - Horizontally center with max-width */
.center {
  @apply max-w-prose mx-auto px-4;
  /* Or for full centering: @apply flex justify-center items-center; */
}

/* The Cluster - Flexbox group with wrapping and gaps */
.cluster {
  @apply flex flex-wrap gap-4;
}

.cluster-center {
  @apply flex flex-wrap gap-4 justify-center items-center;
}

/* The Sidebar - Flexible sidebar layout */
.sidebar {
  @apply flex flex-wrap gap-4;
}

.sidebar > :first-child {
  @apply flex-grow-0 flex-shrink-0 basis-64; /* Sidebar width */
}

.sidebar > :last-child {
  @apply flex-grow flex-shrink basis-0 min-w-[50%];
}

/* The Switcher - Switches between horizontal and stacked */
.switcher {
  @apply flex flex-wrap gap-4;
}

.switcher > * {
  @apply flex-grow flex-shrink basis-[calc((30rem-100%)*999)];
  /* This creates the switching behavior at ~30rem */
}

/* Alternative simpler switcher */
.switcher-simple {
  @apply grid gap-4;
  @apply grid-cols-1 md:grid-cols-[auto_1fr];
}

/* The Cover - Vertically centered with header/footer */
.cover {
  @apply min-h-screen flex flex-col;
}

.cover > :first-child,
.cover > :last-child {
  @apply flex-shrink-0;
}

.cover > :nth-child(2) {
  @apply flex-grow flex items-center justify-center my-4;
}

/* The Grid - Auto-filling responsive grid */
.grid-auto {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* The Frame - Aspect ratio container */
.frame {
  @apply relative overflow-hidden;
  @apply aspect-video; /* or aspect-square, aspect-[4/3], etc. */
}

.frame > * {
  @apply absolute inset-0 w-full h-full object-cover;
}

/* The Reel - Horizontal scrolling container */
.reel {
  @apply flex gap-4 overflow-x-auto;
  @apply snap-x snap-mandatory;
  scrollbar-width: thin;
}

.reel > * {
  @apply flex-shrink-0 snap-start;
  @apply w-64; /* Adjust item width as needed */
}

/* The Imposter - Positioned element over container */
.imposter {
  @apply relative;
}

.imposter-content {
  @apply absolute inset-0 flex items-center justify-center;
}

/* The Icon - Text with icon alignment */
.icon {
  @apply inline-flex items-center gap-2;
}

.icon > svg {
  @apply w-[0.75em] h-[0.75em];
}

body {
  /* padding: 6rem; */
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(65ch, 100% - var(--gap) * 2);
  --popout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}

body > * {
  grid-column: content;
  max-width: 65ch;
}
.popout, hr, h1, h2, h3, h4, h5, h6, table {
  grid-column: popout;
  max-width: none;
}
.feature, header {
  max-width: none;
  grid-column: feature;
}
.full {
  max-width: none;
  grid-column: full;
}

/* 
.emoji-list ul { list-style: none; padding-left: 1.2em; }
.emoji-list > li { margin-left: 1.2em; text-indent: -1.2em;  } */