/* ==========================================================================
   RMarin · Value cards
   Cards with a sliding panel (Home values, Nosotros "how we work").
   ========================================================================== */

/* ---------- Value cards ---------- */
/* 1 column → 2 columns (600) → 4 columns (768 on Home, 1440 elsewhere).
   On Home, sizes are fluid (vw) from 768 to 1439; from 1440px they scale
   with --u as in the reference.
   --head-pb / --head-pb-active: space under the title with the panel closed / open.
   --bar: height of the orange bottom strip (closed card). When it opens,
   the orange panel covers the strip down to the edge and the purple tab
   slides up from the bottom. */
.values {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-space) var(--gutter) 0;
}

.values__list {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 24px;
}

.value-card {
  --head-pb: 22px;
  --head-pb-active: 22px;
  --bar: 7px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  overflow: hidden;
  background: var(--color-purple);
  color: var(--color-white);
}

/* Orange bottom strip (visible with the panel closed) */
.value-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--bar);
  background: var(--color-orange);
}

.value-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  transition: --hover-scale 0.6s var(--ease);
}

.value-card__head {
  position: relative;
  padding: 0 18px calc(var(--head-pb) + var(--bar));
  transition: padding-bottom var(--duration) var(--ease);
}

.value-card__logo {
  width: 110px;
  filter: invert(1);
}

.value-card__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

/* The descriptive panel slides up on hover/focus.
   The first card shows it by default, as in the reference. */
.value-card__panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--color-orange-strong);
  transition: grid-template-rows var(--duration) var(--ease);
}

.value-card__text {
  min-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 17px;
  line-height: 1.25;
}

.value-card__text::before,
.value-card__text::after {
  content: "";
  display: block;
  height: 22px;
}

.value-card__text::after {
  height: calc(22px + var(--bar));
}

.value-card__text strong {
  display: block;
  font-weight: 700;
}

.value-card__panel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  background: var(--color-purple);
  opacity: 0;
  transform: translate(-50%, 100%);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

/* Visible state of the tab (reused by the active, hover and touch states) */
.value-card.is-active .value-card__panel::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.2s;
}

.value-card.is-active .value-card__panel {
  grid-template-rows: 1fr;
}

.value-card.is-active .value-card__head {
  padding-bottom: var(--head-pb-active);
}

@media (min-width: 600px) {
  .values__list { grid-template-columns: repeat(2, minmax(0, 360px)); }
}

@media (min-width: 768px) {
  .value-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }
}

/* Home (.values): 4 columns from 768. Between 768 and 1439 the cards are
   narrow (~164px at 768), so sizes scale with the viewport to keep the
   titles ("COMPROMETIDA", "ESPECIFICACIÓN") and the panel text inside.
   Scoped to .values so Nosotros (.work__list) keeps its own layout. */
@media (min-width: 768px) {
  .values .values__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .values .value-card {
    --head-pb: clamp(12px, 1.5vw, 22px);
    --head-pb-active: clamp(10px, 1vw, 22px);
    aspect-ratio: 3 / 4.4;
  }

  .values .value-card__head {
    padding-left: clamp(10px, 1.25vw, 18px);
    padding-right: clamp(10px, 1.25vw, 18px);
  }

  .values .value-card__logo {
    width: clamp(70px, 7.6vw, 110px);
  }

  .values .value-card__title {
    font-size: clamp(13px, 1.5vw, 22px);
  }

  .values .value-card__text {
    padding: 0 clamp(10px, 1.25vw, 20px);
    font-size: clamp(12px, 1.15vw, 17px);
  }

  .values .value-card__text::before {
    height: clamp(12px, 1.5vw, 22px);
  }

  .values .value-card__text::after {
    height: calc(clamp(12px, 1.5vw, 22px) + var(--bar));
  }
}

@media (min-width: 1440px) {
  .values {
    padding: var(--section-space) calc(180 * var(--u)) 0;
  }

  .values__list {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(40 * var(--u));
  }

  .value-card {
    --head-pb: calc(30 * var(--u));
    --head-pb-active: calc(14 * var(--u));
    --bar: calc(9 * var(--u));
  }

  .value-card__head {
    padding-left: calc(20 * var(--u));
    padding-right: calc(20 * var(--u));
  }

  .value-card__logo {
    width: calc(121 * var(--u));
  }

  .value-card__title {
    margin-top: calc(8 * var(--u));
    font-size: calc(25 * var(--u));
  }

  .value-card__text {
    padding: 0 calc(14 * var(--u)) 0 calc(22 * var(--u));
    font-size: calc(20.5 * var(--u));
  }

  .value-card__text::before {
    height: calc(30 * var(--u));
  }

  .value-card__text::after {
    height: calc(30 * var(--u) + var(--bar));
  }

  .value-card__panel::after {
    width: calc(99 * var(--u));
    height: calc(11 * var(--u));
    border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0;
  }
}

/* Hover: the card under the cursor opens its panel and the active one closes. */
@media (hover: hover) {
  .values__list:has(.value-card:hover) .value-card.is-active:not(:hover) .value-card__panel {
    grid-template-rows: 0fr;
  }

  .values__list:has(.value-card:hover) .value-card.is-active:not(:hover) .value-card__head {
    padding-bottom: calc(var(--head-pb) + var(--bar));
  }

  .values__list:has(.value-card:hover) .value-card.is-active:not(:hover) .value-card__panel::after {
    opacity: 0;
    transform: translate(-50%, 100%);
    transition-delay: 0s;
  }

  .value-card:hover .value-card__panel {
    grid-template-rows: 1fr;
  }

  .value-card:hover .value-card__panel::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.2s;
  }

  .value-card:hover .value-card__head {
    padding-bottom: var(--head-pb-active);
  }

  .value-card:hover .value-card__image {
    --hover-scale: 1.05;
  }
}

/* Touch devices: the card panels are always visible (no hover). */
@media (hover: none) {
  .value-card .value-card__panel {
    grid-template-rows: 1fr;
  }

  .value-card .value-card__head {
    padding-bottom: 14px;
  }

  .value-card .value-card__panel::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card:hover .value-card__image {
    --hover-scale: 1;
    will-change: auto;
  }
}