/* ==========================================================================
   Site Images & Media Layout System
   Preserves aspect ratio, provides versatile layouts, and gallery loading animation
   ========================================================================== */

/* Figure and Alignment */
.site-image-figure {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.site-image-figure.align-center {
    align-items: center;
    text-align: center;
    /* Starts below an earlier left or right picture instead of squeezing into the gap beside it */
    clear: both;
}

.site-image-figure.align-left {
    float: left;
    margin: 0.5rem 1.75rem 1.25rem 0;
    max-width: 48%;
}

.site-image-figure.align-right {
    float: right;
    margin: 0.5rem 0 1.25rem 1.75rem;
    max-width: 48%;
}

/* Clearfix for floated figures. Not on the .constrained boxes that are always flex or grid (their items hold their
   own floats): there the ::after would be one more item with a gap before it, pushing centred items (the footer's
   Privacy link, a button row) half a gap off centre and adding a gap under a column's last item. */
.site-content::after,
.post-body::after,
.accordion-panel-inner::after,
.constrained:not(.flex-center, .footer-flex, .site-footer-links, .contact-block-inner, .button-group, .button-group-row)::after,
.item::after {
    content: "";
    display: table;
    clear: both;
}

/* Image Wrapper with Loading Container */
.site-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--border-radius-image, 12px);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
    line-height: 0;
    transition: background-color 0.3s ease;
}

/* Sizing Options - Width strictly sets bounds, height stays auto to preserve aspect ratio */
.site-image-wrapper.size-narrow,
.site-image-figure.size-narrow .site-image-wrapper {
    width: 340px;
    max-width: 100%;
}

.site-image-wrapper.size-medium,
.site-image-figure.size-medium .site-image-wrapper {
    width: 600px;
    max-width: 100%;
}

.site-image-wrapper.size-wide,
.site-image-figure.size-wide .site-image-wrapper {
    width: 900px;
    max-width: 100%;
}

.site-image-wrapper.size-full,
.site-image-figure.size-full .site-image-wrapper {
    width: 100%;
}

/* Fixed aspect ratio (Image block setting): wrapper sets the box, image crops to fill it */
.site-image-wrapper.has-aspect-ratio .site-animated-image,
.site-image-wrapper.has-aspect-ratio .site-animated-video {
    height: 100%;
    object-fit: cover;
}

/* Custom percentage width from markdown e.g. ![alt|50%](url) */
.site-image-figure.has-custom-width .site-image-wrapper {
    width: var(--img-width, 100%);
    max-width: 100%;
}

.site-image-figure.has-custom-width.align-left,
.site-image-figure.has-custom-width.align-right {
    width: var(--img-width, 48%);
    max-width: var(--img-width, 48%);
}

.site-image-figure.has-custom-width.align-left .site-image-wrapper,
.site-image-figure.has-custom-width.align-right .site-image-wrapper {
    width: 100%;
}

/* Animated Image - Aspect ratio is ALWAYS preserved via height: auto */
.site-animated-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-image, 12px);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.site-image-wrapper.is-loaded .site-animated-image,
.site-animated-image.is-loaded {
    opacity: 1;
    transform: scale(1);
}

/* A Markdown video with layout options, e.g. ![clip|wide](/media/clip.mp4) */
.site-image-wrapper .site-animated-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-image, 12px);
}

/* A Markdown audio player with layout options, e.g. ![Song|narrow](/media/song.mp3) */
.site-image-wrapper.is-audio {
    background: none;
    overflow: visible;
    border-radius: 0;
    line-height: normal;
}

.site-image-wrapper .site-animated-audio {
    display: block;
    width: 100%;
}

/* In a centred, shrink-wrapped column, 100% would resolve to the media's own width (a player has none, so
   it would be 0px wide, and a small picture or GIF would stay small): full-width media stretches its column
   and figure to the block's width instead, like Wide does up to 900px. */
.media-layout-grid:is(.layout-above, .layout-top, .layout-underneath, .layout-bottom, .layout-center, .layout-wide, .layout-full) > .media-image-column:has(> .site-image-figure > .site-image-wrapper.size-full),
.media-image-column > .site-image-figure:has(> .site-image-wrapper.size-full) {
    align-self: stretch;
}

/* A plain Markdown picture, e.g. ![Me](/media/me.jpg), is rounded like every other photo */
.markdown-image {
    border-radius: var(--border-radius-image, 12px);
}

/* A picture or player in a list item sits level with its bullet */
li > .markdown-image,
li > .markdown-video,
li > .markdown-audio {
    display: inline-block !important;
    vertical-align: top;
}

li > .site-image-figure.align-center {
    display: inline-flex;
    vertical-align: top;
    width: 100%;
    margin-top: 0;
    /* Starts beside the bullet instead of centring across the item, leaving the bullet alone */
    align-items: flex-start;
    text-align: start;
}

li > .site-image-figure.align-center .site-image-caption {
    text-align: start;
}

/* A picture that failed to load: no spinner or broken-image icon, just its alt text in the tinted box,
   the same as a plain Markdown picture that failed to load */
.site-image-wrapper.is-broken {
    min-height: 3rem;
    padding: 1rem;
    box-sizing: border-box;
    font-size: 0.88rem;
    line-height: normal;
    color: var(--color-text-muted, #777);
}

.site-image-wrapper.is-broken .site-animated-image,
.site-image-wrapper.is-broken .site-animated-video,
.site-image-wrapper.is-broken .site-animated-audio {
    display: none;
}

/* A video or audio player whose file is missing does the same, in the same tinted box */
.site-image-wrapper.is-audio.is-broken {
    background: color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
    border-radius: var(--border-radius-image, 12px);
}

/* ...and one with no alt text of its own goes altogether, like a plain Markdown picture with none, taking its
   figure or side column with it when there is no caption to keep (the words then use the full width) */
.site-image-wrapper[hidden],
.site-image-figure[hidden],
.media-image-column[hidden] {
    display: none;
}

.media-layout-grid:has(> .media-image-column[hidden]) {
    display: block;
}

/* A plain Markdown picture that failed to load, swapped for a box with its alt text */
.markdown-image.is-broken {
    display: inline-block;
    max-width: 100%;
    min-height: 3rem;
    padding: 1rem;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
    font-size: 0.88rem;
    line-height: normal;
    color: var(--color-text-muted, #777);
}

/* Blurred preview teaser layer (blur-up like gallery) */
.site-image-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px);
    transform: scale(1.05);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.site-image-wrapper.is-loaded .site-image-preview {
    opacity: 0;
}

/* Loading Spinner matching gallery loader */
.site-image-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid color-mix(in srgb, var(--color-primary, #FFB3C6) 35%, transparent);
    border-top-color: var(--color-cta, #FF8FAB);
    border-radius: 50%;
    animation: site-image-spin 0.8s linear infinite;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.site-image-wrapper.is-loaded .site-image-spinner {
    opacity: 0;
    pointer-events: none;
}

@keyframes site-image-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Caption */
.site-image-caption {
    margin-top: 0.6rem;
    font-size: 0.88em;
    color: var(--color-text-muted, #777);
    line-height: 1.4;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* On the contact section's band (Primary, or its Background), captions take the band's text colour: the muted
   grey is for the page background and all but disappears on a coloured band. */
.contact-band .site-image-caption {
    color: inherit;
}

/* ==========================================================================
   Versatile Media Layout Grids (Side-by-Side, Above, Underneath)
   ========================================================================== */
.media-layout-grid {
    display: grid;
    gap: 2.25rem;
    align-items: center;
    width: 100%;
    margin: 1.5rem 0;
    box-sizing: border-box;
}

/* Side-by-Side: Image on Left, Text on Right */
.media-layout-grid.layout-side_left,
.media-layout-grid.layout-left {
    grid-template-columns: var(--media-col-width, minmax(280px, 45%)) minmax(0, 1fr);
}

/* Side-by-Side: Image on Right, Text on Left */
.media-layout-grid.layout-side_right,
.media-layout-grid.layout-right {
    grid-template-columns: minmax(0, 1fr) var(--media-col-width, minmax(280px, 45%));
}

.media-layout-grid.layout-side_right .media-image-column,
.media-layout-grid.layout-right .media-image-column {
    order: 2;
}

.media-layout-grid.layout-side_right .media-text-content,
.media-layout-grid.layout-right .media-text-content {
    order: 1;
}

/* Sizing modifiers for Side-by-Side */
.media-layout-grid.size-narrow {
    --media-col-width: minmax(220px, 32%);
}

.media-layout-grid.size-medium {
    --media-col-width: minmax(280px, 48%);
}

.media-layout-grid.size-wide {
    --media-col-width: minmax(340px, 62%);
}

.media-layout-grid.size-full {
    --media-col-width: 100%;
}

/* Beside words, a Full photo takes two thirds of the row so the words keep room. */
.media-layout-grid:is(.layout-side_left, .layout-side_right, .layout-left, .layout-right).size-full {
    --media-col-width: minmax(340px, 66%);
}

/* Image Above Text */
.media-layout-grid.layout-above,
.media-layout-grid.layout-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Image Underneath Text */
.media-layout-grid.layout-underneath,
.media-layout-grid.layout-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.media-layout-grid.layout-underneath .media-image-column,
.media-layout-grid.layout-bottom .media-image-column {
    order: 2;
}

.media-layout-grid.layout-underneath .media-text-content,
.media-layout-grid.layout-bottom .media-text-content {
    order: 1;
}

/* Centered Standalone Image */
.media-layout-grid.layout-center,
.media-layout-grid.layout-wide,
.media-layout-grid.layout-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.media-image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.media-text-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* Text above or under the media spans the full width, level with the block's heading, so the block's
   alignment places it */
.media-layout-grid:is(.layout-center, .layout-wide, .layout-full) .media-text-content,
.media-layout-grid.layout-above .media-text-content,
.media-layout-grid.layout-top .media-text-content,
.media-layout-grid.layout-underneath .media-text-content,
.media-layout-grid.layout-bottom .media-text-content {
    align-self: stretch;
    width: 100%;
}

.media-text-content > *:first-child {
    margin-top: 0;
}

.media-text-content > *:last-child {
    margin-bottom: 0;
}

/* Accordion Specific Media Layout */
.accordion-media-layout {
    margin: 0.75rem 0 0 0;
    gap: 1.5rem;
}

/* Mobile Responsiveness (< 768px) */
@media (max-width: 768px) {
    .media-layout-grid.layout-side_left,
    .media-layout-grid.layout-side_right,
    .media-layout-grid.layout-left,
    .media-layout-grid.layout-right {
        /* minmax(0, ...) lets the column shrink below the image's fixed preset width */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .media-layout-grid.layout-side_right .media-image-column,
    .media-layout-grid.layout-right .media-image-column {
        order: -1; /* Place image above text on mobile for natural reading hierarchy */
    }

    /* A |left or |right picture or player stops floating and centres, with its caption under it */
    .site-image-figure.align-left,
    .site-image-figure.align-right {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
        align-items: center;
        text-align: center;
        clear: both;
    }

    .site-image-figure.has-custom-width,
    .site-image-figure.has-custom-width.align-left,
    .site-image-figure.has-custom-width.align-right,
    .site-image-figure.has-custom-width .site-image-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .site-animated-image {
        transition: none !important;
        transform: none !important;
    }
    .site-image-spinner {
        animation: none !important;
    }
}