/*
 * Matrix Vinska Karta 1.1.0
 * Dvije kategorije po redu na desktopu i tabletu, kao na postojećoj vinskoj karti.
 * Naziv vina i pripadajuća cijena uvijek ostaju jedan responzivni red.
 * Tipografija po zadanom nasljeđuje postojeće Elementor heading stilove.
 */
.elementor-widget-matrix_vinska_karta,
.elementor-widget-matrix_vinska_karta .matrix-wine-list {
  width: 100%;
}

.matrix-wine-list,
.matrix-wine-list * {
  box-sizing: border-box;
}

.matrix-wine-list {
  --matrix-wine-green: #6aa567;
  --matrix-wine-heading: #333333;
  --matrix-wine-column-gap: 72px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px 0;
}

.matrix-wine-list__intro,
.matrix-wine-list__group,
.matrix-wine-list__categories,
.matrix-wine-list__category,
.matrix-wine-list__items,
.matrix-wine-list__item {
  width: 100%;
}

.matrix-wine-list__intro {
  margin: 0 0 76px;
  text-align: center;
}

.matrix-wine-list__intro-title,
.matrix-wine-list__group-title,
.matrix-wine-list__category-title,
.matrix-wine-list__name,
.matrix-wine-list__price {
  margin: 0;
  padding: 0;
  opacity: 1;
  visibility: visible;
}

.matrix-wine-list__intro-title,
.matrix-wine-list__group-title,
.matrix-wine-list__category-title {
  color: var(--matrix-wine-heading, #333333) !important;
  text-align: center;
}

.matrix-wine-list__group {
  margin: 0 0 104px;
}

.matrix-wine-list__group:last-child {
  margin-bottom: 0;
}

.matrix-wine-list__group-title {
  margin-bottom: 62px;
}

/*
 * Na desktopu i tabletu kategorije idu po dvije u red:
 * Bijela | Crvena, Pjenušci | Rose itd.
 * Redoslijed ostaje isti kao na izvornoj stranici.
 */
.matrix-wine-list__categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--matrix-wine-column-gap, 72px);
  row-gap: 78px;
}

.matrix-wine-list__category {
  min-width: 0;
  margin: 0;
}

.matrix-wine-list__category-title {
  margin-bottom: 38px;
}

.matrix-wine-list__items {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.matrix-wine-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, max-content);
  align-items: start;
  column-gap: 24px;
  margin: 0;
  padding: 0;
}

.matrix-wine-list__item--without-price {
  grid-template-columns: minmax(0, 1fr);
}

.matrix-wine-list__name,
.matrix-wine-list__price {
  color: var(--matrix-wine-green, #6aa567) !important;
}

.matrix-wine-list__name {
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
}

.matrix-wine-list__price {
  white-space: nowrap;
  text-align: right;
}

.elementor-editor-active .matrix-wine-list__intro-title,
.elementor-editor-active .matrix-wine-list__group-title,
.elementor-editor-active .matrix-wine-list__category-title,
.elementor-editor-active .matrix-wine-list__name,
.elementor-editor-active .matrix-wine-list__price {
  cursor: text;
}

/*
 * Samo na mobitelu kategorije se slažu jedna ispod druge.
 * Naziv i cijena i dalje ostaju povezani unutar istog retka.
 */
@media (max-width: 1024px) {
  .matrix-wine-list {
    padding: 60px 22px 0;
    --matrix-wine-column-gap: 36px;
  }

  .matrix-wine-list__intro {
    margin-bottom: 64px;
  }

  .matrix-wine-list__group {
    margin-bottom: 88px;
  }

  .matrix-wine-list__group-title {
    margin-bottom: 52px;
  }

  .matrix-wine-list__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 60px;
  }

  .matrix-wine-list__category-title {
    margin-bottom: 34px;
  }

  .matrix-wine-list__items {
    gap: 20px;
  }

  .matrix-wine-list__item {
    grid-template-columns: minmax(0, 1fr) minmax(72px, max-content);
    column-gap: 18px;
  }
}

@media (max-width: 767px) {
  .matrix-wine-list {
    padding: 40px 18px 0;
  }

  .matrix-wine-list__intro {
    margin-bottom: 54px;
  }

  .matrix-wine-list__group {
    margin-bottom: 72px;
  }

  .matrix-wine-list__group-title {
    margin-bottom: 44px;
  }

  .matrix-wine-list__categories {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
  }

  .matrix-wine-list__category-title {
    margin-bottom: 30px;
  }

  .matrix-wine-list__items {
    gap: 18px;
  }

  .matrix-wine-list__item {
    grid-template-columns: minmax(0, 1fr) minmax(66px, max-content);
    column-gap: 14px;
  }
}

@media (max-width: 380px) {
  .matrix-wine-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  .matrix-wine-list__item {
    grid-template-columns: minmax(0, 1fr) minmax(60px, max-content);
    column-gap: 10px;
  }
}