/* Roy's Food Gallery — front-end (scoped under .rfg-gallery) */
.rfg-gallery{
	--rfg-bg:#1b1510;
	--rfg-surface:#1d130d;
	--rfg-text:#ebe1d2;
	--rfg-muted:#a89783;
	--rfg-gold:#e2a53d;
	--rfg-gold-soft:#eec684;
	--rfg-ribbon-text:#1a130c;
	--rfg-radius:18px;
	--rfg-height:540px;
	--rfg-height-m:210px;
	--rfg-ratio:4.6;
	--rfg-gap:12px;
	background:var(--rfg-bg);
	color:var(--rfg-text);
	padding:108px 0;
	border-top:1px solid rgba(244,236,221,.10);
	border-bottom:1px solid rgba(244,236,221,.10);
	font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	box-sizing:border-box;
}
.rfg-gallery *,.rfg-gallery *::before,.rfg-gallery *::after{box-sizing:border-box}
.rfg-head{max-width:680px;margin:0 auto;text-align:center;padding:0 24px}
.rfg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--rfg-gold);margin-bottom:16px}
.rfg-eyebrow::before,.rfg-eyebrow::after{content:"";width:26px;height:1px;background:var(--rfg-gold);opacity:.7}
.rfg-title{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.01em;margin:0}
.rfg-sub{color:var(--rfg-muted);margin:16px 0 0;font-size:1.04rem;line-height:1.6}
.rfg-inner{padding:50px clamp(16px,4vw,64px) 0}
.rfg-panels{display:flex;gap:var(--rfg-gap);height:var(--rfg-height)}
.rfg-panel{position:relative;flex:1;min-width:0;border-radius:var(--rfg-radius);overflow:hidden;cursor:pointer;background:var(--rfg-surface);transition:flex .6s cubic-bezier(.4,0,.2,1)}
.rfg-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s ease,filter .5s;margin:0;max-width:none}
.rfg-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,5,.92),rgba(10,7,5,.22) 60%,transparent 88%);transition:background .4s}
.rfg-rib{position:absolute;top:18px;left:18px;z-index:3;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rfg-ribbon-text);background:var(--rfg-gold);padding:7px 13px;border-radius:50px;opacity:0;transition:opacity .4s}
.rfg-vtitle{position:absolute;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:2;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.18rem;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.75);transition:opacity .35s;margin:0}
.rfg-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.rfg-meta h3{color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0;text-shadow:0 2px 14px rgba(0,0,0,.6);white-space:nowrap;line-height:1.1}
.rfg-meta p{color:var(--rfg-gold-soft);font-size:.92rem;font-weight:500;margin:6px 0 0;white-space:nowrap}

/* expand behaviour */
.rfg-panel.rfg-open{flex:var(--rfg-ratio)}
.rfg-panels:hover .rfg-panel{flex:1}
.rfg-panels:hover .rfg-panel:hover{flex:var(--rfg-ratio)}
.rfg-panel:hover img{transform:scale(1.05)}
.rfg-panel:not(:hover):not(.rfg-open) img{filter:saturate(.92) brightness(.82)}

/* label states */
.rfg-panel .rfg-meta,.rfg-panel .rfg-rib{opacity:0}
.rfg-panel.rfg-open .rfg-vtitle{opacity:0}
.rfg-panel.rfg-open .rfg-meta{opacity:1;transform:none}
.rfg-panel.rfg-open .rfg-rib{opacity:1}
.rfg-panels:hover .rfg-panel.rfg-open .rfg-vtitle{opacity:1}
.rfg-panels:hover .rfg-panel.rfg-open .rfg-meta{opacity:0;transform:translateY(12px)}
.rfg-panels:hover .rfg-panel.rfg-open .rfg-rib{opacity:0}
.rfg-panels .rfg-panel:hover .rfg-vtitle{opacity:0}
.rfg-panels .rfg-panel:hover .rfg-meta{opacity:1;transform:none}
.rfg-panels .rfg-panel:hover .rfg-rib{opacity:1}
.rfg-panel:focus-visible{outline:3px solid var(--rfg-gold);outline-offset:3px}

@media(max-width:820px){
	.rfg-gallery{padding:72px 0}
	.rfg-panels{flex-direction:column;height:auto}
	.rfg-panel{flex:none !important;height:var(--rfg-height-m);border-radius:16px}
	.rfg-vtitle{display:none}
	.rfg-meta,.rfg-rib{opacity:1 !important;transform:none !important}
	.rfg-panel img{filter:none !important}
}
@media(prefers-reduced-motion:reduce){
	.rfg-panel,.rfg-panel img,.rfg-meta,.rfg-vtitle,.rfg-rib{transition:none !important}
}