/* =========================================================
   KLUB - Hero — uses .archive-hero base (product-archive.css)
   Klub specific overrides: title accommodates multi-word phrases
   without wrapping (POSTANITE DEO / NAŠE VINSKE PRIČE).
   ========================================================= */

.klub-archive-hero {
  background-color: #191d23;
}
.archive-hero__title span {
  font-size: clamp(60px, 5.7291666667vw, 110px) !important;
}
.klub-archive-hero::before {
  display: none;
}
.klub-archive-hero .archive-hero__overlay::before {
  display: none;
}
.archive-hero__title-bottom span {
  line-height: 1.3 !important;
}
/* Allow wider title than the default 630px (which is sized for single-word
   shop titles like "VINOTEKA"). Klub has multi-word lines. */
.klub-archive-hero .archive-hero__title {
  max-width: none;
  width: 100%;
  text-align: center;
  /* Slightly tighter clamp so long lines still fit smaller viewports. */
  font-size: clamp(36px, 6.6vw, 120px);
}
.klub-archive-hero .archive-hero__overlay::after {
  background: linear-gradient(
    180deg,
    rgba(25, 29, 35, 0.9) 0%,
    rgba(25, 29, 35, 0.1) 50%,
    rgba(25, 29, 35, 0) 100%
  );
}
/* Inner text spans must never wrap to a 2nd line */
.klub-archive-hero .archive-hero__title-uper > span,
.klub-archive-hero .archive-hero__title-bottom > span {
  white-space: nowrap;
  display: inline-block;
}

/* JS adds inline font-size on the title; we just need the lines to render
   from their natural width. Keep the staircase offset modest. */
.klub-archive-hero .archive-hero__title-uper {
  text-align: left !important;
}

.klub-archive-hero .archive-hero__title > span:last-of-type {
  text-align: right;
}

.klub-archive-hero .archive-hero__title > span:last-of-type span {
  /* Override the +140px shop offset — Klub uses a smaller stagger */
  transform: translateX(60px);
}

/* Descriptor sits below the title — same Trajan uppercase style. */
.klub-archive-hero .archive-hero__description {
  max-width: 720px;
}

@media (max-width: 991px) {
  .klub-archive-hero .archive-hero__title {
    font-size: clamp(32px, 9vw, 84px);
  }
  .klub-archive-hero .archive-hero__title > span:last-of-type span {
    transform: translateX(30px);
  }
}

@media (max-width: 575px) {
  .klub-archive-hero .archive-hero__title > span:last-of-type span {
    transform: translateX(0);
  }
  .klub-archive-hero span {
    font-size: 30px !important;
  }
}