/* Catalogue + product detail — ported from the design system's
   ProductCard / SpecTable / FeatureList / DownloadRow / Breadcrumbs /
   SectionHeader components and the Category/Product UI-kit screens. */

/* ── Breadcrumbs ────────────────────────────────────────────── */

.breadcrumbs {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.breadcrumbs a {
  color: var(--text-muted);
  border-bottom: 0;
}

.breadcrumbs a:hover {
  color: var(--text-accent);
}

.breadcrumbs__sep {
  color: var(--border-default);
}

/* ── Section header ─────────────────────────────────────────── */

.section-header h1 {
  margin-top: var(--space-2);
}

.section-header__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 46em;
}

.divider {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-8);
}

.divider--accent {
  border-top: 2px solid var(--wolff-lime);
  width: 56px;
  margin-inline: 0;
}

/* ── Category filter chips ──────────────────────────────────── */

.catalog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-6);
}

.catalog-filter__item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  color: var(--text-secondary);
  font: var(--type-label);
  transition: var(--transition-color);
}

.catalog-filter__item:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.catalog-filter__item.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--wolff-white);
}

/* ── Product card ───────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--grid-gap);
  margin-block: var(--space-7);
}

.pcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  border-bottom-style: solid;
  overflow: hidden;
  color: var(--text-primary);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-standard);
}

.pcard__link:hover {
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.pcard__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-photo);
  overflow: hidden;
}

.pcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  transform: scale(1);
  transition: var(--transition-transform);
}

.pcard__link:hover .pcard__img {
  transform: scale(1.035);
}

.pcard__bar {
  display: block;
  height: 3px;
  background: transparent;
  transition: var(--transition-color);
}

.pcard__link:hover .pcard__bar {
  background: var(--wolff-lime);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  flex: 1;
}

.pcard__name {
  font: var(--type-h4);
  font-size: var(--text-lg);
}

.pcard__tagline {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  /* consistent card heights across the grid: cap at 3 lines with … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 10px;
  font: var(--type-spec);
  color: var(--text-muted);
}

.pcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--transition-color);
}

/* Pinned to the card bottom so it aligns across a row regardless of how
   long the tagline wraps. */
.pcard__meta:empty + .pcard__cta,
.pcard__cta {
  margin-top: auto;
}

.pcard__link:hover .pcard__cta {
  color: var(--text-accent);
}

/* ── Badge ──────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--ink-100);
  color: var(--ink-700);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
}

/* ── Product detail: top grid ───────────────────────────────── */

.produkt-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-10);
  align-items: start;
}

.produkt-gallery__main {
  margin: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-photo);
  aspect-ratio: 4 / 3;
}

.produkt-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
}

.produkt-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.produkt-gallery__thumb {
  width: 64px;
  height: 64px;
  padding: 4px;
  background: var(--surface-photo);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-color);
}

.produkt-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.produkt-gallery__thumb.is-active,
.produkt-gallery__thumb:hover {
  border-color: var(--wolff-lime);
}

.produkt-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.produkt-summary__title {
  font-size: var(--text-6xl);
  line-height: var(--leading-none);
}

.produkt-summary__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 42ch;
}

.produkt-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.produkt-summary__actions .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.produkt-summary__note {
  font: var(--type-spec);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Spec table ─────────────────────────────────────────────── */

.spec-table__title {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink-900);
}

.spec-table dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(38%, auto) 1fr;
}

.spec-table dt {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  font: var(--type-body-sm);
  color: var(--text-secondary);
}

.spec-table dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  font: var(--type-spec);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.spec-table--dense dt,
.spec-table--dense dd {
  padding: 7px 0;
}

/* ── Product detail: body ───────────────────────────────────── */

.produkt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  padding-block: var(--space-10);
}

.produkt-body__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.produkt-h {
  font: var(--type-h3);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-4);
}

.produkt-h--sm {
  font: var(--type-h4);
  margin-bottom: 10px;
}

.produkt-body__supply {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  max-width: 70ch;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
}

/* Summary column: výhody as a single-column list under a spec-style title. */
.feature-list--stack {
  grid-template-columns: 1fr;
}

.summary-vyhody {
  margin-block: var(--space-2) var(--space-3);
}

.summary-vyhody .spec-table__title {
  margin-bottom: var(--space-3);
}

.feature-list li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font: var(--type-body-sm);
}

.feature-list svg {
  flex: none;
  color: var(--wolff-lime-700);
  transform: translateY(2px);
}

/* ── Product body accordions ────────────────────────────────── */
/* Desktop: plain sections, heads read as the old headings (chevron and
   count hidden, clicks disabled). Mobile (≤900px) turns them into the
   MProduct.jsx accordion column. */

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  pointer-events: none;
}

.acc__h--m {
  display: none;
}

.acc__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.acc__count,
.acc__chev {
  display: none;
}

.produkt-body .acc--downloads {
  grid-column: 1 / -1;
}

/* ── Product videos: "Stroj v akcii" band ───────────────────── */

.video-band {
  background: var(--surface-raised);
  padding-block: var(--space-9);
  /* no bottom margin — the produkt body below brings its own padding */
  margin-block: var(--space-9) 0;
}

.video-band__title {
  margin-bottom: var(--space-6);
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.video-grid--single {
  grid-template-columns: minmax(0, 640px);
}

.video-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wolff-black);
  border-bottom: 0;
}

.video-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-transform);
}

.video-card:hover .video-card__thumb {
  transform: scale(1.03);
}

.video-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-photo-bottom);
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  background: var(--wolff-lime);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-transform);
}

.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-card__play svg {
  fill: currentColor;
  margin-left: 3px;
}

.video-card__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4);
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--wolff-white);
}

.video-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 700px) {
  .video-band {
    padding-block: var(--space-7);
    margin-block: var(--space-7) 0;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Downloads ──────────────────────────────────────────────── */

/* PDF katalóg page: catalogue cover (links the PDF) beside the download row. */
.katalog-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-9);
  align-items: start;
}

.katalog-cover {
  display: block;
  border: 1px solid var(--border-subtle);
  transition: var(--transition-transform);
}

.katalog-cover:hover {
  transform: translateY(-3px);
}

.katalog-cover img {
  width: 100%;
  /* keep the A4 ratio — the width/height HTML attributes would otherwise
     stretch the cover once CSS overrides only the width */
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .katalog-grid {
    grid-template-columns: 1fr;
  }

  .katalog-cover {
    max-width: 260px;
  }
}

.download-list {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-8);
}

.download-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 16px 14px 14px;
  border-top: 1px solid var(--border-subtle);
  border-bottom-style: none;
  color: var(--text-primary);
  transition:
    var(--transition-color),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.download-row:hover {
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--wolff-lime);
  color: var(--text-primary);
}

.download-row__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-100);
  color: var(--ink-700);
  border-radius: var(--radius-xs);
}

.download-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.download-row__title {
  font: var(--type-label);
}

.download-row__meta {
  font: var(--type-spec);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.download-row__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-color);
}

.download-row:hover .download-row__action {
  color: var(--text-accent);
}

/* ── Dark CTA band ──────────────────────────────────────────── */

.cta-band {
  background: var(--surface-dark);
  margin-top: var(--space-10);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-10);
}

.cta-band__copy {
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-band__copy h2 {
  font-size: var(--text-4xl);
}

.button--lg {
  padding: var(--space-4) var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Pagination / empty state ───────────────────────────────── */

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-block: var(--space-9);
  font: var(--type-spec);
}

.pagination-wrap .page-numbers {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-bottom-style: solid;
  margin-right: var(--space-1);
}

.pagination-wrap .page-numbers.current {
  background: var(--ink-900);
  color: var(--wolff-white);
  border-color: var(--ink-900);
}

.empty-state {
  text-align: center;
  padding-block: var(--space-11);
  color: var(--text-muted);
}

.empty-state svg {
  margin-bottom: var(--space-3);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .produkt-top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .produkt-summary__title {
    font-size: var(--text-4xl);
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  /* Gallery bleeds to the screen edges (MProduct.jsx). */
  .produkt-gallery__main {
    margin-inline: calc(var(--page-pad, var(--gutter)) * -1);
    border-inline: 0;
  }

  /* The sticky CTA bar owns the enquiry action on phones. */
  .produkt-summary__actions {
    display: none;
  }

  /* Filter chips: one scrollable row, no wrap (MCategory.jsx). */
  .catalog-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--page-pad, var(--gutter)) * -1);
    padding-inline: var(--page-pad, var(--gutter));
    scrollbar-width: none;
  }

  .catalog-filter::-webkit-scrollbar {
    display: none;
  }

  .catalog-filter__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* ── Accordion column ───────────────────────────────────────── */

  .produkt-body {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: var(--space-4) var(--space-8);
  }

  /* Promote the main column's sections to grid items so the accordion
     order matches the design: výhody, specs, rozsah, downloads. */
  .produkt-body__main {
    display: contents;
  }

  .acc--rozsah {
    order: 1;
  }

  .acc--downloads {
    order: 2;
  }

  .acc {
    border-top: 1px solid var(--border-subtle);
  }

  .acc__h,
  .acc__h--m {
    display: block;
    margin: 0;
  }

  .acc__head {
    pointer-events: auto;
    min-height: 56px;
    padding: var(--space-4) 0;
    font: var(--type-h4);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
  }

  .acc__count {
    display: inline;
    flex: none;
    font: var(--type-spec);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
  }

  .acc__chev {
    display: inline-flex;
    flex: none;
    color: var(--text-secondary);
    transition: var(--transition-transform);
  }

  .acc.is-open .acc__chev {
    transform: rotate(180deg);
  }

  .acc__panel {
    display: none;
    padding-bottom: var(--space-6);
  }

  .acc.is-open .acc__panel {
    display: block;
  }

  .acc--specs .spec-table__title,
  .acc--downloads .divider {
    display: none;
  }

  .acc--downloads .download-list {
    margin-bottom: 0;
  }

  /* CTA band buttons go full width. */
  .cta-band .button--lg {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* Two-up product grid: name + two spec facts is enough to tell
     machines apart at 170px wide (MCategory.jsx). */
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .product-grid .pcard__tagline,
  .product-grid .pcard__cta {
    display: none;
  }

  .product-grid .pcard__body {
    padding: var(--space-3);
    gap: 4px;
  }

  .product-grid .pcard__name {
    font-size: var(--text-base);
  }

  .section-header h1 {
    font-size: clamp(28px, 7.5vw, 36px);
  }

  .produkt-summary__title {
    font-size: clamp(32px, 9vw, 44px);
  }

  .section-header__lead {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }
}