/*
 * Rhyddid content, media, attachment, source, and embed presentation.
 * Release 0.12.0.
 *
 * Components remain responsible for media authorization, storage, delivery,
 * upload validation, privacy, remote-content consent, and transcript accuracy.
 */

:where(video, audio) {
  max-inline-size: 100%;
}

:where(video) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.35rem);
}

:where(audio) {
  display: block;
  inline-size: min(100%, 46rem);
  color-scheme: dark light;
}

:where(.rhyddid-media, .media-block, .story-media, .media-player) {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
  margin-block: 1.25rem;
}

:where(.rhyddid-media__frame, .media-frame, .video-frame, .audio-frame) {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.35rem);
  box-shadow: 0 0.4rem 1rem var(--shadow);
}

:where(.rhyddid-media__body, .media-body, .media-details) {
  display: grid;
  gap: 0.4rem;
  min-inline-size: 0;
  padding: 0.85rem 1rem 1rem;
}

:where(.rhyddid-media__title, .media-title) {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.45rem);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

:where(.rhyddid-media__description, .media-description, .media-caption) {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

:where(.rhyddid-media__meta, .media-meta, .attachment-meta, .file-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: center;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

:where(.rhyddid-media__meta, .media-meta, .attachment-meta, .file-meta) > * {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

:where(.rhyddid-media__actions, .media-actions, .attachment-actions, .file-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-block-start: 0.25rem;
}

/* Responsive image and media galleries. */
:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: start;
  min-inline-size: 0;
  margin-block: 1.25rem;
}

:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) > :where(figure, .media-card, .gallery-item) {
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.35rem);
  box-shadow: 0 0.35rem 0.9rem var(--shadow);
}

:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) :where(img, video) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
}

:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) .media-thumbnail,
:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) [data-thumbnail] {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-soft);
}

:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) figcaption,
:where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) .gallery-caption {
  padding: 0.7rem 0.85rem 0.85rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* File, attachment, and download presentation. */
:where(.rhyddid-files, .attachment-list, .download-list, .file-list) {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

:where(.rhyddid-file, .attachment-card, .download-card, .file-card) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem 1rem;
  align-items: center;
  min-inline-size: 0;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-inline-start: 0.25rem solid var(--accent);
  border-radius: var(--radius, 0.35rem);
}

:where(.rhyddid-file__icon, .attachment-icon, .download-icon, .file-icon) {
  display: grid;
  place-items: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  flex: none;
  color: var(--accent-strong, var(--accent));
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius: 0.25rem;
  font-weight: 800;
  line-height: 1;
}

:where(.rhyddid-file__body, .attachment-body, .download-body, .file-body) {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}

:where(.rhyddid-file__name, .attachment-name, .download-name, .file-name) {
  margin: 0;
  color: var(--text-strong);
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

:where(.rhyddid-file__description, .attachment-description, .download-description, .file-description) {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

:where(.file-type, .attachment-type, .download-type) {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 0.15rem 0.45rem;
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

:where(a[download], .download-link) {
  font-weight: 700;
}

:where(a[download], .download-link)::after {
  content: " ↓";
  text-decoration: none;
}

/* Transcript, caption, source, and reference blocks. */
:where(.transcript, .media-transcript, .caption-transcript, .story-transcript) {
  min-inline-size: 0;
  margin-block: 1rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-inline-start: 0.25rem solid var(--steel-strong, var(--border-strong));
  border-radius: var(--radius, 0.35rem);
}

:where(.transcript, .media-transcript, .caption-transcript, .story-transcript) > :first-child {
  margin-block-start: 0;
}

:where(.transcript, .media-transcript, .caption-transcript, .story-transcript) > :last-child {
  margin-block-end: 0;
}

:where(.transcript-speaker, .speaker-label) {
  color: var(--text-strong);
  font-weight: 800;
}

:where(.transcript-time, .timecode) {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.86em;
  white-space: nowrap;
}

:where(.source-list, .citation-list, .reference-list, .document-list) {
  display: grid;
  gap: 0.65rem;
  min-inline-size: 0;
  margin-block: 1rem;
  padding-inline-start: 1.4rem;
}

:where(.source-list, .citation-list, .reference-list, .document-list) > li {
  padding-inline-start: 0.25rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

:where(.source-card, .citation-card, .reference-card) {
  min-inline-size: 0;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.35rem);
  overflow-wrap: anywhere;
}

/* Maps and embedded remote content. */
:where(.rhyddid-embed, .embed-frame, .map-frame, .map-container, .location-map) {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.35rem);
}

:where(.rhyddid-embed, .embed-frame, .map-frame, .map-container, .location-map) > :where(iframe, object, embed, video) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: clamp(18rem, 48vw, 36rem);
  border: 0;
}

:where(.embed-caption, .map-caption) {
  margin: 0;
  padding: 0.65rem 0.85rem;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-block-start: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

:where(.remote-content-notice, .external-content-notice, .embed-notice, .media-privacy-notice) {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  margin-block: 1rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-inline-start: 0.25rem solid var(--accent);
  border-radius: var(--radius, 0.35rem);
}

:where(.remote-content-notice, .external-content-notice, .embed-notice, .media-privacy-notice) > :first-child {
  margin-block-start: 0;
}

:where(.remote-content-notice, .external-content-notice, .embed-notice, .media-privacy-notice) > :last-child {
  margin-block-end: 0;
}

/* Media states. */
:where(.media-empty, .media-unavailable, .media-processing, .media-error, .attachment-empty) {
  display: grid;
  gap: 0.45rem;
  place-items: start;
  min-inline-size: 0;
  padding: 1rem;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius, 0.35rem);
}

:where(.media-error, .media-unavailable) {
  color: var(--text);
  border-inline-start: 0.25rem solid var(--danger, #b53535);
}

:where(.media-processing) {
  border-inline-start: 0.25rem solid var(--warning, #b27a22);
}

:where(.media-empty, .media-unavailable, .media-processing, .media-error, .attachment-empty) > :first-child {
  margin-block-start: 0;
}

:where(.media-empty, .media-unavailable, .media-processing, .media-error, .attachment-empty) > :last-child {
  margin-block-end: 0;
}

/* Story and dated-update presentation for long-form public material. */
:where(.story-header, .story-introduction, .story-body, .story-update) {
  min-inline-size: 0;
}

:where(.story-lead, .story-introduction) {
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.45rem);
  line-height: 1.55;
}

:where(.story-update) {
  position: relative;
  margin-block: 1.5rem;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-inline-start: 0.25rem solid var(--accent);
  border-radius: var(--radius, 0.35rem);
}

:where(.story-update__date, .story-date, .update-date) {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.025em;
}

:where(.story-format, .media-format) {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 0.2rem 0.55rem;
  color: var(--text-strong);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  :where(.rhyddid-file, .attachment-card, .download-card, .file-card) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  :where(.rhyddid-file, .attachment-card, .download-card, .file-card) > :where(.rhyddid-file__actions, .attachment-actions, .download-actions, .file-actions) {
    grid-column: 1 / -1;
  }

  :where(.rhyddid-embed, .embed-frame, .map-frame, .map-container, .location-map) > :where(iframe, object, embed, video) {
    min-block-size: 16rem;
  }
}

@media (forced-colors: active) {
  :where(.rhyddid-file, .attachment-card, .download-card, .file-card,
         .rhyddid-gallery > figure, .media-gallery > figure,
         .remote-content-notice, .external-content-notice,
         .transcript, .media-transcript, .story-update) {
    border: 1px solid CanvasText;
  }
}

@media print {
  :where(audio, video, .media-actions, .attachment-actions, .file-actions,
         .remote-content-notice button, .external-content-notice button) {
    display: none !important;
  }

  :where(.rhyddid-gallery, .media-gallery, .image-gallery, .gallery-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.rhyddid-file, .attachment-card, .download-card, .file-card,
         .transcript, .media-transcript, .story-update,
         .source-card, .citation-card, .reference-card) {
    break-inside: avoid;
    box-shadow: none;
  }

  :where(a[download], .download-link)::after {
    content: "";
  }
}