/* Step blocks (editor / photos / video) as equal children, uniform gap. */
.solidary-step {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.solidary-media {
	--solidary-media-accent: var(--color-raspberry);
	--solidary-media-line: #E2E1DF;
	--solidary-media-empty-bg: #FAF9FA;
}

/* Panel wraps the head + card so the title (outside the frame) stays aligned with
   the card width, which hugs the cover + column rather than stretching. */
.solidary-media__panel {
	width: fit-content;
	max-width: 100%;
}

/* ---- card (fixed-size, hugs the cover + column instead of stretching) ---- */
.solidary-media__card {
	/* border-box so the mobile `width: 100%` keeps the 22px padding + border
       inside the card instead of overflowing the funnel column. */
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-carbone);
	border-radius: 16px;
	box-shadow: 6px 6px 0 0 var(--color-eggshell);
	padding: 22px;
}

/* Title above the card (outside the frame), mirroring the editor header. */
.solidary-media__head {
	margin-bottom: 14px;
}

.solidary-media__title {
	font: 800 18px/22px Inter, system-ui, sans-serif;
	color: var(--color-carbone);
}

/* Count stays inside the card, top-right, above the cover + column grid. */
.solidary-media__count {
	text-align: right;
	margin-bottom: 12px;
	font: 600 13px/1 Inter, system-ui, sans-serif;
	color: var(--color-praline);
	white-space: nowrap;
}

.solidary-media__hint {
	margin-top: 16px;
	color: var(--color-chestnut);
	font: 400 12px/16px Inter, system-ui, sans-serif;
}

/* ---- cover + column grid (one container so reorder spans both) ---- */
.solidary-media__grid {
	display: grid;
	grid-template-columns: 240px 72px;
	grid-template-rows: 72px 72px 72px;
	gap: 12px;
}

.solidary-photos__cover {
	grid-column: 1;
	grid-row: 1 / 4;
}

.solidary-photos__slot {
	grid-column: 2;
}

.solidary-photos__cover,
.solidary-photos__slot {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
}

.solidary-photos__cover {
	border-radius: 16px;
}

.solidary-photos__tile--photo {
	border: 1px solid var(--color-carbone);
	background: var(--color-nude);
	cursor: grab;
}

.solidary-photos__tile--photo:active {
	cursor: grabbing;
}

/* Drag & drop feedback: dashed accent outline on the hovered tile. */
.solidary-photos__tile--over::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px dashed var(--solidary-media-accent);
	border-radius: inherit;
	pointer-events: none;
	z-index: 3;
}

/* Keep the placeholder and the picked tile discreet. */
.solidary-photos__tile--ghost {
	opacity: 0.35;
}

.solidary-photos__tile--chosen {
	opacity: 0.6;
}

.solidary-photos__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* ---- cover empty state ---- */
.solidary-photos__cover--empty {
	border: 1px solid var(--color-carbone);
	background: var(--color-nude);
}

.solidary-photos__cover-default {
	opacity: 1;
}

.solidary-photos__cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	text-align: center;
	background: rgba(255, 243, 231, 0.8);
}

/* ---- add buttons ---- */
.solidary-photos__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: 50px;
	background: var(--solidary-media-accent);
	color: var(--color-white);
	font: 700 13px/1 Inter, system-ui, sans-serif;
	cursor: pointer;
	padding: 0 16px;
	height: 40px;
}

/* "Ajouter" tile fills its slot as a dashed accent button. */
.solidary-photos__slot--add .solidary-photos__add {
	flex-direction: column;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1.5px dashed var(--solidary-media-accent);
	border-radius: 14px;
	background: var(--color-nude);
	color: var(--solidary-media-accent);
	font-size: 10px;
}

.solidary-photos__slot--empty {
	border: 1.5px dashed var(--solidary-media-line);
	background: var(--solidary-media-empty-bg);
}

/* ---- hover controls (delete + reorder arrows) ---- */
.solidary-photos__control {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-carbone);
	color: var(--color-carbone);
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transition: opacity 0.14s ease;
}

.solidary-photos__cover:hover .solidary-photos__control,
.solidary-photos__slot:hover .solidary-photos__control,
.solidary-photos__control:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.solidary-photos__control {
		opacity: 1;
	}
}

.solidary-photos__control--remove {
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
}

.solidary-photos__cover .solidary-photos__control--remove {
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
}

.solidary-photos__control:hover {
	background: var(--color-blush);
}

.solidary-photos__control:disabled {
	opacity: 0.28;
	cursor: not-allowed;
}

.solidary-photos__arrows {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	opacity: 0;
	transition: opacity 0.14s ease;
}

.solidary-photos__slot:hover .solidary-photos__arrows,
.solidary-photos__arrows:focus-within {
	opacity: 1;
}

@media (hover: none) {
	.solidary-photos__arrows {
		opacity: 1;
	}
}

.solidary-photos__control--moveUp,
.solidary-photos__control--moveDown {
	position: static;
	width: 23px;
	height: 23px;
	opacity: 1;
}

/* keyboard focus */
.solidary-photos__control:focus-visible,
.solidary-photos__add:focus-visible,
.solidary-photos__tile--photo:focus-visible {
	outline: 2px solid var(--color-carbone);
	outline-offset: 2px;
}

/* ---- mobile: cover full width + thumbs row ---- */
@media (max-width: 600px) {

	.solidary-media__panel,
	.solidary-media__card {
		width: 100%;
	}

	.solidary-media__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
	}

	.solidary-photos__cover {
		grid-column: 1 / -1;
		grid-row: 1;
		aspect-ratio: 1;
	}

	.solidary-photos__slot {
		grid-column: auto;
		aspect-ratio: 1;
	}
}

@media screen and (min-width: 720px) {
	.solidary-media__modal {
		width: 600px;
		max-width: calc(100vw - 48px);
		/* True vertical centering: the base `.modal` sits at 40vh, which pushes a
           tall modal (88vh) off the top — recentre at 50vh. */
		top: 50vh;
	}

	.solidary-media__modal .modal__content {
		max-height: 88vh;
	}

	.solidary-media__modal .modal__content__body {
		min-height: 0;
	}
}

.solidary-media__crop {
	position: relative;
	overflow: hidden;
	height: 421px;
	display: flex;
	justify-content: center;
}

.solidary-media__crop-image {
	height: 421px;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.solidary-media__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.solidary-media__overlay span {
	display: none;
}

.solidary-media__overlay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 260px;
	height: 260px;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
	outline: 2px solid var(--color-white);
}