/**
 * Property CMS — Photo Gallery (frontend). Grid + masonry layouts + lightbox.
 */

.pcms-gallery-wrap {
	--pcms-g-cols: 3;
	--pcms-g-gap: 10px;
	--pcms-g-radius: 10px;
	--pcms-g-primary: #f95b5b;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.pcms-gallery-wrap *, .pcms-gallery-wrap *::before, .pcms-gallery-wrap *::after { box-sizing: border-box; }

/* Photo tile */
.pcms-gphoto { position: relative; margin: 0; overflow: hidden; border-radius: var(--pcms-g-radius); background: rgba(26, 26, 26, .05); }
.pcms-gphoto__btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.pcms-gphoto__img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .5s ease; }
.pcms-gphoto:hover .pcms-gphoto__img { transform: scale(1.05); }

/* GRID layout — uniform squares. The square ratio lives on the image so a
   below-caption grows the figure instead of overflowing the tile. */
.pcms-gallery-wrap--grid { display: grid; grid-template-columns: repeat(var(--pcms-g-cols), minmax(0, 1fr)); gap: var(--pcms-g-gap); align-items: start; }
.pcms-gallery-wrap--grid .pcms-gphoto__img { aspect-ratio: 1 / 1; }

/* MASONRY layout — natural heights via CSS columns */
.pcms-gallery-wrap--masonry { column-count: var(--pcms-g-cols); column-gap: var(--pcms-g-gap); }
.pcms-gallery-wrap--masonry .pcms-gphoto { display: inline-block; width: 100%; margin-bottom: var(--pcms-g-gap); break-inside: avoid; }
.pcms-gallery-wrap--masonry .pcms-gphoto__img { aspect-ratio: auto; }

/* Captions */
.pcms-gphoto__cap { font-size: 13px; color: #333; }
.pcms-gallery-wrap--cap-below .pcms-gphoto { overflow: visible; border-radius: 0; background: none; }
.pcms-gallery-wrap--cap-below .pcms-gphoto__btn,
.pcms-gallery-wrap--cap-below .pcms-gphoto > * { border-radius: var(--pcms-g-radius); }
.pcms-gallery-wrap--cap-below .pcms-gphoto__img { border-radius: var(--pcms-g-radius); }
.pcms-gallery-wrap--cap-below .pcms-gphoto__cap { display: block; margin-top: 7px; color: var(--pcms-g-primary); font-weight: 500; }
.pcms-gallery-wrap--cap-overlay .pcms-gphoto__cap,
.pcms-gallery-wrap--cap-hover .pcms-gphoto__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 24px 14px 12px; color: #fff; font-weight: 500;
	background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}
.pcms-gallery-wrap--cap-hover .pcms-gphoto__cap { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.pcms-gallery-wrap--cap-hover .pcms-gphoto:hover .pcms-gphoto__cap { opacity: 1; transform: translateY(0); }

/* Responsive columns */
@media (max-width: 900px) {
	.pcms-gallery-wrap--grid { grid-template-columns: repeat(min(var(--pcms-g-cols), 3), minmax(0, 1fr)); }
	.pcms-gallery-wrap--masonry { column-count: min(var(--pcms-g-cols), 3); }
}
@media (max-width: 640px) {
	.pcms-gallery-wrap--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcms-gallery-wrap--masonry { column-count: 2; }
}

/* Lightbox */
.pcms-glightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; }
.pcms-glightbox[hidden] { display: none; }
.pcms-glightbox__stage { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.pcms-glightbox__img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 8px; }
.pcms-glightbox__cap { margin-top: 14px; color: rgba(255, 255, 255, .92); font-size: 14px; text-align: center; max-width: 640px; }
.pcms-glightbox__close { position: absolute; top: 20px; right: 26px; background: none; border: 0; color: #fff; font-size: 42px; line-height: 1; cursor: pointer; }
.pcms-glightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .14); border: 0; color: #fff; font-size: 34px; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; transition: background .2s ease; }
.pcms-glightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.pcms-glightbox__nav--prev { left: 26px; }
.pcms-glightbox__nav--next { right: 26px; }
.pcms-glightbox__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 13px; }
@media (max-width: 640px) {
	.pcms-glightbox__nav { width: 44px; height: 44px; font-size: 26px; }
	.pcms-glightbox__nav--prev { left: 10px; }
	.pcms-glightbox__nav--next { right: 10px; }
}

/* Sample gallery (shown to editors only when no gallery/photos exist yet) */
.pcms-gsample { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.pcms-gsample__badge {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 16px; padding: 8px 15px; border-radius: 999px;
	background: rgba(249, 91, 91, .1); color: #c0392b;
	font-size: 13px; font-weight: 600;
}
.pcms-gsample__badge svg { flex-shrink: 0; }
.pcms-gsample__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pcms-gsample__box {
	margin: 0; aspect-ratio: 1 / 1; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	border: 1px dashed rgba(26, 26, 26, .14);
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 12px, transparent 12px 24px);
}
.pcms-gsample__box--a { background-color: #fdeceb; color: #eaa3a0; }
.pcms-gsample__box--b { background-color: #e9f1e6; color: #98bd8f; }
.pcms-gsample__box--c { background-color: #f4ede0; color: #cdb488; }
.pcms-gsample__ico { line-height: 0; }
@media (max-width: 640px) { .pcms-gsample__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }