/**
 * 2007-2026 PrestaShop SA and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright 2007-2026 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */

.mtr-category-showcase {
  padding: 1rem 0;
}

.mtr-category-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.mtr-category-col {
  margin-bottom: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.mtr-category-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mtr-category-card:hover,
.mtr-category-card:focus {
  text-decoration: none;
  color: inherit;
}

.mtr-category-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.mtr-category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.mtr-category-card:hover .mtr-category-image {
  transform: scale(1.04);
}

.mtr-category-name {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  color: #222222;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  text-align: center;
}

.mtr-category-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtr-category-noimage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 0.875rem;
}

/* Small screens: keep two columns compact */
@media (max-width: 767px) {
  .mtr-category-col {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1.5rem;
  }

  .mtr-category-name {
    font-size: 0.75rem;
    padding: 8px 16px;
    bottom: 12px;
  }
}