/* =============================================================================
   AI archetypes (sapience-issues #1104): the six archetype pages and the /archetypes overview.

   Loaded ONLY by the two archetype templates, so site.css, and every other page, is unchanged by them.
   Built to Mel's mockups (mockup_page_[slug].jpg, mockup_overview.jpg) from site.css's tokens: Roboto, the soft
   shadows, the card radii, the teal main button, navy #071329. Each page sets two colours of its own:
   --arch (the accent) and --arch-tint (the soft tint), from its file under content/archetypes/.
   ========================================================================== */

.ff-arch { --arch: var(--ff-blue); --arch-tint: var(--ff-bg-blue); }

/* ---------- Hero: words on the left, the illustration in its panel on the right ---------- */
.ff-arch-hero { padding-top: calc(var(--ff-nav-h) + 48px); padding-bottom: 24px; }
.ff-arch-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ff-arch-kicker { margin-top: 22px; color: var(--arch); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ff-arch-title { font-size: clamp(44px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -.035em; margin-block: 10px 18px; }
.ff-arch-accent { color: var(--arch); }
.ff-arch-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-arch-tags li {
  padding: 6px 14px; border-radius: var(--ff-pill);
  background: var(--arch-tint); color: var(--arch); font-size: 14px; font-weight: 500; line-height: 1.3;
}
.ff-arch-intro { margin-top: 22px; color: var(--ff-body); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; max-width: 34em; }
.ff-arch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }

.ff-arch-panel {
  position: relative; overflow: hidden; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(380px, 38vw, 500px); border-radius: var(--ff-radius-lg);
  background:
    radial-gradient(rgba(7, 19, 41, .10) 1px, transparent 1.5px) 0 0 / 22px 22px,   /* the site's dotted pattern */
    linear-gradient(165deg, var(--arch-tint) 0%, #fff 78%);
}
.ff-arch-panel::before {   /* the large pale circle */
  content: ""; position: absolute; left: 50%; top: 13%; width: 76%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .2) 100%);
  box-shadow: 0 30px 80px rgba(7, 19, 41, .06);
}
.ff-arch-figure { position: relative; z-index: 1; width: auto; height: auto; max-height: 86%; max-width: 74%; }
.ff-arch-panel .ff-arch-figure { max-height: clamp(330px, 33vw, 440px); }
.ff-arch-badge {
  position: absolute; z-index: 2; top: 20px; left: 20px;
  display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  background: #fff; border-radius: var(--ff-radius-sm); box-shadow: var(--ff-shadow-md); line-height: 1.25;
}
.ff-arch-badge span { color: var(--ff-muted); font-size: 12.5px; }
.ff-arch-badge strong { color: var(--ff-ink); font-size: 15.5px; font-weight: 700; }

/* ---------- Blocks under the hero ---------- */
.ff-arch-block { padding-block: 28px; }
.ff-arch-hero + .ff-arch-block { padding-top: clamp(48px, 6vw, 80px); }
.ff-arch-label {
  margin: 0 0 16px; color: var(--ff-muted); font-size: 13px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.3;
}

/* "What it means": four cards, 2 x 2 */
.ff-arch-means { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ff-arch-mean {
  padding: 24px 28px 28px; background: #fff; border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm);
}
.ff-arch-tile {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px; background: var(--arch-tint); color: var(--arch);
}
.ff-arch-mean h2 { margin-block: 16px 8px; font-size: 19px; letter-spacing: -.01em; }
.ff-arch-mean p { color: var(--ff-muted); font-size: 15.5px; line-height: 1.6; }

/* "Your next step": a full-width band, accent to navy */
.ff-arch-next {
  display: flex; gap: 20px; align-items: flex-start; margin-top: 16px;
  padding: 28px clamp(24px, 3vw, 36px); border-radius: var(--ff-radius);
  background: linear-gradient(105deg, var(--arch) 0%, #071329 100%); color: #fff;
}
.ff-arch-next .ff-arch-tile { background: rgba(255, 255, 255, .16); color: #fff; }
.ff-arch-next h2 { color: #fff; font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
.ff-arch-next p { color: rgba(255, 255, 255, .9); font-size: 16.5px; line-height: 1.6; }

/* The share block: light grey panel, the share line and button on the left, the share image on the right */
.ff-arch-share {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: var(--ff-radius-lg);
  background: var(--ff-bg-soft); border: 1px solid var(--ff-line);
}
.ff-arch-share-line { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.22; letter-spacing: -.02em; }
.ff-arch-share-copy p { margin-top: 10px; color: var(--ff-muted); font-size: 15.5px; }
.ff-arch-linkedin { margin-top: 22px; background: #0A66C2; color: #fff; box-shadow: 0 6px 20px rgba(10, 102, 194, .25); }
.ff-arch-linkedin:hover { background: #0958a8; }
.ff-arch-share-img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ff-shadow-lg); }

/* ---------- Archetype cards (the other archetypes; the overview) ---------- */
.ff-arch-card {
  display: flex; flex-direction: column; height: 100%; padding: 12px 12px 16px;
  background: #fff; border: 1px solid var(--ff-line); border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm); color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ff-arch-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }
.ff-arch-card-art {
  position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--ff-radius-sm);
  background: linear-gradient(160deg, var(--arch-tint) 0%, #fff 100%);
}
.ff-arch-card-art img { width: auto; height: 92%; max-width: 92%; object-fit: contain; object-position: bottom; }
.ff-arch-card-arrow {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; color: var(--arch); box-shadow: var(--ff-shadow-sm);
}
.ff-arch-card-name { margin-top: 12px; font-size: 15.5px; letter-spacing: -.01em; padding-inline: 4px; }
.ff-arch-card-tags { margin-top: 3px; color: var(--arch); font-size: 13px; line-height: 1.4; padding-inline: 4px; }

.ff-arch-others-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

/* The overview's bigger card: the first sentence of the intro and "Read more" */
.ff-arch-card--full { padding: 18px 18px 24px; }
.ff-arch-card--full .ff-arch-card-art { aspect-ratio: 13 / 10; }
.ff-arch-card--full .ff-arch-card-name { margin-top: 20px; font-size: 22px; }
.ff-arch-card--full .ff-arch-card-tags { margin-top: 4px; font-size: 14.5px; font-weight: 500; }
.ff-arch-card-intro { margin-top: 12px; padding-inline: 4px; color: var(--ff-body); font-size: 15.5px; line-height: 1.55; }
.ff-arch-card-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 16px 4px 0;
  color: var(--arch); font-size: 15px; font-weight: 500;
}

/* ---------- The closing band and the small print ---------- */
.ff-arch-end { padding-bottom: clamp(56px, 7vw, 96px); }
.ff-arch-closing {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px); border-radius: var(--ff-radius-lg); background: #071329;
}
.ff-arch-closing h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.ff-arch-closing p { margin-top: 6px; color: rgba(255, 255, 255, .75); }
.ff-arch-closing-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ff-arch-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.ff-arch-outline:hover { border-color: #fff; }
.ff-arch-small { margin-top: 18px; text-align: center; color: var(--ff-muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- The overview page ---------- */
.ff-arch-overview { padding-top: calc(var(--ff-nav-h) + 56px); padding-bottom: clamp(64px, 8vw, 104px); }
.ff-arch-overview-head { text-align: center; }
.ff-arch-overview-title { font-size: clamp(38px, 5.6vw, 64px); letter-spacing: -.035em; margin-block: 22px 16px; }
.ff-arch-overview-head .ff-lede { margin-bottom: 30px; }
.ff-arch-overview-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(36px, 5vw, 48px);
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .ff-arch-others-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ff-arch-hero-grid, .ff-arch-share { grid-template-columns: 1fr; }   /* the illustration goes under the words */
  .ff-arch-means { grid-template-columns: 1fr; }
  .ff-arch-others-grid, .ff-arch-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ff-arch-overview-grid { grid-template-columns: 1fr; }
  .ff-arch-closing-actions, .ff-arch-closing-actions .ff-btn { width: 100%; }
}