/* Dominika — polish pass: immersive hero, A/C swap, full-height splits,
   framed works with side arrows + glow, mobile one-screen, scroll tint */

/* ——— Palette swap: former C (ember) is now default A ——— */
:root {
  --cream: #F5E6D6;
  --cream-2: #E8CFB8;
  --sand: #D9A577;
  --ink: #2E100C;
  --ink-soft: #7A3A30;
  --terracotta: #A60321;
  --apricot: #E08A72;
  --olive: #8C5C32;
  --cta: #A60321;
  --cta-hover: #7A0218;
  --paper: #FBF1E6;
  --line: rgba(46, 16, 12, 0.16);
  --shadow: 0 18px 48px rgba(46, 16, 12, 0.14);
  --shadow-soft: 0 8px 28px rgba(46, 16, 12, 0.09);
  --ink-deep: #1A0705;
  --ink-mid: #2E100C;
  --ink-lift: #5C1814;
  --surface-ink-a: rgba(166, 3, 33, 0.34);
  --surface-ink-b: rgba(224, 138, 114, 0.22);
  --on-ink: #F8EEE4;
  --on-ink-soft: rgba(248, 238, 228, 0.88);
  --on-ink-muted: rgba(248, 238, 228, 0.72);
  --chip-bg: #F3E4D4;
  --card-bg: #F7EADF;
  --word-card-bg: #F4E3D4;
  --expect-accent: color-mix(in srgb, var(--terracotta) 12%, var(--paper));
  --footer-bg: #140706;
  --footer-ink: rgba(248, 238, 228, 0.9);
  --footer-muted: rgba(248, 238, 228, 0.68);
  --footer-accent: #E08A72;
  --header-bg: color-mix(in srgb, var(--cream) 78%, transparent);
  --surface-border: color-mix(in srgb, var(--terracotta) 32%, transparent);
  --glow: rgba(166, 3, 33, 0.28);
  --glow-soft: rgba(224, 138, 114, 0.22);
  --scroll-tint: #F5E6D6;
  --section-pad-y: clamp(2.5rem, 6vh, 4.5rem);
}

/* Former A (warm cream) is now C */
html[data-theme="cream"] {
  --cream: #F3EBE0;
  --cream-2: #E8DCCE;
  --sand: #CDB0A1;
  --ink: #3D2116;
  --ink-soft: #6B4338;
  --terracotta: #D97B66;
  --apricot: #DBA367;
  --olive: #555934;
  --cta: #8C5B3E;
  --cta-hover: #6F4630;
  --paper: #FAF6F0;
  --line: rgba(61, 33, 22, 0.14);
  --shadow: 0 18px 48px rgba(61, 33, 22, 0.12);
  --shadow-soft: 0 8px 28px rgba(61, 33, 22, 0.08);
  --ink-deep: #2A160F;
  --ink-mid: #3D2116;
  --ink-lift: #5A3226;
  --surface-ink-a: rgba(217, 123, 102, 0.22);
  --surface-ink-b: rgba(219, 163, 103, 0.18);
  --on-ink: #F7F0E6;
  --on-ink-soft: rgba(247, 240, 230, 0.82);
  --on-ink-muted: rgba(247, 240, 230, 0.7);
  --chip-bg: color-mix(in srgb, var(--paper) 88%, white);
  --card-bg: color-mix(in srgb, var(--paper) 92%, white);
  --word-card-bg: color-mix(in srgb, var(--paper) 85%, var(--cream));
  --expect-accent: color-mix(in srgb, var(--terracotta) 12%, var(--paper));
  --footer-bg: #24140F;
  --footer-ink: rgba(247, 240, 230, 0.88);
  --footer-muted: rgba(247, 240, 230, 0.68);
  --footer-accent: #DBA367;
  --header-bg: color-mix(in srgb, var(--cream) 88%, transparent);
  --surface-border: color-mix(in srgb, var(--ink) 16%, transparent);
  --glow: rgba(217, 123, 102, 0.26);
  --glow-soft: rgba(219, 163, 103, 0.2);
  --scroll-tint: #F3EBE0;
}

html[data-theme="olive"] {
  --cream: #EFE6D6;
  --cream-2: #E0D3BE;
  --sand: #C4A07E;
  --ink: #3F3426;
  --ink-soft: #5C4C3A;
  --terracotta: #6B7A3A;
  --apricot: #A8895C;
  --olive: #555934;
  --cta: #555934;
  --cta-hover: #3E4224;
  --paper: #F6F1E7;
  --line: rgba(63, 52, 38, 0.14);
  --shadow: 0 22px 60px rgba(63, 52, 38, 0.12);
  --shadow-soft: 0 10px 36px rgba(63, 52, 38, 0.08);
  --ink-deep: #2A2618;
  --ink-mid: #3F3426;
  --ink-lift: #555934;
  --surface-ink-a: rgba(85, 89, 52, 0.28);
  --surface-ink-b: rgba(191, 155, 122, 0.2);
  --on-ink: #F3ECDF;
  --on-ink-soft: rgba(243, 236, 223, 0.84);
  --on-ink-muted: rgba(243, 236, 223, 0.72);
  --chip-bg: color-mix(in srgb, var(--paper) 88%, white);
  --card-bg: color-mix(in srgb, var(--paper) 92%, white);
  --word-card-bg: #F3EBDD;
  --expect-accent: color-mix(in srgb, var(--olive) 10%, var(--paper));
  --footer-bg: #1E1C14;
  --footer-ink: rgba(243, 236, 223, 0.9);
  --footer-muted: rgba(243, 236, 223, 0.68);
  --footer-accent: #A8895C;
  --header-bg: color-mix(in srgb, var(--cream) 82%, transparent);
  --surface-border: color-mix(in srgb, var(--olive) 28%, transparent);
  --glow: rgba(85, 89, 52, 0.28);
  --glow-soft: rgba(191, 155, 122, 0.22);
  --scroll-tint: #EFE6D6;
}

/* Kill legacy ember attr if present — treat as default A */
html[data-theme="ember"] {
  /* same as :root — no-op visual; JS migrates to default */
}

.theme-switcher button[data-theme="default"] { background: #A60321; }
.theme-switcher button[data-theme="olive"] { background: #B8BD8E; }
.theme-switcher button[data-theme="cream"] { background: #E8DCCE; }

/* ——— Sharp leftovers: maternity + contact note ——— */
.maternity-banner,
.maternity-banner.is-visible,
.contact-note,
.bg-ink .contact-note,
.form,
.form input,
.form select,
.form textarea,
.live-chip,
.cookie-bar,
.btn,
.nav-cta,
.filter-btn {
  border-radius: 0 !important;
}

.maternity-banner {
  background: rgba(20, 7, 6, 0.72) !important;
  color: var(--on-ink) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(248, 238, 228, 0.12);
}

/* ——— Immersive hero (full-bleed photo, chrome on photo) ——— */
.hero-immersive {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
}

.hero-immersive .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-immersive .hero-bg picture,
.hero-immersive .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias toward subject (after upper-sky crop) so face + body stay in frame */
  object-position: center 32%;
  display: block;
  transform: none;
  animation: none;
}

.hero-immersive .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(20, 7, 6, 0.78) 0%, rgba(20, 7, 6, 0.55) 42%, rgba(20, 7, 6, 0.22) 68%, rgba(20, 7, 6, 0.35) 100%),
    radial-gradient(ellipse 70% 55% at 78% 42%, rgba(166, 3, 33, 0.28), transparent 60%);
}

.hero-immersive .hero-chrome {
  position: relative;
  z-index: 3;
}

.hero-immersive .site-header {
  position: relative;
  background: transparent !important;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(248, 238, 228, 0.12);
  box-shadow: none !important;
}

.hero-immersive .site-header.is-scrolled {
  background: transparent !important;
}

.hero-immersive .brand-signature-img,
.hero-immersive .brand-signature-img.brand-on-dark {
  /* ink logos → light signature on photo */
  filter: brightness(0) invert(1) !important;
  opacity: 0.94;
  mix-blend-mode: normal;
}

.hero-immersive .nav a,
.hero-immersive .menu-toggle {
  color: #F8EEE4;
}

.hero-immersive .menu-toggle span {
  background: #F8EEE4;
}

.hero-immersive .nav-cta {
  background: rgba(248, 238, 228, 0.12);
  color: var(--on-ink) !important;
  border: 1px solid rgba(248, 238, 228, 0.35);
}

.hero-immersive .hero-stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 4vh, 3rem) var(--pad) clamp(2rem, 6vh, 4rem);
}

.hero-immersive .hero-copy {
  max-width: min(36rem, 92vw);
  animation: hero-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-immersive .live-chip {
  background: rgba(248, 238, 228, 0.07);
  color: rgba(248, 238, 228, 0.82);
  border: 1px solid rgba(248, 238, 228, 0.14);
  opacity: 0.88;
}

.hero-immersive .live-dot {
  opacity: 0.7;
}

.hero-immersive .slogan {
  color: #F8EEE4 !important;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
}

.hero-immersive .slogan em {
  color: var(--apricot);
  font-style: italic;
}

.hero-immersive .lede {
  color: rgba(248, 238, 228, 0.88) !important;
  max-width: 32rem;
}

.hero-immersive .btn-primary {
  background: var(--cta);
  color: #fff;
  border-color: var(--cta);
}

.hero-immersive .btn-ghost {
  color: #F8EEE4;
  border-color: rgba(248, 238, 228, 0.45);
  background: transparent;
}

.hero-immersive .btn-ghost:hover {
  background: rgba(248, 238, 228, 0.1);
}

/* Follow header after immersive hero — fixed fade overlay (see adjust.css) */
body.has-immersive-hero .site-header-follow {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  transform: none;
}

/* Opacity-only fade is owned by adjust.css — do not snap with visibility:hidden */
body.has-immersive-hero.is-past-hero .hero-immersive .site-header {
  visibility: visible;
  pointer-events: none;
}

/* ——— Full-height half bleeds (edge-to-edge — no letterbox min-heights) ——— */
.split-bleed {
  min-height: min(92svh, 900px) !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}

.split-bleed .split-media {
  align-self: stretch !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.split-bleed .split-media .photo-frame,
.split-bleed .split-media button.photo-frame,
.split-bleed .split-media picture,
.split-bleed .split-media img {
  width: 100%;
  height: 100%;
  min-height: 0; /* never invent vertical letterboxing */
  max-height: none;
  object-fit: cover;
  display: block;
}

.chapter .split-bleed {
  margin-inline: 0;
  width: 100%;
  max-width: none;
}

.chapter > .split-bleed {
  margin: 0 !important;
}

/* Soft colored glow behind media — animated on scroll via .has-glow / .is-glow-in */
.split-media {
  position: relative;
}

.split-media.has-glow::before,
.work-frame.has-glow::before {
  content: "";
  position: absolute;
  inset: 8% -6% -4% 8%;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 65% at 50% 55%, var(--glow), transparent 68%),
    radial-gradient(ellipse 55% 50% at 70% 30%, var(--glow-soft), transparent 62%);
  filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-bleed.flip .split-media.has-glow::before {
  inset: 8% 8% -4% -6%;
}

.split-media.has-glow.is-glow-in::before,
.work-frame.has-glow.is-glow-in::before {
  opacity: 0.85;
  transform: scale(1);
}

/* Keep glow above the wash, but do NOT force relative on fill layers —
   absolute inset fill is what makes half-bleeds flush top/bottom. */
.split-media > *:not(.photo-frame):not(picture):not(img):not(button),
.work-frame.has-glow > *:not(.work-caption-banner):not(.photo-frame):not(picture):not(img) {
  position: relative;
  z-index: 1;
}
.split-media > .photo-frame,
.split-media > button.photo-frame,
.split-media > picture,
.split-media > img,
.split-media > button {
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .split-media.has-glow.is-glow-in::before,
  .work-frame.has-glow.is-glow-in::before {
    animation: glow-pulse 4.5s ease-in-out infinite alternate;
  }
}

@keyframes glow-pulse {
  from { opacity: 0.72; filter: blur(26px); }
  to { opacity: 0.9; filter: blur(32px); }
}

/* ——— STORITVE even grid ——— */
.storitve-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.storitve-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.storitve-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.storitve-card .service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.service-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 80%, white);
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* ——— Bridge → single CTA strip ——— */
.bridge-cta {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding: clamp(1.4rem, 3.5vw, 2.2rem) var(--pad);
  transition: background 0.45s var(--ease), transform 0.35s var(--ease);
}

.bridge-cta:hover {
  transform: translateY(-1px);
}

.bridge-cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.bridge-cta strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  display: block;
}

.bridge-cta span {
  color: var(--ink-soft);
}

/* ——— Work frame: unified home + dela, side arrows, glow ——— */
.work-stage-framed {
  position: relative;
  max-width: none;
  width: 100%;
  margin-inline: auto;
}

.work-stage-framed .work-frame {
  min-height: 0 !important;
  max-height: min(52vh, 28rem);
  aspect-ratio: 16 / 10;
  box-shadow:
    0 0 0 1px var(--line),
    0 0 60px var(--glow),
    0 22px 50px rgba(20, 7, 6, 0.18);
  background: #120806;
}

.work-stage-home .work-frame {
  max-height: min(52vh, 28rem) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
}

.work-stage-framed .work-frame img,
.work-stage-home .work-frame img,
.work-stage-home .work-stage-photo img {
  max-height: none !important;
  min-height: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* never rotate */
  transform: none !important;
  image-orientation: from-image;
}

.work-stage-shell {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: 0.85rem;
}

.work-side-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s, transform 0.3s;
  border-radius: 0 !important;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
}

.work-side-btn:hover {
  background: var(--cta);
  color: #fff;
  border-color: var(--cta);
  transform: scale(1.04);
}

.work-stage-framed .work-stage-controls {
  margin-top: 0.85rem;
}

.work-stage-framed .work-stage-arrows {
  display: none; /* side buttons replace these on desktop */
}

/* ——— Scroll page tint / morph ——— */
body {
  background-color: var(--page-bg, var(--cream));
  transition: background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter,
.hero-immersive {
  scroll-margin-top: 0;
}

/* Subtle section enter */
.reveal.is-in,
.reveal-left.is-in,
.reveal-right.is-in,
.reveal-scale.is-in {
  transition-duration: 0.85s;
}

/* Photo glow pulse when near (only when glow is active) */
@media (hover: hover) and (pointer: fine) {
  .split-media.has-glow.is-glow-in:hover::before,
  .work-frame.has-glow.is-glow-in:hover::before {
    opacity: 1;
  }
}

/* ——— Consistent subpage heroes ——— */
.page-hero-compact {
  min-height: 0;
  max-height: 100svh;
  height: min(100svh, 720px);
  display: flex;
  flex-direction: column;
}

.page-hero-compact .split-bleed {
  flex: 1;
  min-height: 0 !important;
  max-height: none;
  height: 100%;
}

.page-hero-compact .split-copy {
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) !important;
  justify-content: center;
}

.page-hero-compact h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.page-hero-compact .lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 32rem;
}

.page-hero-compact .split-media img,
.page-hero-compact .split-media .photo-frame,
.page-hero-compact .split-media picture,
.page-hero-compact .split-media button {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
}

/* ——— Half-bleed flush photos ——— */
.chapter > .split-bleed,
.page-hero-compact > .split-bleed,
section > .split-bleed {
  margin: 0 !important;
}

.split-bleed .split-media {
  padding: 0 !important;
  margin: 0 !important;
}

section.split-flush {
  padding-block: 0 !important;
}

section.split-flush > .split-bleed {
  min-height: min(88svh, 820px);
}

/* ——— ODRSKE POTI gallery: sharp cream/paper cards ——— */
.gallery-constellation figure,
.frame-ornament {
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: 0 !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.gallery-constellation .frame-ornament,
.gallery-constellation .frame-ornament.no-morph,
.gallery-constellation figure {
  background: var(--paper) !important;
  border-radius: 0 !important;
}

.gallery-constellation .frame-ornament button,
.gallery-constellation figure button {
  background: var(--paper) !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
}

.gallery-constellation figcaption {
  position: relative;
  z-index: 2;
  background: var(--cream) !important;
  color: var(--ink) !important;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  /* kill gray / dark gradient overlays from art/vibe */
  background-image: none !important;
}

.gallery-constellation figure::before,
.gallery-constellation figure::after,
.frame-ornament::before,
.frame-ornament::after {
  border-radius: 0 !important;
}



/* ——— ODRSKE POTI: sharp card grid (photo + caption on cream) ——— */
.odrske-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.odrske-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin: 0;
}

.odrske-card button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: zoom-in;
  border-radius: 0 !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.odrske-card picture,
.odrske-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

.odrske-card figcaption {
  padding: 0.8rem 1rem;
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Odrske mobile grid lives in css/mobile.css */

/* ——— write-offers: equal CTA bottoms ——— */
.write-offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.write-offer {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 0 !important;
}

.write-offer .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ——— Award card / life-mosaic: sharp, no gray gradients ——— */
.award-card {
  border-radius: 0 !important;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.award-card::before {
  display: none !important;
}

.award-card-body {
  background: var(--cream);
}

.life-mosaic .life-shot,
.life-mosaic button {
  border-radius: 0 !important;
  background: var(--paper) !important;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.life-mosaic .life-shot-tall,
.life-mosaic .life-shot-portrait,
.life-mosaic .life-shot-wide {
  border-radius: 0 !important;
}

/* Mobile one-screen / snap / work-stage rules live in css/mobile.css */

@media (prefers-reduced-motion: reduce) {
  .hero-immersive .hero-bg img {
    animation: none;
    transform: none;
  }
  .hero-immersive .hero-copy {
    animation: none;
  }
  body {
    transition: none;
  }
  .split-media.has-glow::before,
  .work-frame.has-glow::before,
  .split-media.has-glow.is-glow-in::before,
  .work-frame.has-glow.is-glow-in::before {
    animation: none !important;
    transition: none;
    opacity: 0.7;
    transform: none;
  }
}

/* Never rotate photos — keep material orientation */
img,
.work-stage-photo img,
.work-frame img,
.split-media img,
.photo-frame img {
  image-orientation: from-image;
  transform: none;
}
.work-stage-photo img {
  transform: none !important;
}

/* Force-hide legacy bottom arrows when side buttons exist */
.work-stage-framed .work-stage-arrows,
.work-stage-framed .work-stage-arrows button {
  display: none !important;
}

/* Ensure page-bg transition is visible even if inline style set */
body {
  transition: background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
}