/* SPOKAR Micro — Related products + Poradna sections.
   Replicated from spokar.com/produkt/spokar-x/ (.component-product-slider + .component-article-featured).
   Computed styles captured 2026-05-14 — extends tokens.css + base.css. */

/* ============================================================================
   Shared heading block (Bootstrap-like .component-heading layout)
   ============================================================================ */

.section-related,
.section-poradna {
  margin: 4rem 0;
}

@media (min-width: 992px) {
  .section-related,
  .section-poradna {
    margin: 6rem 0;
  }
}

.section-related__heading,
.section-poradna__heading {
  margin-bottom: 2rem;
}

.section-related__heading h2,
.section-poradna__heading h2 {
  margin: 0;
  font-weight: 600;
  text-align: center;
}

.section-related__heading h2 {
  font-size: 2.25rem;
}

@media (min-width: 992px) {
  .section-related__heading h2 {
    font-size: 3rem;
  }
}

/* Poradna heading has 2-column layout: title left, perex right (spokar.com .col-lg-5 + .col-lg-7) */
.section-poradna__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .section-poradna__head {
    grid-template-columns: 5fr 7fr;
    margin-bottom: 3rem;
  }
}

.section-poradna__head h2 {
  text-align: left;
  font-size: 2.25rem;
  font-weight: 600;
  margin: 0;
}

@media (min-width: 992px) {
  .section-poradna__head h2 {
    font-size: 3rem;
    text-align: left;
  }
}

.section-poradna__perex {
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--slate);
  margin: 0;
}

@media (min-width: 992px) {
  .section-poradna__perex {
    font-size: 1.375rem;
  }
}

/* ============================================================================
   Related products carousel — reuses the home `.showcase-card` component.
   The card look is defined here (not in home.css, which only loads on the front
   page) so the PDP related section gets the exact same white product tiles as
   the home showcase grid; here they sit in a horizontal scroll track.
   ============================================================================ */

/* Horizontal carousel (same idiom as .design__track) — shows the remaining
   products with a peek on the next card so the row reads as scrollable.
   Padding leaves room for the hover lift + card shadow inside the scroll box:
   overflow-x:auto forces overflow-y to clip too, so the shadow (--shadow-2
   reaches ~40px below, ~32px to the sides, plus the -4px lift) needs room on
   every side or it gets cut off — most visibly under the cards and on the
   first/last card's outer edge. */
.product-items {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 1rem 2rem 2.5rem;
}

.product-items::-webkit-scrollbar {
  display: none;
}

@media (min-width: 600px) {
  .product-items {
    gap: 1.5rem;
  }
}

/* Carousel sizing — each card fills a fraction of the track so the next one
   peeks in: ~1.25 cards on mobile, ~2.4 on tablet, ~3.3 on desktop. The card
   appearance itself comes from the shared .showcase-card component below. */
.product-items > .showcase-card {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

@media (min-width: 600px) {
  .product-items > .showcase-card {
    flex-basis: 42%;
  }
}

@media (min-width: 900px) {
  .product-items > .showcase-card {
    flex-basis: 30%;
  }
}

/* Carousel arrows — desktop only (mobile/tablet use native swipe).
   Visual matches .design__nav (white, 3px radius, shadow, hover slate). */
.related__carousel {
  position: relative;
}

.related__nav {
  position: absolute;
  top: 33%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--slate);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 5;
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint),
    opacity var(--t-fast) var(--ease-out-quint);
}

.related__nav:hover {
  background: var(--slate);
  color: var(--white);
}

.related__nav--prev {
  left: 0.5rem;
}

.related__nav--prev svg {
  transform: rotate(180deg);
}

.related__nav--next {
  right: 0.5rem;
}

/* Hide an arrow when the track is at that end. */
.related__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .related__nav {
    display: inline-flex;
  }
}

/* ── Shared product card — mirror of assets/css/home.css .showcase-card ──
   Lives here (not in home.css) because home.css only enqueues on the front page
   while related-poradna.css loads site-wide, so the PDP related carousel reuses
   the exact home card look. Keep the two definitions in sync; once home.css
   stops being actively tuned they can move to one shared component file. */
.showcase-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Resting shadow carries --shadow-2's geometry at zero opacity so only the
     colour fades in on hover, in step with the image scale (transitioning from
     `none` makes the browser grow the shadow late). */
  box-shadow:
    0 6px 16px -6px rgba(30, 37, 43, 0),
    0 24px 48px -16px rgba(30, 37, 43, 0);
  transition:
    transform var(--t-base) var(--ease-out-quint),
    box-shadow var(--t-base) var(--ease-out-quint),
    border-color var(--t-base) var(--ease-out-quint);
}

.showcase-card:hover,
.showcase-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
  outline: none;
}

.showcase-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--white);
  overflow: hidden;
}

/* Absolutely filling the fixed 4/3 box keeps tall transparent packshots
   contained and centred regardless of their intrinsic proportions. */
.showcase-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  transition: transform var(--t-base) var(--ease-out-quint);
}

.showcase-card:hover .showcase-card__media img {
  transform: scale(1.04);
}

.showcase-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.5rem 1.75rem;
  flex: 1 1 auto;
}

.showcase-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--olive-deep);
}

.showcase-card__name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--slate);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.showcase-card__price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate);
}

.showcase-card__price del {
  color: var(--grey-500);
  font-weight: 400;
  margin-right: 0.4rem;
}

.showcase-card__caption {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-600);
  margin: 0.15rem 0 0;
}

.showcase-card__more {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
}

.showcase-card__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out-quint);
}

.showcase-card:hover .showcase-card__more svg {
  transform: translateX(4px);
}

/* ============================================================================
   Article teasers (.article-teaser replicating spokar.com poradna cards)
   ============================================================================ */

.article-teasers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .article-teasers {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 992px) {
  .article-teasers {
    margin-bottom: 3rem;
  }
}

.article-teaser {
  display: block;
  height: 100%;
  border: 2px solid #f4f4f4;
  border-radius: 6px;
  padding: 1.5rem;
  color: var(--slate);
  text-decoration: none;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

@media (min-width: 576px) {
  .article-teaser {
    padding: 2rem;
  }
}

@media (min-width: 992px) {
  .article-teaser {
    padding: 3rem;
  }
}

.article-teaser:hover {
  border-color: #d8d8d8;
  text-decoration: none;
}

.article-teaser:hover .article-teaser__title {
  text-decoration-color: var(--primary);
  color: var(--primary);
}

.article-teaser__meta {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: #666;
}

.article-teaser__title {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--slate);
  text-decoration: underline;
  text-decoration-color: #d8d8d8;
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
  transition: color 0.4s ease, text-decoration-color 0.4s ease;
}

@media (min-width: 768px) {
  .article-teaser__title {
    font-size: 2rem;
    margin-bottom: 1.25rem;
  }
}

.article-teaser__perex {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-poradna__cta {
  text-align: center;
  margin-top: 1rem;
}