/**
 * @file media.css
 * Remote video embeds (YouTube oEmbed through core's media module) and their
 * Klaro click-to-load placeholders: full width, 16:9, wherever the media
 * formatter renders them (video pages, hero, teasers).
 *
 * Core's oembed formatter sizes the iframe from the provider's response
 * (YouTube: 200×113); the player keeps those as the intrinsic size and the
 * rules below make it fill its container. The iframe is matched by its own
 * class because Klaro re-inserts it after consent, outside the field markup
 * it was rendered in.
 */

.media--type-remote-video {
  width: 100%;
}

iframe.media-oembed-content {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background-color: var(--card);
}

/* Canvas templates: the field list of a video page reads as a definition
   list under the player (templates/field/field.html.twig provides the
   classes). */
.ggpress-canvas-fields .node--view-mode-canvas-fields .node__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ggpress-canvas-fields .field--name-field-video,
.ggpress-canvas-fields .field--name-field-featured-image,
.ggpress-canvas-fields .field--name-field-photo,
.ggpress-canvas-fields .field--name-field-logo {
  margin-bottom: 1rem;
}

.ggpress-canvas-fields .field--label-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.ggpress-canvas-fields .field__label {
  color: var(--muted-foreground);
}

.ggpress-canvas-fields .field--label-inline .field__label::after {
  content: ":";
}

.ggpress-canvas-fields .field--label-inline .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
}

.ggpress-canvas-fields .field--label-inline .field__item:not(:last-child)::after {
  content: ",";
}

.ggpress-canvas-fields .field--name-field-content,
.ggpress-canvas-fields .field--name-field-transcript {
  margin: 1rem 0;
}

.ggpress-canvas-fields .field--label-above .field__label {
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--primary);
}