/* Deepskyastrophoto – layout corrections, Version 0.28.0 */

/*
 * DSA flexible columns
 * --------------------
 * Percentage widths must remain true percentage widths even when a visual
 * column gap is requested. A real flex column-gap would be added on top of
 * 100% (e.g. 30 + 40 + 30 + two gaps) and can force the last column to wrap.
 *
 * Therefore the horizontal gap is represented by half-gap inner space on
 * adjacent columns. The flex container itself uses no horizontal gap. This
 * keeps 30/40/30 on one row while still creating the requested visual gap.
 */
.dsa-flex-layout {
    --dsa-current-gap: var(--dsa-gap, 24px);
    column-gap: 0 !important;
    row-gap: var(--dsa-current-gap) !important;
    box-sizing: border-box;
    width: calc(100% + var(--dsa-current-gap));
    margin-left: calc(var(--dsa-current-gap) / -2) !important;
    margin-right: calc(var(--dsa-current-gap) / -2) !important;
}

.dsa-flex-column {
    box-sizing: border-box;
    flex: 0 0 var(--dsa-col-desktop, 50%) !important;
    max-width: var(--dsa-col-desktop, 50%) !important;
    padding-left: calc(var(--dsa-padding-left, 0px) + var(--dsa-current-gap) / 2) !important;
    padding-right: calc(var(--dsa-padding-right, 0px) + var(--dsa-current-gap) / 2) !important;
}

@media (max-width: 980px) {
    .dsa-flex-layout {
        --dsa-current-gap: var(--dsa-tablet-gap, var(--dsa-gap, 20px));
    }
    .dsa-flex-column {
        flex-basis: var(--dsa-col-tablet, 50%) !important;
        max-width: var(--dsa-col-tablet, 50%) !important;
    }
}

@media (max-width: 620px) {
    .dsa-flex-layout {
        --dsa-current-gap: var(--dsa-mobile-gap, 16px);
    }
    .dsa-flex-column {
        flex-basis: var(--dsa-col-mobile, 100%) !important;
        max-width: var(--dsa-col-mobile, 100%) !important;
        order: var(--dsa-mobile-order, 0);
    }
}

/* Images inserted into flex columns should never exceed their column. */
.dsa-flex-column :where(.wp-block-image, figure, img) {
    max-width: 100%;
}
.dsa-flex-column .wp-block-image img,
.dsa-flex-column figure img {
    height: auto;
}