/* ==========================================================================
   Estimator card
   ==========================================================================
   The featured right rail inside the desktop mega-menu. Full-bleed photo
   with the copy and button sitting on a legibility gradient.

   Ported from EstimatorCard in web/components/site/navbar.tsx. Desktop only:
   the mobile menu carries a plain row instead, because a 290px image card
   inside a narrow panel costs more than it earns.
   ========================================================================== */

.estimator-card {
  position: relative;
  display: none;
  width: 290px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

@media (min-width: 1024px) {
  .estimator-card { display: flex; }
}

.estimator-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the lower half so white type stays readable whatever the photo
   does. Stops at 10% at the top, so the image is not flattened. */
.estimator-card__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgb(10 10 10 / 0.9),
    rgb(10 10 10 / 0.55) 50%,
    rgb(10 10 10 / 0.1)
  );
}

.estimator-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}


.estimator-card__title {
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-line);
  letter-spacing: var(--text-h6-tracking);
  font-weight: 500;
  color: #ffffff;
}

.estimator-card__lede {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: rgb(255 255 255 / 0.8);
}

.estimator-card .navbar__button {
  margin-top: 0.5rem;
  width: 100%;
}

/* The Réalisations, Méthode and À propos menus (26 Sept) hold fewer rows than
   Expertises; the card keeps a real height so its photograph shows. */
:is(#mega-realisations, #mega-methode, #mega-apropos) .estimator-card { min-height: 17.5rem; }
