/* ==========================================================================
   Janković — kolači: a lit vitrine; every slice waits under a glass cloche
   ========================================================================== */

.kol-hero { padding-bottom: var(--space-m); }
.kol { position: relative; padding: var(--space-m) 0 var(--space-2xl); overflow: hidden; }
/* Warm light from above the vitrine */
.kol::before {
  content: ''; position: absolute; left: 50%; top: -10%; width: 120%; height: 70%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 30%, rgba(228, 192, 138, 0.16), transparent 70%);
}

.vitrina { position: relative; padding-bottom: 3.5rem; }
.vitrina__shelf { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); align-items: end; }
.vitrina__glass {
  position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: 6.6rem; height: 18px;
  background: linear-gradient(180deg, rgba(255, 246, 230, 0.32), rgba(255, 246, 230, 0.04) 60%, transparent);
  border-top: 1px solid rgba(255, 246, 230, 0.5);
  box-shadow: 0 -30px 60px -20px rgba(228, 192, 138, 0.25);
}

/* ---------- Cloche ---------- */
.cloche {
  display: grid; grid-template-areas: 'stage' 'name' 'short'; justify-items: center; width: 100%;
  text-align: center; -webkit-tap-highlight-color: transparent;
}
.cloche__plate {
  grid-area: stage; align-self: end; width: 82%; aspect-ratio: 184 / 176; margin-bottom: 4.6%;
  border-radius: 50% 50% 7% 7% / 70% 70% 5% 5%; overflow: hidden; background: var(--ganache-3);
  filter: saturate(0.7) brightness(0.78); transition: filter 700ms var(--ease-out);
}
.cloche__plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1200ms var(--ease-out); }
.vitrina__item:nth-child(1) .cloche__plate img { object-position: 50% 30%; }
.vitrina__item:nth-child(2) .cloche__plate img { object-position: 50% 34%; }
.vitrina__item:nth-child(3) .cloche__plate img { object-position: 50% 56%; }
.vitrina__item:nth-child(4) .cloche__plate img { object-position: 50% 44%; }

.cloche__dome {
  grid-area: stage; align-self: end; position: relative; z-index: 1; width: 100%; height: auto; overflow: visible;
  transform-origin: 70% 100%; transition: transform 900ms var(--ease-out), opacity 600ms;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}
.cloche__glass { fill: rgba(255, 246, 230, 0.07); stroke: rgba(255, 246, 230, 0.5); stroke-width: 1.5; }
.cloche__shine { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 7; stroke-linecap: round; opacity: 0.55; }
.cloche__shine--2 { stroke-width: 3; opacity: 0.35; }
.cloche__rim { fill: none; stroke: rgba(255, 246, 230, 0.55); stroke-width: 1.5; }
.cloche__knob { fill: rgba(255, 246, 230, 0.2); stroke: rgba(255, 246, 230, 0.6); stroke-width: 1.5; }

.cloche__name { grid-area: name; margin-top: 1.5rem; font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 380; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.1; }
.cloche__short { grid-area: short; margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); }

.cloche:hover .cloche__dome, .cloche:focus-visible .cloche__dome, .cloche[aria-pressed="true"] .cloche__dome { transform: translate(8%, -34%) rotate(9deg); }
.cloche:hover .cloche__plate, .cloche:focus-visible .cloche__plate, .cloche[aria-pressed="true"] .cloche__plate { filter: none; }
.cloche:hover .cloche__plate img, .cloche[aria-pressed="true"] .cloche__plate img { transform: scale(1); }
.cloche[aria-pressed="true"] .cloche__name { color: var(--accent); }
.cloche:focus-visible { outline: none; }
.cloche:focus-visible .cloche__name { outline: 2px solid var(--hot); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 860px) {
  .vitrina__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .vitrina__glass { display: none; }
}

/* ---------- Detail ---------- */
.slice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(1.5rem, 5vw, 6rem); margin-top: var(--space-xl); }
.slice__media { aspect-ratio: 4 / 5; border-radius: var(--r-dome); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.6); }
.slice__media img { width: 100%; height: 100%; object-fit: cover; }
.slice__body { display: grid; justify-items: start; gap: 1.2rem; max-width: 36rem; }
.slice__name { font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 330; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem); line-height: 0.95; letter-spacing: -0.025em; }
.slice__text { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.slice__quote { padding-left: 1.1rem; border-left: 2px solid var(--karamel-hi); }
.slice__quote p { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; }
.slice__quote footer { margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.slice.is-swapping .slice__media, .slice.is-swapping .slice__body { opacity: 0; transform: translateY(14px); }
.slice__media, .slice__body { transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out); }
@media (max-width: 860px) { .slice { grid-template-columns: 1fr; } }