/*
 * The video facade, and the player that replaces it (R-52; `design/STYLE.md`
 * "Video").
 *
 * The markup these rules dress is the content's — `src/lib/video-embed.ts`
 * renders it out of the author's directive — so, like `prose.css`, it cannot
 * be a component's scoped stylesheet and is stated once here instead.
 *
 * The facade is a surface like every other: `surface`, a 1px `line`, the
 * theme's own radius, and no shadow. Accent stays out of it — the one primary
 * button of the article view is the share row's copy button (design/STYLE.md).
 * The poster a directive names no image for is the `surface2` panel: a
 * thumbnail fetched from YouTube would be the request R-52 forbids. Nothing
 * here transitions or animates (R-59, R-63).
 *
 * Every figure is a design/tokens.json token through its custom property (C-6).
 */

.video-embed {
  margin-block: var(--layout-grid-gap);
  margin-inline: 0;
}

/* The facade itself: one real button, the full measure of the body (R-62b). */
.video-facade {
  display: block;
  width: 100%;
  padding: 0;
  color: var(--text);
  font-family: inherit;
  font-size: var(--type-small);
  line-height: inherit;
  text-align: start;
  background-color: var(--surface);
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
}

.video-facade:hover .video-facade-mark {
  background-color: var(--surface2);
}

/* The poster: the author's image when the directive names one, else a panel. */
.video-facade-poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-color: var(--surface2);
  background-image: linear-gradient(160deg, var(--surface) 0%, var(--surface2) 100%);
  border-block-end: var(--detail-line-width) solid var(--line);
}

/* Outweighs `prose.css`'s own `figure img` rule, which this is not one of. */
.video-embed .video-facade-poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play mark, over the poster and centred on it. */
.video-facade-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--layout-grid-gap) * 2);
  height: calc(var(--layout-grid-gap) * 2);
  color: var(--text);
  background-color: var(--surface);
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
}

.video-facade-title {
  display: block;
  padding: calc(var(--layout-grid-gap) / 3) calc(var(--layout-grid-gap) / 2);
}

/* The player the press puts in the facade's place: the same box, no border. */
.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
}
/*
 * The shapes of a rendered body (R-37, R-41).
 *
 * The markup under `.prose` is the content's — Astro's render of a Markdown
 * entry — not a component's, so these rules cannot be scoped to one and are
 * stated once here instead of in each view that renders a body. Two views do:
 * the article (R-37) and the static page (R-41). What a body is *held to* is
 * each view's own decision and stays there; what it looks like is this file.
 *
 * Every figure is a design/tokens.json token through its custom property
 * (C-6, R-28), and accent appears only where design/STYLE.md sends it: a link
 * in the body and the pull-quote rule.
 */

.prose h2 {
  margin-block: calc(var(--layout-grid-gap) * 1.5) calc(var(--layout-grid-gap) / 2);
  font-size: var(--type-h2);
}

.prose h3 {
  margin-block: var(--layout-grid-gap) calc(var(--layout-grid-gap) / 3);
  font-size: var(--type-h3);
}

.prose h4 {
  margin-block: var(--layout-grid-gap) calc(var(--layout-grid-gap) / 3);
  font-size: var(--type-body);
}

.prose p {
  margin-block: var(--layout-grid-gap);
}

.prose ul,
.prose ol {
  margin-block: var(--layout-grid-gap);
  padding-inline-start: var(--layout-grid-gap);
  list-style: disc outside;
}

.prose ol {
  list-style: decimal outside;
}

.prose li {
  margin-block: calc(var(--layout-grid-gap) / 4);
}

/* `--link` is a theme's `link` colour, or its accent when it states none. */
.prose a {
  color: var(--link);
}

/*
 * The pull quote and its rule: `details.quoteRule` wide, painted in accent,
 * which design/STYLE.md names among accent's uses.
 */
.prose blockquote {
  margin-block: var(--layout-grid-gap);
  margin-inline: 0;
  padding-inline-start: var(--layout-grid-gap);
  border-inline-start: var(--detail-quote-rule) solid var(--accent);
  font-size: var(--type-pull-quote);
}

.prose figure {
  margin-block: var(--layout-grid-gap);
  margin-inline: 0;
}

.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
}

/* A caption is secondary text: `muted` (design/STYLE.md, colour roles). */
.prose figcaption {
  padding-block-start: calc(var(--layout-grid-gap) / 3);
  color: var(--muted);
  font-size: var(--type-caption);
}