/**
 * @file
 * PDF Viewer paragraph styles.
 *
 * Uses CSS custom properties for aspect ratio, allowing flexible ratio control
 * from the Twig template.
 */

.c-pdf-viewer {
  --pdf-aspect-ratio: 4 / 3;
  width: 100%;
}

.c-pdf-viewer__container {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pdf-aspect-ratio);
}

/* Ensure the iframe fills the container */
.c-pdf-viewer__container iframe,
.c-pdf-viewer__container .pdf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 0;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .c-pdf-viewer--ratio-16-9 .c-pdf-viewer__container {
    padding-bottom: 56.25%;
    /* 9/16 = 0.5625 */
  }

  .c-pdf-viewer--ratio-4-3 .c-pdf-viewer__container {
    padding-bottom: 75%;
    /* 3/4 = 0.75 */
  }

  .c-pdf-viewer--ratio-3-2 .c-pdf-viewer__container {
    padding-bottom: 66.67%;
    /* 2/3 = 0.6667 */
  }

  .c-pdf-viewer--ratio-1-1 .c-pdf-viewer__container {
    padding-bottom: 100%;
    /* 1/1 = 1 */
  }

  .c-pdf-viewer--ratio-a4 .c-pdf-viewer__container {
    padding-bottom: 141.42%;
    /* sqrt(2) for A4 */
  }

  /* Reset height for fallback */
  @supports not (aspect-ratio: 1 / 1) {
    .c-pdf-viewer__container {
      height: 0;
    }
  }
}