/*
 * Media Library — figure layout presets
 * --------------------------------------
 * Output by app/Services/MediaLibrary/MediaShortcodeRenderer.php when
 * rendering a [[media code="..." layout="..." align="..."]] shortcode.
 * Width preset keys here must match entries in
 * app/Services/MediaLibrary/MediaLayoutPresets.php.
 *
 * Loaded by resources/views/layouts/app.blade.php as a standalone
 * stylesheet so it applies to every theme without needing to be baked
 * into each precompiled theme stylesheet at public/css/{theme}.css.
 *
 * Mobile-first: each rule starts with the mobile baseline (typically
 * 100% width, no float) and bumps up at the >= 768px breakpoint.
 *
 * Width and alignment are orthogonal:
 *   - Width classes (.media-figure--full / --wide / --half / --third / --inline)
 *     control how wide the figure is.
 *   - Alignment classes (.media-figure--align-left / --align-center / --align-right)
 *     control where it sits and whether text wraps around it.
 *
 * The renderer only emits an alignment class when the width preset
 * actually accepts one (i.e. wide / half / third). full and inline
 * never get an alignment class because alignment is meaningless for
 * those widths.
 *
 * Adding a new width preset requires three coordinated changes:
 *   1. New entry in MediaLayoutPresets::PRESETS
 *   2. New rule in this file
 *   3. New context-toolbar button in the TinyMCE plugin
 */

.media-figure {
    display: block;
    margin: 1.5rem 0;
    padding: 0;
    /* Reset any inherited browser figure margins so layout-specific
       rules below have a clean baseline. */
}

.media-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    /* `width` and `height` attributes are emitted by the renderer for
       CLS prevention; the `height: auto` here lets them act as an
       aspect-ratio hint without overriding our layout widths. */
}

/* ---------- Width presets ---------- */

/* Full width — fills the content column on every device. */
.media-figure--full {
    width: 100%;
}

/* Wide — slightly inset on desktop, full bleed on mobile. */
.media-figure--wide {
    width: 100%;
}
@media (min-width: 768px) {
    .media-figure--wide {
        width: 75%;
    }
}

/* Half — half-width on desktop, full bleed on mobile. */
.media-figure--half {
    width: 100%;
}
@media (min-width: 768px) {
    .media-figure--half {
        width: 50%;
    }
}

/* Third — narrow on desktop, full bleed on mobile. */
.media-figure--third {
    width: 100%;
}
@media (min-width: 768px) {
    .media-figure--third {
        width: 33.3333%;
    }
}

/* Inline — small image baseline-aligned, intended for inline use
   alongside a paragraph. Caps at 480px and never grows above its
   intrinsic size. Alignment classes are not applied to inline. */
.media-figure--inline {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0 0.5rem;
    vertical-align: middle;
}
@media (min-width: 768px) {
    .media-figure--inline {
        max-width: 480px;
    }
}

/* ---------- Alignment modifiers ---------- */

/*
 * Mobile baseline for all three alignments: full bleed, no float, no
 * auto margins. Floats and side-by-side layouts get cramped on small
 * screens, so we collapse to vertical stacking and let the surrounding
 * content flow above and below the image.
 */
.media-figure--align-left,
.media-figure--align-center,
.media-figure--align-right {
    margin-left: 0;
    margin-right: 0;
    float: none;
}

/* Center is the default — auto margins on desktop only. On mobile the
   image is full bleed so centering is implicit. */
@media (min-width: 768px) {
    .media-figure--align-center {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Float-based alignments only apply at the >= 768px breakpoint.
   Surrounding text wraps around the image. The bottom margin gives
   following content a bit of breathing room when the wrap ends. */
@media (min-width: 768px) {
    .media-figure--align-left {
        float: left;
        margin: 0.25rem 1.5rem 1rem 0;
    }
    .media-figure--align-right {
        float: right;
        margin: 0.25rem 0 1rem 1.5rem;
    }
}