/**
 * Article media modal — Figma 842:12350 (photo), 842:12370 (video),
 * 842:12385 (timeline), 842:12267 (volume).
 */

html.article-media-modal-open {
	overflow: hidden;
}

.article-media-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 32px;
}

.article-media-modal[hidden] {
	display: none;
}

.article-media-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(67, 72, 85, 0.48);
}

.article-media-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(1120px, 100%);
	max-height: calc(100vh - 48px);
}

.article-media-modal__dialog:has(.article-media-modal__panel--media-only) {
	width: min(720px, 100%);
}

.article-media-modal__close {
	position: absolute;
	top: -26px;
	right: -26px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 52px;
	background: var(--dr-hug-white);
	box-shadow: 0 0 4px rgba(41, 12, 15, 0.08);
	cursor: pointer;
}

.article-media-modal__close img {
	display: block;
	width: 32px;
	height: 32px;
}

.article-media-modal__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	height: min(640px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	overflow: hidden;
	border-radius: 24px;
	background: var(--dr-hug-white);
	box-shadow: 0 16px 48px rgba(41, 12, 15, 0.16);
	box-sizing: border-box;
}

.article-media-modal__panel--media-only {
	grid-template-columns: minmax(0, 1fr);
}

.article-media-modal__panel--media-only .article-media-modal__aside {
	display: none;
}

.article-media-modal__panel--media-only .article-media-modal__media {
	min-height: 0;
}

.article-media-modal__media {
	position: relative;
	min-width: 0;
	min-height: 0;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: var(--dr-hug-bg, #f8f5f3);
}

.article-media-modal__photo,
.article-media-modal__video {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	box-sizing: border-box;
}

.article-media-modal__photo[hidden],
.article-media-modal__video[hidden] {
	display: none;
}

.article-media-modal__photo-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 8px;
}

.article-media-modal__nav {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	pointer-events: none;
}

.article-media-modal__nav[hidden] {
	display: none;
}

.article-media-modal__nav-btn {
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 0;
	border-radius: 12px;
	background: var(--dr-hug-white);
	box-shadow: 0 0 4px rgba(41, 12, 15, 0.08);
	cursor: pointer;
	pointer-events: auto;
}

.article-media-modal__nav-btn:first-child {
	grid-column: 1;
}

.article-media-modal__nav-btn:last-child {
	grid-column: 3;
	justify-self: end;
}

.article-media-modal__nav-btn img {
	display: block;
	width: 24px;
	height: 24px;
}

.article-media-modal__dots {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.article-media-modal__dots[hidden] {
	display: none;
}

.article-media-modal__dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 12px;
	padding: 0;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

.article-media-modal__dot.is-active {
	background: var(--dr-hug-bg, #f8f5f3);
}

.article-media-modal__video-el {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 8px;
	background: #000;
	cursor: pointer;
}

.article-media-modal__embed {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.article-media-modal__embed[hidden] {
	display: none;
}

.article-media-modal__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.article-media-modal__volume {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	align-self: flex-start;
	flex-shrink: 0;
	width: 24px;
}

.article-media-modal__volume-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.article-media-modal__volume-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
}

.article-media-modal__volume-slider {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	margin-top: 4px;
	opacity: 0;
	transform: translateY(-6px) scaleY(0.35);
	transform-origin: top center;
	pointer-events: none;
	transition:
		grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.22s ease,
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-media-modal__volume.is-open .article-media-modal__volume-slider,
.article-media-modal__volume:hover .article-media-modal__volume-slider,
.article-media-modal__volume:focus-within .article-media-modal__volume-slider {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0) scaleY(1);
	pointer-events: auto;
}

.article-media-modal__volume-slider-inner {
	min-height: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.article-media-modal__volume.is-open .article-media-modal__volume-slider-inner,
.article-media-modal__volume:hover .article-media-modal__volume-slider-inner,
.article-media-modal__volume:focus-within .article-media-modal__volume-slider-inner {
	overflow: visible;
}

.article-media-modal__volume-track {
	position: relative;
	width: 8px;
	height: 124px;
	margin-top: 0;
	border-radius: 8px;
	background: #dadce0;
	cursor: pointer;
	outline: none;
	overflow: visible;
}

.article-media-modal__volume-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	border-radius: 8px;
	background: var(--dr-hug-pink);
	pointer-events: none;
}

.article-media-modal__timeline {
	position: relative;
	z-index: 3;
	flex-shrink: 0;
	width: 100%;
	height: 8px;
	margin-top: auto;
	border-radius: 8px;
	background: #dadce0;
	cursor: pointer;
	outline: none;
	overflow: visible;
}

.article-media-modal__timeline-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	border-radius: 8px;
	background: var(--dr-hug-pink);
	pointer-events: none;
}

.article-media-modal__thumb {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--dr-hug-pink);
	border: 2px solid #dadce0;
	box-shadow: 0 0 8px rgba(41, 12, 15, 0.16);
	box-sizing: border-box;
	pointer-events: none;
	flex-shrink: 0;
}

.article-media-modal__thumb--timeline {
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.article-media-modal__timeline:hover .article-media-modal__thumb--timeline,
.article-media-modal__timeline:focus-visible .article-media-modal__thumb--timeline,
.article-media-modal__timeline.is-dragging .article-media-modal__thumb--timeline {
	opacity: 1;
}

.article-media-modal__thumb--volume {
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, 50%);
}

.article-media-modal__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 0;
	overflow: hidden;
}

.article-media-modal__author {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-shrink: 0;
}

.article-media-modal__author[hidden] {
	display: none;
}

.article-media-modal__author-photo-wrap {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.article-media-modal__author-photo {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 32px;
	object-fit: cover;
	background: var(--dr-hug-third-cream, #f1e9d9);
}

.article-media-modal__author-photo[hidden] {
	display: none;
}

.article-media-modal__author-photo--placeholder {
	position: absolute;
	inset: 0;
	border-radius: 32px;
	background: var(--dr-hug-third-cream, #f1e9d9);
}

.article-media-modal__author-name {
	margin: 0;
	font-family: var(--dr-hug-font-family);
	font-size: 18px;
	font-weight: var(--dr-hug-font-weight-bold);
	line-height: 1.4;
	color: var(--dr-hug-text, #434855);
}

.article-media-modal__text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	font-family: var(--dr-hug-font-family);
	font-size: 18px;
	font-weight: var(--dr-hug-font-weight-medium, 500);
	line-height: 1.4;
	color: var(--dr-hug-text, #434855);
	white-space: pre-wrap;
}

.article-media-modal__text p {
	margin: 0 0 1.2em;
}

.article-media-modal__text p:last-child {
	margin-bottom: 0;
}

.article-media-modal__media[data-mode="embed"] .article-media-modal__volume,
.article-media-modal__media[data-mode="embed"] .article-media-modal__timeline {
	display: none;
}

@media (max-width: 900px) {
	.article-media-modal {
		padding: 16px 12px;
		align-items: center;
		overflow: auto;
	}

	.article-media-modal__dialog {
		width: min(520px, 100%);
		max-height: none;
	}

	.article-media-modal__close {
		top: 8px;
		right: 8px;
	}

	.article-media-modal__panel {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 16px;
		padding: 16px;
		height: auto;
		max-height: calc(100dvh - 32px);
		overflow: auto;
	}

	.article-media-modal__panel--media-only {
		grid-template-rows: auto;
	}

	/* Match card proportion — avoid tall 3:4 crop that cuts covers wrongly. */
	.article-media-modal__media {
		min-height: 0;
		height: auto;
		aspect-ratio: 1 / 1;
		max-height: min(52dvh, 420px);
		width: 100%;
	}

	.article-media-modal__photo,
	.article-media-modal__video {
		padding: 12px;
	}

	.article-media-modal__photo-image {
		object-fit: cover;
		object-position: center center;
	}

	.article-media-modal__video-el {
		object-fit: contain;
	}

	.article-media-modal__embed iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.article-media-modal__aside {
		max-height: none;
		overflow: visible;
		gap: 16px;
	}

	.article-media-modal__author-name {
		font-size: 16px;
	}

	.article-media-modal__text {
		font-size: 16px;
		max-height: min(28dvh, 220px);
		overflow: auto;
	}
}