/* ============================================================
   Szesza Referencia Galéria — editorial szépség-portfólió
   Sage zöld + arany + terrakotta. Kategóriánként lebontva.
   ============================================================ */
.szref{
  --szref-gold:#bf9f60;
  --szref-gold-soft:#d8c18c;
  --szref-sage:#93a37d;
  --szref-sage-700:#6b7a56;
  --szref-ink:#33382c;
  --szref-ink-soft:#5d6253;
  --szref-terra:#bd7e66;
  --szref-paper:#fbf8f1;
  --szref-serif:'Cormorant Garamond', Georgia, serif;
  --szref-sans:'Jost', system-ui, sans-serif;
  --szref-script:'Pinyon Script', cursive;
  margin:2.5rem 0 1rem;
}

.szref-empty{
  text-align:center;color:var(--szref-ink-soft,#5d6253);
  font-family:var(--szref-serif);font-size:1.3rem;font-style:italic;
  padding:2.5rem 0;
}

/* ---------- Kategória-szekció ---------- */
.szref-cat{ margin:0 0 3.6rem; }
.szref-cat:last-child{ margin-bottom:1rem; }

/* Scroll-reveal CSAK ha a JS bekapcsolta (progresszív fokozás):
   JS nélkül / lassú JS esetén a galéria alapból látható. */
.szref.is-reveal .szref-cat{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--szref-d,0ms);
}
.szref.is-reveal .szref-cat.is-in{opacity:1;transform:none;}

/* Fejléc: nagy halvány sorszám + felütés + cím + arany vonal */
.szref-cat__head{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 1.5rem;padding-bottom:.2rem;position:relative;
}
.szref-cat__num{
  font-family:var(--szref-serif);
  font-size:clamp(2.6rem,6vw,4.2rem);
  font-weight:600;line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--szref-gold-soft);
  text-stroke:1px var(--szref-gold-soft);
  opacity:.75;flex:0 0 auto;
  transform:translateY(.12em);
}
.szref-cat__meta{display:flex;flex-direction:column;gap:.1rem;flex:0 0 auto;}
.szref-cat__kicker{
  font-family:var(--szref-script);
  font-size:clamp(1.15rem,2.4vw,1.6rem);
  color:var(--szref-terra);line-height:1;
  transform:rotate(-2deg) translateX(.2em);
}
.szref-cat__title{
  font-family:var(--szref-serif);
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:600;letter-spacing:.01em;line-height:1.05;
  color:var(--szref-ink);margin:0;
}
.szref-cat__rule{
  flex:1 1 auto;height:1px;align-self:center;
  margin-left:.4rem;margin-top:.6rem;
  background:linear-gradient(90deg,var(--szref-gold) 0%,var(--szref-gold-soft) 40%,transparent 100%);
}

/* ---------- Masonry rács ---------- */
.szref-masonry{
  column-count:3;
  column-gap:1.1rem;
}
@media(max-width:900px){ .szref-masonry{column-count:2;column-gap:.9rem;} }
@media(max-width:520px){ .szref-masonry{column-count:2;column-gap:.6rem;} }

.szref-item{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  margin:0 0 1.1rem;break-inside:avoid;-webkit-column-break-inside:avoid;
  position:relative;overflow:hidden;border-radius:14px;
  background:#eef1e8;line-height:0;
  box-shadow:0 6px 20px rgba(58,67,48,.12);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
@media(max-width:520px){ .szref-item{margin-bottom:.6rem;border-radius:10px;} }

.szref-item img{
  width:100%;height:auto;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease;
  filter:saturate(.96);
}
/* arany hajszálkeret + finom fény */
.szref-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--szref-gold);
  transition:box-shadow .45s ease;pointer-events:none;
}
.szref-item__glow{
  position:absolute;inset:auto -30% -60% -30%;height:60%;
  background:radial-gradient(ellipse at center,rgba(191,159,96,.55),transparent 70%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.szref-item:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(58,67,48,.24);}
.szref-item:hover img{transform:scale(1.07);filter:saturate(1.05);}
.szref-item:hover::after{box-shadow:inset 0 0 0 2px var(--szref-gold);}
.szref-item:hover .szref-item__glow{opacity:.6;}
.szref-item:focus-visible{outline:3px solid var(--szref-gold);outline-offset:3px;}

/* kis nagyító-ikon jelzés jobb alsó sarokban */
.szref-item::before{
  content:"";position:absolute;right:12px;bottom:12px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(251,248,241,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2333382c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transform:scale(.6);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.szref-item:hover::before{opacity:1;transform:scale(1);}

/* ---------- Lightbox ---------- */
.szref-lb{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,32,22,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:3.4rem 1rem;
  animation:szref-fade .25s ease;
}
.szref-lb[hidden]{display:none;}
@keyframes szref-fade{from{opacity:0}to{opacity:1}}
.szref-lb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:min(94vw,1120px);}
.szref-lb__img{
  max-width:100%;max-height:82vh;object-fit:contain;border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:szref-pop .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes szref-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.szref-lb__cap{
  font-family:var(--szref-serif);font-style:italic;
  font-size:1.05rem;color:var(--szref-gold-soft);text-align:center;
}
.szref-lb__close,.szref-lb__nav{
  position:absolute;background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(216,193,140,.35);cursor:pointer;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.szref-lb__close:hover,.szref-lb__nav:hover{background:var(--szref-gold);border-color:var(--szref-gold);transform:scale(1.06);}
.szref-lb__close{top:1.2rem;right:1.4rem;width:46px;height:46px;font-size:1.15rem;}
.szref-lb__nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2rem;line-height:1;}
.szref-lb__nav:hover{transform:translateY(-50%) scale(1.06);}
.szref-lb__prev{left:1.4rem;}
.szref-lb__next{right:1.4rem;}
@media(max-width:600px){
  .szref-lb{padding:2.2rem .5rem;}
  .szref-lb__nav{width:44px;height:44px;font-size:1.6rem;}
  .szref-lb__prev{left:.5rem;}.szref-lb__next{right:.5rem;}
  .szref-lb__close{top:.7rem;right:.7rem;}
}

/* Mozgáscsökkentés */
@media(prefers-reduced-motion:reduce){
  .szref.is-reveal .szref-cat{opacity:1;transform:none;transition:none;}
  .szref-item,.szref-item img{transition:none;}
}

/* ============================================================
   MINI KARUSSZEL — szolgáltatás-aloldalakon (mutatóba)
   ============================================================ */
.szref-car{
  --szref-gold:#bf9f60; --szref-gold-soft:#d8c18c;
  --szref-sage:#93a37d; --szref-sage-700:#6b7a56;
  --szref-ink:#33382c; --szref-ink-soft:#5d6253; --szref-terra:#bd7e66;
  --szref-serif:'Cormorant Garamond',Georgia,serif;
  --szref-sans:'Jost',system-ui,sans-serif;
  --szref-script:'Pinyon Script',cursive;
  margin:3rem 0 1rem;
}
.szref-car__head{text-align:center;margin:0 0 1.4rem;}
.szref-car__kicker{
  font-family:var(--szref-script);font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--szref-terra);display:block;line-height:1;
}
.szref-car__title{
  font-family:var(--szref-serif);font-size:clamp(1.5rem,3.4vw,2.2rem);
  font-weight:500;color:var(--szref-ink);margin:.15rem 0 0;line-height:1.1;
}

.szref-car__wrap{position:relative;}
.szref-car__track{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.5rem .2rem 1.1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.szref-car__track::-webkit-scrollbar{display:none;}
.szref-car__track:focus-visible{outline:2px solid var(--szref-gold);outline-offset:3px;border-radius:14px;}

/* a slide újrahasznosítja a .szref-item stílusait, csak fix méret + arány kell */
.szref-car__slide{
  flex:0 0 auto;width:clamp(200px,60vw,262px);margin:0;
  aspect-ratio:4/5;scroll-snap-align:start;
  break-inside:auto;-webkit-column-break-inside:auto;
}
.szref-car__slide img{width:100%;height:100%;object-fit:cover;}

/* lapozó nyilak */
.szref-car__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(148,163,125,.4);
  background:rgba(251,248,241,.95);color:var(--szref-sage-700);
  font-size:1.7rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -12px rgba(58,67,48,.55);
  transition:background .25s,color .25s,border-color .25s,transform .25s,opacity .25s;
}
.szref-car__nav:hover{background:var(--szref-gold);border-color:var(--szref-gold);color:#fff;transform:translateY(-50%) scale(1.06);}
.szref-car__prev{left:-6px;}
.szref-car__next{right:-6px;}
.szref-car__nav[hidden]{display:none;}

.szref-car__cta{text-align:center;margin-top:.3rem;}

@media(max-width:560px){
  .szref-car__nav{width:40px;height:40px;font-size:1.45rem;}
  .szref-car__prev{left:-2px;}.szref-car__next{right:-2px;}
}
/* nyíl letiltott állapota a szélen (nem rejtjük, csak halványítjuk) */
.szref-car__nav.is-off{opacity:.32;pointer-events:none;}