/* ==========================================================================
   Bento – Kolik stojí / 30 let / Vlastní technika / Férová cena
   ========================================================================== */

.bento-section {
  padding-top: calc(var(--s-8) + var(--s-1));
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 524fr) minmax(0, 362fr) minmax(0, 362fr);
  grid-template-rows: 14rem 10rem; /* 224 + 160 */
  grid-template-areas:
    "estimate years fleet"
    "estimate price price";
  gap: var(--s-2);
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
}

.bento__title {
  max-width: 12ch;
}

.bento__text {
  margin-top: var(--s-1);
}

/* ---------- Kolik stojí ---------- */

.bento__card--estimate {
  grid-area: estimate;
  background: var(--c-cream);
}

.bento__estimate-body {
  position: relative;
  z-index: 2;
}

.bento__estimate-body .bento__text {
  max-width: 16rem;
}

.bento__actions {
  margin-top: var(--s-2);
}

.bento__stack {
  position: absolute;
  right: var(--s-7);
  bottom: var(--s-4);
  width: 11.5rem;
  z-index: 1;
}

.bento__stack-img {
  width: 100%;
  /* hover: stoh se jako při zvedání na jednom konci pootočí kolem pravé spodní hrany */
  transform-origin: 88% 96%;
  transition: transform 0.9s var(--ease-out);
}

/* ---------- 30 let ---------- */

.bento__card--years {
  grid-area: years;
  justify-content: space-between;
  background: var(--c-white);
}

.bento__number {
  font-family: var(--ff-display);
  font-size: var(--fs-big-number);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: var(--s-1);
}

.bento__subtitle {
  line-height: 1.25;
}

/* ---------- Fotky ---------- */

.bento__card--photo {
  justify-content: flex-end;
  color: var(--c-white);
  background: #3b3128;
}

.bento__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento__card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* rovnoměrné ztmavení fotky kvůli čitelnosti bílého textu – bez přechodů (David 2026-10-23) */
  background: rgba(5, 17, 7, 0.38);
}

.bento__card--fleet {
  grid-area: fleet;
}

.bento__card--price {
  grid-area: price;
  justify-content: center;
}

/* podání ruky nad trámem – světlé pozadí fotky, proto silnější rovnoměrné ztmavení */
.bento__card--price::after {
  background: rgba(5, 17, 7, 0.55);
}

.bento__card--price .bento__photo {
  object-position: 75% 50%;
}

/* ---------- Hover – jen karta s akcí (ostatní karty nic nedělají, tak nereagují) ---------- */

@media (hover: hover) {
  .bento__card--estimate:hover .bento__stack-img {
    transform: rotate(-4deg) translateX(-4px);
  }
}

/* ---------- Responzivita ---------- */

@media (max-width: 1023px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 14rem 10rem;
    grid-template-areas:
      "estimate estimate"
      "years fleet"
      "price price";
  }

  .bento__card--estimate {
    min-height: 20rem;
  }
}

@media (max-width: 599px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "estimate"
      "years"
      "fleet"
      "price";
  }

  .bento__card--estimate {
    min-height: 0;
    padding-bottom: 10rem;
  }

  .bento__stack {
    right: var(--s-4);
    width: 10rem;
  }

  .bento__card--years,
  .bento__card--fleet {
    min-height: 13rem;
  }

  .bento__card--price {
    min-height: 10rem;
  }

  /* na úzkém displeji leží text přes celou šířku fotky – o něco silnější ztmavení */
  .bento__card--price::after {
    background: rgba(5, 17, 7, 0.62);
  }
}