/* Galeria e vídeo somente em singles com mídia cadastrada. */
.drago-property-gallery,
.drago-property-video {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

.drago-property-content > .drago-property-gallery,
.drago-property-content > .drago-property-video { width: 100%; margin: 0; }

.drago-property-gallery > :not(dialog),
.drago-property-video > * { grid-column: 1; min-width: 0; }
.drago-property-gallery .drago-property-section-title,
.drago-property-video .drago-property-section-title { margin-bottom: 18px; font-size: 24px; font-weight: 400; }

.drago-property-gallery__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--drago-navy);
}

.drago-property-gallery__stage:focus-within { outline: 3px solid var(--drago-gold); outline-offset: 3px; }

.drago-property-gallery__stage > .drago-property-gallery__main {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.drago-property-gallery__main-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

.drago-property-gallery__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgb(8 42 62 / 68%);
	color: var(--drago-white);
	cursor: pointer;
}

.drago-property-gallery__arrow:hover { background: rgb(8 42 62 / 92%); }
.drago-property-gallery__arrow--prev { left: 15px; }
.drago-property-gallery__arrow--next { right: 15px; }
.drago-property-gallery__arrow svg,
.drago-property-gallery__dialog-arrow svg { width: 22px; height: 22px; }

.drago-property-gallery__thumbs {
	display: flex;
	max-width: 100%;
	gap: 10px;
	margin-top: 10px;
	padding: 2px 2px 4px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.drago-property-gallery__thumbs > .drago-property-gallery__thumb {
	box-sizing: border-box;
	width: 120px;
	height: 90px;
	flex: 0 0 auto;
	overflow: hidden;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: var(--drago-navy);
	cursor: pointer;
	opacity: .8;
}

.drago-property-gallery__thumb.is-active {
	border-color: var(--drago-gold);
	opacity: 1;
}

.drago-property-gallery__thumb:hover { opacity: 1; }
.drago-property-gallery__thumb .drago-property-gallery__thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.drago-property-gallery__main:focus-visible,
.drago-property-gallery__arrow:focus-visible,
.drago-property-gallery__thumb:focus-visible,
.drago-property-gallery__dialog button:focus-visible {
	outline: 3px solid var(--drago-gold);
	outline-offset: 3px;
}

.drago-property-gallery__thumb:focus-visible { outline-offset: -3px; }

.drago-property-gallery__dialog {
	width: min(96vw, 1280px);
	max-width: none;
	max-height: 94vh;
	max-height: 94dvh;
	padding: 48px 16px 16px;
	border: 0;
	border-radius: 4px;
	background: #061c29;
	color: var(--drago-white);
}

.drago-property-gallery__dialog::backdrop { background: rgb(1 12 18 / 88%); }

.drago-property-gallery__dialog-inner {
	position: relative;
	display: grid;
	min-width: 0;
	max-height: calc(94vh - 64px);
	max-height: calc(94dvh - 64px);
	place-items: center;
}

.drago-property-gallery__dialog-close {
	position: absolute;
	z-index: 2;
	top: -40px;
	right: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: var(--drago-white);
	cursor: pointer;
}

.drago-property-gallery__dialog-close svg { width: 20px; height: 20px; }
.drago-property-gallery__dialog-arrow {
	position: absolute;
	z-index: 1;
	top: 50%;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid rgb(255 255 255 / 65%);
	border-radius: 50%;
	background: rgb(8 42 62 / 70%);
	color: var(--drago-white);
	cursor: pointer;
}

.drago-property-gallery__dialog-arrow[data-drago-gallery-lightbox-prev] { left: 8px; }
.drago-property-gallery__dialog-arrow[data-drago-gallery-lightbox-next] { right: 8px; }
.drago-property-gallery__dialog-arrow:hover,
.drago-property-gallery__dialog-close:hover { background: rgb(8 42 62 / 95%); }

.drago-property-gallery__lightbox-image {
	display: block;
	min-width: 0;
	max-width: 100%;
	max-height: calc(94vh - 64px);
	max-height: calc(94dvh - 64px);
	object-fit: contain;
}

.drago-property-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--drago-navy);
}

.drago-property-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 640px) {
	.drago-property-gallery .drago-property-section-title,
	.drago-property-video .drago-property-section-title { font-size: 22px; }
	.drago-property-gallery__arrow { width: 44px; height: 44px; }
	.drago-property-gallery__arrow--prev { left: 8px; }
	.drago-property-gallery__arrow--next { right: 8px; }
	.drago-property-gallery__thumbs > .drago-property-gallery__thumb { width: 96px; height: 72px; }
	.drago-property-gallery__dialog {
		width: calc(100vw - 16px);
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
		padding: 52px 8px 12px;
	}
	.drago-property-gallery__dialog-inner,
	.drago-property-gallery__lightbox-image {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
	}
	.drago-property-gallery__dialog-close { top: -44px; }
	.drago-property-gallery__dialog-arrow[data-drago-gallery-lightbox-prev] { left: 0; }
	.drago-property-gallery__dialog-arrow[data-drago-gallery-lightbox-next] { right: 0; }
}