/* ============================================================
   Project Builder — /projects/ landing
   ------------------------------------------------------------
   The marketing entry page. Layout adapts a travel-app hero:
   pitch on the left and community proof on the right, then a
   horizontal discipline carousel below with the phone mock-up
   hanging in the middle of the cards.

   Depends on pb-tokens.css (variables scoped under `.pb-scope`).
   Everything here is namespaced under `.pb-landing` so nothing
   leaks onto the shared app shell or the hub/workspace pages.
   ============================================================ */

.pb-landing {
  color: var(--pb-text);
  font-family: var(--pb-font-ui);
}

/* ── Hero grid ────────────────────────────────────────────── */
.pbl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 2rem;
  align-items: center;
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-2xl);
  box-shadow: var(--pb-shadow-md);
  padding: 2.5rem;
  margin: .5rem 0 2rem;
  overflow: hidden;
}

/* Left — the pitch */
.pbl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pb-primary);
  margin: 0 0 1rem;
}
.pbl-hero__title {
  font-family: var(--pb-font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pb-ink-900);
  margin: 0 0 1.1rem;
}
.pbl-hero__lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--pb-text-muted);
  max-width: 30rem;
  margin: 0 0 1.75rem;
}
.pbl-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Pill CTAs — the dark rounded button from the reference layout. Used on both
   <a> and <button>, so it resets the font a <button> would otherwise inherit. */
.pbl-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  padding: .8rem 1.9rem;
  border-radius: var(--pb-r-pill);
  background: var(--pb-ink-900);
  color: #fff;
  border: 1px solid var(--pb-ink-900);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pbl-cta:hover { background: var(--pb-indigo-800); border-color: var(--pb-indigo-800); color: #fff; transform: translateY(-1px); box-shadow: var(--pb-shadow-md); }
.pbl-cta:focus-visible { outline: 2px solid var(--pb-primary); outline-offset: 2px; }
.pbl-cta--ghost { background: transparent; color: var(--pb-ink-900); border-color: var(--pb-border-strong); }
.pbl-cta--ghost:hover { background: var(--pb-neutral-100); color: var(--pb-ink-900); border-color: var(--pb-ink-400); }

/* Right — social proof aside */
.pbl-hero__aside { align-self: center; }
.pbl-hero__tagline {
  font-family: var(--pb-font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.05;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pb-ink-800);
  margin: 0 0 .9rem;
}
.pbl-hero__aside-copy {
  font-size: .95rem;
  color: var(--pb-text-muted);
  margin: 0 0 1rem;
}
.pbl-avatars { display: flex; align-items: center; }
.pbl-avatar {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  border: 3px solid var(--pb-bg-elev);
  margin-left: -.7rem;
  background: linear-gradient(135deg, var(--pb-grad-a, var(--pb-indigo-500)), var(--pb-grad-b, var(--pb-indigo-400)));
  box-shadow: var(--pb-shadow-sm);
}
.pbl-avatar:first-child { margin-left: 0; }
.pbl-avatar--more {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--pb-rose-100);
  color: var(--pb-rose-500);
}

/* ── Phone preview (positioned by .pbl-phone-figure in the showcase) ──────── */
.pbl-phone {
  position: relative;
  width: 15.5rem;
  border-radius: 2.4rem;
  background: var(--pb-ink-900);
  padding: .55rem;
  box-shadow: var(--pb-shadow-lg);
}
.pbl-phone__notch {
  position: absolute;
  top: .95rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.2rem;
  height: .95rem;
  border-radius: var(--pb-r-pill);
  background: var(--pb-ink-900);
  z-index: 2;
}
.pbl-phone__screen {
  position: relative;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--pb-indigo-100), var(--pb-bg-elev) 42%);
  padding: 2rem 1.05rem 1.05rem;
  overflow: hidden;
}
.pbl-scr__kicker {
  font-family: var(--pb-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pb-ink-800);
  margin: .4rem 0 0;
  line-height: 1;
}
.pbl-scr__title {
  font-family: var(--pb-font-display);
  font-style: italic;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--pb-ink-900);
  margin: 0 0 .85rem;
  line-height: 1;
}
.pbl-scr__search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-pill);
  padding: .5rem .8rem;
  font-size: .78rem;
  color: var(--pb-text-subtle);
  box-shadow: var(--pb-shadow-sm);
}
.pbl-scr__search-end { margin-left: auto; color: var(--pb-primary); }
.pbl-scr__chips { display: flex; gap: .35rem; margin: .8rem 0; overflow: hidden; }
.pbl-scr__chip {
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .28rem .65rem;
  border-radius: var(--pb-r-pill);
  border: 1px solid var(--pb-border);
  background: var(--pb-bg-elev);
  color: var(--pb-ink-600);
}
.pbl-scr__chip.is-on { background: var(--pb-ink-900); color: #fff; border-color: var(--pb-ink-900); }
.pbl-scr__section { font-size: .82rem; font-weight: 700; color: var(--pb-ink-800); margin: .3rem 0 .5rem; }
.pbl-scr__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--pb-r-lg);
  overflow: hidden;
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  box-shadow: var(--pb-shadow-sm);
}
.pbl-scr__card-photo {
  height: 4.5rem;
  background: var(--pb-indigo-100);
}
.pbl-scr__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbl-scr__card-body { padding: .6rem .7rem .7rem; }
.pbl-scr__card-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.pbl-scr__card-row strong { font-size: .85rem; color: var(--pb-ink-900); }
.pbl-scr__pill {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1rem .45rem;
  border-radius: var(--pb-r-pill);
  background: var(--pb-green-100);
  color: var(--pb-green-500);
}
.pbl-scr__card-body small { display: block; font-size: .68rem; color: var(--pb-text-subtle); margin: .15rem 0 .5rem; }
.pbl-scr__go {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: var(--pb-r-pill);
  background: var(--pb-ink-900);
  color: #fff;
}
.pbl-scr__tabs {
  display: flex;
  justify-content: space-between;
  margin-top: .9rem;
  padding-top: .6rem;
  border-top: 1px solid var(--pb-border);
}
.pbl-scr__tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  font-size: .58rem;
  color: var(--pb-ink-400);
}
.pbl-scr__tabs span i { font-size: .9rem; }
.pbl-scr__tabs span.is-on { color: var(--pb-ink-900); font-weight: 700; }

/* ── Discipline showcase: carousel + centred phone ────────── */
.pbl-showcase { margin: 1.5rem 0 2.5rem; }
.pbl-showcase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.pbl-showcase__title {
  font-family: var(--pb-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pb-ink-800);
  margin: 0;
}
.pbl-showcase__hint { font-size: .88rem; color: var(--pb-text-subtle); margin: 0; }

/* The stage anchors the absolutely-centred phone over the scrolling rail. The
   top padding is headroom for the phone (taller than the cards) to rise into
   without overlapping the heading above. */
.pbl-showcase__stage { position: relative; padding-top: 8rem; }

/* Horizontal rail — every discipline card in one scrollable row, with a
   transparent gap in the middle the phone hangs over. Cards align to the bottom
   so the taller phone rises above the band, like the reference layout. Wide
   content scrolls inside its own box so the page body never scrolls sideways. */
.pbl-showcase__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 1fr);
  align-items: end;
  gap: 1.25rem;
  overflow-x: auto;
  padding: .5rem .25rem 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
/* An empty grid track the phone hangs over — reserves one card-width column in
   the middle of the rail so no card sits fully behind the phone at rest.
   Hidden on narrow screens, where the phone stacks above the rail instead. */
.pbl-showcase__gap { pointer-events: none; }

/* The phone, hung over the gap. Its bottom overlaps the card band; its top
   rises above it. Decorative — aria-hidden in the markup. */
.pbl-phone-figure {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(15, 23, 42, .22));
}

.pbl-dest {
  display: flex;
  flex-direction: column;
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  overflow: hidden;
  box-shadow: var(--pb-shadow-sm);
  scroll-snap-align: start;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pbl-dest:hover { transform: translateY(-3px); box-shadow: var(--pb-shadow-md); border-color: var(--pb-border-strong); }
.pbl-dest__photo {
  position: relative;
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .92);
  font-size: 2.6rem;
  background: linear-gradient(135deg, var(--pb-grad-a, var(--pb-indigo-600)), var(--pb-grad-b, var(--pb-indigo-400)));
}
/* Real photo fills the header; the gradient shows through while it loads or if
   it fails, so a card is never blank. */
.pbl-dest__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbl-dest__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.pbl-dest__row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.pbl-dest__title {
  font-family: var(--pb-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pb-ink-900);
  margin: 0;
}
.pbl-dest__tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pb-ink-600);
}
.pbl-dest__tag i { color: var(--pb-green-500); font-size: .8rem; }
.pbl-dest__meta {
  font-size: .85rem;
  line-height: 1.45;
  color: var(--pb-text-muted);
  margin: 0 0 1rem;
  flex: 1;
}
.pbl-dest__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pbl-dest__count { font-size: .78rem; color: var(--pb-text-subtle); }
.pbl-explore {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  padding: .45rem 1.2rem;
  border-radius: var(--pb-r-pill);
  background: var(--pb-ink-900);
  color: #fff;
  border: 1px solid var(--pb-ink-900);
  transition: background .15s ease;
}
.pbl-explore:hover { background: var(--pb-indigo-800); border-color: var(--pb-indigo-800); color: #fff; }
.pbl-explore:focus-visible { outline: 2px solid var(--pb-primary); outline-offset: 2px; }

/* ── Examples footer ──────────────────────────────────────── */
.pbl-examples { margin: 2.5rem 0 1rem; }
.pbl-examples__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.pbl-example {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--pb-r-lg);
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  box-shadow: var(--pb-shadow-sm);
  text-decoration: none;
  color: var(--pb-ink-800);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pbl-example:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-md); border-color: var(--pb-border-strong); color: var(--pb-ink-900); }
.pbl-example__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--pb-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  background: linear-gradient(135deg, var(--pb-green-500), var(--pb-green-600));
}
.pbl-example__name { font-weight: 600; font-size: .95rem; }
.pbl-example__arrow { margin-left: auto; color: var(--pb-primary); }

/* ── "Coming soon" modal ──────────────────────────────────── */
.pbl-modal {
  position: fixed;
  inset: 0;
  z-index: 1080; /* above base_app's sticky navbar (999) and sidebar (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.pbl-modal__card {
  position: relative;
  width: min(26rem, 100%);
  background: var(--pb-bg-elev);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-r-xl);
  box-shadow: var(--pb-shadow-lg);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
}
.pbl-modal__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--pb-r-sm);
  background: transparent;
  color: var(--pb-ink-500);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.pbl-modal__close:hover { background: var(--pb-neutral-100); color: var(--pb-ink-900); }
.pbl-modal__close:focus-visible { outline: 2px solid var(--pb-primary); outline-offset: 2px; }
.pbl-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  margin-bottom: .9rem;
  font-size: 1.5rem;
  color: var(--pb-primary);
  background: var(--pb-indigo-100);
}
.pbl-modal__title {
  font-family: var(--pb-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pb-ink-900);
  margin: 0 0 .5rem;
}
.pbl-modal__text {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--pb-text-muted);
  margin: 0 0 1.4rem;
}
.pbl-modal__card .pbl-cta { justify-content: center; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hero stacks: pitch, then community proof. */
  .pbl-hero { grid-template-columns: 1fr; }
  .pbl-hero__aside { order: 2; }

  /* The overlap needs room for two cards + the phone; below this it reads
     better stacked. column-reverse puts the phone (last child) on top. */
  .pbl-showcase__stage {
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
    padding-top: 0;
  }
  .pbl-showcase__gap { display: none; }
  .pbl-phone-figure {
    position: static;
    transform: none;
    width: fit-content;
    margin-inline: auto;
  }
}
@media (max-width: 575.98px) {
  .pbl-hero { padding: 1.75rem 1.35rem; }
  .pbl-hero__tagline { font-size: 1.5rem; }
  /* One card fills the viewport, the next peeks — still a swipeable rail. */
  .pbl-showcase__rail { grid-auto-columns: 82%; }
}