/*
  Vital Check — section components (founder intro, card performance, fine print)
  Depends on tokens in styles.css. Theme-aware via the same custom properties.
*/

/* ============================================================
   Photographic hero — full-bleed image + overlaid text (dark)
   ============================================================ */
.hero-photo {
  position: relative;
  min-height: 760px; /* match the uniform tile height */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-photo__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.hero-photo__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(3, 8, 15, 0.92) 0%,
    rgba(3, 8, 15, 0.6) 44%,
    rgba(3, 8, 15, 0.16) 74%,
    rgba(3, 8, 15, 0) 100%);
}
.hero-photo__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-photo .container { position: relative; z-index: 2; }
.hero-photo .tile__inner { align-items: flex-start; text-align: left; }
.hero-photo .cta-row { justify-content: flex-start; }

/* Centered variant (busy full-frame media, e.g. video) */
.hero-photo--center .tile__inner { align-items: center; text-align: center; }
.hero-photo--center .cta-row { justify-content: center; }
.hero-photo--center .hero-photo__scrim {
  background:
    linear-gradient(180deg, rgba(3, 8, 15, 0.5) 0%, rgba(3, 8, 15, 0.4) 48%, rgba(3, 8, 15, 0.74) 100%),
    radial-gradient(62% 54% at 50% 42%, rgba(3, 8, 15, 0.5) 0%, rgba(3, 8, 15, 0) 100%);
}

/* Hero background video plays regardless of reduced-motion (decorative, muted).
   The poster <img> sits beneath as the instant-paint / load-failure fallback. */

@media (max-width: 700px) {
  .hero-photo__img { object-position: 64% center; }
  .hero-photo__scrim {
    background: linear-gradient(180deg,
      rgba(3, 8, 15, 0.68) 0%,
      rgba(3, 8, 15, 0.48) 45%,
      rgba(3, 8, 15, 0.84) 100%);
  }
  .hero-photo .tile__inner { align-items: center; text-align: center; }
  .hero-photo .cta-row { justify-content: center; }
}

/* Family-photo background — '시작하게 된 마음' section */
.origin-photo { position: relative; overflow: hidden; }
.origin-photo__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.origin-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(8, 10, 14, 0.80) 0%,
    rgba(8, 10, 14, 0.62) 40%,
    rgba(8, 10, 14, 0.84) 100%);
}
.origin-photo .container { position: relative; z-index: 2; }
.origin-photo .note p { color: rgba(245, 245, 247, 0.9); }
.origin-photo .note strong { color: #fff; }

/* Lecture-photo background — '대표 소개' (founder) section */
.founder-photo { position: relative; overflow: hidden; }
.founder-photo__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.founder-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(6, 8, 12, 0.86) 0%,
    rgba(6, 8, 12, 0.74) 45%,
    rgba(6, 8, 12, 0.88) 100%);
}
.founder-photo .container { position: relative; z-index: 2; }
/* honour the requested 3-line break on tablet+; let it wrap naturally on mobile
   (a centered flex item sized to a hard-broken segment overflows narrow viewports) */
@media (max-width: 600px) { .subcopy .brk { display: none; } }
/* text colours inherit from .tile--dark; chip gets a touch more lift over the photo */
.founder-photo .chip {
  color: rgba(245, 245, 247, 0.92);
  background: rgba(255, 255, 255, 0.10);
}

/* Lab-photo background — 'Healthcare & AI' (#health-tech) section */
.health-photo { position: relative; overflow: hidden; }
.health-photo__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.health-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(4, 7, 13, 0.80) 0%,
    rgba(4, 7, 13, 0.66) 38%,
    rgba(4, 7, 13, 0.86) 100%);
}
.health-photo .container { position: relative; z-index: 2; }

/* Early-warning monitoring photo — '왜 만드나 / 조기경보' (#definition) section */
.definition-photo { position: relative; overflow: hidden; }
.definition-photo__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
}
.definition-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(3, 7, 14, 0.78) 0%,
    rgba(3, 7, 14, 0.70) 34%,
    rgba(3, 7, 14, 0.88) 100%);
}
.definition-photo .container { position: relative; z-index: 2; }

/* Founder's note — quiet, emotional editorial paragraphs */
.note {
  max-width: 54ch;
  margin-top: var(--s-lg);
  text-align: left;
}
.note p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.2px;
  color: var(--c-ink-80);
  text-wrap: pretty;
}
.note p + p { margin-top: var(--s-md); }
.note strong { font-weight: 600; color: var(--c-ink); }
.tile--dark .note p,
.tile--dark-2 .note p { color: var(--c-body-muted); }
.tile--dark .note strong,
.tile--dark-2 .note strong { color: var(--c-on-dark); }

/* Two-column feature grid (parent-care two-track section) */
.features--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 640px) { .features--duo { grid-template-columns: 1fr; } }

/* ============================================================
   Founder intro — centered credential chips on a dark tile
   ============================================================ */
.founder__creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  list-style: none;
  margin-top: var(--s-lg);
  width: 100%; /* allow chips to wrap inside the centered flex column */
}

/* dark-tile chip (matches the dark-2 variant) */
.tile--dark .chip {
  color: var(--c-body-muted);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Portfolio card — measured performance row
   ============================================================ */
.card__perf {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--s-sm);
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--c-ink-48);
}
.card__perf svg { width: 13px; height: 13px; color: var(--c-primary); flex: 0 0 auto; }
.card__perf strong { color: var(--c-ink); font-weight: 600; }
.tile--dark-2 .card__perf strong { color: var(--c-on-dark); }

/* portfolio proof line + section fine print */
.proof-line {
  font-size: 14px;
  letter-spacing: -0.224px;
  color: var(--c-primary);
  margin-top: var(--s-sm);
}
.tile--dark .proof-line,
.tile--dark-2 .proof-line { color: var(--c-primary-on-dark); }
.fineprint {
  width: 100%;
  margin-top: var(--s-lg);
  font-size: 11px;
  letter-spacing: -0.1px;
  color: var(--c-ink-48);
  text-align: center;
}