/* Shared UGC gallery and compact composer previews. No image can determine layout width. */
.media-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; margin-block: 1rem; overflow: hidden; border-radius: var(--ft-radius-md, 1rem); position: relative; z-index: 2; }
.media-gallery__item { display: block; background: #f4eef5; min-width: 0; overflow: hidden; aspect-ratio: 1; }
.media-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-gallery--1 { grid-template-columns: minmax(0, 1fr); }
.media-gallery--1 .media-gallery__item { aspect-ratio: 4 / 3; max-height: 32rem; }
.media-gallery--1 img { object-fit: contain; }
.media-gallery--3 { aspect-ratio: 4 / 3; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.media-gallery--3 .media-gallery__item { min-height: 0; aspect-ratio: auto; }
.media-gallery--3 .media-gallery__item:first-child { grid-row: span 2; }
.media-gallery__item:focus-visible { outline: 3px solid #7b3488; outline-offset: -4px; }
.composer-media { padding-block: 1rem; border-top: 1px solid #e7deeb; }
.composer-media summary { cursor: pointer; font-weight: 650; padding-block: .5rem; }
.composer-media small { font-weight: 400; }
.composer-media__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-block: 1rem; }
.composer-media__item { margin: 0; min-width: 0; padding: .375rem; background: #f6f0f8; border-radius: .875rem; }
.composer-media__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #eee6f1; border-radius: .625rem; }
.composer-media__item figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .125rem .25rem; font-size: .75rem; }
.composer-media__item button { min-height: 2.75rem; padding: .375rem; border: 0; background: transparent; color: #713667; text-decoration: underline; cursor: pointer; font: inherit; }
.composer-media input[type="file"] { max-width: 100%; width: 100%; font-size: .875rem; }
.composer-media [role="status"] { color: #643064; font-size: .875rem; overflow-wrap: anywhere; }
.composer-media[aria-busy="true"] { opacity: .75; }
.question-create-form:has([name="kind"][value="poll"]:checked) .composer-media { border: 1px dashed #bcb1c5; border-radius: .75rem; padding-inline: .75rem; }
/* Enhanced preview uses the same opaque IDs and multipart input as native fallback. */
.composer-upload label { display: flex; align-items: center; gap: .7rem; }
.composer-upload label > .ft-icon { flex: none; inline-size: 1.5rem; block-size: 1.5rem; color: var(--ft-primary); }
.composer-upload label > .ft-icon:last-child { margin-inline-start: auto; inline-size: 1.25rem; block-size: 1.25rem; }
.composer-upload label span { display: grid; gap: .15rem; }
.composer-upload label strong { font-size: .875rem; color: var(--ft-ink); font-weight: 600; }
.media-enhanced .composer-upload { position: relative; }
.media-enhanced .composer-upload label { padding: 1rem; border: 1px dashed var(--ft-control-border); background: var(--ft-canvas); border-radius: var(--ft-radius-medium); cursor: pointer; }
.media-enhanced .composer-upload:focus-within label { outline: 2px solid var(--ft-focus); outline-offset: 3px; }
.media-enhanced .composer-upload input { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; }
.media-enhanced [data-media-prepare] { display: none; }
.media-enhanced .composer-media__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.media-enhanced .composer-media__item { position: relative; padding: 0; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-medium); overflow: hidden; background: var(--ft-canvas); }
.media-enhanced .composer-media__item img { display: block; aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; block-size: auto; border-radius: 0; }
.media-enhanced figcaption { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .15rem .4rem; }
.media-enhanced [data-media-number] { color: var(--ft-muted); font-size: .75rem; padding: .25rem; }
.media-enhanced [name="media_remove"] { position: absolute; inset-block-start: .25rem; inset-inline-end: .25rem; background: var(--ft-surface); box-shadow: var(--ft-shadow-card); }
.media-enhanced figcaption button { display: grid; place-items: center; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-pill); min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: .4rem; cursor: pointer; color: var(--ft-ink); }
.media-enhanced figcaption .ft-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.media-enhanced figcaption button:disabled { opacity: .45; cursor: default; }
.media-enhanced [data-media-status]:empty { display: none; }
.composer-enhanced .composer-media { border-block-start: 0; margin-block: .75rem; padding-block-start: 0; }
@media (min-width: 48rem) { .media-enhanced .composer-media__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }