/* Galerija porok (page 2854) – design: Galerija-Porok.dc.html. Values are the design's inline styles.
   html.fla-gal-js    set by the inline script in the template: photos 7+ collapse, "Pokaži vse" buttons appear
   html.fla-gal-anim  same script, never with prefers-reduced-motion: the hidden initial states of the Motion
                      animations. Removed again when the library or the page script does not load.
   Without either class (no JS) every photo and every text is visible. */

.fla-gal { overflow-anchor: none; }
.fla-gal p { margin: 0; }

/* ---------- hero ---------- */
.fla-gal-hero { position: relative; height: 100vh; min-height: 620px; max-height: 1400px; /* max: renderers that stretch the viewport to the page height */ background: #F2EDE9; overflow: hidden; }
.fla-gal-hero__frame { position: absolute; inset: 0; overflow: hidden; background: #4F4540; }
.fla-gal-hero__img { position: absolute; inset: -8% 0; will-change: transform; }
.fla-gal .fla-gal-hero__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.fla-gal-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,24,21,.45), rgba(30,24,21,0) 25%, rgba(30,24,21,0) 45%, rgba(30,24,21,.72)); }
.fla-gal-hero__text { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px) clamp(40px,7vh,80px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; color: #F7F3F0; }
.fla-gal-hero__head { display: flex; flex-direction: column; gap: 22px; }
.fla-gal-hero__eyebrow { font-size: 12px; line-height: normal; letter-spacing: .3em; text-transform: uppercase; }
.fla-gal .fla-gal-h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(56px,9vw,150px); line-height: .92; letter-spacing: -.02em; color: inherit; }
.fla-gal-line { display: block; overflow: hidden; padding-bottom: .08em; }
.fla-gal-line--2 { padding-left: .8em; font-style: italic; }
.fla-gal-letter { display: inline-block; transform-origin: left bottom; }
.fla-gal-hero__side { display: flex; flex-direction: column; gap: 24px; max-width: 360px; }
.fla-gal-hero__lead { font-size: 15px; line-height: 1.7; color: #EDE5DF; text-wrap: pretty; }
.fla-gal-hero__cta { display: flex; gap: 10px; }
.fla-gal-cue { position: absolute; left: 50%; bottom: 22px; margin-left: -1px; width: 2px; height: 56px; overflow: hidden; background: rgba(247,243,240,.25); }
.fla-gal-cue__dot { width: 100%; height: 50%; background: #F7F3F0; }

/* ---------- buttons, links ---------- */
.fla-page .fla-gal-btn { display: flex; align-items: center; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.fla-page .fla-gal-btn--light,
.fla-page .fla-gal-btn--light:hover { height: 54px; padding: 0 28px; background: #F7F3F0; color: #3F3632; font-size: 12px; line-height: normal; letter-spacing: .16em; border-radius: 27px; }
.fla-page .fla-gal-btn--dark { height: 58px; padding: 0 40px; border-radius: 29px; background: #5E524C; color: #F7F3F0; gap: 12px; font-size: 13px; line-height: normal; letter-spacing: .18em; transition: background .3s; }
.fla-page .fla-gal-btn--dark:hover { background: #3F3632; color: #F7F3F0; }
.fla-page .fla-gal-link { color: #3F3632; text-decoration: underline; }
.fla-gal a:focus-visible,
.fla-gal button:focus-visible { outline: 2px solid #B8968A; outline-offset: 3px; }

/* ---------- intro ---------- */
.fla-gal-intro { position: relative; overflow: hidden; }
.fla-gal-intro__in { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(80px,11vw,150px) clamp(20px,4vw,56px) clamp(56px,7vw,96px); display: flex; flex-direction: column; gap: 28px; }
.fla-gal-intro__lead { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: clamp(30px,3.6vw,52px); line-height: 1.15; color: #3F3632; }
.fla-gal-intro__more { max-width: 620px; font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.fla-gal-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fla-page .fla-gal-chip { height: 44px; padding: 0 18px; border: 1px solid #C9BCB2; border-radius: 22px; display: flex; align-items: center; font-size: 13px; line-height: normal; color: #5E524C; transition: background .3s, color .3s, border-color .3s; white-space: nowrap; }
.fla-page .fla-gal-chip:hover { background: #5E524C; color: #F7F3F0; border-color: #5E524C; }

/* ---------- weddings ---------- */
.fla-gal-wedding { position: relative; background: #E9E1DB; overflow: hidden; }
.fla-gal-wedding--alt { background: #F2EDE9; }
.fla-gal-bar { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #B8968A; transform-origin: left; transform: scaleX(0); }
.fla-gal-wedding__in { max-width: 1440px; margin: 0 auto; padding: clamp(64px,9vw,120px) clamp(20px,4vw,56px); display: flex; flex-direction: column; gap: clamp(32px,4vw,56px); }
.fla-gal-wedding__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 40px; align-items: end; }
.fla-gal-wedding__title { display: flex; flex-direction: column; gap: 14px; }
.fla-gal-wedding__eyebrow { font-size: 12px; line-height: normal; letter-spacing: .3em; text-transform: uppercase; color: #8C7D74; }
.fla-gal .fla-gal-h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(44px,5.4vw,84px); line-height: 1; color: #3F3632; overflow: hidden; padding-bottom: .08em; }
.fla-gal .fla-gal-h2--cta { font-size: clamp(44px,5.6vw,92px); }
.fla-gal-h2 > span { display: inline-block; }
.fla-gal-wedding__couple { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic; font-size: 24px; line-height: normal; color: #8C7D74; }
.fla-gal-wedding__photo { margin-top: 8px; font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: .18em; text-transform: uppercase; color: #8C7D74; }
.fla-gal-wedding__text { font-size: 15px; line-height: 1.8; max-width: 500px; text-wrap: pretty; }

/* Photos. Server order = photo order. Before/without JS: CSS multi-column masonry; the script then moves the
   tiles into .fla-gal-col wrappers (photo i -> column i % cols), which is the design's distribution. */
.fla-gal-grid { --fla-gal-gap: clamp(10px,1.2vw,18px); columns: 2; column-gap: var(--fla-gal-gap); }
@media (min-width: 700px) { .fla-gal-grid { columns: 3; } }
.fla-gal-tile { display: block; width: 100%; margin: 0 0 var(--fla-gal-gap); padding: 0; border: 0; background: transparent; break-inside: avoid; cursor: zoom-in; }
.fla-gal-clip { display: block; overflow: hidden; background: #E2D8D1; }
.fla-gal .fla-gal-clip img { width: 100%; height: auto; display: block; transition: filter .6s; }
.fla-gal-tile:hover img { filter: brightness(1.06); }
.fla-gal-grid.is-cols { columns: auto; display: grid; grid-template-columns: repeat(var(--fla-gal-cols, 3), minmax(0, 1fr)); gap: var(--fla-gal-gap); align-items: start; }
.fla-gal-col { display: flex; flex-direction: column; gap: var(--fla-gal-gap); min-width: 0; will-change: transform; }
.fla-gal-grid.is-cols .fla-gal-tile { margin: 0; }
html.fla-gal-js:not(.fla-gal-expand) .fla-gal-wedding:not(.is-open) .fla-gal-tile--extra { display: none; }
html.fla-gal-has-cursor .fla-gal-tile { cursor: none; }

.fla-gal-more { align-self: center; height: 56px; padding: 0 32px; border: 1px solid #5E524C; border-radius: 28px; background: transparent; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #3F3632; cursor: pointer; transition: background .4s, color .4s; }
.fla-gal-more:hover { background: #5E524C; color: #F7F3F0; }
.fla-gal-more[hidden] { display: none; }

/* ---------- closing CTA ---------- */
.fla-gal-cta { position: relative; overflow: hidden; }
.fla-gal-cta__in { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(90px,12vw,170px) clamp(20px,4vw,56px); display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.fla-gal-cta__text { max-width: 560px; font-size: 15px; line-height: 1.8; text-wrap: pretty; }

/* ---------- initial states of the animations (JS + motion allowed only) ---------- */
html.fla-gal-anim .fla-gal-line:not(.is-split) { visibility: hidden; }
html.fla-gal-anim .fla-gal-letter { transform: translateY(115%) rotate(8deg); }
html.fla-gal-anim .fla-gal-hero__img { transform: scale(1.35); filter: blur(14px); }
/* the hero lead is the LCP element: never hidden while waiting for the library */
html.fla-gal-anim .fla-gal [data-m="fade"]:not(.fla-gal-hero__lead),
html.fla-gal-anim .fla-gal [data-m="up"],
html.fla-gal-anim .fla-gal [data-m="chip"] { opacity: 0; }
html.fla-gal-anim .fla-gal [data-m="rise"] { transform: translateY(110%); }
html.fla-gal-anim .fla-gal-clip { clip-path: inset(100% 0 0 0); }
html.fla-gal-anim .fla-gal-clip img { transform: scale(1.35); }

/* ---------- custom cursor (built by the script, fine pointers only) ---------- */
.fla-gal-cursor { position: fixed; left: 0; top: 0; z-index: 35; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: #F7F3F0; color: #3F3632; display: flex; align-items: center; justify-content: center; font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; transform: scale(0); box-shadow: 0 10px 30px rgba(40,30,25,.18); }

/* ---------- lightbox (built by the script) ---------- */
.fla-gal-lb { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 72px clamp(12px,6vw,96px); font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; }
.fla-gal-lb[hidden] { display: none; }
.fla-gal-lb__bg { position: absolute; inset: 0; background: rgba(30,24,21,.95); opacity: 0; }
.fla-gal-lb .fla-gal-lb__img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transform-origin: 0 0; }
.fla-gal-lb__bar { position: absolute; left: 0; right: 0; top: 0; height: 64px; padding: 0 clamp(16px,3vw,32px); display: flex; align-items: center; justify-content: space-between; color: #EDE5DF; font-size: 12px; line-height: normal; letter-spacing: .16em; text-transform: uppercase; opacity: 0; }
.fla-gal-lb__close { width: 48px; height: 48px; padding: 0; border: none; background: transparent; color: #F7F3F0; font-size: 22px; cursor: pointer; font-family: inherit; }
.fla-gal-lb__nav { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(247,243,240,.5); border-radius: 50%; background: transparent; color: #F7F3F0; font-size: 20px; cursor: pointer; font-family: inherit; opacity: 0; }
.fla-gal-lb__nav--prev { left: clamp(4px,2vw,24px); }
.fla-gal-lb__nav--next { right: clamp(4px,2vw,24px); }
.fla-gal-lb button:focus-visible { outline: 2px solid #F7F3F0; outline-offset: 3px; }
/* no Motion library (reduced motion, load failure): no fades, everything simply there */
.fla-gal-lb.is-static .fla-gal-lb__bg,
.fla-gal-lb.is-static .fla-gal-lb__bar,
.fla-gal-lb.is-static .fla-gal-lb__nav { opacity: 1; }