/*
 * MMDB Entity editor layout
 *
 * This only rearranges existing Concrete Express controls. It does not replace
 * their inputs, names, validation, or save behavior.
 */

.mmdb-entity-editor-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: stretch;
    margin-bottom: 1rem;
}

.mmdb-entity-editor-intro__primary {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.mmdb-entity-editor-intro__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.mmdb-entity-editor-intro__summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mmdb-entity-editor-intro__summary > .mb-3,
.mmdb-entity-editor-intro__summary > .form-group,
.mmdb-entity-editor-intro__summary > .control-group,
.mmdb-entity-editor-intro__summary > [data-mmdb-entity-form-control] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0 !important;
}

.mmdb-entity-editor-intro__summary textarea {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    resize: vertical;
}

.mmdb-entity-editor-intro__row > .mb-3,
.mmdb-entity-editor-intro__row > .form-group,
.mmdb-entity-editor-intro__row > .control-group,
.mmdb-entity-editor-intro__row > [data-mmdb-entity-form-control] {
    min-width: 0;
    margin-bottom: 0 !important;
}

/* Concrete's Bootstrap lg breakpoint: summary moves beneath the two left rows. */
@media (max-width: 991.98px) {
    .mmdb-entity-editor-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .mmdb-entity-editor-intro__summary textarea {
        min-height: 120px;
    }
}

/* Concrete's Bootstrap md breakpoint: every input becomes a vertical stack. */
@media (max-width: 767.98px) {
    .mmdb-entity-editor-intro__primary,
    .mmdb-entity-editor-intro__row {
        display: contents;
    }

    .mmdb-entity-editor-intro {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mmdb-entity-editor-intro__summary {
        display: block;
    }

    .mmdb-entity-editor-intro__summary textarea {
        height: auto !important;
        min-height: 120px;
    }
}

/* =========================================================
   Hero media authoring
   Exact rendered Concrete Express DOM:
   Hero Image | Hero Video | Hero Video URL
   ========================================================= */

.ccm-dashboard-express-form .mmdb-entity-editor-hero-media {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: none !important;

    gap: 16px !important;

    align-items: flex-start !important;

    margin: 0 0 1rem !important;
    padding: 0 !important;
}

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
> .mb-3[data-mmdb-entity-form-control="hero-image"],

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
> .mb-3[data-mmdb-entity-form-control="hero-video"],

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
> .mb-3[data-mmdb-entity-form-control="hero-video-url"] {
    display: block !important;

    flex: 1 1 0 !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
[data-mmdb-entity-form-control]
.form-control,

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
[data-mmdb-entity-form-control]
.form-select,

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
[data-mmdb-entity-form-control]
.ccm-item-selector-group,

.ccm-dashboard-express-form
.mmdb-entity-editor-hero-media
[data-mmdb-entity-form-control]
[data-concrete-file-input] {
    width: 100% !important;
    max-width: none !important;
}


/* Stack only when the dashboard actually gets narrow. */

@media (max-width: 767.98px) {
    .ccm-dashboard-express-form .mmdb-entity-editor-hero-media {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .ccm-dashboard-express-form
    .mmdb-entity-editor-hero-media
    > .mb-3[data-mmdb-entity-form-control] {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
    }
}