/* Bespoke flagship-project detail pages. Shared visual vocabulary (icon cards,
   separators, stat band, stepped track, CTA) layered on the tl- design system.
   No chips/tags — content-forward. Hero + "other flagships" reuse projects.css. */

/* --- Separator -------------------------------------------------------- */
.tl-fp-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-1) 15%, var(--border-1) 85%, transparent);
  margin: var(--space-4) 0;
}

/* --- MyThaleria platform summary (DIGIT-TM3) -------------------------- */
/* User-benefit grid + dashboard screenshot, mirroring the Our Systems look.
   Reuses .tl-sys-feature / .tl-sys-shot from systems.css. */
.tl-fp-platform {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 900px) {
  .tl-fp-platform { grid-template-columns: 1fr; gap: var(--space-8); }
  .tl-fp-platform__shot { order: -1; }
}
.tl-fp-platform__features { margin-top: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.tl-fp-platform__cta {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-1);
}
.tl-fp-platform__cta p { margin: 0 0 var(--space-4); color: var(--fg-2); font-size: 15px; line-height: 1.6; max-width: 46ch; }

/* --- Body prose (project narrative) ---------------------------------- */
.tl-fp-prose { margin-top: var(--space-6); max-width: 78ch; }
.tl-fp-prose p { color: var(--fg-1); font-size: 17px; line-height: 1.75; margin: 0 0 var(--space-5); }
.tl-fp-prose p:first-child { font-size: 19px; line-height: 1.65; }
.tl-fp-prose p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .tl-fp-prose p:first-child { font-size: 18px; }
}

/* --- Empty-state placeholder (draft page) ----------------------------- */
.tl-fp-placeholder {
  margin-top: var(--space-6);
  padding: var(--space-10) var(--space-8);
  border: 1px dashed var(--border-2, var(--border-1));
  border-radius: var(--radius-lg);
  background: var(--surface-quiet);
  color: var(--fg-3);
  font-size: 15px;
  text-align: center;
}

/* --- Icon cards ------------------------------------------------------- */
.tl-fp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.tl-fp-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .tl-fp-cards--2 { grid-template-columns: 1fr; } }

.tl-fp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tl-fp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3, 0 12px 28px rgba(15, 27, 48, 0.12)); }
.tl-fp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-accent);
  color: var(--fg-accent);
}
.tl-fp-card__title { font-size: 18px; font-weight: var(--weight-semibold); color: var(--fg-1); margin: 0; }
.tl-fp-card__text { color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.tl-fp-card__text p { margin: 0 0 var(--space-3); }
.tl-fp-card__text p:last-child { margin-bottom: 0; }
.tl-fp-card__text strong { color: var(--fg-1); font-weight: var(--weight-semibold); }
.tl-fp-card__note {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
  border-top: 1px solid var(--border-1);
}
/* Service-area line — still not chips, but separated by space rather than
   middots. The middots were flex items of their own, so a wrapped row could end
   a line on one; the wider column gap does the separating instead. */
.tl-fp-card__areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
}

/* --- Opening fact, in the page --------------------------------------- */
/* The figure that opens a project page. No rule, no panel: the numeral is set
   large enough to hold the hierarchy on its own, with its label beneath it and
   the supporting sentence as the page's opening line beside it. Spacing carries
   the separation, so it reads as the start of the page rather than a block that
   was dropped onto it. */
.tl-fp-lead {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-12);
  row-gap: var(--space-5);
}
.tl-fp-lead__figure { display: flex; flex-direction: column; gap: 8px; }
.tl-fp-lead__value {
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 0.95;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.028em;
  color: var(--fg-1);
  white-space: nowrap;
}
.tl-fp-lead__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
}
/* Nudged down so its first line sits with the top of the numeral. */
.tl-fp-lead__note {
  margin: 0;
  padding-top: 6px;
  max-width: 54ch;
  font-size: 19px;
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .tl-fp-lead { grid-template-columns: 1fr; }
  .tl-fp-lead__note { padding-top: 0; font-size: 17px; }
}

/* --- Stepped track (study → architecture → implementation) ------------ */
.tl-fp-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 860px) {
  .tl-fp-track { grid-template-columns: 1fr; }
  .tl-fp-track__arrow { display: none !important; }
}
.tl-fp-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.tl-fp-step__top { display: flex; align-items: center; justify-content: space-between; }
.tl-fp-step__num {
  font-size: 28px;
  font-weight: var(--weight-bold, 700);
  color: var(--fg-accent);
  letter-spacing: 0.02em;
  line-height: 1;
}
.tl-fp-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-accent);
  color: var(--fg-accent);
}
.tl-fp-step__title { margin: 0; font-size: 18px; font-weight: var(--weight-semibold); color: var(--fg-1); }
.tl-fp-step__body { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.65; }
.tl-fp-track__arrow { display: flex; align-items: center; justify-content: center; color: var(--fg-3); }

/* --- CTA band --------------------------------------------------------- */
.tl-fp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-2);
}
@media (max-width: 820px) { .tl-fp-cta { flex-direction: column; align-items: flex-start; gap: var(--space-6); } }
.tl-fp-cta .tl-eyebrow { color: rgba(255, 255, 255, 0.62); }
.tl-fp-cta__copy { max-width: 60ch; }
.tl-fp-cta__copy h2 { color: var(--fg-on-dark); margin: var(--space-2) 0 var(--space-3); }
.tl-fp-cta__copy p { margin: 0; color: var(--neutral-300); font-size: 15px; line-height: 1.6; }
.tl-fp-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: none; }
/* Once the card stacks, the buttons sit one above the other and size to their
   own labels, so a pair reads as two different-width blocks. Full width lines
   their edges up. */
@media (max-width: 560px) {
  .tl-fp-cta__actions { flex-direction: column; align-self: stretch; }
  .tl-fp-cta__actions > .tl-btn { width: 100%; }
}