/* ==========================================================================
   BPX Dorottya Galéria — frontend stílus
   Minden a .drg-gallery / #drg-lightbox alá scope-olva (nincs ütközés).
   ========================================================================== */

.drg-gallery{
	/* alapértékek; a shortcode felülírja inline (--drg-gold, --drg-cols, --drg-heading-font) */
	--drg-gold: #B79A6B;
	--drg-ink: #1f1d1a;
	--drg-muted: #6f6a63;
	--drg-overlay: rgba(18,16,13,.94);
	--drg-gap: 14px;
	--drg-radius: 3px;
	--drg-max: 1240px;
	--drg-cols: 3;
	--drg-heading-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

	max-width: var(--drg-max);
	margin: 0 auto;
	padding: 56px 20px 60px;
	font-family: inherit;
	box-sizing: border-box;
	color: var(--drg-muted);
}
.drg-gallery *,
.drg-gallery *::before,
.drg-gallery *::after{ box-sizing: border-box; }

/* ---------- Fejléc ---------- */
.drg-gallery .drg-head{ text-align:center; margin:0 auto 38px; max-width:640px; }
.drg-gallery .drg-eyebrow{
	font-family:inherit; font-size:12px; letter-spacing:.34em; text-transform:uppercase;
	color:var(--drg-gold); margin:0 0 14px; font-weight:600;
}
.drg-gallery .drg-title{
	font-family:var(--drg-heading-font); color:var(--drg-ink);
	font-size:clamp(30px,5vw,46px); line-height:1.1; font-weight:600; margin:0 0 16px; letter-spacing:.01em;
}
.drg-gallery .drg-rule{ width:56px; height:1px; background:var(--drg-gold); margin:0 auto 16px; opacity:.85; }
.drg-gallery .drg-sub{ font-family:inherit; font-size:15px; line-height:1.7; color:var(--drg-muted); margin:0; }

/* ---------- Masonry rács ---------- */
.drg-gallery .drg-grid{ column-width:300px; column-gap:var(--drg-gap); }
@media (min-width:1100px){ .drg-gallery .drg-grid{ column-count:var(--drg-cols,3); column-width:auto; } }

.drg-gallery .drg-item{
	position:relative; display:block; width:100%; margin:0 0 var(--drg-gap);
	padding:0; border:0; background:transparent; cursor:pointer; overflow:hidden;
	border-radius:var(--drg-radius); break-inside:avoid; -webkit-column-break-inside:avoid; line-height:0;
}
.drg-gallery.drg-anim .drg-item{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.drg-gallery.drg-anim .drg-item.is-in{ opacity:1; transform:none; }

.drg-gallery .drg-item img,
.drg-gallery .drg-item .drg-img{
	width:100%; height:auto; display:block; border-radius:var(--drg-radius);
	transition:transform .9s cubic-bezier(.16,1,.3,1); will-change:transform; background:#efece6;
}
.drg-gallery .drg-item::after{
	content:""; position:absolute; inset:0; border:1px solid transparent; border-radius:var(--drg-radius);
	background:linear-gradient(to top, rgba(18,16,13,.42), rgba(18,16,13,0) 42%);
	opacity:0; transition:opacity .5s ease, border-color .5s ease; pointer-events:none;
}
.drg-gallery .drg-item:hover img,
.drg-gallery .drg-item:focus-visible img{ transform:scale(1.06); }
.drg-gallery .drg-item:hover::after,
.drg-gallery .drg-item:focus-visible::after{ opacity:1; border-color:var(--drg-gold); }
.drg-gallery .drg-item:focus-visible{ outline:2px solid var(--drg-gold); outline-offset:3px; }

.drg-gallery .drg-cap{
	position:absolute; left:16px; bottom:14px; right:16px; font-family:inherit; line-height:1.3;
	font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#fff; opacity:0;
	transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; pointer-events:none;
	text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.drg-gallery .drg-item:hover .drg-cap,
.drg-gallery .drg-item:focus-visible .drg-cap{ opacity:1; transform:none; }

.drg-gallery .drg-zoom{
	position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid rgba(255,255,255,.7);
	border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; line-height:1;
	opacity:0; transform:scale(.85); transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.drg-gallery .drg-item:hover .drg-zoom,
.drg-gallery .drg-item:focus-visible .drg-zoom{ opacity:1; transform:scale(1); }

/* ---------- Összecsukás / elhalványulás + „Több kép” ---------- */
.drg-gallery .drg-collapse{ position:relative; }
.drg-gallery .drg-collapse.is-collapsed .drg-grid{
	/* a rács alja átlátszóba olvad — háttérszíntől függetlenül */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 170px), transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 calc(100% - 170px), transparent 100%);
}
/* az összecsukáson felüli képek elrejtve (de a DOM-ban maradnak → lightbox lépteti) */
.drg-gallery .drg-collapse.is-collapsed .drg-item.is-extra{ display:none; }
/* kinyitva az extra képek MINDIG láthatók (felülírja a belépő-animáció opacity:0-ját) */
.drg-gallery .drg-collapse:not(.is-collapsed) .drg-item.is-extra{ opacity:1; transform:none; }

.drg-gallery .drg-more-wrap{
	position:relative; z-index:1; text-align:center;
	margin-top:-46px; padding-top:0;
}
.drg-gallery .drg-collapse:not(.is-collapsed) .drg-more-wrap{ margin-top:18px; }
.drg-gallery .drg-more{
	display:inline-flex; align-items:center; gap:10px;
	background:transparent; cursor:pointer;
	font-family:inherit; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
	color:var(--drg-ink);
	border:1px solid var(--drg-gold);
	padding:14px 26px; border-radius:2px;
	transition:background .35s ease, color .35s ease, letter-spacing .35s ease;
}
.drg-gallery .drg-more:hover{ background:var(--drg-gold); color:#fff; letter-spacing:.26em; }
.drg-gallery .drg-more .drg-more-count{ color:var(--drg-gold); font-weight:600; }
.drg-gallery .drg-more:hover .drg-more-count{ color:#fff; }
.drg-gallery .drg-more:focus-visible{ outline:2px solid var(--drg-gold); outline-offset:3px; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
#drg-lightbox{
	--drg-gold:#B79A6B; --drg-overlay:rgba(18,16,13,.94);
	position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
	background:var(--drg-overlay); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
	opacity:0; transition:opacity .35s ease; font-family:inherit;
}
#drg-lightbox.is-open{ display:flex; opacity:1; }
#drg-lightbox .drg-stage{
	position:relative; max-width:92vw; max-height:84vh; display:flex; flex-direction:column; align-items:center;
	transform:scale(.97); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#drg-lightbox.is-open .drg-stage{ transform:scale(1); }
#drg-lightbox img{
	max-width:92vw; max-height:76vh; width:auto; height:auto; display:block; border-radius:2px;
	box-shadow:0 30px 80px rgba(0,0,0,.5); background:#2a2723;
}
#drg-lightbox .drg-lb-cap{
	color:rgba(255,255,255,.82); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
	margin-top:16px; text-align:center; min-height:16px;
}
#drg-lightbox .drg-count{ color:var(--drg-gold); font-size:12px; letter-spacing:.2em; margin-top:6px; }

/* ---- VÉKONY, kattintható nyilak (SVG chevron) ---- */
#drg-lightbox .drg-nav{
	position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; padding:18px 14px;
	cursor:pointer; color:rgba(255,255,255,.85); transition:color .3s ease, transform .3s ease;
	-webkit-tap-highlight-color:transparent; z-index:2;
}
#drg-lightbox .drg-nav svg{ width:30px; height:30px; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
#drg-lightbox .drg-nav:hover{ color:var(--drg-gold); }
#drg-lightbox .drg-prev{ left:18px; }
#drg-lightbox .drg-next{ right:18px; }
#drg-lightbox .drg-prev:hover{ transform:translateY(-50%) translateX(-3px); }
#drg-lightbox .drg-next:hover{ transform:translateY(-50%) translateX(3px); }

#drg-lightbox .drg-close{
	position:absolute; top:20px; right:22px; background:none; border:0; padding:8px; cursor:pointer;
	color:rgba(255,255,255,.85); transition:color .3s ease, transform .3s ease; z-index:2;
}
#drg-lightbox .drg-close svg{ width:24px; height:24px; display:block; }
#drg-lightbox .drg-close:hover{ color:var(--drg-gold); transform:rotate(90deg); }

@media (max-width:640px){
	.drg-gallery{ padding:40px 14px 44px; }
	#drg-lightbox .drg-nav{ padding:14px 8px; }
	#drg-lightbox .drg-nav svg{ width:26px; height:26px; }
	#drg-lightbox .drg-prev{ left:6px; }
	#drg-lightbox .drg-next{ right:6px; }
	#drg-lightbox .drg-close{ top:12px; right:14px; }
}

@media (prefers-reduced-motion:reduce){
	.drg-gallery.drg-anim .drg-item{ transition:none; opacity:1; transform:none; }
	.drg-gallery .drg-item img,
	#drg-lightbox, #drg-lightbox .drg-stage{ transition:none; }
}