/* ============================================================================
   AmbySound — blog-rich.css
   1-to-1 port of the 21st.dev blog-section-with-rich-preview (@tommyjepsen).
   Tailwind → CSS mapping, written out so the port is auditable:

     .blog-rich          = w-full py-20 lg:py-40
     .blog-rich-inner    = container mx-auto flex flex-col gap-14
     .blog-rich-head     = flex w-full flex-col sm:flex-row sm:justify-between
                           sm:items-center gap-8
     .blog-rich-head h2  = text-3xl md:text-5xl tracking-tighter max-w-xl
     .blog-rich-grid     = grid grid-cols-1 md:grid-cols-2 gap-8
     .blog-rich-card     = flex flex-col gap-4 hover:opacity-75 cursor-pointer
     .blog-rich-card.-featured = md:col-span-2
     .blog-rich-well     = bg-muted rounded-md aspect-video
     .blog-rich-meta     = flex flex-row gap-4 items-center
     .blog-rich-body     = flex flex-col gap-2 (featured) / gap-1 (small)
     h3                  = text-4xl (featured) / text-2xl, tracking-tight
     p                   = text-muted-foreground text-base

   Two deliberate deviations from the reference, both defects there:
   1. the card is an <a>, not a bare <div> — the original is unclickable and
      unfocusable by keyboard;
   2. opacity-75 gets a transition, so the hover eases instead of snapping.
   ============================================================================ */

.blog-rich { width: 100%; padding-block: var(--space-16); }
@media (min-width: 1024px) { .blog-rich { padding-block: 10rem; } }

/* the reference sits in Tailwind's `container mx-auto`, which is capped by
   breakpoint. This build runs full-bleed (--container: 100%), so the section
   restores the cap locally — uncapped, the featured 16:9 well grows past
   750px tall and eats the fold. */
.blog-rich > .container { max-width: 80rem; }

.blog-rich-inner { display: flex; flex-direction: column; gap: 3.5rem; }

.blog-rich-head {
  display: flex; width: 100%; flex-direction: column; gap: var(--space-8);
}
@media (min-width: 640px) {
  .blog-rich-head { flex-direction: row; justify-content: space-between; align-items: center; }
}
.blog-rich-head h2 {
  max-width: 36rem;
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.05em;
}
@media (min-width: 768px) { .blog-rich-head h2 { font-size: 3rem; } }

.blog-rich-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 768px) { .blog-rich-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.blog-rich-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
}
.blog-rich-card:hover { opacity: 0.75; }
@media (min-width: 768px) { .blog-rich-card.-featured { grid-column: span 2; } }

/* the "rich preview" well: the reference ships it empty on --muted; here it
   carries the library's hue art, which is the only imagery this build has */
.blog-rich-well {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md-flat, 0.375rem);
  background: var(--muted);
  overflow: hidden;
}
.blog-rich-well .post-cover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }

.blog-rich-meta { display: flex; flex-direction: row; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.blog-rich-by {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
}
.blog-rich-by .-muted { color: var(--muted-foreground); }
/* Avatar h-6 w-6 — here the archive's own mark, not an invented person photo */
.blog-rich-avatar {
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--muted);
  overflow: hidden;
}
.blog-rich-avatar svg { width: 1rem; height: 1rem; stroke: none; }

.blog-rich-body { display: flex; flex-direction: column; gap: var(--space-1); }
.blog-rich-card.-featured .blog-rich-body { gap: var(--space-2); }
.blog-rich-body h3 { max-width: 48rem; font-size: var(--text-2xl); letter-spacing: -0.025em; font-weight: 500; }
.blog-rich-card.-featured .blog-rich-body h3 { font-size: var(--text-4xl); }
.blog-rich-body p { max-width: 48rem; color: var(--muted-foreground); font-size: var(--text-base); }

/* the reference's rounded-md is 6px — flat next to this build's pill language,
   so it is named as its own token rather than smuggled in as a literal */
:root { --radius-md-flat: 0.375rem; }