/**
 * CKEditor 5 content styles for rendering rich-text content.
 *
 * Classic Build v39 outputs these classes on <figure class="image">:
 *   - image-style-align-center        → centered block (full width)
 *   - image-style-block-align-left    → block-level, aligned left  ← repurposed as 48% float
 *   - image-style-block-align-right   → block-level, aligned right ← repurposed as 48% float
 *   - image-style-side                → side image, right floating
 *
 * Classic Build v39 does NOT include ImageResize nor the inline alignment styles
 * (image-style-align-left/right). To still allow admins to put images side-by-side,
 * we REPURPOSE block-align-left and block-align-right as ~48% floated columns.
 *
 * UX:
 *   1 image alignCenter   → full-width centered
 *   1 image alignBlockLeft  → 48% wide, floats left
 *   1 image alignBlockRight → 48% wide, floats right
 *   2 images: one alignBlockLeft + one alignBlockRight → side-by-side
 *
 * !important is required because CKEditor injects its own default content styles
 * (display: table on .image) at runtime that would otherwise override these.
 *
 * Same styles apply inside CKEditor's WYSIWYG (.ck-content) and on the public site
 * (.news-content), so admin sees a true preview.
 */

/* --- Base figure (no alignment selected) --- */
.ck-content figure.image,
.news-content figure.image {
    display: block !important;
    clear: both !important;
    text-align: center !important;
    margin: 0.9em 0 !important;
    max-width: 100% !important;
}

.ck-content figure.image img,
.news-content figure.image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* --- BLOCK-ALIGN-LEFT / BLOCK-ALIGN-RIGHT as 48% side-by-side floats --- */
.ck-content figure.image.image-style-block-align-left,
.ck-content figure.image-style-block-align-left,
.news-content figure.image.image-style-block-align-left,
.news-content figure.image-style-block-align-left {
    display: block !important;
    float: left !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 2% 1em 0 !important;
    clear: none !important;
    text-align: left !important;
}

.ck-content figure.image.image-style-block-align-right,
.ck-content figure.image-style-block-align-right,
.news-content figure.image.image-style-block-align-right,
.news-content figure.image-style-block-align-right {
    display: block !important;
    float: right !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 0 1em 2% !important;
    clear: none !important;
    text-align: left !important;
}

/* --- alignCenter remains full-width centered --- */
.ck-content figure.image.image-style-align-center,
.ck-content figure.image-style-align-center,
.news-content figure.image.image-style-align-center,
.news-content figure.image-style-align-center {
    display: block !important;
    margin: 0.9em auto !important;
    max-width: 100% !important;
    clear: both !important;
    float: none !important;
}

/* --- "Side image": float right (text wraps on the left) --- */
.ck-content figure.image.image-style-side,
.ck-content figure.image-style-side,
.news-content figure.image.image-style-side,
.news-content figure.image-style-side {
    display: block !important;
    float: right !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 0 1em 1.5em !important;
    clear: none !important;
}

/* --- Inline image (image inside paragraph flow) --- */
.ck-content .image-inline,
.news-content .image-inline {
    display: inline-flex !important;
    max-width: 48% !important;
    align-items: flex-start !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
}

.ck-content .image-inline img,
.news-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100% !important;
}

/* --- Caption styling (when toggled on) --- */
.ck-content figure.image > figcaption,
.news-content figure.image > figcaption {
    display: block !important;
    word-break: break-word;
    color: hsl(0, 0%, 20%);
    background-color: hsl(0, 0%, 97%);
    padding: 0.6em;
    font-size: 0.75em;
    outline-offset: -1px;
}

/* --- Clearfix: stops floated images from leaking out of the content container --- */
.ck-content::after,
.news-content::after {
    content: "";
    display: block;
    clear: both;
}

/* --- Editor widget wrapper: in CKEditor's preview, each <figure> is wrapped in
       a .ck-widget container that's block-level by default. For aligned figures,
       float the wrapper at 48% so two consecutive widgets sit side-by-side in the
       editor (not just on the public site). --- */
.ck-content .ck-widget:has(> figure.image-style-block-align-left) {
    float: left !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 2% 1em 0 !important;
    clear: none !important;
}

.ck-content .ck-widget:has(> figure.image-style-block-align-right) {
    float: right !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 0 1em 2% !important;
    clear: none !important;
}

.ck-content .ck-widget:has(> figure.image-style-side) {
    float: right !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0.5em 0 1em 1.5em !important;
    clear: none !important;
}

/* When figure is inside a widget wrapper, the wrapper handles the float/sizing —
   the figure inside must fill 100% of the wrapper, not apply its own 48% float again. */
.ck-content .ck-widget figure.image.image-style-block-align-left,
.ck-content .ck-widget figure.image-style-block-align-left,
.ck-content .ck-widget figure.image.image-style-block-align-right,
.ck-content .ck-widget figure.image-style-block-align-right,
.ck-content .ck-widget figure.image.image-style-side,
.ck-content .ck-widget figure.image-style-side {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* === Image gallery rows — inserted via "Inserir galeria" button === */
/* CSS grid uniformizes images regardless of source size (object-fit cover + aspect-ratio). */
.ck-content .image-row,
.news-content .image-row {
    display: grid !important;
    gap: 8px !important;
    margin: 0.9em 0 !important;
    clear: both !important;
}

.ck-content .image-row-2col,
.news-content .image-row-2col {
    grid-template-columns: 1fr 1fr !important;
}

.ck-content .image-row-3col,
.news-content .image-row-3col {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.ck-content .image-row-2x2,
.news-content .image-row-2x2 {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
}

.ck-content .image-row-1-2,
.news-content .image-row-1-2 {
    grid-template-columns: 2fr 1fr !important;
    /* Force the row to have a fixed aspect ratio so columns align cleanly.
       2:1.25 ≈ 16:10 of the big image at full width — both columns end up
       with the same height, so the 2 small images on the right (stacked)
       sum to exactly the height of the big image on the left. */
    aspect-ratio: 2 / 1.25 !important;
}

.ck-content .image-row .image-col,
.news-content .image-row .image-col {
    display: grid !important;
    gap: 8px !important;
    grid-template-rows: 1fr 1fr !important;
    height: 100% !important;
}

/* Override per-figure aspect-ratio inside 1+2 layout — figures fill their
   grid cell instead (the cell shape is what drives the layout, not the figure). */
.ck-content .image-row-1-2 figure.image,
.news-content .image-row-1-2 figure.image {
    aspect-ratio: auto !important;
    height: 100% !important;
    width: 100% !important;
}

.ck-content .image-row figure.image,
.news-content .image-row figure.image {
    margin: 0 !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    float: none !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 4px;
}

.ck-content .image-row figure.image img,
.news-content .image-row figure.image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* In the editor preview, each figure is wrapped in .ck-widget — reset its float so
   grid children behave normally. */
.ck-content .image-row .ck-widget {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Galeria 1+2: a figure grande precisa de altura igual à soma das 2 da coluna direita.
   stretch garante isso quando o container tem altura auto baseada na col mais alta. */
.ck-content .image-row-1-2 > figure.image:first-child,
.news-content .image-row-1-2 > figure.image:first-child {
    aspect-ratio: auto !important;
    height: 100% !important;
    align-self: stretch;
}

/* === Gallery button INSIDE the editor toolbar — match CKEditor's native button style === */
.ck-toolbar .js-open-image-gallery {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #333 !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none !important;
}

.ck-toolbar .js-open-image-gallery svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.ck-toolbar .js-open-image-gallery:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #0d6efd !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.ck-toolbar .js-open-image-gallery:active,
.ck-toolbar .js-open-image-gallery:focus {
    background-color: rgba(13, 110, 253, 0.08) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* When OUT of toolbar (fallback / pre-init flash), still look reasonable */
.js-open-image-gallery:not(.ck-toolbar *) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border: 1px solid #d0d7de;
    background: #f6f8fa;
    color: #24292f;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Responsive: on mobile, stop side-by-side and stack normally --- */
@media (max-width: 767px) {
    .ck-content figure.image-style-block-align-left,
    .news-content figure.image-style-block-align-left,
    .ck-content figure.image-style-block-align-right,
    .news-content figure.image-style-block-align-right,
    .ck-content figure.image-style-side,
    .news-content figure.image-style-side,
    .ck-content .ck-widget:has(> figure.image-style-block-align-left),
    .ck-content .ck-widget:has(> figure.image-style-block-align-right),
    .ck-content .ck-widget:has(> figure.image-style-side) {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.9em 0 !important;
    }

    /* Galerias: tudo colapsa para 1 coluna */
    .ck-content .image-row,
    .news-content .image-row {
        grid-template-columns: 1fr !important;
    }
    .ck-content .image-row .image-col,
    .news-content .image-row .image-col {
        grid-template-rows: auto !important;
    }
}