/* ============================================================
   skinspecialist.cz — style.css — v4
   Token foundation. Loaded after Shoptet Classic stylesheets.
   Iterate per-section after we wire and inspect live containers.
   ============================================================ */

/* -- Design tokens (z homepage v3) -------------------------- */
:root {
  /* Palette */
  --ss-canvas: #F2EBDB;
  --ss-cream: #E8DDC8;
  --ss-cream-deep: #DCCFB6;
  --ss-neutral: #B5A88F;
  --ss-terracotta: #9A7A5F;
  --ss-terracotta-deep: #7E6248;
  --ss-sage: #6B8B85;
  --ss-sage-deep: #5A7E78;
  --ss-black: #0F0F0F;
  --ss-white: #FFFFFF;
  --ss-dark: #2A2520;

  /* Text shades */
  --ss-text: var(--ss-black);
  --ss-muted: rgba(15, 15, 15, .62);
  --ss-hint: rgba(15, 15, 15, .46);
  --ss-border: rgba(15, 15, 15, .10);
  --ss-border-mid: rgba(15, 15, 15, .16);

  /* Typography */
  --ss-serif: 'Luxury Rigane', Georgia, 'Times New Roman', serif;
  --ss-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Geometry */
  --ss-r: 6px;
  --ss-r-lg: 8px;
  --ss-ease: .3s cubic-bezier(.4, 0, .2, 1);
  --ss-shadow: 0 8px 32px rgba(15, 15, 15, .06), 0 2px 8px rgba(15, 15, 15, .03);
  --ss-shadow-up: 0 16px 48px rgba(15, 15, 15, .10), 0 4px 16px rgba(15, 15, 15, .05);
  --ss-container: 1440px;
  --ss-gutter: 32px;
  --ss-section-y: clamp(64px, 8vw, 120px);
}

/* -- Body baseline ------------------------------------------ */
body {
  font-family: var(--ss-sans);
  color: var(--ss-text);
  background: var(--ss-canvas);
  -webkit-font-smoothing: antialiased;
}

/* -- Headings ----------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ss-serif);
  color: var(--ss-black);
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 300;
}

h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 300;
}

h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  font-weight: 400;
}

h4 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

/* -- Utility: eyebrow --------------------------------------- */
.ss-eyebrow {
  font-family: var(--ss-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ss-terracotta);
  display: inline-block;
}
.ss-eyebrow.is-sage  { color: var(--ss-sage); }
.ss-eyebrow.is-light { color: rgba(255, 255, 255, .85); }

/* -- Utility: container ------------------------------------- */
.ss-wrap {
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: 0 var(--ss-gutter);
}

/* -- Utility: section spacing ------------------------------- */
.ss-section {
  padding: var(--ss-section-y) 0;
}

/* ============================================================
   Per-section overrides will land below as we add them.
   Each section block prefixed with /* SECTION: <name> */
   ============================================================ */


/* ============================================================
   SECTION: Carousel (Hero) — Classic template
   Targets: .before-carousel, #carousel, .item, .extended-banner-*
   ============================================================ */

/* Full-bleed: break out of .container constraint */
.content-wrapper.before-carousel {
  background: var(--ss-canvas);
}
.content-wrapper.before-carousel > .content-wrapper-in > .container {
  max-width: none;
  padding: 0;
  width: 100%;
}
.content-wrapper.before-carousel .row.banners-row {
  margin: 0;
}
.content-wrapper.before-carousel .wide-carousel {
  width: 100%;
  padding: 0;
}

/* Carousel container & inner */
#carousel.carousel {
  background: var(--ss-canvas);
  margin: 0;
}
#carousel .carousel-inner {
  min-height: 0 !important;
}
#carousel .item {
  position: relative;
}
#carousel .item > a {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Gradient overlay handled directly on banner image (in editor),
   not in CSS — keeping a single source of truth. */
#carousel .item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  object-position: right center;
}

/* Overlay container — vertikálně centrovaný, vlevo
   Stack order is title → text → link via CSS `order` (defensive).
   Shoptet wraps these in a <span>, force flex behavior with !important
   to override Bootstrap 3 + Classic theme inline-defaults. */
#carousel .extended-banner-texts {
  position: absolute !important;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  max-width: 44%;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  text-align: left !important;
}

#carousel .extended-banner-texts > * {
  width: auto !important;
  text-align: left !important;
}

#carousel .item > a,
#carousel .item > a:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Title — Luxury Rigane, with sage hairline accent above
   Weight bumped to 400 + dual text-shadow halo for presence pop. */
#carousel .extended-banner-title {
  order: 1 !important;
  display: block !important;
  position: relative;
  padding-top: 32px !important;
  font-family: var(--ss-serif);
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--ss-black);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, .85),
    0 0 32px rgba(255, 255, 255, .45);
}
#carousel .extended-banner-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--ss-sage);
}

/* Description — Manrope
   IMPORTANT: Shoptet sets position: absolute on this by default,
   which yanks it out of flex flow. Force position: static. */
#carousel .extended-banner-text {
  order: 2 !important;
  display: block !important;
  position: static !important;
  float: none !important;
  font-family: var(--ss-sans) !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.55 !important;
  color: var(--ss-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  max-width: 480px !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .7) !important;
  font-weight: 400 !important;
}

/* Pseudo-button — sage CTA, sentence case
   Tighter proportions: smaller padding, +2px font for confident scale.
   Explicit transform baseline + hardcoded transition (CSS-var sometimes
   conflicts with animation forwards — bypass for reliable hover lift).
   Arrow ::after slides 4px right on hover for editorial micro-feel. */
#carousel .extended-banner-link {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 50px !important;
  padding: 0 28px !important;
  font-family: var(--ss-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--ss-white) !important;
  background: var(--ss-sage) !important;
  border: 0 !important;
  border-radius: var(--ss-r) !important;
  transform: translateY(0) !important;
  transition:
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 32px 0 0 !important;
  box-shadow: 0 2px 12px rgba(107, 139, 133, .2) !important;
  float: none !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  text-decoration: none !important;
  gap: 8px !important;
}

#carousel .extended-banner-link::after {
  content: '→';
  display: inline-block;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover only on direct CTA, not whole banner <a> wrapper */
#carousel .extended-banner-link:hover {
  background: var(--ss-sage-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(107, 139, 133, .3) !important;
  cursor: pointer !important;
}

#carousel .extended-banner-link:hover::after {
  transform: translateX(4px);
}

/* Skrýt šipky (jen 2 slidy, minimal nav) */
#carousel .carousel-control {
  display: none;
}

/* Hero overlay fade-in stagger ------------------------------- */
@keyframes ss-hero-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#carousel .item.active .extended-banner-title,
#carousel .item.active .extended-banner-text,
#carousel .item.active .extended-banner-link {
  opacity: 0;
  animation: ss-hero-fade-in .6s cubic-bezier(.4, 0, .2, 1) forwards;
}
#carousel .item.active .extended-banner-title { animation-delay: .3s; }
#carousel .item.active .extended-banner-text  { animation-delay: .5s; }
#carousel .item.active .extended-banner-link  { animation-delay: .7s; }

@media (prefers-reduced-motion: reduce) {
  #carousel .item.active .extended-banner-title,
  #carousel .item.active .extended-banner-text,
  #carousel .item.active .extended-banner-link {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #carousel .extended-banner-texts {
    left: 5%;
    max-width: 88%;
  }
  #carousel .extended-banner-title {
    font-size: clamp(26px, 6vw, 36px);
    padding-top: 24px !important;
  }
  #carousel .extended-banner-title::before {
    width: 40px;
  }
  #carousel .extended-banner-text {
    font-size: 14px;
    margin-top: 14px;
  }
  #carousel .extended-banner-link {
    padding: 14px 28px;
    font-size: 13px;
    margin-top: 20px;
  }
}