/* Gallery carousel intro — hidden if still present in HTML */
.gallery-carousel-intro {
  display: none !important;
}

/* Galerie carousel — images +30% (was h-32/w-32 mobile, md:h-44/w-44 desktop) */
main > section:first-of-type .group\/marquee button.aspect-square {
  height: 10.4rem !important;
  width: 10.4rem !important;
  pointer-events: auto !important;
  cursor: pointer;
}

@media (min-width: 768px) {
  main > section:first-of-type .group\/marquee button.aspect-square {
    height: 14.3rem !important;
    width: 14.3rem !important;
  }
}

[style*="opacity:0"],
[style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Intro splash — ascunde overlay imediat */
.fixed.inset-0[class*="z-[100]"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Vita — vizibil imediat după hydration (Framer Motion) */
#vita [style*="opacity:0"],
#vita [style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#vita img[alt="Mariana Scvortova"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Header restructure — see site-header.css (linked after this file) */

/* Fundal uniform ivory #f4f2e9 — fără gradient paper-texture sau ivory/60 */
.paper-texture {
  background-color: #f4f2e9 !important;
  background-image: none !important;
}

.bg-ivory,
.bg-paper,
.bg-background,
.bg-card,
.bg-muted,
.bg-secondary,
[class*="bg-ivory"],
[class*="bg-paper"] {
  background-color: #f4f2e9 !important;
}

/* Vita — poza principală redusă cu 30% */
#vita img[alt="Mariana Scvortova"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

#vita .vita-main-photo {
  width: 70% !important;
  max-width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Servicii — card grid: thumb mic stânga, text dreapta */
#services .services-grid,
#services .sm\:grid-cols-2 {
  display: grid !important;
}

#services .service-card,
#services [data-service] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  cursor: pointer !important;
}

#services .service-card__thumb,
#services .service-card__thumb img,
#services [data-service] img {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#services .service-card__thumb {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 106px !important;
  max-width: 106px !important;
  min-width: 106px !important;
  margin: 0 !important;
}

#services .service-card__thumb > div {
  width: 106px !important;
  height: 106px !important;
  max-width: 106px !important;
  max-height: 106px !important;
  overflow: hidden !important;
  border-radius: 0.5rem !important;
}

#services .service-card__thumb img,
#services img[src*="/media/services/"] {
  display: block !important;
  width: 106px !important;
  height: 106px !important;
  max-width: 106px !important;
  max-height: 106px !important;
  min-width: 0 !important;
  flex: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

#services .service-card__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Ascunde layout-ul vechi service-row dacă React îl re-injectează */
#services .service-row__media,
#services .service-row {
  display: none !important;
}

/* Video atelier — vizibile imediat, fără așteptare React/Framer Motion */
#atelier-videos > div {
  opacity: 1 !important;
  transform: none !important;
}

#atelier-videos video {
  display: block;
  background: #1a1520;
}

/* Overlay violet pe imagini — intensitate redusă cu 40% (opacitate × 0.6) */

.bg-gradient-to-t.from-primary.via-primary\/60.to-primary\/10 {
  background-image: linear-gradient(
    to top,
    color-mix(in oklab, var(--violet-deep) 60%, transparent) 0%,
    color-mix(in oklab, var(--violet-deep) 36%, transparent) 50%,
    color-mix(in oklab, var(--violet-deep) 6%, transparent) 100%
  ) !important;
}

.bg-gradient-to-t.from-primary.via-primary\/70.to-primary\/10 {
  background-image: linear-gradient(
    to top,
    color-mix(in oklab, var(--violet-deep) 60%, transparent) 0%,
    color-mix(in oklab, var(--violet-deep) 42%, transparent) 50%,
    color-mix(in oklab, var(--violet-deep) 6%, transparent) 100%
  ) !important;
}

.bg-gradient-to-t.from-ink\/80.to-transparent {
  background-image: linear-gradient(
    to top,
    color-mix(in oklab, var(--ink) 48%, transparent) 0%,
    transparent 100%
  ) !important;
}

.bg-gradient-to-t.from-ink\/70.via-ink\/20.to-transparent {
  background-image: linear-gradient(
    to top,
    color-mix(in oklab, var(--ink) 42%, transparent) 0%,
    color-mix(in oklab, var(--ink) 12%, transparent) 50%,
    transparent 100%
  ) !important;
}

/* Modal servicii — card compact (+20% față de ~400px), imagine în cutie fixă */
#service-modal .service-modal-card {
  max-width: 480px !important;
}

#service-modal .service-modal-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 260px !important;
  max-height: 260px !important;
  overflow: hidden !important;
  background: var(--paper, #f4f2e9) !important;
}

#service-modal .service-modal-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  object-fit: contain !important;
  object-position: center !important;
}

#service-modal .service-modal-body {
  padding: 1.5rem !important;
}

#service-modal .service-modal-body h3 {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}

@media (min-width: 768px) {
  #service-modal .service-modal-body {
    padding: 2rem !important;
  }

  #service-modal .service-modal-body h3 {
    font-size: 1.75rem !important;
  }
}

/* Kurse — card buttons + detail modals */
#kurse button.group {
  cursor: pointer;
  pointer-events: auto !important;
}

/* Galerie — Werkgruppen category cards */
#galerie button.group {
  cursor: pointer;
  pointer-events: auto !important;
}

#services .service-card,
#services [data-service] {
  pointer-events: auto !important;
}

#kurse-modal .kurse-modal-card--course {
  max-width: 56rem !important;
}

#kurse-modal .kurse-modal-card--workshop {
  max-width: 42rem !important;
}

#kurse-modal .service-modal-image,
#kurse-modal .aspect-\[16\/9\] {
  max-height: none !important;
}

/* Shared modal chrome — visible back + close (min 44px touch) */
.kb-modal-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.kb-modal-chrome--overlay {
  background: color-mix(in oklab, var(--violet-deep, #2d1f3d) 88%, transparent);
  backdrop-filter: blur(8px);
}

.kb-modal-chrome--light {
  background: rgba(244, 242, 233, 0.97);
  border-bottom: 1px solid rgba(26, 21, 32, 0.08);
}

.kb-modal-chrome--dark {
  background: rgba(17, 17, 17, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kb-modal-chrome__title {
  margin: 0;
}

.kb-modal-back,
.kb-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kb-modal-back--overlay,
.kb-modal-close--overlay {
  background: rgba(244, 242, 233, 0.95);
  color: var(--violet-deep, #2d1f3d);
  border-color: rgba(244, 242, 233, 0.4);
}

.kb-modal-back--overlay:hover,
.kb-modal-close--overlay:hover {
  background: #fff;
}

.kb-modal-back--light,
.kb-modal-close--light {
  background: #fff;
  color: var(--ink, #1a1520);
  border-color: rgba(26, 21, 32, 0.15);
}

.kb-modal-back--light:hover,
.kb-modal-close--light:hover {
  border-color: var(--violet-deep, #2d1f3d);
  color: var(--violet-deep, #2d1f3d);
}

.kb-modal-back--dark,
.kb-modal-close--dark {
  background: rgba(255, 255, 255, 0.1);
  color: #f4f2e9;
  border-color: rgba(255, 255, 255, 0.25);
}

.kb-modal-back--dark:hover,
.kb-modal-close--dark:hover {
  background: rgba(255, 255, 255, 0.2);
}

.kb-modal-close span[aria-hidden="true"] {
  font-size: 1.25rem;
  line-height: 1;
}

.kb-modal-back__arrow {
  font-size: 1.125rem;
}

.kb-modal-back--placeholder {
  visibility: hidden;
  pointer-events: none;
  min-width: 44px;
}

#galerie-category-modal .kb-modal-chrome {
  position: relative;
}

#galerie-work-modal .kb-modal-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}