/* ==========================================================================
   Industries — "Typické projekty" (full-bleed band, hover-swap image gallery)
   Matches the Solutions section on hardwario.com.
   ========================================================================== */

.industries { padding: 40px 0 80px; }
.industries__box {
  background: linear-gradient(to bottom, var(--surface), var(--surface-alt) 30%);
  padding: 96px 0;
}
.industries .section-head { margin-bottom: 48px; }
.industries .h2--bold { font-weight: 700; font-size: 48px; }
.industries .kicker { color: var(--text-mute); }

.industries__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}

/* ---- Industry list (each row is a link) ---- */
.industries__list { display: flex; flex-direction: column; }
.industry {
  display: flex; gap: 24px; align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
}
.industries__list li:last-child .industry { border-bottom: 0; }

.industry__icon {
  flex: none; color: var(--heading);
  display: inline-flex; align-items: center; justify-content: center;
}
.industry__icon svg { width: 36px; height: 36px; }

.industry__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.industry__title { font-size: 20px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
.industry__tags { font-size: 14px; line-height: 21px; color: var(--text-mute); }

/* ---- Hover/active: reveal the diagonal arrow, swap the image (no red) ---- */
.industry__arrow {
  margin-left: auto; flex: none; color: var(--heading);
  display: inline-flex; align-items: center;
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .3s ease, transform .3s ease;
}
.industry__arrow .arrow-ur { width: 28px; height: 28px; }
.industry:hover .industry__arrow,
.industry[aria-current="true"] .industry__arrow { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) {
  .industry__arrow { transition: opacity .2s ease; transform: none; }
}

/* ---- Media (stacked images, crossfade on hover) ----
   Uses CSS grid stacking (all images in the same 1/1 cell) instead of absolute
   positioning so the container always has a height — incl. iOS Safari, where
   aspect-ratio on an all-absolute container can collapse to 0. ---- */
.industries__media {
  display: grid; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--surface-muted);
}
.industries__img {
  grid-area: 1 / 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .45s ease, transform .6s ease;
}
.industries__img.is-active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .industries__img { transition: opacity .2s ease; transform: none; }
}

@media (max-width: 720px) {
  .industries__box { padding: 56px 0; }
  .industries .h2--bold { font-size: 32px; }
  .industry { padding: 18px 4px; gap: 18px; }
  /* Na mobilu skryjeme obrázek (hover swap nedává smysl) — jen seznam oborů */
  .industries__media { display: none; }
}