/* =============================================================
   Image widget (WidgetTypes.Image) - shared by every theme.

   Plain css on purpose, linked once from _GlobalStyles_Header like
   ut-widget-columns.css and ut-widget-spacing.css (and before the
   spacing file, so a widget's own Spacing choice keeps the last word).
   Each theme's Display supplies only its container + heading and, for
   Cornerstone and Airspace, a theme modifier (--cornerstone /
   --airspace) that the band, heading and card rules below key off -
   copied from each theme's own Video widget, so an Image sits in the
   page like the theme's other widgets. The image itself is the shared
   Views/Shared/Components/MySiteWidgets/Image/_ImageFigure.cshtml:

     <section class="ut-widget ut-widget-image
                     ut-widget-image--size-{original|full|custom}
                     ut-widget-image--h-{left|center|right}
                     ut-widget-image--v-{top|middle|bottom}
                     [ut-widget-image--card] [ut-widget-image--{theme}]">
       <div class="{theme container} ut-widget-image__inner">
         [heading]
         <div class="ut-widget-image__frame">
           <figure class="ut-widget-image__figure [card ut-widget-image__card]"
                   [style="--ut-widget-image-width: 50%"]>
             [<a class="ut-widget-image__link" href [target="_blank" rel="noopener"]>]
               <img class="ut-widget-image__img" src alt>
             [</a>]

   Size: Original = the image's own width; Full width = the space the
   widget is in; Custom = --ut-widget-image-width (a percent of that
   space, or pixels). Every size is capped at the space, so a large
   image or a fixed pixel width still fits a phone.
   ============================================================= */

/* ---------- The band ----------
   Doubled class: Alpha's .ut-widget sets its own padding, and the theme
   css may load after this file. */
.ut-widget.ut-widget-image {
    padding-top: var(--ut-widget-image-padding-y, 3rem);
    padding-bottom: var(--ut-widget-image-padding-y, 3rem);
}

/* ---------- Horizontal alignment ---------- */
.ut-widget-image__frame {
    display: flex;
    justify-content: center;
}

.ut-widget-image--h-left .ut-widget-image__frame {
    justify-content: flex-start;
}

.ut-widget-image--h-right .ut-widget-image__frame {
    justify-content: flex-end;
}

/* ---------- Size ---------- */
.ut-widget-image__figure {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.ut-widget-image__img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ut-widget-image--size-full .ut-widget-image__figure {
    width: 100%;
}

.ut-widget-image--size-custom .ut-widget-image__figure {
    width: var(--ut-widget-image-width, 50%);
}

.ut-widget-image--size-full .ut-widget-image__img,
.ut-widget-image--size-custom .ut-widget-image__img {
    width: 100%;
}

/* Original size: the figure shrink-wraps the image, so the image keeps
   its own width until the space is narrower than it. */
.ut-widget-image--size-original .ut-widget-image__figure {
    width: auto;
}

.ut-widget-image--size-original .ut-widget-image__img {
    width: auto;
}

/* ---------- The link (optional) ----------
   Wraps the image, so it sizes exactly as the image does: a block the
   figure's width (Full width / Custom), or shrink-wrapped by the figure
   (Original size). A visible ring for keyboard users; a light fade on
   hover says the image can be clicked. */
.ut-widget-image__link {
    display: block;
    border-radius: inherit;
}

.ut-widget-image__link:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 3px;
}

.ut-widget-image__link .ut-widget-image__img {
    transition: opacity 0.15s ease-in-out;
}

.ut-widget-image__link:hover .ut-widget-image__img {
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .ut-widget-image__link .ut-widget-image__img {
        transition: none;
    }
}

/* ---------- The card ("Show in a card") ----------
   Bootstrap's .card gives every theme its border and radius; the mat
   between the card's edge and the image is ours. The card is a flex
   column, so its one child (the image, or the link around it) is told
   whether to stretch. */
.ut-widget-image__card {
    padding: var(--ut-widget-image-card-padding, 12px);
}

.ut-widget-image__card > :is(.ut-widget-image__img, .ut-widget-image__link) {
    align-self: flex-start;
}

.ut-widget-image--size-full .ut-widget-image__card > :is(.ut-widget-image__img, .ut-widget-image__link),
.ut-widget-image--size-custom .ut-widget-image__card > :is(.ut-widget-image__img, .ut-widget-image__link) {
    align-self: stretch;
}

/* ---------- Vertical alignment ----------
   A widget is as tall as its image, so Top / Middle / Bottom only shows
   where there is room: in a Columns widget column beside taller content.
   There the column grows to the row's height, and everything between
   the column and the image (the editor's wrapper, the Spacing wrapper,
   the section, its container, the frame) grows with it, so the frame can
   place the image. The heading stays at the top. */
.ut-widget-columns__col:has(.ut-widget-image--v-middle, .ut-widget-image--v-bottom) {
    align-self: stretch;
}

.ut-widget-columns__col :has(.ut-widget-image--v-middle, .ut-widget-image--v-bottom),
.ut-widget-columns__col :is(.ut-widget-image--v-middle, .ut-widget-image--v-bottom),
.ut-widget-columns__col :is(.ut-widget-image--v-middle, .ut-widget-image--v-bottom) .ut-widget-image__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ut-widget-columns__col :is(.ut-widget-image--v-middle, .ut-widget-image--v-bottom) .ut-widget-image__inner {
    width: 100%;
}

.ut-widget-columns__col :is(.ut-widget-image--v-middle, .ut-widget-image--v-bottom) .ut-widget-image__frame {
    flex: 1 1 auto;
}

.ut-widget-columns__col .ut-widget-image--v-middle .ut-widget-image__frame {
    align-items: center;
}

.ut-widget-columns__col .ut-widget-image--v-bottom .ut-widget-image__frame {
    align-items: flex-end;
}

/* ---------- Cornerstone (its Video widget's band, title and card) ---------- */
.ut-widget.ut-widget-image--cornerstone {
    --ut-widget-image-padding-y: 70px;
}

.ut-widget-image--cornerstone .ut-widget-title {
    text-align: center;
    margin-bottom: 36px;
}

.ut-widget-image--cornerstone .ut-widget-title h2 {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.8px;
    margin: 0;
    color: var(--cs-fg-1);
}

.ut-widget-image--cornerstone .ut-widget-image__card {
    background: #fff;
    border: 1px solid var(--cs-border-strong);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(17, 20, 23, 0.02), 0 6px 18px rgba(17, 20, 23, 0.06);
}

/* ---------- Airspace (its Video widget's band, title accent and card) ---------- */
.ut-widget.ut-widget-image--airspace {
    --ut-widget-image-padding-y: 100px;
}

@media (max-width: 640px) {
    .ut-widget.ut-widget-image--airspace {
        --ut-widget-image-padding-y: 70px;
    }
}

.ut-widget-image--airspace .ut-widget-title {
    margin-bottom: 40px;
}

.ut-widget-image--airspace .ut-widget-title h2 {
    margin-bottom: 0;
}

.ut-widget-image--airspace .ut-widget-title h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--ut-theme-primary);
}

.ut-widget-image--airspace .ut-widget-image__card {
    --ut-widget-image-card-padding: 16px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 0;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.06);
}