/**
 * Legacy width classes from the retired class-based width picker.
 *
 * Nothing writes these any more: sizing is now core's percentage resize, and
 * the CKEditor 5 plugin upcasts these classes to the equivalent resize, so an
 * image sheds its class the next time its content is saved. These rules stay
 * shipped for content that is never re-saved, and should only be dropped once
 * the classes are confirmed gone from the database.
 *
 * Loaded on every page (front end + node edit), so the same rules style the
 * rendered content and the inline CKEditor 5 editing area (`.ck-content`).
 * `height: auto` lets the image keep its aspect ratio despite its `height`
 * attribute.
 */

/* Inline images: CKEditor puts the style class on the <img> itself. */
img.fsu-img-w-50 {
  width: 50%;
  height: auto;
}

img.fsu-img-w-75 {
  width: 75%;
  height: auto;
}

/* Block images: CKEditor puts the class on the wrapping <figure class="image">. */
figure.image.fsu-img-w-50 {
  width: 50%;
}

figure.image.fsu-img-w-75 {
  width: 75%;
}

figure.image.fsu-img-w-50 img,
figure.image.fsu-img-w-75 img {
  width: 100%;
  height: auto;
}

/**
 * Front-end presentation for CKEditor 5 images.
 *
 * The editor and the rendered page disagreed in three ways (client review,
 * 2026-07-28). All three come from the same gap: core ships almost no styling
 * for the markup filter_align and filter_caption produce, so CKEditor 5's
 * editing view (which has its own full content stylesheet) looked nothing like
 * the page.
 *
 * Scoped to images and figures rather than to the bare .align-* classes, which
 * Drupal also puts on other aligned content.
 */

/*
 * 1. Spacing. Core's align.module.css sets `float` and nothing else, so wrapped
 *    text ran flush against the image while the editor showed a clear gap.
 */
/*
 * Fixed pixel values on purpose. These sites do not share a root font size
 * (fsu_strata resolves 1rem to 10px, other fleet themes do not), so rem here
 * would mean a different gap on every site.
 */
img.align-left,
figure.align-left {
  margin-right: 20px;
  margin-bottom: 15px;
}

img.align-right,
figure.align-right {
  margin-left: 20px;
  margin-bottom: 15px;
}

img.align-center,
figure.align-center {
  margin-bottom: 15px;
}

/*
 * 2. Sizing. FsuFilterCaption puts the image's percentage width on the figure,
 *    which is what gives a floated figure a definite width; the image then
 *    fills it. Without this pair a captioned image fell back to its intrinsic
 *    pixel size and left dead space beside it inside the figure.
 */
figure.fsu-figure-sized {
  max-width: 100%;
}

figure.fsu-figure-sized > img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * A captioned image with a pixel width gets no figure width, so shrink the
 * figure to the image. Otherwise the figure spans the full container and the
 * caption stretches far wider than the image it belongs to.
 */
figure[role="group"]:not(.fsu-figure-sized) {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/*
 * 3. Captions. Modelled on news.fsu.edu (client request, 2026-07-29): no
 *    background fill, just a hairline rule underneath. The border colour is
 *    that site's own `.wp-caption-text` value, 1px solid #d5d4d4. Its padding
 *    (`0 1em .5em 0`) and font-size (85%) are NOT copied — the existing FSU
 *    values are kept, since a right-only inset reads as a mistake under
 *    centred text.
 *
 *    Text stays centred, which is the other place this differs from
 *    news.fsu.edu (its captions are left-aligned). Centred was an explicit
 *    client decision on 2026-07-28 and this request was specifically about the
 *    background and border, so it is left alone.
 */
figure[role="group"] > figcaption {
  padding: 0.6em;
  color: #333;
  font-size: 0.875em;
  text-align: center;
  word-break: break-word;
  border-bottom: 1px solid #d5d4d4;
}

/*
 * The same treatment inside the editor. This stylesheet is attached on every
 * page including the node form, and CKEditor 5 ships its own grey caption band
 * (--ck-content-color-image-caption-background), so without this the editor
 * would show a filled caption while the page shows a ruled one — reintroducing
 * exactly the editor/front-end mismatch this whole change set exists to remove.
 *
 * Selector is `figure.image`, not `.image`, on purpose. CKEditor's own rule is
 * `.ck-content .image > figcaption`, which is specificity (0,2,1) — identical
 * to ours, so the winner came down to stylesheet order and core's CSS loaded
 * last. Adding the element name makes ours (0,2,2) and it wins outright,
 * whatever the order. That is preferable to `!important`, which would also
 * override any per-site override a theme might legitimately want to add later.
 */
.ck-content figure.image > figcaption,
.ck-content .image-inline > figcaption {
  background-color: transparent;
  padding: 0.6em;
  color: #333;
  font-size: 0.875em;
  text-align: center;
  border-bottom: 1px solid #d5d4d4;
}

/*
 * Breathing room between the image and its caption inside the editor. Also
 * needs `figure.image`: CKEditor's `.ck-content .image img` sets the margin
 * shorthand (`0 auto`), so a plain `.ck-content .image img` would tie and lose.
 * Only margin-bottom is set, leaving the auto side margins that centre it.
 */
.ck-content figure.image img {
  margin-bottom: 0.6em;
}

/*
 * 4. Small screens: full width, no float.
 *
 * A percentage width that reads well on a desktop column is unusable on a
 * phone — a 25% image is about 90px wide on a 375px screen, and text wrapping
 * beside it gets a handful of words per line. At 480px and below every inline
 * image therefore goes full width and stops floating, so image and text stack.
 *
 * 480px is deliberately narrower than a Bootstrap breakpoint: it covers phones
 * in portrait and nothing else, so tablets and phones in landscape keep the
 * floated percentage layout they have room for.
 *
 * The `!important` on the figure width is load-bearing, not laziness:
 * FsuFilterCaption writes the chosen percentage as an *inline* style on the
 * <figure>, and an inline style outranks any stylesheet rule. Without it a
 * captioned image would keep its desktop percentage on a phone. Images size
 * from the `width` HTML attribute, which is only a presentational hint and
 * loses to author CSS, so those need no `!important`.
 */
@media (max-width: 480px) {
  img.align-left,
  img.align-right,
  img.align-center,
  figure.align-left,
  figure.align-right,
  figure.align-center,
  figure[role="group"] {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Double the desktop gap: stacked full-width images need more separation
       from the text that follows than a floated one sitting beside it does. */
    margin-bottom: 30px;
  }

  /* Beats the inline width FsuFilterCaption puts on the figure. */
  figure.fsu-figure-sized {
    width: 100% !important;
  }

  /* Legacy pixel-width captions shrink-wrap on desktop; stretch them here. */
  figure[role="group"]:not(.fsu-figure-sized) {
    width: 100%;
  }

  figure[role="group"] > img,
  figure.fsu-figure-sized > img {
    width: 100%;
    height: auto;
  }

  /* Retired width-picker classes, for content never re-saved. */
  img.fsu-img-w-50,
  img.fsu-img-w-75 {
    width: 100%;
  }

  figure.image.fsu-img-w-50,
  figure.image.fsu-img-w-75 {
    width: 100%;
  }

  /* Percentage height attributes must not distort a now-wider image. */
  img.align-left,
  img.align-right,
  img.align-center {
    height: auto;
  }
}