/* Cartes : story, review, essential, post. */

/* Les visuels réels n'ont pas tous le même rapport d'image que la maquette
   (une image carrée de 768x768 côtoie des 768x432). La carte impose donc sa
   hauteur et l'image la remplit en cover : la grille reste identique à la
   maquette quelle que soit la source. */
.story { position: relative; overflow: hidden; background: #eee8e3; }
.story > a { position: absolute; inset: 0; display: block; }
.story img,
.story .bs-image-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.story:hover img { transform: scale(1.025); }
.story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 23, 33, .76), transparent 58%); pointer-events: none; }
.story-main { height: 610px; }
.story-stack { display: grid; gap: 24px; }
.story-small { height: 293px; }
.story-content { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 40px; color: #fff; }
.story-small .story-content { padding: 25px; }
.story-category {
  margin-bottom: 10px;
  color: #f1cfac;
  font-family: var(--latin);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story h3 { margin: 0; max-width: 680px; font-family: var(--serif); font-size: clamp(28px, 3.1vw, 43px); font-weight: 500; line-height: 1.3; color: #fff; }
.story-small h3 { font-size: 22px; }
.story-meta { margin-top: 15px; color: rgba(255, 255, 255, .75); font-family: var(--latin); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.review-card { color: var(--ink); background: var(--paper); }
.review-image { position: relative; height: 345px; overflow: hidden; background: #e9deda; }
.review-image img { height: 100%; transition: transform .5s ease; }
.review-card:hover img { transform: scale(1.035); }
.score {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: var(--plum);
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 600;
}
.review-body { padding: 27px 28px 30px; }
.review-body .story-category { color: var(--rose); }
.review-body h3 { margin: 0; min-height: 61px; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.45; }
.review-body p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }

.essential-card { background: var(--paper); }
.essential-card img { height: 255px; }
.essential-card .bs-image-fallback { height: 255px; }
.essential-body { padding: 23px 23px 26px; }
.essential-body small { color: var(--rose); font-family: var(--latin); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.essential-body h3 { margin: 10px 0 0; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.5; }

.post-card img { height: 270px; }
.post-card .bs-image-fallback { height: 270px; }
.post-card-body { padding: 21px 4px 0; }
.post-card .eyebrow { margin-bottom: 0; }
.post-card h3 { margin: 8px 0 9px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.48; }
.post-card p { margin: 0; color: var(--muted); font-size: 12px; }