/**
 * For the full copyright and license information, please view the
 * LICENSE.md file that was distributed with this source code.
 *
 * Samskara override of modules/awhomecategories/views/css/awhomecategories.css
 * (same path under the theme, picked up by PrestaShop instead of the module file).
 * Charte : cartes crème filetées gold-300, nom en Playfair gold-800, survol gold-500.
 */

.awhomecategories {
  padding-block: 3rem;
}

.awhomecategories .section-title {
  text-align: center;
}

/* 2 columns on phones, 3 on tablets; from lg the row is shared between the cards
   (9rem minimum each): the 6 categories fit on a single row from 960px up */
.awhomecategories__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .awhomecategories__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .awhomecategories__list {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/* Top aligned on purpose: images stay on the same line whatever the name length */
.awhomecategories__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  block-size: 100%;
  padding: 1.5rem 1rem;
  color: var(--bs-primary-text-emphasis);
  text-align: center;
  text-decoration: none;
  background-color: var(--bs-cream-100);
  border: 1px solid var(--bs-gold-300);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.awhomecategories__link:hover,
.awhomecategories__link:focus-visible {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-cream-200);
  border-color: var(--bs-primary);
}

.awhomecategories__link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Square slot; stays a soft cream square when a category has no thumbnail yet,
   so the grid keeps aligned while the client fills in the images */
.awhomecategories__media {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--bs-cream-200);
  border-radius: var(--bs-border-radius);
}

.awhomecategories__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.awhomecategories__link:hover .awhomecategories__image {
  transform: scale(1.04);
}

.awhomecategories__name {
  font-family: var(--bs-headings-font-family);
  font-size: 1.125rem;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .awhomecategories {
    padding-block: 2rem;
  }
}