/* patterns.css — /patterns section.
   Layers on static/market/market.css: every colour, radius and shadow here
   comes from the ff-* tokens defined there, so the section stays in step with
   the rest of the market pages instead of drifting its own palette. */

/* ── Breadcrumbs ───────────────────────────────────────────────── */
.pt-crumbs {
  font-size: .82rem;
  color: var(--ff-text-soft);
  margin: 0 2px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pt-crumbs a { color: var(--ff-accent); text-decoration: none; }
.pt-crumbs a:hover { text-decoration: underline; }
.pt-crumbs span { color: var(--ff-text-faint); }

/* ── Formation directory ───────────────────────────────────────── */
.pt-group { margin-bottom: 18px; }
.pt-group-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ff-text-soft);
  margin: 0 2px 8px;
  font-weight: 600;
}
.pt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.pt-card {
  display: block;
  position: relative;
  padding: 12px 14px 12px 16px;
  background: var(--ff-card);
  border: 1px solid var(--ff-border);
  border-left: 4px solid var(--ff-neutral);
  border-radius: var(--ff-radius-sm);
  box-shadow: var(--ff-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.pt-card:hover { box-shadow: var(--ff-shadow-hover); transform: translateY(-1px); }
.pt-card.pt-bullish { border-left-color: var(--ff-success); }
.pt-card.pt-bearish { border-left-color: var(--ff-danger); }
.pt-card.pt-neutral { border-left-color: var(--ff-neutral); }

/* The count is the reason to click, so it leads. */
.pt-card-n {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ff-text);
  line-height: 1;
}
.pt-card-name {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  padding-right: 34px;
  margin-bottom: 4px;
}
.pt-card-sum {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ff-text-soft);
}

/* ── Bias chips in the hero ────────────────────────────────────── */
.ff-hero-chip.pt-bias-bullish { background: var(--ff-success-soft); color: var(--ff-success-deep); }
.ff-hero-chip.pt-bias-bearish { background: var(--ff-danger-soft); color: var(--ff-danger-deep); }
.ff-hero-chip.pt-bias-neutral { background: var(--ff-neutral-soft); color: var(--ff-neutral-deep); }

/* ── Long-form copy ────────────────────────────────────────────── */
.pt-prose { line-height: 1.65; font-size: .92rem; }
.pt-prose p { margin: 0 0 12px; }
.pt-prose p:last-child { margin-bottom: 0; }
.pt-prose h3 {
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ff-text-soft);
  margin: 16px 0 6px;
}

/* Trigger / target / invalidation, side by side on desktop. */
.pt-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.pt-rule .ff-card-body { font-size: .88rem; line-height: 1.6; }
.pt-rule .ff-card-header h2 { font-size: .95rem; }

/* ── Chart ─────────────────────────────────────────────────────── */
/* The PNG is a wide landscape image. At full container width on a 1440px
   laptop that is ~1400x610, which together with the header, hero and fact
   grid pushed the bottom of the chart below the fold — you had to scroll to
   see the axis. Capping the height at a fraction of the VIEWPORT (not a fixed
   pixel value) keeps the whole chart on screen on any display; object-fit
   keeps it undistorted, and the white letterbox is invisible against the
   card. */
/* Height is capped by limiting WIDTH, not with max-height + object-fit. Both
   render the picture at the same size, but max-height leaves the <img> box
   full-width with the image letterboxed inside it; capping the width lets the
   element shrink to the picture and centre. --pt-aspect must match the
   figsize in patterns.py (16 x 6.5). */
.pt-chart {
  --pt-aspect: 2.4615;
  --pt-max-h: 62vh;
  display: block;
  width: 100%;
  max-width: calc(var(--pt-max-h) * var(--pt-aspect));
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--ff-border-soft);
  border-bottom: 1px solid var(--ff-border-soft);
}

/* A short viewport has no room to spare; a tall one can afford more chart. */
@media (max-height: 700px) { .pt-chart { --pt-max-h: 56vh; } }
@media (min-height: 1100px) { .pt-chart { --pt-max-h: 70vh; } }
/* On a phone the chart is the whole point of the page and nothing else is
   competing for vertical space, so let it run at its natural aspect. */
@media (max-width: 768px) {
  .pt-chart { max-width: 100%; }
}

/* ── Per-stock fact grid ───────────────────────────────────────── */
.pt-detail { margin-bottom: 16px; overflow: hidden; }
.pt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--ff-border-soft);
}
.pt-fact { background: var(--ff-card); padding: 10px 14px; }
.pt-fact .l {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ff-text-faint);
  margin-bottom: 3px;
}
.pt-fact .v { display: block; font-size: .92rem; font-weight: 600; }
.pt-fact .v a { color: var(--ff-accent); text-decoration: none; }
.pt-fact .v a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .pt-cards { grid-template-columns: 1fr; }
  .pt-card-n { font-size: 1rem; }
  .pt-facts { grid-template-columns: 1fr 1fr; }
}