/* Suniia — Course Hub : grille d'articles deux colonnes */

/* ── Grille principale ──
   Cible : hub principal (.view-course-hub) + 7 sous-catégories (.view-hub-category)
   .view-hub-category est injectée par hook_preprocess_views_view uniquement
   quand le terme affiché appartient au vocabulaire category1. */
.view-course-hub .view-content,
.view-hub-category .view-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--sp2) var(--sp2);
  background: transparent;
  align-items: start;
}

/* Mobile ≤ 639px : une seule colonne */
@media (max-width: 639px) {
  .view-course-hub .view-content,
  .view-hub-category .view-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Neutraliser les marges Drupal sur .views-row */
.view-course-hub .view-content .views-row,
.view-hub-category .view-content .views-row {
  margin: 0;
  padding: 0;
  background: transparent;
}

/* ── Carte article ── */
.article-hub-card {
  position: relative;
  background: rgba(var(--color-charcoal-rgb), 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-champagne-rgb), 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform     0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow    0.3s ease,
    border-color  0.3s ease;
}

.article-hub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-champagne-rgb), 0.22);
  box-shadow:
    0 12px 40px rgba(var(--color-black-rgb), 0.45),
    0 0 0 1px rgba(var(--color-champagne-rgb), 0.12);
}

/* ── Média (image + overlay + tags) ── */
.article-hub-card__media {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
}

/* ── Vignette image ── */
.article-hub-card__thumb {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--color-charcoal);
}

@media (max-width: 639px) {
  .article-hub-card__thumb {
    aspect-ratio: 16 / 9;
  }
}

.article-hub-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.article-hub-card:hover .article-hub-card__thumb img {
  opacity: 0.80;
  transform: scale(1.04);
}

/* Placeholder dégradé si pas d'image */
.article-hub-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(var(--color-charcoal-rgb), 1) 0%,
    rgba(var(--color-magenta-rgb), 0.18) 100%
  );
}

/* ── Tags flottants (haut-droit, max 2) ── */
.article-hub-card__tags {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
}

.article-hub-card__tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--color-pearl-rgb), 0.92);
  border: 1px solid rgba(var(--color-champagne-rgb), 0.10);
  border-radius: 3px;
  padding: 2px 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(var(--color-charcoal-rgb), 0.15);
  max-width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Overlay dégradé bas-vers-haut + titre ── */
.article-hub-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--color-obsidian-rgb), 1.00)  0%,
    rgba(var(--color-obsidian-rgb), 0.97) 10%,
    rgba(var(--color-obsidian-rgb), 0.92) 22%,
    rgba(var(--color-obsidian-rgb), 0.82) 36%,
    rgba(var(--color-obsidian-rgb), 0.64) 50%,
    rgba(var(--color-obsidian-rgb), 0.38) 64%,
    rgba(var(--color-obsidian-rgb), 0.12) 78%,
    transparent                           90%
  );
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
}

/* ── Titre dans l'image ── */
.article-hub-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.40;
  color: var(--color-champagne);
  text-shadow: 0 1px 6px rgba(var(--color-black-rgb), 0.70);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-hub-card:hover .article-hub-card__title {
  color: var(--color-pearl);
}

/* ── Corps de la carte (résumé uniquement) ── */
.article-hub-card__body {
  margin-top: 1.5rem;
  padding: 0 1rem 1.125rem;
}

/* Résumé — 2 lignes max */
.article-hub-card__summary {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Nuage de tags (remplace la description de catégorie) ──
   Disposition trois lignes, largeur pleine, tags non-sécables */
.category-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.2rem;
  row-gap: 0.6rem;
  max-width: var(--max-w-content);
  margin: 0.2rem auto 1.5rem auto;
  padding: 6px var(--sp2) 0;
  /* 3 排限高 + padding-top pour laisser de la place au hover translateY */
  max-height: calc(10rem + 6px); /* 3 rangées × 44px + 2 gaps × 0.6rem + padding-top */
  overflow: hidden;
}

.category-tag-item {
  display: inline-flex;   /* Flex pour centrage vertical avec min-height */
  align-items: center;
  white-space: nowrap;
  text-align: center;
  background: rgba(var(--color-pearl-rgb), 0.02);
  border: 1px solid rgba(var(--color-champagne-rgb), 0.06);
  color: rgba(var(--color-champagne-rgb), 0.45);
  min-height: 44px;       /* Cible tactile iOS HIG — 44×44px minimum */
  padding: 0 1.2rem;
  border-radius: 50px;
  font-size: 0.625rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background   0.4s ease,
    border-color 0.4s ease,
    color        0.4s ease,
    transform    0.4s ease,
    box-shadow   0.4s ease;
}

.category-tag-item:hover {
  background: rgba(var(--color-magenta-rgb), 0.10);
  border-color: rgba(var(--color-magenta-rgb), 0.50);
  color: var(--color-pearl);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(var(--color-magenta-rgb), 0.15);
}

.category-tag-item--active {
  background: rgba(var(--color-magenta-rgb), 0.12);
  border-color: rgba(var(--color-magenta-rgb), 0.55);
  color: var(--color-pearl);
  box-shadow: 0 0 14px rgba(var(--color-magenta-rgb), 0.18);
}

/* Supprimer tout espacement résiduel entre le nuage de tags et la grille */
.view-hub-category {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 639px) {
  .category-tags-cloud {
    column-gap: 0.6rem;
    row-gap: 0.55rem;
    margin: 0.75rem auto 1.2rem auto;
    max-height: calc(10rem + 6px); /* Recalculé pour 3 rangées × 44px */
  }

  .category-tag-item {
    min-height: 44px;
    padding: 0 1rem;
  }
}

/* ── Réduire l'espace entre la nav et les pages de catégories (tag cloud) ──
   Classe .vocabulary-category1 / .vocabulary-video_category injectée sur <body>
   par suniia_theme_preprocess_html() — sélecteur fiable sans :has(). */
.vocabulary-category1 .main-content,
.vocabulary-video_category .main-content {
  padding-block-start: var(--sp2) !important;
}

.vocabulary-category1 .main-content__container,
.vocabulary-video_category .main-content__container {
  padding-block-start: 0 !important;
}

@media (max-width: 43.75rem) {
  .vocabulary-category1 .main-content,
  .vocabulary-video_category .main-content {
    padding-block-start: var(--sp1) !important;
  }
}

/* 2026-06-01 mobile nav pills hotfix: stable one-row horizontal strip on video library */
@media (max-width: 639px) {
  .path-video .category-tags-cloud {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.55rem;
    padding: 6px 1rem 2px;
    margin: 0.45rem auto 1rem;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .path-video .category-tags-cloud::-webkit-scrollbar {
    display: none;
  }

  .path-video .category-tag-item {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 0.95rem;
  }
}

/* 2026-06-01 mobile exploration strip refinement */
@media (max-width: 639px) {
  .path-video .category-tags-cloud {
    position: relative;
    margin-bottom: 0.65rem;
  }

  .path-video .category-tags-cloud::after {
    content: "";
    position: sticky;
    right: 0;
    width: 24px;
    height: 40px;
    margin-left: -24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(var(--color-charcoal-rgb), 0), rgba(var(--color-charcoal-rgb), 1));
  }

  .path-video .category-tag-more {
    border-color: rgba(var(--color-magenta-rgb), 0.4);
    color: rgba(var(--color-champagne-rgb), 0.92);
    background: rgba(var(--color-magenta-rgb), 0.12);
  }
}