/* assets/styles/home/hero.css
 * Héros liturgique de l'accueil + colonne de reprise de lecture.
 * Dépend de theme.css (tokens) et de DailyLiturgyWidget.css (pastilles de couleur liturgique).
 */

.home-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
}

/* ---- Bloc sombre : saint + évangile ------------------------------------- */

.home-hero__main { flex: 2 1 420px; min-width: 0; }

.liturgy-hero {
  height: 100%;
  padding: 1.75rem 1.875rem;
  background: var(--ch-ink);
  border-radius: var(--ch-radius-hero);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.liturgy-hero__separator { height: 1px; background: var(--ch-line-invert); }

.liturgy-hero__block { display: flex; flex-direction: column; gap: .625rem; }
.liturgy-hero__block:last-of-type { margin-top: auto; }

.liturgy-hero__date {
  margin: 0;
  font-size: .90625rem;
  font-weight: 600;
  line-height: 1.2;
  color: #D1D5DB;
}

.liturgy-hero__row { display: flex; align-items: flex-start; gap: .875rem; }

/* Badge carré 28px : degré du saint, ou couleur liturgique pour l'évangile */
.liturgy-hero__badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 5px;
  border-radius: var(--ch-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--ch-muted);
}
/* La pastille liturgique fournit sa propre couleur de fond via
   .liturgical-color-dot--* (DailyLiturgyWidget.css) ; on ne fait que la mettre au carré. */
.liturgy-hero__badge--liturgical { border-radius: var(--ch-radius); }

.liturgy-hero__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3125rem; }

.liturgy-hero__title {
  margin: 0;
  font-family: var(--ch-font-read);
  font-size: clamp(1.3125rem, 2.4vw, 1.6875rem); /* même taille pour le saint et l'évangile */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}

.liturgy-hero__meta { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--ch-faint); }

.liturgy-hero__quote {
  margin: .375rem 0 0;
  font-family: var(--ch-font-read);
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-style: italic;
  line-height: 1.5;
  color: #F3F4F6;
}

/* Les deux actions du héros ont le MÊME format */
.liturgy-hero__action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.125rem;
  margin-top: .625rem;
  border-radius: var(--ch-radius);
  background: #fff;
  color: var(--ch-ink);
  font-size: .9375rem;
  font-weight: 600;
}
.liturgy-hero__action:hover { background: #E5E7EB; color: var(--ch-ink); }

.liturgy-hero__unavailable { margin: 0; font-size: .9375rem; color: var(--ch-faint); }

/* Carrousel de saints — géométrie seulement, le comportement reste dans
   js/widget/DailyLiturgyWidget.js (bascule de .active).
   DailyLiturgyWidget.css est chargé APRÈS ce fichier (dans le body, par le composant) et
   pose `.daily-saint-item.active { flex-direction: column; height: 100%; flex: 1 }` en (0,2,0) :
   les sélecteurs ci-dessous sont donc à trois classes (0,3,0) pour l'emporter quel que soit
   l'ordre de chargement.
   Tous les saints sont empilés dans la même cellule de grille : le carrousel prend la
   hauteur du plus long, la rotation ne fait plus varier la hauteur du héros. Les inactifs
   sont en visibility:hidden (hors tabulation et hors lecteur d'écran). */
.liturgy-hero .liturgy-hero__carousel { flex: 1; min-width: 0; display: grid; overflow: visible; }
.liturgy-hero .liturgy-hero__carousel .liturgy-hero__saint {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: row;          /* picto puis texte sur la même ligne, comme l'évangile */
  align-items: flex-start;
  gap: .875rem;                 /* = .liturgy-hero__row */
  flex: none;
  height: auto;
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.liturgy-hero .liturgy-hero__carousel .liturgy-hero__saint.active { visibility: visible; opacity: 1; }

.liturgy-hero__nav {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3125rem;
}
.liturgy-hero__nav .daily-saints-nav-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--ch-radius);
  background: transparent;
  color: #fff;
  font-size: .6875rem;
  line-height: 1;
  cursor: pointer;
}
.liturgy-hero__nav .daily-saints-nav-button:hover { background: rgba(255, 255, 255, .12); }
.liturgy-hero__nav .daily-saints-counter { font-size: .78125rem; color: var(--ch-faint); }

/* ---- Colonne de droite -------------------------------------------------- */

/* space-between, et surtout PAS de flex:1 sur la première carte :
   sinon elle s'étire et laisse un vide sous son contenu. */
.home-hero__side {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.home-side-card {
  padding: 1.25rem;
  background: var(--ch-surface);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-xl);
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

/* Encart « Reprendre la lecture » : .ch-resume-card dans templates/screens.css (partagé) */

.home-side-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
}

.home-prayer__title { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.home-prayer__incipit {
  margin: 0;
  font-family: var(--ch-font-read);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ch-ink-soft);
}

/* ---- Sections suivantes ------------------------------------------------- */

.home-section { margin-bottom: 2.5rem; }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.home-section__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.home-section__link { flex: 0 0 auto; font-size: .90625rem; font-weight: 600; }

.home-columns { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.home-columns > * { flex: 1 1 300px; min-width: 0; }

/* Carte « Actualités » : dernier article (date, titre, chapô) */
.home-news { display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem; color: var(--ch-ink); }
.home-news:hover { color: var(--ch-ink); }
.home-news__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.home-news__excerpt { font-size: .90625rem; line-height: 1.55; color: var(--ch-muted); }

@media (max-width: 767.98px) {
  .liturgy-hero { padding: 1.375rem 1.25rem; }
  .home-hero { gap: 1rem; margin-bottom: 2rem; }

  /* Cibles tactiles >= 44px sur mobile (CLAUDE.md) */
  .liturgy-hero__action { min-height: 44px; }
  .liturgy-hero__nav .daily-saints-nav-button { width: 44px; height: 44px; }
  .home-section__link,
  .home-side-card__foot a { display: inline-flex; align-items: center; min-height: 44px; }
}