@layer components {
.prose {
  max-inline-size: var(--measure);
}

.prose > * + * {
  margin-block-start: 1.25rem;
}

.prose > * + :is(h2, h3) {
  margin-block-start: 2.5rem;
}

.prose :is(h2, h3) {
  color: var(--color-purple);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.prose strong {
  font-weight: var(--fw-bold);
}

.prose a {
  color: var(--color-link);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-purple-hover);
}

.prose :is(ul, ol):not([class]) {
  display: grid;
  gap: 0.75rem;
  padding-inline-start: 2rem;
  list-style: none;
}

.prose ol:not([class]) {
  counter-reset: prose-item;
}

.prose :is(ul, ol):not([class]) > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
}

.prose ol:not([class]) > li {
  counter-increment: prose-item;
}

.prose ol:not([class]) > li::before {
  content: counter(prose-item) ")";
  color: var(--color-purple);
}

.prose ul:not([class]) > li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-purple);
}

.prose figure {
  margin-block: 2rem;
}

.prose figure img {
  inline-size: 100%;
  border-radius: var(--radius-photo-sm);
}

.prose figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--fs-small);
}

/* Obrázky a tlačítko vložené redaktorem do textu článku (Grav Markdown). Jeden
   obrázek na řádku bez prázdného řádku kolem = samostatná fotka, dva a více za
   sebou = galerie v jednom odstavci (Grav je nerozdělí). Poměr `3 / 2` platí u
   menších galerijních fotek, u velké samostatné fotky ho oseká `max-block-size`
   na jednotnou výšku — proto mají všechny samostatné fotky ve všech článcích
   stejnou plochu bez ohledu na rozměry nahraného originálu, `object-fit: cover`
   ořízne na střed. Ověřeno na fotce na šířku i na výšku: obě 790 × 480 px. */
.prose p:has(> img:only-child) img,
.prose p:has(> img + img) img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  max-block-size: 30rem;
  object-fit: cover;
  border-radius: var(--radius-photo-sm);
}

.prose p:has(> img:only-child) {
  margin-block: 2rem;
}

.prose p:has(> img + img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-block: 2rem;
}

/* Tlačítko (shortcode [button]) v textu: `.prose a` má vyšší specificitu než
   `.button` a přebilo by podtržením a barvou odkazu. */
.prose a.button,
.prose a.button:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}
}