/**
 * Cartes sous-catégories catalogue — packshots 330×421 somef.tn.
 * Composant somef-subcat-card : image pleine largeur, ratio 330/421, object-fit:contain.
 */

:root {
  --somef-subcat-img-ratio  : 330 / 421;
  --somef-subcat-label-bg   : #f3f4f7;
  --somef-subcat-border     : #e8e8e8;
}

/* ─── Reset grille ────────────────────────────────────── */
#subcategories.somef-subcategories-grid {
  margin: 0 0 var(--spacing-xl, 32px);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#subcategories.somef-subcategories-grid .subcategory-heading {
  display: none;
}

.somef-subcategories-grid__list {
  list-style: none;
  margin: 0 -12px;
  padding: 0;
}

.somef-subcategories-grid__item {
  margin-bottom: var(--spacing-lg, 24px);
  padding: 0 12px;
}

/* Aligner les items en flex pour égaliser les hauteurs de rangée */
@media (min-width: 992px) {
  .somef-subcategories-grid__list > .col-lg-4 {
    display: flex;
  }
}

/* ─── Article wrapper ─────────────────────────────────── */
.somef-subcat-card {
  width: 100%;
}

/* ─── Lien carte ──────────────────────────────────────── */
.somef-subcat-card__link {
  display: flex;
  flex-direction: column;
  /* NE PAS mettre height:100% ici — c'est la zone image qui doit
     avoir un ratio fixe, pas la carte entière */
  text-decoration: none;
  color: inherit;
  border: 2px solid var(--somef-subcat-border);
  border-radius: var(--border-radius-sm, 4px);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.somef-subcat-card__link:hover,
.somef-subcat-card__link:focus-visible {
  border-color: rgba(211, 51, 67, 0.35);
  box-shadow: 0 6px 20px rgba(43, 60, 69, 0.08);
  text-decoration: none;
}

.somef-subcat-card__link:focus-visible {
  outline: 2px solid var(--color-primary, #d33343);
  outline-offset: 2px;
}

/* ─── Zone image — ratio 330/421, pleine largeur ────────
   L'image occupe TOUTE la largeur de la colonne (pas de max-width)
   afin d'éviter l'espace blanc autour du bloc photo.
   object-fit: contain assure que l'image n'est pas rognée.
──────────────────────────────────────────────────────── */
.somef-subcat-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--somef-subcat-img-ratio);
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
  padding: 12px;
  box-sizing: border-box;
}

/* Shimmer au hover */
.somef-subcat-card__photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}

.somef-subcat-card__link:hover .somef-subcat-card__photo::before {
  animation: somef-subcat-shine 0.75s ease;
}

@keyframes somef-subcat-shine {
  100% { left: 125%; }
}

/* ─── Image — object-fit contain, centrée ────────────── */
.somef-subcat-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ─── Placeholder lettre ──────────────────────────────── */
.somef-subcat-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  font-size: 2rem;
  font-weight: 700;
  color: #9ca3af;
  background: #f9fafb;
}

/* ─── Label titre ─────────────────────────────────────── */
.somef-subcat-card__label {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  padding: 12px 14px 14px;
  text-align: center;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #252122;
  background: var(--somef-subcat-label-bg);
  transition: color 0.25s ease;
}

.somef-subcat-card__link:hover .somef-subcat-card__label {
  color: var(--color-primary, #d33343);
}

.somef-subcat-card__desc {
  margin-top: var(--spacing-sm, 8px);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-light, #6b7280);
  text-align: center;
  padding: 0 12px;
}

/* ─── Couverture catégorie parent ─────────────────────── */
body#category .somef-main--listing .somef-block-category .somef-category-cover {
  margin-top: var(--spacing-md, 16px);
  max-width: 330px;
}

body#category .somef-main--listing .somef-block-category .somef-category-cover img {
  display: block;
  width: 100%;
  aspect-ratio: var(--somef-subcat-img-ratio);
  height: auto;
  object-fit: contain;
  object-position: left center;
  border: 2px solid var(--somef-subcat-border);
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: var(--border-radius-sm, 4px);
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .somef-subcat-card__photo {
    padding: 10px;
  }
  .somef-subcat-card__label {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .somef-subcategories-grid__list {
    margin: 0 -8px;
  }
  .somef-subcategories-grid__item {
    padding: 0 8px;
  }
}

/* ─── Hubs CMS Lot A — bannière intro ────────────────── */
.somef-lot-a-hub__grid.somef-subcategories-grid {
  margin-top: var(--spacing-md, 16px);
}

.somef-lot-a-hub__intro .somef-cms-cat-banner,
.somef-lot-a-hub__intro figure.somef-cms-cat-banner {
  display: none;
}

.somef-lot-a-hub__intro .somef-cms-cat-banner img,
.somef-lot-a-hub__intro .somef-imported-banner img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.somef-lot-a-hub__intro .somef-imported-banner {
  margin-bottom: var(--spacing-md, 16px);
}