/**
 * SDLMedia — Frontend Styles
 *
 * CSS custom properties for theming, component styles for all upload modes.
 * Light theme by default, dark via prefers-color-scheme or [data-sdl-theme="dark"].
 *
 * @package SDLMedia
 * @since   1.0.0
 */

/* =========================================================================
   1. CSS Custom Properties — Light Theme (default)
   ========================================================================= */

:root {
	/* Surfaces */
	--sdl-bg:             #ffffff;
	--sdl-bg-subtle:      #f8f9fa;
	--sdl-bg-hover:       #f1f3f5;
	--sdl-bg-active:      #e9ecef;

	/* Borders */
	--sdl-border:         #dee2e6;
	--sdl-border-hover:   #adb5bd;
	--sdl-border-focus:   #4c6ef5;
	--sdl-border-dashed:  #ced4da;

	/* Text */
	--sdl-text:           #212529;
	--sdl-text-secondary: #868e96;
	--sdl-text-muted:     #adb5bd;

	/* Accent */
	--sdl-accent:         #4c6ef5;
	--sdl-accent-hover:   #4263eb;
	--sdl-accent-text:    #ffffff;

	/* Status */
	--sdl-success:        #40c057;
	--sdl-error:          #fa5252;
	--sdl-warning:        #fd7e14;

	/* Shadows */
	--sdl-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
	--sdl-shadow:         0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--sdl-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Radius */
	--sdl-radius:         6px;
	--sdl-radius-lg:      10px;
	--sdl-radius-round:   50%;

	/* Transitions */
	--sdl-transition:     150ms ease;

	/* Typography */
	--sdl-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--sdl-font-size:      14px;
	--sdl-font-size-sm:   12px;
	--sdl-line-height:    1.5;
}

/* =========================================================================
   2. Dark Theme
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	:root:not([data-sdl-theme="light"]) {
		--sdl-bg:             #1a1b1e;
		--sdl-bg-subtle:      #25262b;
		--sdl-bg-hover:       #2c2e33;
		--sdl-bg-active:      #373a40;

		--sdl-border:         #373a40;
		--sdl-border-hover:   #495057;
		--sdl-border-focus:   #5c7cfa;
		--sdl-border-dashed:  #495057;

		--sdl-text:           #c1c2c5;
		--sdl-text-secondary: #909296;
		--sdl-text-muted:     #5c5f66;

		--sdl-accent:         #5c7cfa;
		--sdl-accent-hover:   #4c6ef5;

		--sdl-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.2);
		--sdl-shadow:         0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
		--sdl-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
	}
}

[data-sdl-theme="dark"] {
	--sdl-bg:             #1a1b1e;
	--sdl-bg-subtle:      #25262b;
	--sdl-bg-hover:       #2c2e33;
	--sdl-bg-active:      #373a40;

	--sdl-border:         #373a40;
	--sdl-border-hover:   #495057;
	--sdl-border-focus:   #5c7cfa;
	--sdl-border-dashed:  #495057;

	--sdl-text:           #c1c2c5;
	--sdl-text-secondary: #909296;
	--sdl-text-muted:     #5c5f66;

	--sdl-accent:         #5c7cfa;
	--sdl-accent-hover:   #4c6ef5;

	--sdl-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.2);
	--sdl-shadow:         0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
	--sdl-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   3. Base — shared component styles
   ========================================================================= */

[data-sdl-mode] {
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size);
	line-height: var(--sdl-line-height);
	color: var(--sdl-text);
	box-sizing: border-box;
}

[data-sdl-mode] *,
[data-sdl-mode] *::before,
[data-sdl-mode] *::after {
	box-sizing: inherit;
}

/* Hidden file inputs */
.sdl-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Status text */
.sdl-status {
	font-size: var(--sdl-font-size-sm);
	color: var(--sdl-text-secondary);
	margin-top: 6px;
	transition: color var(--sdl-transition);
	min-height: 1.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sdl-status--error {
	color: var(--sdl-error);
}

.sdl-status--success {
	color: var(--sdl-success);
}

.sdl-status--preparing {
	color: var(--sdl-text-muted);
}

/* Progress bar */
.sdl-progress {
	display: none;
	width: 100%;
	height: 4px;
	border: none;
	border-radius: 2px;
	background: var(--sdl-bg-active);
	margin-top: 8px;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.sdl-progress::-webkit-progress-bar {
	background: var(--sdl-bg-active);
	border-radius: 2px;
}

.sdl-progress::-webkit-progress-value {
	background: var(--sdl-accent);
	border-radius: 2px;
	transition: width 200ms ease;
}

.sdl-progress::-moz-progress-bar {
	background: var(--sdl-accent);
	border-radius: 2px;
}

/* Action buttons overlay */
.sdl-actions {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	gap: 4px;
	z-index: 2;
}

.sdl-has-value .sdl-actions {
	display: flex;
}

.sdl-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--sdl-radius);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: background var(--sdl-transition);
	padding: 0;
}

.sdl-action-btn:hover {
	background: rgba(0, 0, 0, 0.7);
}

.sdl-action-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* =========================================================================
   4. Avatar Mode
   ========================================================================= */

.sdl-upload-avatar {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 120px;
}

.sdl-upload-avatar .sdl-preview {
	width: 120px;
	height: 120px;
	border-radius: var(--sdl-radius-round);
	object-fit: cover;
	background: var(--sdl-bg-subtle);
	border: 2px solid var(--sdl-border);
	transition: border-color var(--sdl-transition);
	cursor: pointer;
	display: block;
}

.sdl-upload-avatar .sdl-preview--loaded {
	border-color: var(--sdl-accent);
}

.sdl-upload-avatar .sdl-trigger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sdl-radius-round);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background var(--sdl-transition);
}

.sdl-upload-avatar:not(.sdl-has-value) .sdl-trigger {
	background: var(--sdl-bg-subtle);
	border: 2px dashed var(--sdl-border-dashed);
}

.sdl-upload-avatar .sdl-trigger:hover {
	background: rgba(0, 0, 0, 0.08);
}

[data-sdl-theme="dark"] .sdl-upload-avatar .sdl-trigger:hover {
	background: rgba(255, 255, 255, 0.08);
}

.sdl-upload-avatar .sdl-trigger-icon {
	color: var(--sdl-text-muted);
	font-size: 24px;
	transition: color var(--sdl-transition);
}

.sdl-upload-avatar .sdl-trigger:hover .sdl-trigger-icon {
	color: var(--sdl-accent);
}

.sdl-upload-avatar.sdl-has-value .sdl-trigger-icon {
	display: none;
}

.sdl-upload-avatar .sdl-actions {
	top: auto;
	right: auto;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
}

.sdl-upload-avatar .sdl-status {
	text-align: center;
	width: 120px;
}

/* =========================================================================
   5. Dropzone Mode
   ========================================================================= */

.sdl-upload-dropzone {
	position: relative;
}

.sdl-upload-dropzone .sdl-drop-area {
	border: 2px dashed var(--sdl-border-dashed);
	border-radius: var(--sdl-radius-lg);
	padding: 32px 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--sdl-transition), background var(--sdl-transition);
	background: var(--sdl-bg-subtle);
	min-height: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.sdl-upload-dropzone .sdl-drop-area:hover,
.sdl-upload-dropzone .sdl-drop-area.sdl-drag-over {
	border-color: var(--sdl-accent);
	background: var(--sdl-bg-hover);
}

.sdl-upload-dropzone .sdl-drop-icon {
	font-size: 32px;
	color: var(--sdl-text-muted);
	margin-bottom: 4px;
	transition: color var(--sdl-transition);
}

.sdl-upload-dropzone .sdl-drop-area:hover .sdl-drop-icon,
.sdl-upload-dropzone .sdl-drop-area.sdl-drag-over .sdl-drop-icon {
	color: var(--sdl-accent);
}

.sdl-upload-dropzone .sdl-drop-text {
	color: var(--sdl-text-secondary);
	font-size: var(--sdl-font-size);
}

.sdl-upload-dropzone .sdl-drop-text strong {
	color: var(--sdl-accent);
	cursor: pointer;
}

.sdl-upload-dropzone .sdl-drop-hint {
	color: var(--sdl-text-muted);
	font-size: var(--sdl-font-size-sm);
}

/* Dropzone success state: show preview thumbnail */
.sdl-upload-dropzone .sdl-preview {
	display: none;
	max-width: 200px;
	max-height: 140px;
	border-radius: var(--sdl-radius);
	object-fit: contain;
	margin: 0 auto;
}

.sdl-upload-dropzone.sdl-has-value .sdl-drop-area {
	border-style: solid;
	border-color: var(--sdl-success);
	background: var(--sdl-bg);
}

.sdl-upload-dropzone.sdl-has-value .sdl-preview {
	display: block;
}

.sdl-upload-dropzone.sdl-has-value .sdl-drop-icon,
.sdl-upload-dropzone.sdl-has-value .sdl-drop-text,
.sdl-upload-dropzone.sdl-has-value .sdl-drop-hint {
	display: none;
}

/* =========================================================================
   6. Button Mode
   ========================================================================= */

.sdl-upload-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sdl-upload-button .sdl-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--sdl-border);
	border-radius: var(--sdl-radius);
	background: var(--sdl-bg);
	color: var(--sdl-text);
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size);
	cursor: pointer;
	transition: border-color var(--sdl-transition), background var(--sdl-transition);
	white-space: nowrap;
}

.sdl-upload-button .sdl-trigger:hover {
	border-color: var(--sdl-border-hover);
	background: var(--sdl-bg-hover);
}

.sdl-upload-button .sdl-trigger:focus-visible {
	outline: 2px solid var(--sdl-border-focus);
	outline-offset: 2px;
}

.sdl-upload-button .sdl-trigger-icon {
	font-size: 16px;
	color: var(--sdl-text-secondary);
}

.sdl-upload-button .sdl-status {
	margin-top: 0;
	max-width: 200px;
}

/* =========================================================================
   7. Inline Mode
   ========================================================================= */

.sdl-upload-inline {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
}

.sdl-upload-inline .sdl-inline-display {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--sdl-border);
	border-right: none;
	border-radius: var(--sdl-radius) 0 0 var(--sdl-radius);
	background: var(--sdl-bg);
	color: var(--sdl-text);
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	cursor: default;
}

.sdl-upload-inline .sdl-inline-display:empty::before {
	content: attr(data-placeholder);
	color: var(--sdl-text-muted);
}

.sdl-upload-inline .sdl-trigger {
	padding: 8px 14px;
	border: 1px solid var(--sdl-border);
	border-radius: 0 var(--sdl-radius) var(--sdl-radius) 0;
	background: var(--sdl-bg-subtle);
	color: var(--sdl-text);
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size);
	cursor: pointer;
	transition: background var(--sdl-transition);
	white-space: nowrap;
}

.sdl-upload-inline .sdl-trigger:hover {
	background: var(--sdl-bg-hover);
}

.sdl-upload-inline .sdl-status {
	position: absolute;
	bottom: -20px;
	left: 0;
}

/* =========================================================================
   8. Cropper Overlay
   ========================================================================= */

.sdl-cropper-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.7);
	align-items: center;
	justify-content: center;
}

.sdl-cropper-overlay.sdl-cropper--open {
	display: flex;
}

.sdl-cropper-editor {
	background: var(--sdl-bg);
	border-radius: var(--sdl-radius-lg);
	padding: 16px;
	max-width: 600px;
	max-height: 80vh;
	width: 90vw;
	box-shadow: var(--sdl-shadow-lg);
	overflow: auto;
}

/* =========================================================================
   9. Utilities
   ========================================================================= */

/* Screen reader only */
.sdl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   10. Gallery Mode
   ========================================================================= */

.sdl-upload-gallery {
	position: relative;
}

.sdl-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.sdl-gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--sdl-radius);
	overflow: hidden;
	background: var(--sdl-bg-subtle);
	border: 1px solid var(--sdl-border);
	transition: border-color var(--sdl-transition), box-shadow var(--sdl-transition);
	cursor: grab;
}

.sdl-gallery-item:active {
	cursor: grabbing;
}

.sdl-gallery-item:hover {
	border-color: var(--sdl-border-hover);
	box-shadow: var(--sdl-shadow);
}

.sdl-gallery-item .sdl-gallery-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sdl-gallery-item .sdl-gallery-type-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--sdl-text-muted);
	font-size: 24px;
}

.sdl-gallery-item .sdl-actions {
	top: 4px;
	right: 4px;
	opacity: 0;
	transition: opacity var(--sdl-transition);
}

.sdl-gallery-item:hover .sdl-actions {
	display: flex;
	opacity: 1;
}

.sdl-gallery-item .sdl-action-btn {
	width: 24px;
	height: 24px;
}

.sdl-gallery-item .sdl-action-btn svg {
	width: 12px;
	height: 12px;
}

/* SortableJS ghost/drag states */
.sdl-gallery-item.sortable-ghost {
	opacity: 0.4;
	border-color: var(--sdl-accent);
}

.sdl-gallery-item.sortable-drag {
	box-shadow: var(--sdl-shadow-lg);
	border-color: var(--sdl-accent);
}

/* Gallery add button */
.sdl-gallery-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px dashed var(--sdl-border-dashed);
	border-radius: var(--sdl-radius);
	background: transparent;
	color: var(--sdl-text-secondary);
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size-sm);
	cursor: pointer;
	transition: border-color var(--sdl-transition), color var(--sdl-transition), background var(--sdl-transition);
}

.sdl-gallery-add:hover {
	border-color: var(--sdl-accent);
	color: var(--sdl-accent);
	background: var(--sdl-bg-hover);
}

.sdl-gallery-add svg {
	flex-shrink: 0;
}

/* Breakpoint visibility: "Show all" toggle */
.sdl-gallery-overflow {
	display: none;
	text-align: center;
	margin-top: 8px;
}

.sdl-gallery-overflow .sdl-show-all {
	border: none;
	background: none;
	color: var(--sdl-accent);
	font-family: var(--sdl-font);
	font-size: var(--sdl-font-size-sm);
	cursor: pointer;
	padding: 4px 8px;
}

.sdl-gallery-overflow .sdl-show-all:hover {
	text-decoration: underline;
}

/* Breakpoint limits — hide items beyond limit */
.sdl-gallery-grid[data-sdl-bp-active] .sdl-gallery-item.sdl-bp-hidden {
	display: none;
}

/* =========================================================================
   11. Repeater Mode
   ========================================================================= */

.sdl-upload-repeater {
	position: relative;
}

.sdl-repeater-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.sdl-repeater-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--sdl-border);
	border-radius: var(--sdl-radius);
	background: var(--sdl-bg);
	transition: border-color var(--sdl-transition), box-shadow var(--sdl-transition);
}

.sdl-repeater-row:hover {
	border-color: var(--sdl-border-hover);
	box-shadow: var(--sdl-shadow-sm);
}

.sdl-repeater-row .sdl-repeater-thumb {
	width: 40px;
	height: 40px;
	border-radius: var(--sdl-radius);
	object-fit: cover;
	background: var(--sdl-bg-subtle);
	flex-shrink: 0;
}

.sdl-repeater-row .sdl-repeater-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sdl-bg-subtle);
	border-radius: var(--sdl-radius);
	color: var(--sdl-text-muted);
	flex-shrink: 0;
}

.sdl-repeater-row .sdl-repeater-info {
	flex: 1;
	min-width: 0;
}

.sdl-repeater-row .sdl-repeater-name {
	font-size: var(--sdl-font-size);
	color: var(--sdl-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sdl-repeater-row .sdl-repeater-meta {
	font-size: var(--sdl-font-size-sm);
	color: var(--sdl-text-muted);
}

.sdl-repeater-row .sdl-repeater-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.sdl-repeater-row .sdl-action-btn {
	background: var(--sdl-bg-hover);
	color: var(--sdl-text-secondary);
}

.sdl-repeater-row .sdl-action-btn:hover {
	background: var(--sdl-bg-active);
	color: var(--sdl-text);
}

/* Repeater uploading state */
.sdl-repeater-row.sdl-uploading {
	opacity: 0.7;
}

.sdl-repeater-row .sdl-repeater-progress {
	display: none;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	margin-top: 4px;
	background: var(--sdl-bg-active);
	-webkit-appearance: none;
	appearance: none;
}

.sdl-repeater-row.sdl-uploading .sdl-repeater-progress {
	display: block;
}

.sdl-repeater-row .sdl-repeater-progress::-webkit-progress-bar {
	background: var(--sdl-bg-active);
	border-radius: 2px;
}

.sdl-repeater-row .sdl-repeater-progress::-webkit-progress-value {
	background: var(--sdl-accent);
	border-radius: 2px;
}

.sdl-repeater-row .sdl-repeater-progress::-moz-progress-bar {
	background: var(--sdl-accent);
	border-radius: 2px;
}

/* Repeater add button */
.sdl-repeater-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* =========================================================================
   12. File List Mode
   ========================================================================= */

.sdl-upload-filelist {
	position: relative;
}

.sdl-filelist-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sdl-font-size);
	margin-bottom: 12px;
}

.sdl-filelist-table thead th {
	padding: 8px 10px;
	text-align: left;
	font-size: var(--sdl-font-size-sm);
	font-weight: 500;
	color: var(--sdl-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-bottom: 2px solid var(--sdl-border);
	white-space: nowrap;
}

.sdl-filelist-table tbody tr {
	border-bottom: 1px solid var(--sdl-border);
	transition: background var(--sdl-transition);
}

.sdl-filelist-table tbody tr:hover {
	background: var(--sdl-bg-hover);
}

.sdl-filelist-table td {
	padding: 10px;
	vertical-align: middle;
}

/* Column widths */
.sdl-filelist-col-handle {
	width: 28px;
	text-align: center;
}

.sdl-filelist-col-type {
	width: 50px;
}

.sdl-filelist-col-size {
	width: 80px;
	white-space: nowrap;
}

.sdl-filelist-col-date {
	width: 100px;
	white-space: nowrap;
}

.sdl-filelist-col-actions {
	width: 70px;
	text-align: right;
}

.sdl-filelist-col-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 0;
}

/* Sort handle */
.sdl-sort-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	color: var(--sdl-text-muted);
	padding: 4px;
	transition: color var(--sdl-transition);
}

.sdl-sort-handle:active {
	cursor: grabbing;
}

.sdl-sort-handle:hover {
	color: var(--sdl-text-secondary);
}

/* File type badge */
.sdl-filelist-ext {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--sdl-bg-active);
	color: var(--sdl-text-secondary);
	line-height: 1.4;
}

/* File list row actions */
.sdl-filelist-col-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.sdl-filelist-row .sdl-action-btn {
	background: transparent;
	color: var(--sdl-text-muted);
}

.sdl-filelist-row .sdl-action-btn:hover {
	background: var(--sdl-bg-active);
	color: var(--sdl-text);
}

/* SortableJS states for filelist */
.sdl-filelist-row.sortable-ghost {
	opacity: 0.4;
	background: var(--sdl-bg-hover);
}

.sdl-filelist-row.sortable-drag {
	background: var(--sdl-bg);
	box-shadow: var(--sdl-shadow-lg);
}

/* File list add button */
.sdl-filelist-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* =========================================================================
   13. Breakpoint Media Queries — Gallery
   ========================================================================= */

@media (max-width: 480px) {
	.sdl-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 8px;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.sdl-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.sdl-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}

/* Responsive filelist: stack on mobile */
@media (max-width: 600px) {
	.sdl-filelist-col-date,
	.sdl-filelist-col-size {
		display: none;
	}

	.sdl-filelist-table thead .sdl-filelist-col-date,
	.sdl-filelist-table thead .sdl-filelist-col-size {
		display: none;
	}
}