/* Dominika — refine pass 2026-10-05
   Sharper section tints, flush half-bleeds, Dela stage fixes,
   full-viewport subpage heroes, mobile one-screen, CMS design hooks */

/* ——— Sharper section background transitions ——— */
body {
  background-color: var(--page-bg, var(--cream));
  transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter,
.page-hero-compact,
.bridge-cta,
.quote-band {
  transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Solid section fills so cream ↔ paper snaps cleanly */
.bg-cream { background-color: var(--cream) !important; }
.bg-paper { background-color: var(--paper) !important; }
.bg-deep { background-color: var(--cream-2) !important; }

.seam-gradient {
  height: 2.75rem !important;
  opacity: 1;
}

/* ——— Flush half-bleed photos (true edge-to-edge, no gaps) ——— */
/* Kill ALL section padding when a half-bleed is the direct layout */
section.split-flush,
.chapter.split-flush,
.page-hero-compact.split-flush,
.chapter:has(> .split-bleed),
section:has(> .split-bleed),
.page-hero-compact:has(> .split-bleed) {
  padding: 0 !important;
  padding-block: 0 !important;
  margin: 0 !important;
}

section.split-flush > .split-bleed,
.chapter.split-flush > .split-bleed,
.chapter:has(> .split-bleed) > .split-bleed,
.page-hero-compact > .split-bleed,
section > .split-bleed {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
  min-height: inherit;
}

/* Bleed is the positioning context for fill layers */
.split-bleed {
  position: relative !important;
}

/* Media column STAYS in grid flow (never position:absolute on the grid item —
   that was pulling <button class="split-media"> out of the cell and leaving
   a ~70px cream band above/below the photo). */
.split-bleed .split-media,
.split-bleed > button.split-media,
button.split-media {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  /* Do NOT set height:auto — that kills grid stretch and leaves gaps */
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
  grid-row: 1 / -1;
}

/* Nested photo-frame / picture / img paint the entire media cell */
.split-bleed .split-media > .photo-frame,
.split-bleed .split-media > button.photo-frame,
.split-bleed .split-media > picture,
.split-bleed > button.split-media > picture,
button.split-media > picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
}

.split-bleed .split-media img,
.split-bleed .split-media .photo-frame img,
.split-bleed .split-media picture img,
.split-bleed > button.split-media img,
button.split-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Kill ALL soft-edge masks on half-bleeds — transparent mask corners
   read as cream padding above/below the photo */
.split-bleed .split-media.photo-soft-edge,
.split-bleed .split-media.photo-soft-edge-left,
.split-bleed .split-media.photo-soft-edge-right,
.split-bleed .split-media.photo-soft-edge-y,
.split-bleed .split-media.photo-soft-edge-top,
.split-bleed .split-media.photo-soft-edge-bottom,
.photo-soft-edge-y,
.photo-soft-edge-top,
.photo-soft-edge-bottom,
.photo-soft-edge-left,
.photo-soft-edge-right,
.photo-soft-edge {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Keep side blend, but keep it narrow so it doesn't eat the frame */
.split-bleed .split-media.photo-blend::after,
.split-bleed .split-media.has-soft-edge::after {
  background-size: 10% 100% !important;
}
.split-bleed:not(.flip) .split-media.photo-blend::after {
  background: linear-gradient(to right, var(--cream), transparent 10%) !important;
}
.split-bleed.flip .split-media.photo-blend::after {
  background: linear-gradient(to left, var(--cream), transparent 10%) !important;
}
.bg-paper .split-bleed:not(.flip) .split-media.photo-blend::after {
  background: linear-gradient(to right, var(--paper), transparent 10%) !important;
}
.bg-paper .split-bleed.flip .split-media.photo-blend::after {
  background: linear-gradient(to left, var(--paper), transparent 10%) !important;
}

/* Glow must not invent vertical inset gaps */
.split-media.has-glow::before {
  inset: 12% -10% 12% -10% !important;
}

/* Sodelovanje photo edge glow — very soft wash */
#pricakovanja .split-media.has-glow::before {
  filter: blur(44px);
  inset: 18% -4% 18% -4% !important;
}

#pricakovanja .split-media.has-glow.is-glow-in::before {
  opacity: 0.24;
  transform: scale(0.98);
}

@media (prefers-reduced-motion: no-preference) {
  #pricakovanja .split-media.has-glow.is-glow-in::before {
    animation: glow-pulse-soft 6.5s ease-in-out infinite alternate;
  }
}

@keyframes glow-pulse-soft {
  from { opacity: 0.18; filter: blur(40px); }
  to { opacity: 0.26; filter: blur(48px); }
}

/* Flush sections: bleed fills the section height edge-to-edge */
@media (min-width: 901px) {
  .chapter.split-flush > .split-bleed,
  .chapter:has(> .split-bleed) > .split-bleed,
  .page-hero-compact > .split-bleed {
    min-height: 100svh !important;
    height: 100% !important;
  }

  /* Override older polish min-height on nested frames that caused letterboxing */
  .split-bleed .split-media .photo-frame,
  .split-bleed .split-media button.photo-frame,
  .split-bleed .split-media picture {
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ——— Za koga → Storitve: slightly airier tops, tight handoff ——— */
#za-koga.chapter {
  padding-top: clamp(2.35rem, 5.5vh, 3.5rem) !important;
  padding-bottom: 0.85rem !important;
  min-height: 0 !important;
  height: auto !important;
}

#za-koga .section-head {
  margin-bottom: 0.85rem;
}

#za-koga .for-whom,
#za-koga .snap-row {
  margin-bottom: 0;
}

#za-koga .za-koga-cta {
  margin-top: 1.15rem;
  padding-bottom: clamp(1.35rem, 3.2vh, 2.1rem);
}

#storitve-preview.chapter {
  padding-top: 2.85rem !important;
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem) !important;
  min-height: 0 !important;
  height: auto !important;
  border-top: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line) 55%, transparent);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cream) 65%, var(--paper)) 0,
    var(--paper) 2.1rem
  );
  background-color: var(--paper) !important;
}

#storitve-preview .section-head {
  margin-bottom: 0.75rem;
}

#storitve-preview .section-head .lede {
  margin-bottom: 0;
}

#storitve-preview .storitve-board {
  margin-top: 1.1rem !important;
}

#storitve-preview .storitve-card {
  padding-top: clamp(1.65rem, 3.2vw, 2.35rem) !important;
}

#za-koga + #storitve-preview {
  margin-top: 0 !important;
}

/* ——— Subpage heroes: full viewport on desktop ——— */
@media (min-width: 901px) {
  .page-hero-compact {
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
  }

  .page-hero-compact > .split-bleed {
    flex: 1 1 auto;
    min-height: 100% !important;
    height: 100% !important;
  }

  .page-hero-compact .split-copy {
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4.5vw, 3.75rem) !important;
  }

  /* Lead text under title needs breathing room */
  .page-hero-compact .lede,
  .page-hero-compact h1 + .lede,
  .page-hero-compact h1 + p {
    margin-top: 1.55rem !important;
    padding-top: 0.35rem;
  }

  .chapter.one-screen:not(.split-flush):not(:has(> .split-bleed)) {
    min-height: 100svh;
  }

  /* Split-flush chapters are exactly one screen, zero chrome padding */
  .chapter.split-flush.one-screen,
  .chapter.one-screen:has(> .split-bleed) {
    min-height: 100svh !important;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .chapter.split-flush.one-screen > .split-bleed,
  .chapter.one-screen:has(> .split-bleed) > .split-bleed {
    flex: 1 1 auto;
  }
}

/* ——— Dela / work stage: frame + arrows hug together ——— */
.work-stage-framed {
  display: block !important;
  width: 100%;
}

.work-stage-framed .work-nav,
.work-stage-framed .work-nav-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}

.work-stage-shell {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.65rem !important;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: 0;
  grid-template-columns: none !important;
}

.work-stage-shell > .work-panel,
.work-stage-shell > article {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.work-side-btn {
  flex: 0 0 auto;
  width: 2.85rem !important;
  height: 2.85rem !important;
  margin: 0 !important;
  z-index: 6;
  pointer-events: auto !important;
  cursor: pointer;
}

/* Panel wraps media + controls; only the photo media is height-capped */
.work-stage-framed .work-panel.work-frame,
.work-stage-home.work-stage-framed .work-panel.work-frame,
.work-stage-shell > .work-panel.work-frame {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.work-stage-framed .work-panel-media,
.work-stage-home .work-panel-media {
  position: relative;
  width: 100%;
  height: min(54vh, 30rem) !important;
  max-height: min(54vh, 30rem) !important;
  min-height: 16rem !important;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #120806;
  box-shadow:
    0 0 0 1px var(--line),
    0 0 60px var(--glow),
    0 22px 50px rgba(20, 7, 6, 0.18);
}

.work-stage-framed .work-stage-photo,
.work-stage-home .work-stage-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.work-stage-framed .work-stage-photo img,
.work-stage-home .work-stage-photo img,
.work-stage-framed .work-panel-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 28%;
  transform: none !important;
  image-orientation: from-image;
}

/* Caption banner must stay absolute overlay (glow rule was forcing relative) */
.work-frame.has-glow > .work-caption-banner,
.work-frame > .work-caption-banner,
.work-panel-media > .work-caption-banner,
.work-caption-banner {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.work-caption-banner .tag,
.work-caption-banner h3,
.work-caption-banner p {
  pointer-events: none;
}

/* Readable pagination dots on cream/paper */
.work-dot {
  width: 0.62rem !important;
  height: 0.62rem !important;
  background: color-mix(in srgb, var(--ink) 42%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  opacity: 1 !important;
}

.work-dot.is-active {
  background: var(--cta, var(--terracotta)) !important;
  border-color: var(--cta, var(--terracotta)) !important;
  transform: scale(1.2);
}

.work-stage-framed .work-stage-controls {
  justify-content: center;
  margin-top: 0.75rem;
}

/* Dela subpage: stop weird stretch */
.chapter-tight:has(.work-stage-framed) {
  padding-block: clamp(2rem, 5vh, 3.5rem) !important;
}

.dela-note { display: none !important; }

.filters-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 1.5rem;
  max-width: 42rem;
}

.filters-center .filter-btn {
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, white);
}

.filters-center .filter-btn.is-active {
  color: #fff !important;
  background: var(--cta, var(--terracotta)) !important;
  border-color: var(--cta, var(--terracotta)) !important;
}

/* Theme switcher + mobile layout live in css/mobile.css (loads last) */
@media (max-width: 900px) {
  .theme-switcher {
    display: none !important;
  }
}

/* ——— Light design polish (keep sharp corners, leave immersive hero alone) ——— */
.btn,
.nav-cta,
.filter-btn,
.work-side-btn,
.storitve-card,
.write-offer,
.dela-note,
.for-card,
.expect-step {
  border-radius: 0 !important;
}

.storitve-card,
.write-offer {
  box-shadow: var(--shadow-soft);
}

.moments-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

/* CMS design tokens applied via inline style on :root from cms-apply */
html.cms-design-ready body {
  font-family: var(--font-body);
}
html.cms-design-ready h1,
html.cms-design-ready h2,
html.cms-design-ready h3,
html.cms-design-ready .slogan,
html.cms-design-ready .brand {
  font-family: var(--font-display);
}


/* Final hammer: no grid gap, media paints full cell */
.split-bleed {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.chapter.split-flush,
.chapter:has(> .split-bleed),
.page-hero-compact:has(> .split-bleed),
.page-hero-compact.split-flush,
#zgodba.chapter,
#povezovanje.chapter,
#pricakovanja.chapter,
#moderiranje.chapter,
#pisanje.chapter {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* Fill layers only — never absolute the .split-media grid item itself */
.split-bleed .split-media > .photo-frame,
.split-bleed .split-media > button.photo-frame,
.split-bleed .split-media > picture,
.split-bleed > button.split-media > picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Never scale the photo column — scale left gaps that look like padding */
.split-bleed .split-media.reveal-scale,
.split-bleed .split-media.reveal,
.split-bleed button.split-media.reveal-scale {
  transform: none !important;
  opacity: 1 !important;
}
.split-bleed .split-media.reveal-scale:not(.is-in),
.split-bleed .split-media.reveal:not(.is-in) {
  /* still allow a soft fade-in without shrinking the frame */
  opacity: 0.001 !important;
  transform: none !important;
}
.split-bleed .split-media.reveal-scale.is-in,
.split-bleed .split-media.reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile split-flush / one-screen rules live in css/mobile.css */