/* =========================================================
   T-Control · Soluciones
   The language of the process section, in a different shape: two rows of
   three cards. In each row one card is open: it widens (flex-grow), its
   photo comes back to colour and its description arrives once the card
   has opened; the others stay narrower, grey and darker. Hover, focus or
   tap opens a card. One curve and one duration for everything.
   Texts and images: "Soluciones" of the inventory (each card keeps its
   image).
========================================================= */

.tc-sol {
  --tc-open-ease: cubic-bezier(.65, 0, .35, 1);
  --tc-open-time: .9s;
  padding: clamp(96px, 10vw, 150px) clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--tc-line);
  background: var(--tc-soft);
}

.tc-sol__inner { max-width: 1680px; margin: 0 auto; }

.tc-sol__grid { display: grid; gap: 10px; }

.tc-sol__row { display: flex; gap: 10px; height: clamp(380px, 36vw, 500px); }

.tc-sol__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--tc-black);
  color: var(--tc-white);
  cursor: pointer;
  transition: flex-grow var(--tc-open-time) var(--tc-open-ease);
}
.tc-sol__card.is-active { flex-grow: 2.3; cursor: default; }

.tc-sol__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.5);
  scale: 1.08;
  transition: scale 1.4s var(--tc-ease), filter var(--tc-open-time) var(--tc-open-ease);
}
.tc-sol__card.is-active img { scale: 1; filter: grayscale(0) brightness(.92); }

.tc-sol__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc-black) 34%, transparent),
    transparent 36%,
    color-mix(in srgb, var(--tc-black) 86%, transparent));
}

.tc-sol__num {
  position: absolute;
  top: 22px;
  left: 24px;
  color: var(--tc-grey-light);
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .06em;
}

.tc-sol__body { position: absolute; right: 24px; bottom: 24px; left: 24px; }

.tc-sol__sub {
  margin: 0 0 8px;
  color: var(--tc-grey-light);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tc-sol__card h3 { max-width: 460px; color: var(--tc-white); font-size: clamp(1.9rem, 2.4vw, 2.9rem); line-height: .95; }

/* the description opens (0fr → 1fr) and arrives after the card has widened */
.tc-sol__desc {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 440px;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--tc-white) 82%, transparent);
  font-size: .95rem;
  line-height: 1.55;
  opacity: 0;
  translate: 0 12px;
  filter: blur(4px);
  transition: grid-template-rows .45s var(--tc-open-ease), opacity .25s ease, translate .25s ease, filter .25s ease, margin .45s var(--tc-open-ease);
}
.tc-sol__card.is-active .tc-sol__desc {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition: grid-template-rows .6s var(--tc-open-ease) .3s, margin .6s var(--tc-open-ease) .3s, opacity .7s var(--tc-ease) .5s, translate .7s var(--tc-ease) .5s, filter .7s var(--tc-ease) .5s;
}

.tc-sol__card:focus-visible { outline: 3px solid var(--tc-black); outline-offset: 3px; }

@media (max-width: 1023.98px) {
  .tc-sol__row { height: 420px; }
  .tc-sol__card.is-active { flex-grow: 3; }
  .tc-sol__card:not(.is-active) h3 { font-size: 1.5rem; }
}

/* phone: one column, every card open */
@media (max-width: 760px) {
  .tc-sol__grid, .tc-sol__row { display: grid; gap: 10px; height: auto; }
  .tc-sol__card { height: 360px; cursor: default; }
  .tc-sol__card img { scale: 1; filter: grayscale(0) brightness(.9); }
  .tc-sol__desc { grid-template-rows: 1fr; margin-top: 12px; opacity: 1; translate: none; filter: none; }
  .tc-sol__card:not(.is-active) h3 { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* scroll-driven (scripts/mobile-focus.js): only the card crossing the
     middle of the screen is open; the rest rest in grey */
  .tc-mfocus .tc-sol__card:not(.is-focus) img { scale: 1.06; filter: grayscale(1) brightness(.5); }
  .tc-mfocus .tc-sol__card:not(.is-focus) .tc-sol__desc { grid-template-rows: 0fr; margin-top: 0; opacity: 0; translate: 0 12px; }
  .tc-mfocus .tc-sol__card.is-focus .tc-sol__desc { transition: grid-template-rows .6s var(--tc-open-ease) .15s, margin .6s var(--tc-open-ease) .15s, opacity .6s var(--tc-ease) .3s, translate .6s var(--tc-ease) .3s; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-sol__card, .tc-sol__card img, .tc-sol__desc { transition: none !important; }
}