/* Vloga floristke (/vloga-floristke/) – values taken 1:1 from the design file Vloga-Floristke.dc.html.
   The layout wraps through flex-wrap / auto-fit grids exactly like the design; there are no breakpoints. */

/* ---------- shared ---------- */
.fla-vf img.fla-vf-img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.fla-vf-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.fla-vf-mask--a { padding-bottom: .06em; }
.fla-vf-mask > * { display: block; }
.fla-vf p { text-wrap: pretty; }
.fla-vf a:focus-visible { outline: 2px solid var(--fla-accent); outline-offset: 3px; }

.fla-vf-h2 { font-family: var(--fla-serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 92px); line-height: .96; color: #3F3632; }
.fla-vf-h2--light { color: inherit; }
.fla-vf-h2__em { padding-left: .6em; }

.fla-vf-blob { position: absolute; pointer-events: none; }
.fla-vf-blob > div { width: 100%; height: 100%; border-radius: 50%; }
.fla-vf-blob--role { left: -160px; top: 80px; width: 500px; height: 500px; }
.fla-vf-blob--role > div { background: radial-gradient(circle, rgba(222, 196, 184, .8), rgba(222, 196, 184, 0) 68%); filter: blur(8px); }
.fla-vf-blob--flowers { right: -160px; top: -60px; width: 520px; height: 520px; }
.fla-vf-blob--flowers > div { background: radial-gradient(circle, rgba(201, 167, 154, .32), rgba(201, 167, 154, 0) 68%); filter: blur(10px); }

/* ---------- hero ---------- */
.fla-vf-hero { position: relative; height: 100vh; min-height: 620px; max-height: 1400px; /* cap: crawlers render with a page-tall viewport */ background: #4F4540; overflow: hidden; }
.fla-vf-hero__media { position: absolute; inset: 0; }
.fla-vf-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-vf-hero__inner { 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-vf-hero__head { display: flex; flex-direction: column; gap: 22px; }
.fla-vf-hero__eyebrow { font-size: 12px; line-height: normal; letter-spacing: .3em; text-transform: uppercase; }
.fla-vf-hero__title { font-family: var(--fla-serif); font-weight: 400; font-size: clamp(56px, 9vw, 150px); line-height: .92; letter-spacing: -.02em; }
.fla-vf-hero__em { padding-left: .8em; }
.fla-vf-hero__side { display: flex; flex-direction: column; gap: 24px; max-width: 360px; }
.fla-vf-hero__lead { font-size: 15px; line-height: 1.7; color: #EDE5DF; }
.fla-vf-hero__cta { display: flex; gap: 10px; }
.fla-vf a.fla-vf-btn-light,
.fla-vf a.fla-vf-btn-light:hover { color: #3F3632; }
.fla-vf-btn-light { height: 54px; padding: 0 28px; background: #F7F3F0; display: flex; align-items: center; font-size: 12px; font-weight: 500; line-height: normal; letter-spacing: .16em; text-transform: uppercase; border-radius: 27px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.fla-vf-btn-light:hover { transform: scale(1.04); }

/* ---------- 01–03 ---------- */
.fla-vf-role { position: relative; overflow: hidden; }
.fla-vf-role__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
.fla-vf-row { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: clamp(40px, 7vw, 120px); }
.fla-vf-row--rev { flex-direction: row-reverse; }
.fla-vf-row__media { flex: 1 1 340px; max-width: 520px; }
.fla-vf-row__frame { overflow: hidden; aspect-ratio: 683 / 1024; }
.fla-vf-row__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 22px; }
.fla-vf-row__num { font-family: var(--fla-serif); font-style: italic; font-size: 22px; line-height: normal; color: #A8968A; }
.fla-vf-row__title { font-family: var(--fla-serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; color: #3F3632; }
.fla-vf-row__p { font-size: 15px; line-height: 1.8; max-width: 500px; }

/* ---------- Kaj vključuje poročna floristika ---------- */
.fla-vf-incl { background: #E9E1DB; overflow: hidden; }
.fla-vf-incl__inner { max-width: 1440px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.fla-vf-incl__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: end; }
.fla-vf-incl__intro { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.fla-vf-incl__intro p { font-size: 15px; line-height: 1.8; }
.fla-vf-incl__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.fla-vf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fla-vf-pair__frame { overflow: hidden; aspect-ratio: 2 / 3; }
.fla-vf-pair__frame--off { margin-top: 60px; }
.fla-vf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 40px; }
.fla-vf-list__line { height: 1px; background: #CDBFB5; transform-origin: left; }
.fla-vf-list__label { display: flex; align-items: center; gap: 14px; padding: 15px 0; font-family: var(--fla-serif); font-size: 22px; line-height: normal; color: #3F3632; }

/* ---------- Izbira cvetja ---------- */
.fla-vf-flowers { position: relative; background: #4F4540; color: #F3EEEA; overflow: hidden; }
.fla-vf-flowers__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) clamp(20px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(40px, 6vw, 100px); align-items: center; }
.fla-vf-flowers__text { display: flex; flex-direction: column; gap: 24px; }
.fla-vf-flowers__p { font-size: 15px; line-height: 1.8; color: #E6DCD5; max-width: 520px; }
.fla-vf-moods { display: flex; flex-direction: column; border-top: 1px solid #655953; margin-top: 8px; }
.fla-vf-mood { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid #655953; }
.fla-vf-mood__sw { display: flex; }
.fla-vf-mood__sw span { width: 30px; height: 30px; border-radius: 50%; margin-right: -8px; box-shadow: 0 0 0 2px #4F4540; }
.fla-vf-mood__t { font-size: 14px; line-height: 1.65; color: #E6DCD5; padding-left: 8px; }
.fla-vf-flowers__quote { font-family: var(--fla-serif); font-style: italic; font-size: 22px; line-height: 1.45; max-width: 520px; }
.fla-vf-trio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fla-vf-trio__frame { overflow: hidden; }
.fla-vf-trio__frame--tall { grid-row: span 2; aspect-ratio: 9 / 16; }
.fla-vf-trio__frame--sq { aspect-ratio: 1; }
.fla-vf-trio__frame--34 { aspect-ratio: 3 / 4; }

/* ---------- Želim ponudbo ---------- */
.fla-vf-offer { position: relative; overflow: hidden; }
.fla-vf-offer__inner { 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-vf-offer__title { font-family: var(--fla-serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 92px); line-height: 1; color: #3F3632; }
.fla-vf-offer__p { max-width: 560px; font-size: 15px; line-height: 1.8; }
.fla-vf a.fla-vf-mail,
.fla-vf a.fla-vf-mail:hover { color: #3F3632; text-decoration: underline; }
.fla-vf a.fla-vf-btn-dark,
.fla-vf a.fla-vf-btn-dark:hover { color: #F7F3F0; }
.fla-vf-btn-dark { height: 58px; padding: 0 40px; border-radius: 29px; background: #5E524C; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; line-height: normal; letter-spacing: .18em; text-transform: uppercase; transition: background .3s; }
.fla-vf-btn-dark:hover { background: #3F3632; }