/* ============================================================================
   Who-it's-for hub page — /who-its-for/
   ----------------------------------------------------------------------------
   Same rhythm as the product page (alternating deep-dives), but the
   sections are 4 audience portraits rather than 5 capabilities. Heavy
   reuse of product.css patterns; this file adds page-specific hero +
   visuals + a couple of layout tweaks.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.wif-hero {
  padding-block: var(--s-9) var(--s-7);
  background: var(--bg);
  position: relative;
}

.wif-hero__inner {
  max-width: 960px;
  margin-inline: auto;
  text-align: left;
}

.wif-hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 var(--s-4);
}
.wif-hero__kicker em.italic {
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 14px;
  color: var(--marquee);
}

.wif-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 120px);
  letter-spacing: -0.025em;
  line-height: 0.96;
  margin: 0 0 var(--s-6);
  transform: skewX(-6deg);
  transform-origin: 0% 100%;
  display: inline-block;
  max-width: 16ch;
}
.wif-hero__headline em.italic {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: -0.01em;
  transform: skewX(0);
  display: inline-block;
  color: var(--marquee);
}

.wif-hero__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 56ch;
  margin: 0 0 var(--s-7);
}
.wif-hero__lede em.italic {
  color: var(--text);
}

/* ---- Persona deep-dive (reuses .pp-feature pattern) ------------------- */
/* The alternating-row layout is identical to /product/. We use the same
   .pp-feature classes from product.css for those rows. This file only
   styles the page-specific visuals below. */

/* ---- Persona visuals --------------------------------------------------- */

/* Agency tour-roster card: a compact list showing multiple active tours
   and the agents on them. */
.wif-roster {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.wif-roster th {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-wash);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}
.wif-roster th:last-child { text-align: right; padding-right: 0; }
.wif-roster td {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid rgba(42, 35, 29, 0.08);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.wif-roster td:last-child { text-align: right; padding-right: 0; }
.wif-roster tbody tr:last-child td { border-bottom: none; }

.wif-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.wif-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.wif-status--live  { background: rgba(46, 145, 99, 0.15); color: #2E9163; }
.wif-status--draft { background: rgba(42, 35, 29, 0.08);  color: var(--text-soft); }
.wif-status--book  { background: rgba(79, 95, 196, 0.15); color: #4f5fc4; }
.wif-status--hold  { background: rgba(211, 151, 52, 0.18); color: var(--amber-deep, #D39734); }

.wif-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wif-agent__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #fff;
  font-weight: 500;
}
.wif-agent__avatar--a { background: var(--marquee); }
.wif-agent__avatar--b { background: #4f5fc4; }
.wif-agent__avatar--c { background: var(--amber-deep, #D39734); }
.wif-agent__avatar--d { background: #2E9163; }

/* Hotel block view — group block with rooms held / confirmed / open */
.wif-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}
.wif-block__title {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text);
}
.wif-block__sub {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
}

.wif-block__bars {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wif-block__bar {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.wif-block__barLabel { color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.10em; }
.wif-block__barTrack {
  position: relative;
  height: 8px;
  background: rgba(42, 35, 29, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.wif-block__barFill {
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  border-radius: 999px;
}
.wif-block__barFill--confirmed { background: #2E9163; }
.wif-block__barFill--held      { background: var(--amber-deep, #D39734); }
.wif-block__barFill--open      { background: rgba(42, 35, 29, 0.18); }
.wif-block__barVal { color: var(--text); text-align: right; font-weight: 500; }

.wif-block__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(42, 35, 29, 0.10);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.wif-block__foot strong { color: var(--text); font-weight: 600; }

/* Tour-day mini timeline — same vocabulary as the product page manifest
   visual but with smaller per-row sizing. */
.wif-tline {
  position: relative;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wif-tline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(42, 35, 29, 0.18);
}
.wif-tline__item { position: relative; }
.wif-tline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--s-5) * -1 + 2px);
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marquee);
  box-shadow: 0 0 0 3px var(--paper, #FAF5E8);
}
.wif-tline__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 2px;
}
.wif-tline__label {
  font-family: var(--font-sans);
  font-size: 13px;
  margin: 0;
  color: var(--text);
}
.wif-tline__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-wash);
  margin-top: 2px;
}

/* Per-diem chip row — for the touring persona visual. */
.wif-perdiem {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(42, 35, 29, 0.10);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
}
.wif-perdiem__amount {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--marquee);
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 720px) {
  .wif-hero { padding-block: var(--s-7) var(--s-5); }
  .wif-hero__headline { font-size: clamp(44px, 12vw, 72px); }
}