/* ============================================================
   skinspecialist.cz — ss-discovery-6.css
   SECTION: Discovery (3 navigation paths — photo tiles)

   v6 changes vs v5:
   v5 used universal `> *` chain selectors (e.g. `.welcome-wrapper
   > * > * > * > * > * > *`) which had higher specificity than
   `.ss-discovery` and OVERRODE its own max-width:1440. Own-goal.
   v6 targets only the named Shoptet wrapper classes (.container,
   .welcome, etc) — no universal chains. Section is no longer
   matched by ancestor reset, so its max-width:1440 wins.
   ============================================================ */

/* Ancestor reset — only the Shoptet wrapper classes. No `> *` chains.
   .ss-discovery and .ss-brands are NOT matched here, so they keep
   their own max-width caps. */
.content-wrapper.welcome-wrapper,
.content-wrapper.welcome-wrapper > .content-wrapper-in,
.content-wrapper.welcome-wrapper .container,
.content-wrapper.welcome-wrapper .welcome-wrapper,
.content-wrapper.welcome-wrapper .welcome,
.content-wrapper.welcome-wrapper .welcome > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Section itself — caps at 1440 for visual taste, centered */
.ss-discovery {
  display: block !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: clamp(64px, 6vw, 112px) clamp(16px, 2vw, 32px) !important;
  background: var(--ss-canvas, #F2EBDB) !important;
  box-sizing: border-box !important;
}

/* Centered head — eyebrow + heading + lead */
.ss-discovery__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 4.5vw, 64px);
  text-align: center;
}

.ss-discovery__eyebrow {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ss-sage, #6B8B85);
  margin: 0 0 14px;
}

.ss-discovery__heading {
  font-family: var(--ss-serif, serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 16px;
}

.ss-discovery__lead {
  font-family: var(--ss-sans, sans-serif);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 auto;
  max-width: 580px;
}

/* Grid: 3 equal columns. Explicit width:100% + max:none defends
   against any ancestor that still constrains (Shoptet may inject
   class on .welcome > div, etc). */
.ss-discovery__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 1.6vw, 24px);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Tile — <a> as block, photo fills behind, span content overlays bottom.
   aspect-ratio 4/5 → at 1400 max width: ~444 wide × ~555 tall per tile. */
.ss-discovery__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;   /* v7: velké karty = 8px (4px pravidlo je jen pro malé prvky — tlačítka/chip) */
  aspect-ratio: 4 / 5;
  background: #2a2a2a; /* visible while img loads */
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.ss-discovery__tile:hover {
  transform: translateY(-2px);
}

/* Photo background — <img> survives TinyMCE; absolute fills tile */
.ss-discovery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.ss-discovery__tile:hover .ss-discovery__photo {
  transform: scale(1.04);
}

/* Fallback gradient if photo fails (loaded as tile background) */
.ss-discovery__tile--type {
  background: linear-gradient(135deg, #C9D8D3 0%, #6B8B85 60%, #5A7E78 100%);
}
.ss-discovery__tile--problem {
  background: linear-gradient(135deg, #E8C9B0 0%, #B89072 50%, #7E6248 100%);
}
.ss-discovery__tile--ingredient {
  background: linear-gradient(135deg, #DCCFB6 0%, #B5A88F 50%, #8B7E68 100%);
}

/* Content overlay — span flex column at bottom of tile.
   Background gradient is ON the content (not ::before over whole tile)
   → photo stays clean, only text band darkens for readability. */
.ss-discovery__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 36px);
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, .72) 0%,
    rgba(15, 15, 15, .42) 50%,
    rgba(15, 15, 15, 0) 100%
  );
  text-shadow: 0 1px 6px rgba(15, 15, 15, .55);
}

/* 01/02/03 numbers hidden per user — cleaner editorial look without
   enumeration noise. Span stays in DOM for accessibility/reflow safety. */
.ss-discovery__num {
  display: none !important;
}

.ss-discovery__title {
  display: block;
  font-family: var(--ss-serif, serif);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.ss-discovery__copy {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 20px;
}

.ss-discovery__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;   /* v7: bez Caps Locku → menší letter-spacing */
  /* text-transform: uppercase ODSTRANĚN — klient nechce Caps Lock */
  color: #FFFFFF;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .55);   /* podtržení zachováno */
  transition: border-color .3s cubic-bezier(.4, 0, .2, 1),
              gap .3s cubic-bezier(.4, 0, .2, 1);
}

.ss-discovery__tile:hover .ss-discovery__more {
  border-bottom-color: #FFFFFF;
  gap: 14px;
}

/* Mobile (v7) — HORIZONTÁLNÍ SCROLL: 1 karta ~100 % + ~10 % další viditelná
   (signál, že se dá posunout). Plný obsah na kartě (foto + titulek + popis +
   odkaz). Base grid (3-col !important) přepneme na flex řadu s overflow scroll;
   šířka karty přes flex-basis ve vw. */
@media (max-width: 768px) {
  .ss-discovery {
    /* !important nutné — base má `padding: ... clamp(16px,2vw,32px) !important`,
       jinak by k tomu grid přidal dalších 16px → karty na 32px od kraje (nešahaly
       ke kraji jako sekce Tamařin výběr, která je na 16px). Takhle: sekce 0 horizontal
       → grid 16px → karty na 16px = zarovnané + scroll teče k okrajům. */
    padding: 44px 0 !important;
  }
  .ss-discovery__head {
    margin-bottom: 26px;
    padding: 0 16px;
  }
  .ss-discovery__heading {
    font-size: clamp(26px, 7vw, 34px);
  }
  .ss-discovery__lead {
    padding: 0 10px;
  }
  .ss-discovery__grid {
    display: flex !important;                /* zrušit grid → flex řada */
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 16px;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .ss-discovery__grid::-webkit-scrollbar {
    display: none;
  }
  .ss-discovery__tile {
    flex: 0 0 84vw;          /* 1 karta + ~10 % další peek */
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
  }
  /* plný obsah viditelný (titulek + popis + odkaz) */
  .ss-discovery__title {
    display: block;
    font-size: 27px;
    margin-bottom: 10px;
  }
  .ss-discovery__copy {
    display: block;
    font-size: 14px;
    margin-bottom: 18px;
  }
  .ss-discovery__content {
    padding: 22px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ss-discovery__tile,
  .ss-discovery__photo,
  .ss-discovery__more {
    transition: none;
  }
  .ss-discovery__tile:hover,
  .ss-discovery__tile:hover .ss-discovery__photo {
    transform: none;
  }
}