/**
 * Hub CMS Lot A — composant somef-hub-card
 * Cartes bannière paysage (images 16/9) pour les pages /content/category/100-*, 101-*, 102-*
 * Indépendant du composant packshot catalogue (somef-subcat-card).
 */

/* ─── Variables locales ───────────────────────────────── */
:root {
  --hub-card-radius    : var(--border-radius-lg, 12px);
  --hub-card-border    : rgba(43, 60, 69, 0.10);
  --hub-card-shadow    : 0 2px 8px rgba(0, 0, 0, 0.06);
  --hub-card-shadow-h  : 0 6px 20px rgba(37, 33, 34, 0.10);
  --hub-card-label-bg  : #f3f4f7;
  --hub-card-img-ratio : 16 / 9;
  --hub-card-img-maxh  : clamp(10rem, 24vw, 16rem);
}

/* ─── Grille ──────────────────────────────────────────── */
.somef-hub-cards {
  margin-top: var(--spacing-md, 1rem);
  margin-bottom: var(--spacing-xl, 2rem);
}

.somef-hub-cards__list {
  list-style: none;
  margin: 0 -12px;
  padding: 0;
}

.somef-hub-cards__item {
  display: flex;
  margin-bottom: var(--spacing-lg, 1.5rem);
  padding: 0 12px;
}

/* ─── Carte ───────────────────────────────────────────── */
.somef-hub-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--hub-card-radius);
  border: 2px solid var(--hub-card-border);
  background: #fff;
  box-shadow: var(--hub-card-shadow);
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.somef-hub-card:hover {
  border-color: rgba(211, 51, 67, 0.40);
  box-shadow: var(--hub-card-shadow-h);
  transform: translateY(-3px);
}

/* ─── Lien wrapper ────────────────────────────────────── */
.somef-hub-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.somef-hub-card__link:hover,
.somef-hub-card__link:focus-visible {
  text-decoration: none;
  color: inherit;
}

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

/* ─── Zone image — 16/9, complètement contrainte ─────── */
.somef-hub-card__media {
  position: relative;
  width: 100%;
  /* aspect-ratio seul suffit — pas de height fixé */
  aspect-ratio: var(--hub-card-img-ratio);
  max-height: var(--hub-card-img-maxh);
  overflow: hidden;
  background: #eef0f2;
  flex: 0 0 auto;
}

/* L'image remplit exactement son conteneur, recadrée au centre */
.somef-hub-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.35s ease;
}

.somef-hub-card__link:hover .somef-hub-card__img {
  transform: scale(1.04);
}

/* Placeholder lettre si pas d'image */
.somef-hub-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary, #d33343);
  background: linear-gradient(135deg, rgba(211,51,67,0.07) 0%, rgba(43,60,69,0.05) 100%);
}

/* ─── Label titre ─────────────────────────────────────── */
.somef-hub-card__label {
  display: block;
  flex: 1 0 auto;
  padding: 14px 16px 16px;
  text-align: center;
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--color-accent-blue, #2b3c45);
  background: var(--hub-card-label-bg);
  transition: color 0.25s ease;
}

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

/* ─── Bannière intro catégorie (dans .somef-cms-cat-banner uniquement) ────── */
.somef-lot-a-hub__intro {
  margin-bottom: var(--spacing-lg, 1.5rem);
}

/* Conteneur bannière intro — arrondi + ombre */
.somef-lot-a-hub__intro .somef-cms-cat-banner,
.somef-lot-a-hub__intro .somef-imported-banner .somef-cms-cat-banner {
  overflow: hidden;
  border-radius: var(--border-radius-lg, 12px);
  box-shadow: var(--hub-card-shadow);
  line-height: 0;
}

/* Image bannière intro — contrainte, jamais de débordement */
.somef-lot-a-hub__intro .somef-cms-cat-banner img,
.somef-lot-a-hub__intro .somef-imported-banner img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(12rem, 28vw, 18rem);
  object-fit: cover;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (min-width: 992px) {
  .somef-hub-cards__list > .col-lg-4 {
    display: flex;
  }
}

@media (max-width: 991.98px) {
  .somef-hub-card__label {
    font-size: 1rem;
    padding: 12px 14px 14px;
  }
}

@media (max-width: 575.98px) {
  .somef-hub-cards__list {
    margin: 0 -8px;
  }

  .somef-hub-cards__item {
    padding: 0 8px;
    margin-bottom: var(--spacing-md, 1rem);
  }

  :root {
    --hub-card-img-maxh: clamp(9rem, 50vw, 14rem);
  }
}