/*
 * PBK M1.03C — native media and embed blocks.
 *
 * This exact layer is shared by the front end and Gutenberg. It contains no
 * local color literals and respects all colors selected through theme.json.
 */

:where(.pbk-content, .editor-styles-wrapper) :where(
  .wp-block-audio,
  .wp-block-file,
  .wp-block-gallery,
  .wp-block-image,
  .wp-block-video,
  .wp-block-embed
) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.pbk-content, .editor-styles-wrapper) :where(
  .wp-block-audio,
  .wp-block-image,
  .wp-block-video,
  .wp-block-embed
) {
  margin-block: var(--wp--preset--spacing--xl, 2rem);
  margin-inline: 0;
}

:where(.pbk-content, .editor-styles-wrapper) :where(
  .wp-block-audio,
  .wp-block-image,
  .wp-block-video,
  .wp-block-embed
) :where(.wp-element-caption, figcaption) {
  margin-block-start: var(--wp--preset--spacing--xs, 0.5rem);
  color: var(--pbk-content-text-muted);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-gallery > .blocks-gallery-caption {
  margin-block-start: var(--wp--preset--spacing--xs, 0.5rem);
  color: var(--pbk-content-text-muted);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Image: preserve intrinsic proportions at content, wide and full widths. */
:where(.pbk-content, .editor-styles-wrapper) .wp-block-image img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-image.aligncenter img {
  margin-inline: auto;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-image.alignfull img,
:where(.pbk-content, .editor-styles-wrapper) .wp-block-image.size-full img {
  inline-size: 100%;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-image.is-style-rounded img {
  border-radius: 9999px;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-image :where(a, picture) {
  display: block;
  max-inline-size: 100%;
}

/* Gallery: Core owns flex, columns, cropping, aspect ratio and blockGap. */
:where(.pbk-content, .editor-styles-wrapper)
  figure.wp-block-gallery.has-nested-images > figure.wp-block-image {
  flex-grow: 0;
  min-inline-size: 0;
  margin: 0;
}

/* PBK galleries do not expose per-image captions; the gallery caption remains. */
:where(.pbk-content, .editor-styles-wrapper)
  .wp-block-gallery.has-nested-images > .wp-block-image > figcaption,
:where(.pbk-content, .editor-styles-wrapper)
  .wp-block-gallery.has-nested-images > .wp-block-image:has(> figcaption)::before {
  display: none;
}

/* Audio and video controls remain usable without expanding the viewport. */
:where(.pbk-content, .editor-styles-wrapper) .wp-block-audio audio,
:where(.pbk-content, .editor-styles-wrapper) .wp-block-video video {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-video video {
  block-size: auto;
  border-radius: var(--pbk-content-radius-frame);
  background: var(--pbk-content-dark);
}

/* File: readable long names, a 44px target and the native download action. */
:where(.pbk-content, .editor-styles-wrapper) .wp-block-file:not(.wp-element-button) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wp--preset--spacing--md, 1rem);
  margin-block: var(--wp--preset--spacing--lg, 1.5rem);
  border: 1px solid var(--pbk-content-border);
  border-radius: var(--pbk-content-radius-frame);
  background: var(--pbk-content-surface);
  padding: var(--wp--preset--spacing--md, 1rem);
  font-size: var(--wp--preset--font-size--base, 1rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file > a:not(.wp-block-file__button) {
  min-inline-size: 0;
  color: var(--wp--style--color--link, var(--pbk-content-action));
  font-weight: 500;
  text-decoration: none;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file > a:not(.wp-block-file__button):hover {
  color: var(--wp--style--color--link, var(--pbk-content-action-hover));
  text-decoration: none;
}

/* Core wraps both editable labels in one element in Gutenberg. */
.editor-styles-wrapper .wp-block-file > .wp-block-file__content-wrapper {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wp--preset--spacing--md, 1rem);
  min-inline-size: 0;
}

.editor-styles-wrapper .wp-block-file .wp-block-file__button-richtext-wrapper {
  justify-self: end;
  margin-inline-start: 0;
}

.editor-styles-wrapper .wp-block-file .wp-block-file__content-wrapper > a:not(.wp-block-file__button) {
  min-inline-size: 0;
  color: var(--wp--style--color--link, var(--pbk-content-action));
  font-weight: 500;
  text-decoration: none;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file__button {
  box-sizing: border-box;
  display: inline-flex;
  min-block-size: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pbk-content-action);
  border-radius: var(--pbk-content-radius-control);
  background: var(--pbk-content-action);
  color: var(--wp--preset--color--on-action, var(--pbk-content-on-dark));
  padding: 0.625rem 1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file__button:hover {
  border-color: var(--pbk-content-action-hover);
  background: var(--pbk-content-action-hover);
  color: var(--wp--preset--color--on-action, var(--pbk-content-on-dark));
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file__button:focus-visible {
  outline: 3px solid var(--pbk-content-focus);
  outline-offset: 3px;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-file__button:visited {
  color: var(--wp--preset--color--on-action, var(--pbk-content-on-dark));
}

/* Embed: aspect-ratio wrappers and generic iframes never widen the page. */
:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed {
  overflow-wrap: anywhere;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed__wrapper {
  max-inline-size: 100%;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  content: none;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
  aspect-ratio: 4 / 3;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper {
  aspect-ratio: 1;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper :where(iframe, video, object) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

:where(.pbk-content, .editor-styles-wrapper) .wp-block-embed iframe {
  max-inline-size: 100%;
}

/* Explicit fixture classes document unavailable/empty media without JS. */
:where(.pbk-content, .editor-styles-wrapper) :where(
  .pbk-stylebook-empty-state,
  .pbk-stylebook-media-unavailable
) {
  min-block-size: 7rem;
  border: 2px dashed var(--pbk-content-border);
  border-radius: var(--pbk-content-radius-frame);
  background: var(--pbk-content-surface);
  color: var(--pbk-content-text-muted);
  padding: var(--wp--preset--spacing--lg, 1.5rem);
}

:where(.pbk-content, .editor-styles-wrapper) .pbk-stylebook-empty-state:empty::before,
:where(.pbk-content, .editor-styles-wrapper) .pbk-stylebook-media-unavailable:empty::before {
  content: "Brak dostępnych mediów";
  display: block;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
}

@media (max-width: 48rem) {
  :where(.pbk-content, .editor-styles-wrapper) .wp-block-file:not(.wp-element-button),
  .editor-styles-wrapper .wp-block-file > .wp-block-file__content-wrapper {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  :where(.pbk-content, .editor-styles-wrapper) .wp-block-file__button,
  .editor-styles-wrapper .wp-block-file .wp-block-file__button-richtext-wrapper {
    inline-size: 100%;
  }
}