/* ============================================================
   DODAVATEL — supplier detail page
   ============================================================ */

/* --- Tiny font --- */
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny'; src: url('../fonts/tiny/Tiny-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

.font-tiny { font-family: 'Tiny', sans-serif; }

/* ── Hero ──────────────────────────────────────────────────── */
.dodavatel-headline {          /* perex + "Přečíst rozhovor"; the H1 uses .ed-display (catalog.css) */
  font-family: 'Literata', 'Literata Fallback', Georgia, serif;
}

.dodavatel-hero-photo {
  /* outer container — inner card handles all sizing */
}

@keyframes dodavatel-ken-burns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.06) translate(-1%, -0.8%); }
}

.dodavatel-hero-photo img {
  animation: dodavatel-ken-burns 9s ease-in-out infinite alternate;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .dodavatel-hero-photo img,
  .sample-slide { animation: none; }
}

/* ── Samples carousel ──────────────────────────────────────── */
.dodavatel-samples-outer {
  overflow: hidden;
  /* Outer starts (gap + 24px) before the grid-left edge so the prev card peeks 24px.
     On narrow viewports where the grid has no breathing room, margin collapses to 0. */
  margin-left: max(0px, calc(max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)) - 1rem - 24px));
  /* padding-left = gap + 24px so the track still aligns to the grid-left edge.
     Falls back to the raw grid offset on narrow viewports where margin = 0.  */
  padding-left: min(max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)), calc(1rem + 24px));
  /* Right clip: content-width + 2 gaps + 48px (24px peek on each side)        */
  max-width: calc(min(80rem, 100vw) - 1rem + 48px);
}

.dodavatel-samples-track {
  display: flex;
  gap: 1rem;
}

.dodavatel-sample-card {
  /* Each card = half the max-w-7xl content area minus one gap */
  flex: 0 0 calc((min(80rem, 100vw) - 3rem - 1rem) / 2);
}
@media (max-width: 640px) {
  .dodavatel-sample-card { flex: 0 0 80vw; }
}

.dodavatel-sample-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e5e5e5;
  margin-bottom: 1rem;
  cursor: pointer;
}
.dodavatel-sample-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slides — stacked absolutely, crossfade */
.sample-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}
.sample-slide.active {
  opacity: 1;
  pointer-events: auto;
  animation: dodavatel-ken-burns 8s ease-in-out infinite alternate;
  transform-origin: center;
}

/* Controls group — positions the counter/arrows + progress bar as a unit */
.sample-controls-group {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Controls bar — counter + arrow buttons */
.sample-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sample-photo-counter {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  user-select: none;
  pointer-events: none;
}

.sample-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  color: #fff;
  flex-shrink: 0;
}
.sample-nav-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.8);
}

/* Progress bar — same width as controls row, grouped directly below */
.sample-progress {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.2);
}
.sample-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
}
@keyframes sample-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Lightbox */
#dod-lightbox { cursor: zoom-out; }
#dod-lightbox img { cursor: default; }


/* ── Sidebar ───────────────────────────────────────────────── */
/* flat layout — no card backgrounds */

.sidebar-label {
  font-size: 13px;
  font-weight: 300;
  color: #a3a3a3;
  flex-shrink: 0;
}

.sidebar-value {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* „Co znamená Ověřeno?“ vedle odznaku — 12px na mobilu (vejde se na řádek
   s odznakem), 13px od sm. Pojmenovaná třída: arbitrary hodnoty Tailwind
   CDN jsou nespolehlivé. */
.dodavatel-verified-link {
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (min-width: 640px) {
  .dodavatel-verified-link {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }
}