/* ============================================================
   Corporate page — industry cards (.bz-ind), under "우리 팀의 업무에
   맞춰 배워요." Reference: the "Context changes everything" row on
   elsaspeak.com/en/enterprise (measured 2026-10-11 at 1024): 350x526 photo
   tiles (2:3), 8px apart, 12px radius, a bottom-up black scrim, a 30px white
   title, the line under it revealed on hover (grid rows 0fr -> 1fr, 500ms;
   opacity after a 150ms delay) and always shown on touch screens; 44px round
   arrows over the row's ends; 140px white fades at both edges (80px phones).
   Placed inside .bz-app, between its opener (title, line, roles, button) and
   its app demo (user, 2026-10-11), so the section's own heading leads it.
   ============================================================ */

/* The rail is the full page width: the row runs edge to edge under its
   fades, as the reference's does. */
.bz-ind__rail {
  --_card-w: clamp(15rem, 66vw, 19.5rem);   /* 350px at 1440, ~260px on a phone */
  --_fade: 140px;
  position: relative;
  margin-top: var(--sp-40);   /* button -> row, as the hero's line -> media step */
}
/* The app demo follows the row as a new beat of the same section. */
.bz-app__ind + .wrap .bz-app__stage { margin-top: var(--section-gap); }

.bz-ind__track {
  display: flex;
  gap: var(--sp-8);
  margin: 0;
  padding: 0 max(var(--gutter), (100% - var(--max-width)) / 2 + var(--gutter));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), (100% - var(--max-width)) / 2 + var(--gutter));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.bz-ind__track::-webkit-scrollbar { display: none; }
.bz-ind__track:focus-visible { outline: 2px solid var(--color--grey-1000); outline-offset: 4px; }

.bz-ind__card {
  position: relative;
  flex: none;
  inline-size: var(--_card-w);
  aspect-ratio: 2 / 3;
  border-radius: var(--radius--m);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--color--grey-100);
}

.bz-ind__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The scrim: the reference's from-black/70 via-black/20 to-transparent,
   drawn in the house ink (grey-1000) rather than pure black. */
.bz-ind__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color--grey-1000) 72%, transparent) 0%,
    color-mix(in srgb, var(--color--grey-1000) 20%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
}

.bz-ind__text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--sp-24);
  color: var(--color--white);
}

.bz-ind__name {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
  text-wrap: balance;
}
:lang(ko) .bz-ind__name { word-break: keep-all; }

/* Shown by default (touch screens, no hover). Where the pointer can hover,
   the line folds away and opens on hover — or for everyone when the row has
   keyboard focus, so a keyboard reader gets every line. */
.bz-ind__more {
  display: grid;
  grid-template-rows: 1fr;
}
.bz-ind__desc {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: var(--sp-8);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--color--white) 90%, transparent);
}
:lang(ko) .bz-ind__desc { line-height: var(--lh-ko-body); word-break: keep-all; }

@media (hover: hover) and (pointer: fine) {
  .bz-ind__more {
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .bz-ind__desc {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .bz-ind__card:hover .bz-ind__more,
  .bz-ind__track:focus-visible .bz-ind__more { grid-template-rows: 1fr; }
  .bz-ind__card:hover .bz-ind__desc,
  .bz-ind__track:focus-visible .bz-ind__desc { opacity: 1; transition-delay: 150ms; }
}

/* Edge fades over the row's ends (page white), under the arrows. */
.bz-ind__rail::before,
.bz-ind__rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  inline-size: var(--_fade);
  pointer-events: none;
}
.bz-ind__rail::before { left: 0;  background: linear-gradient(to right, var(--_theme---page--background), transparent); }
.bz-ind__rail::after  { right: 0; background: linear-gradient(to left,  var(--_theme---page--background), transparent); }
/* At either end there is nothing more to reveal, so that side's fade goes:
   it would only wash out the first or last photo. */
.bz-ind__rail::before,
.bz-ind__rail::after { transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.bz-ind__rail.is-start::before,
.bz-ind__rail.is-end::after { opacity: 0; }

/* Arrows: the site's round carousel control (.needs-carousel__btn), set over
   the row's ends as the reference sets its own. */
.bz-ind__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--hero-arrow);
  block-size: var(--hero-arrow);
  padding: 0;
  border: 0;
  border-radius: var(--radius--circle);
  background: var(--_theme---hero--control);
  color: var(--_theme---hero--control-icon);
  box-shadow: var(--_theme---hero--arrow-shadow);
  font-size: var(--fs-body-m);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.bz-ind__btn svg { inline-size: 1.2em; block-size: 1.2em; }
.bz-ind__btn--prev { left: var(--sp-16); }
.bz-ind__btn--next { right: var(--sp-16); }
.bz-ind__btn:disabled { opacity: 0; pointer-events: none; }
.bz-ind__btn:focus-visible { outline: 2px solid var(--color--grey-1000); outline-offset: 3px; }

/* The drifting row (js/business-industries.js, .is-loop): the cards are
   repeated once and the row moves on its own, so there are no ends — both
   fades and both arrows stay — and snapping would fight the drift. */
.bz-ind__rail.is-loop .bz-ind__track { scroll-snap-type: none; }

/* Without the script the row still scrolls by swipe or trackpad. */
.no-js .bz-ind__btn { display: none; }

@media (max-width: 640px) {
  .bz-ind__rail { --_fade: 80px; margin-top: var(--sp-32); }
  .bz-ind__text { padding: var(--sp-20); }
}

@media (prefers-reduced-motion: reduce) {
  .bz-ind__more,
  .bz-ind__desc,
  .bz-ind__btn { transition: none; }
}