/* Portable layout for generated galleries and the old paragraph-based gallery markup.
   The extra attribute specificity overrides body.user-theme image and legacy gallery
   rules regardless of stylesheet order, without changing images outside galleries. */
body .js-lightbox.gallery[class] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 1rem;
    align-items: start;
    margin: 1rem 0;
}
body .js-lightbox.gallery[class].tm-gallery--2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
body .js-lightbox.gallery[class].tm-gallery--3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
body .js-lightbox.gallery[class].tm-gallery--4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
body .js-lightbox.gallery[class] > a, body .js-lightbox.gallery[class] > figure {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
body .js-lightbox.gallery[class] > figure {min-width: 0; margin: 0;}
body .js-lightbox.gallery[class] > a, body .js-lightbox.gallery[class] figure > a {display: block; border-radius: 8px; overflow: hidden;}
/* Give mixed portrait/landscape thumbnails equal height without cropping their content.
   The lightbox renders outside the gallery and retains the original image dimensions. */
body .js-lightbox.gallery[class] img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: clamp(180px, 30vw, 360px);
    margin: 0;
    object-fit: contain;
    object-position: center;
}
body .js-lightbox.gallery[class] .tm-gallery-caption {display: block;}
body .js-lightbox.gallery[class] figcaption, body .js-lightbox.gallery[class] .tm-gallery-caption {font-size: .9rem; text-align: center; padding: .5rem .25rem; overflow-wrap: anywhere;}
.tm-gallery-editor-actions {display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1rem;}
.tm-gallery-editor label {display: block; font-weight: 500;}
.tm-gallery-editor input[type=checkbox] {margin-left: .6rem;}
.tm-gallery-editor-list {list-style: decimal; margin: 0; padding-left: 1.5rem;}
.tm-gallery-editor-list > li {display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid #dee2e6;}
.tm-gallery-editor-list > li > img {width: 100%; height: 100px; object-fit: contain; background: #f6f7f9; border-radius: 8px;}
.tm-gallery-editor-fields {min-width: 0;}
.tm-gallery-editor-fields input[type=text] {width: 100%;}
.tm-gallery-editor-order {grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem;}
.tm-gallery-editor-status {color: #9e3027; overflow-wrap: anywhere;}
@media (max-width: 640px) {
    body .js-lightbox.gallery[class],
    body .js-lightbox.gallery[class].tm-gallery--3, body .js-lightbox.gallery[class].tm-gallery--4 {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .tm-gallery-editor-list > li {grid-template-columns: 70px minmax(0, 1fr); gap: .75rem;}
}
@media (max-width: 360px) {
    body .js-lightbox.gallery[class],
    body .js-lightbox.gallery[class][class*="tm-gallery--"] {grid-template-columns: minmax(0, 1fr);}
}

/* Gallery authoring: a prominent file drop area and compact, numbered image cards. */
.tm-gallery-editor > p {color: #526171; margin: 0 0 1rem; font-size: .95rem;}
.tm-gallery-editor-dropzone {border: 2px dashed #bacbdb; border-radius: 12px; padding: 1.75rem 1rem; text-align: center; background: #f6f9fc; transition: background .15s, border-color .15s;}
.tm-gallery-editor-dropzone > strong {display: block; font-size: 1.2rem; color: #243b53;}
.tm-gallery-editor-dropzone > p {color: #526171; font-size: .875rem; margin: .4rem 0 1rem;}
.tm-gallery-editor-dropzone.is-dragging {border-color: #0f6cbf; background: #e5f1fc;}
.tm-gallery-editor-dropzone .tm-gallery-editor-actions {justify-content: center; margin: 0; gap: .75rem;}
.tm-gallery-editor-heading {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.25rem 0 .75rem;}
.tm-gallery-editor-heading[hidden] {display: none;}
.tm-gallery-editor-heading label {display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .875rem;}
.tm-gallery-editor-heading select {width: auto;}
.tm-gallery-editor-list {padding: 0; counter-reset: gallery-image;}
.tm-gallery-editor-list > li {position: relative; grid-template-columns: 140px minmax(0, 1fr); padding: 1rem; margin-bottom: .75rem; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; cursor: grab;}
.tm-gallery-editor-list > li::before {counter-increment: gallery-image; content: counter(gallery-image); position: absolute; top: .5rem; left: .5rem; z-index: 1; border-radius: 20px; background: #243b53; color: #fff; padding: .1rem .45rem; font-size: .75rem;}
.tm-gallery-editor-list > li > img {height: 140px;}
.tm-gallery-editor-fields {display: grid; gap: .6rem;}
.tm-gallery-editor-fields label {font-size: .875rem; margin: 0;}
.tm-gallery-editor-fields input[type=text] {margin-top: .25rem;}
.tm-gallery-editor-order {justify-content: flex-end;}
.tm-gallery-editor-order [data-action=remove] {margin-left: auto; color: #a12622;}
.tm-gallery-editor-status:empty {display: none;}
.tm-gallery-editor-status {margin: .75rem 0; font-size: .9rem;}
@media (max-width: 640px) {
    .tm-gallery-editor-list > li {grid-template-columns: 80px minmax(0, 1fr); padding: .75rem;}
    .tm-gallery-editor-list > li > img {height: 90px;}
    .tm-gallery-editor-heading {flex-wrap: wrap;}
}