/* Photo Gallery Block — style.css */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Block container ─────────────────────────────────────── */
.photo-gallery-block {
	--pgb-radius:      3px;
	--pgb-stage-bg:    #111111;
	--pgb-footer-bg:   #ffffff;
	--pgb-border:      #e2e2e2;
	--pgb-caption-c:   #1a1a1a;
	--pgb-credit-c:    #8a8a8a;
	--pgb-counter-c:   #b0b0b0;
	--pgb-arrow-bg:    rgba(255, 255, 255, 0.13);
	--pgb-arrow-ring:  rgba(255, 255, 255, 0.20);
	--pgb-arrow-hover: rgba(255, 255, 255, 0.26);
	--pgb-transition:  380ms cubic-bezier(0.4, 0, 0.2, 1);

	position:    relative;
	width:       100%;
	max-width:   100%;
	user-select: none;
	-webkit-user-select: none;
	outline:     none;
}

/* ── Stage (image area) ──────────────────────────────────── */
.pgb-stage {
	position:      relative;
	width:         100%;
	aspect-ratio:  3 / 2;          /* changed from 16/9 */
	background:    var(--pgb-stage-bg);
	overflow:      hidden;
	border-radius: var(--pgb-radius) var(--pgb-radius) 0 0;
	cursor:        grab;
}

/* ── Slides ──────────────────────────────────────────────── */
.pgb-slide {
	position:       absolute;
	inset:          0;
	opacity:        0;
	transition:     opacity var(--pgb-transition);
	pointer-events: none;
}

.pgb-slide.is-active {
	opacity:        1;
	pointer-events: auto;
}

.pgb-slide img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

/* ── Navigation arrows ───────────────────────────────────── */
.pgb-arrow {
	position:         absolute;
	top:              50%;
	transform:        translateY(-50%);
	width:            44px;
	height:           44px;
	background:       var(--pgb-arrow-bg);
	border:           1px solid var(--pgb-arrow-ring);
	border-radius:    50%;
	color:            #ffffff;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	cursor:           pointer;
	padding:          0;
	line-height:      1;
	z-index:          10;
	/* Hidden by default; fade in on stage hover */
	opacity:          1;
	transition:       opacity 220ms ease, background 180ms ease, transform 180ms ease;
	backdrop-filter:  blur(6px);
	-webkit-backdrop-filter: blur(6px);
	outline:          none;
}

/* Show arrows when the gallery is hovered */
.photo-gallery-block:hover .pgb-arrow {
	opacity: 1;
}

.pgb-arrow svg {
	width:       18px;
	height:      18px;
	flex-shrink: 0;
}

.pgb-prev { left:  14px; }
.pgb-next { right: 14px; }

.pgb-arrow:hover {
	background: var(--pgb-arrow-hover);
	transform:  translateY(-50%) scale(1.08);
}

.pgb-arrow:active {
	transform: translateY(-50%) scale(0.94);
}

/* Prevent the hover style from "sticking" after click via :focus */
.pgb-arrow:focus:not(:focus-visible) {
	background: var(--pgb-arrow-bg);
	transform:  translateY(-50%);
}

.pgb-arrow:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ── Footer ──────────────────────────────────────────────── */
.pgb-footer {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             20px;
	padding:         8px 0 0 0;
	background:      #fff;
	border:          none;
	border-top:      none;
	border-radius:   none;
	min-height:      30px;
}

.pgb-text {
	flex:      1;
	min-width: 0;
}

.pgb-caption {
  color: #000;
    font-size: 16px !important;
    font-family: "proxima-nova", sans-serif !important;
    font-weight: 700;
    line-height: 125% !important;
    margin: 0 0 3px;
    transition: opacity 260ms ease;
}

.pgb-caption:empty { display: none; }

.pgb-credit {
	    text-transform: none !important;
    font-size: 14px !important;
    margin-bottom: 40px !important;
    line-height: 1 !important;
    color: rgba(0, 0, 0, 0.5);
    font-family: "proxima-nova", sans-serif !important;
    display: block;
    line-height: 125% !important;
    font-weight: 600 !important;
	transition:     opacity 260ms ease;
}

.pgb-credit:empty { display: none; }

.pgb-counter {
	flex-shrink:          0;
	font-family:          "proxima-nova", sans-serif;
	font-size: 14px;
    font-weight: 700;
	letter-spacing:       0.05em;
    color: rgba(0, 0, 0, 0.5);
	padding-top:          1px;
	font-feature-settings: "tnum";
	white-space:          nowrap;
  line-height: 1.25;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
	.pgb-arrow {
		width:  38px;
		height: 38px;
	}
	.pgb-arrow svg {
		width:  16px;
		height: 16px;
	}
	.pgb-prev { left:  10px; }
	.pgb-next { right: 10px; }

	.pgb-footer {
		padding: 8px 0;
		gap:     20px;
          min-height: 20px;
	}
	.pgb-caption { font-size: 14px; }
	.pgb-credit  { font-size: 10px; margin-bottom: 24px !important; }
}

@media (max-width: 400px) {
	.pgb-footer {
		flex-direction: column;
		gap:            6px;
	}
	.pgb-counter {
		align-self: flex-end;
	}
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.photo-gallery-block {
		--pgb-footer-bg: #1c1c1c;
		--pgb-border:    #2e2e2e;
		--pgb-caption-c: #e8e8e8;
		--pgb-credit-c:  #6a6a6a;
		--pgb-counter-c: #5a5a5a;
	}
}

/* ── Editor empty-state placeholder ─────────────────────────── */
.pgb-empty-placeholder {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	padding:         40px 20px;
	background:      #f0f0f0;
	border:          2px dashed #ccc;
	border-radius:   4px;
	color:           #888;
	text-align:      center;
}

.pgb-empty-placeholder p {
	margin:    0;
	font-size: 13px;
	color:     #888;
}