/**
 * Template Components CSS
 *
 * Styles for property detail page template components.
 * Uses CSS custom properties for easy customization.
 *
 * @package PropertyListing
 * @since 1.1.0
 */

/* ==========================================================================
   Base Container
   ========================================================================== */

.plm-template-container {
	--plm-spacing-xs: 0.5rem;
	--plm-spacing-sm: 1rem;
	--plm-spacing-md: 1.5rem;
	--plm-spacing-lg: 2rem;
	--plm-spacing-xl: 3rem;

	--plm-color-text: #1a1a1a;
	--plm-color-text-secondary: #666;
	--plm-color-border: #e0e0e0;
	--plm-color-background: #f8f8f8;
	--plm-color-primary: #0073aa;

	--plm-radius-sm: 4px;
	--plm-radius-md: 8px;

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	color: var(--plm-color-text);
}

.plm-component {
	margin-bottom: var(--plm-spacing-xl);
}

.plm-component:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Gallery Component
   ========================================================================== */

.plm-gallery {
	display: grid;
	grid-template-columns: repeat(var(--columns, 3), 1fr);
	gap: var(--plm-spacing-sm);
}

.plm-gallery-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--plm-radius-md);
	aspect-ratio: 4/3;
}

.plm-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.plm-gallery-item:hover .plm-gallery-image {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.plm-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.plm-gallery {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Gallery Carousel (All Thumbnail Positions)
   ========================================================================== */

.plm-gallery-slideshow {
	width: 100%;
	margin-bottom: 24px;
}

/* Main hero slideshow */
.plm-slideshow-main {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #1e293b;
}

.plm-slideshow-main .swiper-slide {
	position: relative;
}

.plm-slideshow-main .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Aspect ratio variants */
.plm-slideshow-main.aspect-16-9 .swiper-slide {
	aspect-ratio: 16 / 9;
}

.plm-slideshow-main.aspect-4-3 .swiper-slide {
	aspect-ratio: 4 / 3;
}

.plm-slideshow-main.aspect-1-1 .swiper-slide {
	aspect-ratio: 1 / 1;
}

.plm-slideshow-main.aspect-original .swiper-slide {
	aspect-ratio: auto;
}

/* Navigation arrows */
.plm-slideshow-main .swiper-button-prev,
.plm-slideshow-main .swiper-button-next {
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background 0.2s, transform 0.2s;
}

.plm-slideshow-main .swiper-button-prev:hover,
.plm-slideshow-main .swiper-button-next:hover {
	background: #fff;
	transform: scale(1.05);
}

.plm-slideshow-main .swiper-button-prev:after,
.plm-slideshow-main .swiper-button-next:after {
	font-size: 20px;
	color: #1e293b;
	font-weight: bold;
}

/* Counter overlay */
.plm-slideshow-counter {
	position: absolute;
	bottom: 16px;
	right: 16px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	z-index: 10;
}

/* Captions */
.plm-slideshow-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40px 16px 16px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
	font-size: 16px;
	z-index: 5;
}

/* Dots pagination */
.plm-gallery-slideshow .swiper-pagination {
	padding: 16px 0;
}

.plm-gallery-slideshow .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #cbd5e1;
	opacity: 1;
	transition: background 0.2s;
}

.plm-gallery-slideshow .swiper-pagination-bullet-active {
	background: #27387c;
}

/* Thumbnail carousel - base styles */
.plm-slideshow-thumbnails {
	padding: 0;
}

.plm-slideshow-thumbnails .swiper-slide {
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s, opacity 0.2s;
	opacity: 0.6;
}

.plm-slideshow-thumbnails .swiper-slide:hover {
	opacity: 1;
}

.plm-slideshow-thumbnails .swiper-slide-thumb-active {
	border-color: #27387c;
	opacity: 1;
}

.plm-slideshow-thumbnails .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumbnail position: bottom (default) */
.plm-carousel-layout-bottom .plm-slideshow-thumbnails {
	margin-top: 12px;
}

/* Thumbnail position: top */
.plm-carousel-layout-top .plm-slideshow-thumbnails {
	margin-bottom: 12px;
}

/* Fallback: default to medium square if no size class present */
.plm-carousel-layout-bottom .plm-slideshow-thumbnails .swiper-slide,
.plm-carousel-layout-top .plm-slideshow-thumbnails .swiper-slide {
	width: 90px; height: 90px;
}
.plm-carousel-layout-left .plm-slideshow-thumbnails .swiper-slide,
.plm-carousel-layout-right .plm-slideshow-thumbnails .swiper-slide {
	width: 100%; height: 100px; margin-bottom: 8px;
}

/* Bottom/top size overrides */
.plm-thumb-size-small.plm-carousel-layout-bottom .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-small.plm-carousel-layout-top .plm-slideshow-thumbnails .swiper-slide {
	width: 70px; height: 70px;
}
.plm-thumb-size-medium.plm-carousel-layout-bottom .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-medium.plm-carousel-layout-top .plm-slideshow-thumbnails .swiper-slide {
	width: 90px; height: 90px;
}
.plm-thumb-size-large.plm-carousel-layout-bottom .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-large.plm-carousel-layout-top .plm-slideshow-thumbnails .swiper-slide {
	width: 110px; height: 110px;
}

/* Thumbnail position: left/right (side-by-side flex layout) */
.plm-carousel-layout-left .plm-carousel-flex-wrapper,
.plm-carousel-layout-right .plm-carousel-flex-wrapper {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* Fallback: default to medium if no size class */
.plm-carousel-layout-left .plm-slideshow-thumbnails,
.plm-carousel-layout-right .plm-slideshow-thumbnails {
	flex: 0 0 120px; margin: 0; height: 500px; max-height: 80vh;
}

/* Side layout container size overrides */
.plm-thumb-size-small.plm-carousel-layout-left .plm-slideshow-thumbnails,
.plm-thumb-size-small.plm-carousel-layout-right .plm-slideshow-thumbnails {
	flex: 0 0 90px; margin: 0; height: 500px; max-height: 80vh;
}
.plm-thumb-size-medium.plm-carousel-layout-left .plm-slideshow-thumbnails,
.plm-thumb-size-medium.plm-carousel-layout-right .plm-slideshow-thumbnails {
	flex: 0 0 120px; margin: 0; height: 500px; max-height: 80vh;
}
.plm-thumb-size-large.plm-carousel-layout-left .plm-slideshow-thumbnails,
.plm-thumb-size-large.plm-carousel-layout-right .plm-slideshow-thumbnails {
	flex: 0 0 150px; margin: 0; height: 500px; max-height: 80vh;
}

.plm-carousel-layout-left .plm-slideshow-main,
.plm-carousel-layout-right .plm-slideshow-main {
	flex: 1;
}

/* Side layout slide height overrides */
.plm-thumb-size-small.plm-carousel-layout-left .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-small.plm-carousel-layout-right .plm-slideshow-thumbnails .swiper-slide {
	width: 100%; height: 80px; margin-bottom: 8px;
}
.plm-thumb-size-medium.plm-carousel-layout-left .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-medium.plm-carousel-layout-right .plm-slideshow-thumbnails .swiper-slide {
	width: 100%; height: 100px; margin-bottom: 8px;
}
.plm-thumb-size-large.plm-carousel-layout-left .plm-slideshow-thumbnails .swiper-slide,
.plm-thumb-size-large.plm-carousel-layout-right .plm-slideshow-thumbnails .swiper-slide {
	width: 100%; height: 120px; margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 768px) {
	.plm-slideshow-main .swiper-button-prev,
	.plm-slideshow-main .swiper-button-next {
		width: 36px;
		height: 36px;
	}

	.plm-slideshow-main .swiper-button-prev:after,
	.plm-slideshow-main .swiper-button-next:after {
		font-size: 16px;
	}

	/* Fallback */
	.plm-slideshow-thumbnails .swiper-slide { width: 75px; height: 75px; }
	/* Size overrides */
	.plm-thumb-size-small .plm-slideshow-thumbnails .swiper-slide { width: 60px; height: 60px; }
	.plm-thumb-size-medium .plm-slideshow-thumbnails .swiper-slide { width: 75px; height: 75px; }
	.plm-thumb-size-large .plm-slideshow-thumbnails .swiper-slide { width: 90px; height: 90px; }

	.plm-slideshow-counter {
		font-size: 12px;
		padding: 4px 8px;
	}

	/* Force bottom position on mobile for left/right layouts */
	.plm-carousel-layout-left .plm-carousel-flex-wrapper,
	.plm-carousel-layout-right .plm-carousel-flex-wrapper {
		flex-direction: column;
	}

	.plm-carousel-layout-left .plm-slideshow-thumbnails,
	.plm-carousel-layout-right .plm-slideshow-thumbnails {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		order: 2;  /* Thumbnails always at bottom on mobile */
		margin-top: 12px;
		margin-bottom: 0;
	}

	.plm-carousel-layout-left .plm-slideshow-main,
	.plm-carousel-layout-right .plm-slideshow-main {
		order: 1;  /* Hero always at top on mobile */
	}
}

/* ==========================================================================
   Metrics Grid Component
   ========================================================================== */

.plm-metrics-grid {
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), 1fr);
	gap: var(--plm-spacing-md);
	padding: var(--plm-spacing-md);
	background: var(--plm-color-background);
	border-radius: var(--plm-radius-md);
}

.plm-metric {
	display: flex;
	flex-direction: column;
	gap: var(--plm-spacing-xs);
}

.plm-metric-label {
	font-size: 0.875rem;
	color: var(--plm-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.plm-metric-value {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--plm-color-text);
}

/* Auto-fit columns (no --columns var set) */
.plm-metrics-grid:not([style*="--columns"]) {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Horizontal layout (matches VB preview in styles.tsx) */
.plm-metrics-grid.plm-metrics-layout-horizontal {
	gap: 0;
	padding: 16px 0;
	background: transparent;
	border-radius: 0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}

.plm-metrics-layout-horizontal .plm-metric {
	padding: 8px 16px;
	text-align: left;
}

/* Responsive collapse for auto-columns only — explicit column choices are always respected.
   Scoped to :not([style*="--columns"]) so columns=2 stays at 2, never expands to 3.
   Uses 980px/680px to match VB breakpoints in styles.tsx exactly. */
@media (max-width: 980px) {
	.plm-metrics-grid.plm-metrics-layout-horizontal:not([style*="--columns"]) {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 680px) {
	.plm-metrics-grid.plm-metrics-layout-horizontal:not([style*="--columns"]) {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 0;
	}
}

/* Vertical layout (matches VB preview in styles.tsx) */
.plm-metrics-grid.plm-metrics-layout-vertical {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.plm-metrics-layout-vertical .plm-metric {
	flex-direction: column;
	align-items: center;
	padding: 24px 16px;
	text-align: center;
	background: #fff;
}
.plm-metrics-layout-vertical .plm-metric:nth-child(odd) {
	background: #f8fafc;
}
.plm-metrics-layout-vertical .plm-metric-value {
	font-size: 28px;
}

/* Label styles */
.plm-metrics-label-lowercase .plm-metric-label { text-transform: lowercase; }
.plm-metrics-label-title-case .plm-metric-label { text-transform: capitalize; }
/* uppercase is the default in .plm-metric-label already */

/* ==========================================================================
   Description Component
   ========================================================================== */

.plm-description-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--plm-spacing-md);
	color: var(--plm-color-text);
}

.plm-description-content {
	font-size: 1rem;
	line-height: 1.8;
}

.plm-description-content p {
	margin-bottom: var(--plm-spacing-md);
}

.plm-description-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Map Component
   ========================================================================== */

/* Leaflet layer control (Street/Satellite toggle) */
.leaflet-control-layers {
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border: none;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	padding: 8px 12px;
}
.leaflet-control-layers .leaflet-control-layers-separator {
	display: none;
}

.plm-map-embed {
	position: relative;
	width: 100%;
	min-height: 300px;
	border-radius: var(--plm-radius-md);
	overflow: hidden;
	background: var(--plm-color-background);
}

.plm-map-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--plm-color-text-secondary);
	font-size: 0.875rem;
}

.plm-map-embed .leaflet-container {
	height: 100%;
	width: 100%;
	border-radius: var(--plm-radius-md);
}

/* ==========================================================================
   Contact Component
   ========================================================================== */

.plm-contact-section h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--plm-spacing-md);
}

.plm-contact-info {
	margin-bottom: var(--plm-spacing-md);
}

.plm-contact-phone,
.plm-contact-email {
	margin-bottom: var(--plm-spacing-sm);
}

.plm-contact-phone strong,
.plm-contact-email strong {
	margin-right: var(--plm-spacing-xs);
}

.plm-contact-phone a,
.plm-contact-email a {
	color: var(--plm-color-primary);
	text-decoration: none;
}

.plm-contact-phone a:hover,
.plm-contact-email a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Team Component
   ========================================================================== */

.plm-team-section h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--plm-spacing-md);
}

.plm-team-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--plm-spacing-lg);
}

/* Cards Layout */
.plm-team-cards .plm-team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--plm-spacing-md);
	background: var(--plm-color-background);
	border-radius: var(--plm-radius-md);
	min-width: 200px;
	flex: 1;
	max-width: 300px;
}

.plm-team-cards .plm-member-photo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--plm-spacing-md);
}

.plm-team-cards .plm-member-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* List Layout */
.plm-team-list-layout .plm-team-list {
	flex-direction: column;
}

.plm-team-list-layout .plm-team-member {
	display: flex;
	gap: var(--plm-spacing-md);
	padding: var(--plm-spacing-md);
	background: var(--plm-color-background);
	border-radius: var(--plm-radius-md);
}

.plm-team-list-layout .plm-member-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.plm-team-list-layout .plm-member-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Compact Layout */
.plm-team-compact .plm-team-list {
	flex-direction: column;
	gap: var(--plm-spacing-sm);
}

.plm-team-compact .plm-team-member {
	display: flex;
	align-items: center;
	gap: var(--plm-spacing-sm);
}

.plm-team-compact .plm-member-photo {
	display: none;
}

/* Member Info */
.plm-member-name {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: var(--plm-spacing-xs);
}

.plm-member-title {
	font-size: 0.875rem;
	color: var(--plm-color-text-secondary);
	margin-bottom: var(--plm-spacing-sm);
}

.plm-member-phone,
.plm-member-email {
	font-size: 0.875rem;
	margin-bottom: var(--plm-spacing-xs);
}

.plm-member-phone a,
.plm-member-email a {
	color: var(--plm-color-primary);
	text-decoration: none;
}

.plm-member-phone a:hover,
.plm-member-email a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Documents Component
   ========================================================================== */

.plm-documents-section h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--plm-spacing-md);
}

.plm-documents-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.plm-document-item {
	border-bottom: 1px solid var(--plm-color-border);
}

.plm-document-item:last-child {
	border-bottom: none;
}

.plm-document-link {
	display: flex;
	align-items: center;
	gap: var(--plm-spacing-sm);
	padding: var(--plm-spacing-sm) 0;
	color: var(--plm-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.plm-document-link:hover {
	color: var(--plm-color-primary);
}

.plm-document-icon {
	color: var(--plm-color-text-secondary);
}

.plm-document-name {
	flex: 1;
	font-weight: 500;
}

.plm-document-type {
	font-size: 0.75rem;
	padding: 2px 6px;
	background: var(--plm-color-background);
	border-radius: var(--plm-radius-sm);
	color: var(--plm-color-text-secondary);
	text-transform: uppercase;
}

.plm-document-size {
	font-size: 0.875rem;
	color: var(--plm-color-text-secondary);
}

/* ==========================================================================
   Related Properties Component
   ========================================================================== */

.plm-related-section {
	width: 100%;
}

.plm-related-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 24px;
	color: var(--plm-color-text);
}

.plm-related-grid {
	display: grid;
	grid-template-columns: repeat(var(--plm-related-columns, 3), 1fr);
	gap: var(--plm-card-spacing, 24px);
}

.plm-related-card {
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plm-related-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

.plm-related-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.plm-related-image {
	aspect-ratio: 4/3;
	overflow: hidden;
}

.plm-related-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.plm-related-card:hover .plm-related-image img {
	transform: scale(1.05);
}

.plm-related-content {
	padding: 20px;
}

.plm-related-property-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	line-height: 1.3;
	color: var(--plm-color-text);
}

.plm-related-property-type {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #27387c;
	margin: 0 0 8px 0;
}

.plm-related-address {
	font-size: 0.875rem;
	color: var(--plm-color-text-secondary);
	margin: 0 0 8px 0;
}

.plm-related-price {
	font-size: 1.125rem;
	font-weight: 700;
	color: #27387c;
	margin: 0;
}

@media (max-width: 768px) {
	.plm-related-grid:not(.plm-related-cols-1) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.plm-related-grid:not(.plm-related-cols-1) {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Attachments Component
   ========================================================================== */

.plm-attachments-section {
	width: 100%;
}

.plm-attachments-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--plm-color-text);
	margin-bottom: 16px;
}

.plm-attachments-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plm-attachments-grid {
	display: grid;
	grid-template-columns: repeat(var(--plm-attachments-cols, 2), 1fr);
	gap: 16px;
}

.plm-attachment-item {
	display: flex;
	align-items: center;
	padding: 16px;
	background: #f8fafc;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.plm-attachment-item:hover {
	background: #f1f5f9;
}

.plm-attachments-grid .plm-attachment-item {
	flex-direction: column;
	align-items: flex-start;
}

.plm-attachment-icon {
	font-size: 24px;
	margin-right: 16px;
	flex-shrink: 0;
}

.plm-attachments-grid .plm-attachment-icon {
	margin-right: 0;
	margin-bottom: 12px;
}

.plm-attachment-info {
	flex: 1;
	min-width: 0;
}

.plm-attachments-grid .plm-attachment-info {
	width: 100%;
	margin-bottom: 12px;
}

.plm-attachment-name {
	font-size: 1rem;
	font-weight: 500;
	color: var(--plm-color-text);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.plm-attachment-description {
	font-size: 0.875rem;
	color: var(--plm-color-text-secondary);
	margin-bottom: 4px;
}

.plm-attachment-meta {
	font-size: 0.8125rem;
	color: var(--plm-color-text-secondary);
	display: flex;
	gap: 12px;
}

.plm-attachment-type {
	text-transform: uppercase;
	font-weight: 500;
	color: #27387c;
}

.plm-attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #27387c;
	color: #fff;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.plm-attachment-link:hover {
	background: #1e2a5c;
}

.plm-attachments-grid .plm-attachment-link {
	width: 100%;
	justify-content: center;
}

@media (max-width: 768px) {
	.plm-attachments-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   PhotoSwipe Lightbox — Prevent Theme CSS from Overriding Image Dimensions
   ========================================================================== */

/* Divi and other themes use broad selectors (e.g. .et_pb_module img { width: 100% })
   that can force PhotoSwipe images to fill the viewport, bypassing paddingFn.
   If a theme adds higher specificity, escalate to .pswp .pswp__img as well. */
.pswp img.pswp__img {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
}