:root {
  /* Caption */
  --caption--background_colour: var(--dark_3, #002147);
  --caption--padding: clamp(1rem, .875rem + 0.5vw, 1.375rem);
  --caption--border_radius: 11px;
  /* Caption - Text */
  --caption--text--text_colour: var(--light_1, #FFFFFF);
  --caption--text--font_family: 'Roboto';
  --caption--text--font_size: 1.375rem;
  --caption--text--font_weight: 500;
  --caption--text--font_style: normal;
  --caption--text--line_height: 120%;
  /* Caption - Text - Link */
  --caption--text--link--text_colour: var(--light_accent, #49B6FF);
  /* Caption - Prefix */
  --caption--prefix--text_colour: var(--light_accent, #49B6FF);
  --caption--prefix--font_size: 1.25rem;
  --caption--prefix--line_height: var(--caption--text--line_height);  
}

.oxfcms-caption {
  display: block;
  width: 100%; /* Match the width of the container */
  box-sizing: border-box; /* Include padding in width calculation */
  word-wrap: break-word; /* Ensures long words break */
  white-space: normal; /* Allows text to wrap */
  .oxfcms-caption-content,
  .lb-caption {
    background-color: var(--caption--background_colour);
    font-family: var(--caption--text--font_family);
    font-size: var(--caption--text--font_size);
    font-weight: var(--caption--text--font_weight);
    font-style: var(--caption--text--font_style);
    line-height: var(--caption--text--line_height);
    border-bottom-left-radius: var(--caption--border_radius);
    border-bottom-right-radius: var(--caption--border_radius);
    padding: var(--caption--padding); /* Needs to be auto rather than 100% for the media gallery */
    overflow: hidden; /* Clearfix for floated elements */
    display: flex;
    width: 100%; /* Take full width of the caption container */
    box-sizing: border-box; /* Include padding in width calculation */
    max-width: 100%; /* Ensure it doesn't exceed the container width */
    overflow-wrap: break-word; /* Modern version of word-wrap */
    word-wrap: break-word; /* Ensure long words break */
    white-space: normal; /* Allows text to wrap */
    i {
      color: var(--caption--prefix--text_colour);
      font-size: var(--caption--prefix--font_size);
      line-height: var(--caption--prefix--line_height);
      float: left;
      margin-right: 10px;
    }
    p {
      color: var(--caption--text--text_colour);
      line-height: var(--caption--text--line_height);
      margin: 0;
      word-wrap: break-word; /* Ensure long words break */
      overflow-wrap: break-word; /* Modern version of word-wrap */
      white-space: normal; /* Allows text to wrap */
      display: block;
      a {
        color: var(--caption--text--link--text_colour);
      }
    }
  }
}
/* WYSIWYG inserted Image with Caption */
.caption {
  &.caption-drupal-media {
    .field--name-field-media-image {
      line-height: 0;
    }
  }
}
/* Breakpoint - Small Desktop */

@media (width < 1280px) {
  .oxfcms-caption .oxfcms-caption-content,
  .lb-caption {
    --caption--text--font_size: 1.25rem;
    --caption--prefix--font_size: 1.125rem;
  }
}
/* Breakpoint - Tablet */

@media (width < 768px) {
  .oxfcms-caption .oxfcms-caption-content,
  .lb-caption {
    --caption--text--font_size: 1.125rem;
    --caption--prefix--font_size: 1rem;
  }
}