/* host-programs.css — Simple 시안 (Claude Design 2026-04-29)
 * Scope: 6 host program pages only. Namespaced with `.hp-*` to avoid collision
 * with /pages/programs/(buddy|agency|...).
 *
 * Design source: design-system/project/designs/program-page.jsx (simplified)
 * Restrained editorial layout — no gradients, single accent used sparingly,
 * mono eyebrows, single-color rules, ink button + bordered button CTA.
 */

.hp-main {
  --hp-bg: #faf8f4;
  --hp-ink: #1a1816;
  --hp-ink2: #5a544c;
  --hp-ink3: #9a9288;
  --hp-rule: #e6e0d4;
  --hp-rule-soft: #efeae0;
  --hp-accent: #C2410C;
  --hp-serif: var(--font-heading);
  --hp-sans: var(--font-body);
  --hp-mono: var(--font-data);
  --hp-pad: 56px;
  --hp-pad-mobile: 24px;
  --hp-gutter: 180px;
  --hp-col-gap: 64px;

  background: var(--hp-bg);
  color: var(--hp-ink);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-top: var(--header-height);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ====== Hero ====== */
.hp-hero {
  padding: 96px var(--hp-pad) 80px;
}
.hp-hero__eyebrow {
  font-family: var(--hp-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-ink3);
  margin-bottom: 40px;
}
.hp-hero__title {
  font-family: var(--hp-serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--hp-ink);
  margin: 0;
  max-width: 900px;
}
.hp-hero__lead {
  margin-top: 32px;
  font-family: var(--hp-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--hp-ink2);
  max-width: 620px;
}

/* ====== Hero image (stripe placeholder) ====== */
.hp-hero-image {
  margin: 0 var(--hp-pad) 96px;
  height: 380px;
  position: relative;
  background-color: var(--hp-rule-soft);
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px);
  overflow: hidden;
}
.hp-hero-image__caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  font-family: var(--hp-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hp-ink3);
}

/* ====== Shared section frame (180px gutter + content) ====== */
.hp-section {
  padding: 0 var(--hp-pad) 96px;
}
.hp-section__inner {
  display: grid;
  grid-template-columns: var(--hp-gutter) 1fr;
  gap: var(--hp-col-gap);
  border-top: 1px solid var(--hp-rule);
  padding-top: 56px;
}
.hp-section__gutter {
  /* intentionally empty — preserves the indent */
}

/* ====== Overview ====== */
.hp-overview__big {
  font-family: var(--hp-sans);
  font-size: 22px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--hp-ink);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 820px;
}
.hp-overview__italic {
  font-family: var(--hp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hp-ink2);
  margin: 20px 0 0;
  max-width: 760px;
  font-style: normal;
}

/* ====== Tags (2-col key/value pairs) ====== */
.hp-tags__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 28px;
  column-gap: 48px;
}
.hp-tags__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-tags__key {
  font-family: var(--hp-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--hp-ink3);
}
.hp-tags__value {
  font-family: var(--hp-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hp-ink);
}

/* ====== Inclusions (yes/no lists) ====== */
.hp-inclusions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.hp-inclusions__title {
  font-family: var(--hp-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  margin: 0 0 16px;
}
.hp-inclusions__col--no .hp-inclusions__title {
  color: var(--hp-ink2);
}
.hp-inclusions__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-inclusions__list li {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  font-family: var(--hp-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--hp-ink);
}
.hp-inclusions__list li::before {
  content: "+";
  width: 14px;
  flex-shrink: 0;
  color: var(--hp-accent);
  font-weight: 500;
}
.hp-inclusions__list--dim li {
  color: var(--hp-ink3);
}
.hp-inclusions__list--dim li::before {
  content: "–";
  color: var(--hp-ink3);
}

/* ====== Three Questions (What / Why / Whom) ====== */
.hp-questions__list {
  display: flex;
  flex-direction: column;
}
.hp-questions__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--hp-rule-soft);
}
.hp-questions__row:first-child {
  border-top: none;
  padding-top: 0;
}
.hp-questions__label {
  font-family: var(--hp-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.hp-questions__heading {
  font-family: var(--hp-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  margin: 0;
}
.hp-questions__text {
  font-family: var(--hp-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hp-ink2);
  margin: 0;
  max-width: 660px;
}

/* ====== CTA ====== */
.hp-cta {
  padding: 80px var(--hp-pad) 120px;
  border-top: 1px solid var(--hp-rule);
  text-align: center;
}
.hp-cta__title {
  font-family: var(--hp-serif);
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--hp-ink);
  margin: 0 auto 20px;
  max-width: 720px;
}
.hp-cta__lead {
  font-family: var(--hp-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hp-ink2);
  margin: 0 auto 36px;
  max-width: 620px;
}
.hp-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hp-cta__btn {
  padding: 14px 26px;
  font-family: var(--hp-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.hp-cta__btn--primary {
  background: var(--hp-ink);
  color: var(--hp-bg);
  border: 1px solid var(--hp-ink);
}
.hp-cta__btn--primary:hover {
  background: #000;
}
.hp-cta__btn--secondary {
  background: transparent;
  color: var(--hp-ink);
  border: 1px solid var(--hp-rule);
}
.hp-cta__btn--secondary:hover {
  background: var(--hp-rule-soft);
}

/* ====== Responsive (≤ 1024px) ====== */
@media (max-width: 1024px) {
  .hp-main {
    --hp-pad: var(--hp-pad-mobile);
    --hp-gutter: 0px;
    --hp-col-gap: 0px;
  }
  .hp-hero {
    padding: 56px var(--hp-pad) 48px;
  }
  .hp-hero__eyebrow { margin-bottom: 24px; }
  .hp-hero__title { font-size: clamp(40px, 10vw, 56px); }
  .hp-hero__lead { font-size: 16px; }
  .hp-hero-image { height: 240px; margin: 0 var(--hp-pad) 64px; }
  .hp-section { padding: 0 var(--hp-pad) 64px; }
  .hp-section__inner {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }
  .hp-section__gutter { display: none; }
  .hp-overview__big { font-size: 19px; }
  .hp-overview__italic { font-size: 15px; }
  .hp-tags__grid { grid-template-columns: 1fr; row-gap: 20px; }
  .hp-inclusions__grid { grid-template-columns: 1fr; gap: 40px; }
  .hp-inclusions__title { font-size: 22px; }
  .hp-questions__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .hp-cta { padding: 56px var(--hp-pad) 80px; }
  .hp-cta__title { font-size: clamp(32px, 8vw, 40px); }
  .hp-cta__lead { font-size: 16px; }
  .hp-cta__btn { padding: 12px 22px; font-size: 14px; }
}