/* Styles to adapt imported NFTS/Drupal content to States Newsroom theme */


/* Apply bottom margin to all NFTS images */
.contentHolder .caption-drupal-media p {
    margin-bottom: 0.5rem;
}

/* Handle floated images */
.contentHolder .caption-drupal-media.view-mode--medium.align-left {
    float: left;
    margin-right: 22px;
    max-width: 300px;
}
.contentHolder .caption-drupal-media.view-mode--medium.align-right {
    float: right;
    margin-left: 22px;
    max-width: 300px;
}
.contentHolder .caption-drupal-media.view-mode--small.align-left {
    float: left;
    margin-right: 22px;
    max-width: 185px;
}
.contentHolder .caption-drupal-media.view-mode--small.align-right {
    float: right;
    margin-left: 22px;
    max-width: 185px;
}

/* Force "large" images to extend to full width of article */
.contentHolder .caption-drupal-media.view-mode--large img {
    width: 100%;
}

/* Match NFTS captions to native outlet style */
.contentHolder .caption-drupal-media .figure-caption {
    font-family: 'Barlow', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: var(--dark_gray);
}

/* Display camera at caption start: Adapted from Font Awesome stylesheet */
.contentHolder .caption-drupal-media .figure-caption::before {
    content: "\f030\00A0"; /* Camera followed by non-breaking space */
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove float from left/right-aligned images at phone-size screen widths */
@media (max-width: 575.98px) {
    .contentHolder .caption-drupal-media.view-mode--medium.align-left,
    .contentHolder .caption-drupal-media.view-mode--medium.align-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * Keep caption from extending past the image when an arbitrary width
 * has been set on the <img> tag while no constraints have been placed
 * on surrounding <figure>
 *
 * (Workaround adapted from NFTS stylesheet.)
 */
 .contentHolder .caption-drupal-media.view-mode--medium,
 .contentHolder .caption-drupal-media.view-mode--small {
    display: table;
}
.contentHolder .caption-drupal-media.view-mode--medium  .figure-caption,
.contentHolder .caption-drupal-media.view-mode--small  .figure-caption {
    display: table-caption;
    caption-side: bottom;
}

/* Center images for which above workaround applies */
.contentHolder .caption-drupal-media {
    margin-left: auto;
    margin-right: auto;
}