/**
 * @file
 * Utility classes: one job each, applied by a component's markup. Distinct from
 * editor-styles.css, which holds classes an editor picks from the WYSIWYG.
 */

/* A media field renders article.media > div.field > img on auto-height wrappers,
   so a percentage height on the image resolves to auto. Out of flow sidesteps
   them. The element carrying this needs a height of its own. */
.ln-responsive-media {
  position: relative;
  block-size: 100%;
}

.ln-responsive-media :is(div, article) {
  block-size: 100%;
}

.ln-responsive-media :is(img, video, iframe) {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/**
 * Play badge — a frosted ring over a red disc with a white arrow.
 *
 * Drawn entirely in CSS so any host can use it on a button with no markup:
 * `class="ln-play"` plus --ln-play-size.
 *
 * Figma's flattened export of 4190:4668's button, inlined as a data URI so it
 * costs no file and no request. All four of its gradients — two stacked ring
 * strokes, the disc's and the arrow's — are the comp's, untouched, and so is
 * the disc's solid #CF0000.
 *
 * Two things the export cannot carry into a background image, both reproduced
 * here instead: its frosted glass is a foreignObject holding backdrop-filter,
 * which never renders in an SVG used as an image, hence --ln-play-blur; and
 * that blur is what the border-radius clips to a circle.
 *
 * The comp additionally multiplies the disc over the photograph, which reads
 * deeper than #CF0000 does. That cannot be reproduced alongside the blur —
 * backdrop-filter opens a stacking context and isolates a child's blend from
 * the photograph — so the blur is kept and the disc stays as exported.
 */
.ln-play {
  --ln-play-size: 72px;
  --ln-play-blur: 4.5px;

  box-sizing: border-box;
  inline-size: var(--ln-play-size);
  block-size: var(--ln-play-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg width='73' height='73' viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='36.0755' cy='36.0755' r='35.354' fill='white' fill-opacity='0.3'/%3E%3Ccircle cx='36.0755' cy='36.0755' r='35.354' stroke='url(%23paint0_linear_4588_167)' stroke-width='1.44302'/%3E%3Ccircle cx='36.0755' cy='36.0755' r='35.354' stroke='url(%23paint1_linear_4588_167)' stroke-width='1.44302'/%3E%3C/g%3E%3Ccircle cx='36.0753' cy='36.0773' r='24.4316' fill='%23CF0000'/%3E%3Ccircle cx='36.0753' cy='36.0773' r='24.4316' stroke='url(%23paint2_linear_4588_167)' stroke-width='0.74052'/%3E%3Cpath d='M50.1562 34.6875C50.7803 35.0607 50.7803 35.9647 50.1562 36.3379L29.8057 48.5068C29.1647 48.8901 28.3506 48.4284 28.3506 47.6816L28.3506 23.3437C28.3506 22.597 29.1647 22.1353 29.8057 22.5186L50.1562 34.6875Z' fill='white' stroke='url(%23paint3_linear_4588_167)' stroke-width='0.331576'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4588_167' x1='45.7437' y1='36.0425' x2='-7.5635' y2='24.8652' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CF0000'/%3E%3Cstop offset='1' stop-color='%23D7D7D7'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_4588_167' x1='-33.1894' y1='-13.7087' x2='-11.4744' y2='32.3416' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23640000'/%3E%3Cstop offset='0.208131' stop-color='%23CF0000'/%3E%3Cstop offset='0.760023' stop-color='%23CF0000'/%3E%3Cstop offset='1' stop-color='%23430000'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_4588_167' x1='35.6289' y1='40.7835' x2='36.0753' y2='60.8792' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CF0000'/%3E%3Cstop offset='1' stop-color='%23969696'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_4588_167' x1='33.0815' y1='35.2185' x2='20.2929' y2='35.4928' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CF0000'/%3E%3Cstop offset='1' stop-color='%23969696'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center / 100% 100% no-repeat;
  backdrop-filter: blur(var(--ln-play-blur));
}

/**
 * Chevron icon — a mask, not a background image, so it takes currentColor from
 * whatever it sits in. Points right by default; the modifiers turn it.
 *
 * From Figma's arrow component (4041:11458). --ln-chevron-size is its height;
 * the aspect ratio holds its width, so one value sizes it.
 *
 * Needs an element of its own, which is why it is a class and not a
 * pseudo-element: hosts already style ::before/::after on their own buttons.
 */
.ln-chevron {
  --ln-chevron-size: 10px;

  display: block;
  block-size: var(--ln-chevron-size);
  aspect-ratio: 5.6254 / 10.1254;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17.2498 13.1248 5.6254 10.1254'%3E%3Cpath d='M17.4148 23.0852C17.1951 22.8656 17.1951 22.5094 17.4148 22.2897L21.517 18.1875L17.4148 14.0852C17.1951 13.8656 17.1951 13.5094 17.4148 13.2897C17.6344 13.0701 17.9906 13.0701 18.2102 13.2897L22.7102 17.7897C22.9299 18.0094 22.9299 18.3656 22.7102 18.5852L18.2102 23.0852C17.9906 23.3049 17.6344 23.3049 17.4148 23.0852Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ln-chevron--left {
  rotate: 180deg;
}

.ln-chevron--up {
  rotate: -90deg;
}

.ln-chevron--down {
  rotate: 90deg;
}

/**
 * Collapse the outer margins of rich text.
 *
 * .ln-ntmfc — no top margin, first child. .ln-nbmlc — no bottom margin, last
 * child. Put them on the box that wraps editor output, so its own padding or
 * the parent's gap owns that space instead of a stray 1em.
 *
 * Descendant, not child: a text field's formatter wraps the value in a div, so
 * the paragraph carrying the margin is a grandchild and a child selector misses
 * it. Matching at any depth also covers a list or a blockquote inside.
 */
.ln-ntmfc :first-child {
  margin-block-start: 0;
}

.ln-nbmlc :last-child {
  margin-block-end: 0;
}