/* =====================================================================
   Sweet 2 — home.css  (REDIZAJN: struktura i ritam po spokeandweal.com)
   hero · marquee · misija+statistika · principi · iza Sweet 2 · usluge (karusel)
   · transformacije (press kartice) · cenovnik · zakažite + kako do nas
   ===================================================================== */

.rowhead { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(48px, 6vw, 88px); }
.rowhead__l { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); line-height: 1.5; white-space: nowrap; }
.rowhead__r { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; text-align: right; }
.rowhead .rule { flex: 1; }
@media (max-width: 599.98px) { .rowhead__r { display: none; } }

/* ---------- 1. HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; background: #2b211b; color: var(--ivory);
  min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding-block: calc(var(--header-h) + 24px) 120px;
}
.hero-video { z-index: -2; background: #2b211b; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 16, 16, 0.60); }
.hero__inner { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 30px); }
.hero__title { max-width: 13ch; color: #fff; font-size: clamp(2.75rem, 1rem + 5.6vw, 5.75rem); line-height: 1.04; }
.hero__title em { color: var(--gold-dark); }
.hero__sub { max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); line-height: 1.7; color: rgba(245, 239, 230, 0.85); }
.hero .btn { margin-top: 8px; }
.hero__follow { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px var(--gutter) calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(201, 162, 126, 0.35); text-align: center; }
.hero__follow .label { display: inline; color: rgba(245, 239, 230, 0.8); letter-spacing: 0.24em; }
.hero__follow a { color: var(--gold-dark); text-decoration: none; }
.hero__follow a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 899.98px) { .hero { padding-bottom: calc(110px + var(--bar-h)); } .hero__follow { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: 20px; } }

/* ---------- 2. MARQUEE ---------- */
.marquee { border-block: 1px solid rgba(46, 31, 24, 0.12); padding-block: clamp(26px, 3.4vw, 44px); }
.marquee__item { font-size: clamp(1.625rem, 1rem + 2vw, 2.75rem); }

/* ---------- 3. MISIJA + STATISTIKA ---------- */
.mission { padding-block: clamp(80px, 9vw, 140px); }
.mission__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 32px; align-items: end; margin-bottom: clamp(56px, 7vw, 104px); }
.mission__title { grid-column: 1 / 11; font-size: clamp(2.125rem, 1rem + 3.4vw, 4rem); line-height: 1.08; }
@media (max-width: 899.98px) { .mission__title { grid-column: 1 / -1; } }
.mission .stat__fig[data-count-to] { font-variant-numeric: lining-nums tabular-nums; }
.mission .stats { margin-top: clamp(32px, 4vw, 56px); }
.mission .stat { padding-block: 0; }
.stat__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); margin-top: 18px; }
.mission .stat__fig { font-size: clamp(3.25rem, 1rem + 5vw, 5.5rem); }
@media (max-width: 599.98px) { .mission .stat, .mission .stat:first-child { padding: 24px 0; } .mission .stat:first-child { padding-top: 0; } }

/* ---------- 3b. PRINCIPI ---------- */
.principles { padding-block: clamp(80px, 9vw, 130px); }
.principles .rowhead__l { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; font-family: var(--font-ui); }

/* ---------- 4. IZA SWEET 2 ---------- */
.founder { padding-block: clamp(72px, 9vw, 136px); }
.founder__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 48px; align-items: center; }
.founder__portrait { grid-column: 1 / 6; margin-left: clamp(0px, 2vw, 32px); }
.founder__text { grid-column: 7 / 13; display: grid; gap: 22px; justify-items: start; }
.founder__name { font-size: clamp(2.5rem, 1rem + 4.2vw, 4.75rem); line-height: 1.04; }
.founder__name::after { content: "."; font-style: italic; color: var(--accent-display); }
.founder__name em:empty { display: none; }
.founder__bio { color: var(--fg-soft); max-width: 48ch; }
.quote p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; }
@media (max-width: 899.98px) {
  .founder__portrait, .founder__text { grid-column: 1 / -1; }
  .founder__portrait { margin: 0 auto; width: min(100%, 420px); }
  .founder__text .btn { width: 100%; }
}

/* ---------- 5. USLUGE (karusel) ---------- */
.services { padding-block: clamp(80px, 9vw, 136px); }
.services__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.services__head > div { grid-column: 1 / 8; display: grid; gap: 18px; }
@media (max-width: 899.98px) { .services__head > div { grid-column: 1 / -1; } }
.services .carousel__slide { flex-basis: min(82vw, 400px); }
.services .svc-card__head { margin-top: 20px; }

/* ---------- 6. TRANSFORMACIJE ---------- */
.press { padding-block: clamp(80px, 9vw, 136px); }
.press__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.press__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.press__more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.press .photo-slot.ba-before { background: #d3bfaa; }
.press .photo-slot.ba-after { background: #e3d3c1; }
@media (max-width: 899.98px) { .press__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- 7. CENOVNIK ---------- */
.price { padding-block: clamp(80px, 9vw, 136px); }
.price__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 24px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.price__head > div { grid-column: 1 / 8; display: grid; gap: 18px; }
.price__lead { grid-column: 9 / 13; color: var(--fg-soft); max-width: 38ch; }
@media (max-width: 899.98px) { .price__head > div, .price__lead { grid-column: 1 / -1; } }
.price__list { border-top: 1px solid var(--line); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding-block: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--line); text-decoration: none; transition: padding var(--t-med) var(--ease-out), background-color var(--t-med) ease; }
.prow__name { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); font-weight: 300; letter-spacing: -0.01em; }
.prow__price { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); text-align: right; }
.prow__go { font-size: 1.125rem; color: var(--accent); transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) { .prow:hover { padding-inline: 12px; background: rgba(46, 31, 24, 0.04); } .prow:hover .prow__go { transform: translate(3px, -3px); } }
.prow:active { background: rgba(46, 31, 24, 0.05); }
.price__cta { margin-top: clamp(36px, 5vw, 64px); }
@media (max-width: 599.98px) { .prow { grid-template-columns: 1fr auto; row-gap: 6px; } .prow__price { grid-column: 1; text-align: left; grid-row: 2; } .prow__go { grid-row: 1 / span 2; grid-column: 2; } .price__cta .btn { width: 100%; } }

/* ---------- 8. ZAKAŽITE + LOKACIJA ---------- */
.book { padding-block: clamp(88px, 10vw, 150px) clamp(64px, 8vw, 110px); }
.book__inner { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); }
.book__inner h2 { max-width: 14ch; }
.book__text { max-width: 52ch; color: var(--fg-soft); }
.book__btns { justify-content: center; margin-top: 8px; }
@media (max-width: 599.98px) { .book__btns { flex-direction: column; align-self: stretch; } .book__btns .btn { width: 100%; } }
.loc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: clamp(56px, 7vw, 96px) auto 0; padding-top: 48px; border-top: 1px solid var(--line); text-align: center; }
.loc__col { display: grid; gap: 14px; align-content: start; padding: 0 clamp(14px, 2.4vw, 36px); }
.loc__col + .loc__col { border-left: 1px solid var(--line); }
.loc__col p { color: var(--fg-soft); }
.loc__col a { text-underline-offset: 5px; }
@media (max-width: 699.98px) { .loc { grid-template-columns: 1fr; gap: 36px; } .loc__col + .loc__col { border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; } }

/* ---------- 8b. KAKO DO NAS ---------- */
.how { padding-block: clamp(80px, 9vw, 136px); }
.how__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 24px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.how__head > div { grid-column: 1 / 8; display: grid; gap: 18px; }
.how__q { grid-column: 9 / 13; color: var(--fg-soft); max-width: 36ch; }
@media (max-width: 899.98px) { .how__head > div, .how__q { grid-column: 1 / -1; } }
.how__map { position: relative; aspect-ratio: 21 / 9; background: var(--nude); border-radius: var(--r-l); overflow: hidden; }
.how__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.how__open { margin-top: 24px; }
.how__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: 48px; align-items: start; margin-top: clamp(56px, 7vw, 104px); }
.how__guide { grid-column: 1 / 8; display: grid; gap: 0; }
.how__guide li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 28px; align-items: baseline; padding-block: 0 clamp(24px, 3vw, 36px); }
.how__guide li .rule { grid-column: 1 / -1; margin-bottom: clamp(20px, 2.4vw, 30px); }
.how__guide h3 { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight: 300; overflow-wrap: break-word; hyphens: auto; }
.how__guide p { color: var(--fg-soft); }
.how__door { grid-column: 9 / 13; }
.how__door figcaption { margin-top: 16px; font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.3; max-width: 24ch; }
@media (max-width: 899.98px) { .how__guide, .how__door { grid-column: 1 / -1; } .how__door { max-width: 420px; } }
@media (max-width: 767.98px) { .how__map { aspect-ratio: 4 / 5; } .how__open .btn { width: 100%; } .how__guide li { grid-template-columns: 1fr; } .how__door { width: 82%; } }

/* tablet/telefon: press kartice niže da slot ne bude prazan stub */
@media (max-width: 899.98px) { .press .ba, .press .ba .photo-slot { --ratio: 4 / 3 !important; } }

/* hero: krem pill uvek, svetlija labela, kratka labela na telefonu */
.hero .btn { --btn-bg: var(--ivory); --btn-fg: var(--night); }
.hero .btn:hover { --btn-bg: #fff; }
.hero__label { color: #E6CDB1; }
.hl-short { display: none; }
@media (max-width: 599.98px) { .hl-long { display: none; } .hl-short { display: inline; } }
.founder__note { color: var(--fg-soft); margin-top: -8px; }
.founder__name em { margin-left: 0.25em; }