/* ==========================================================================
   feature.css - patterns shared by the 17 feature pages
   Loaded after components.css, before the page's own stylesheet.

   The feature frames repeat a small set of layouts that the home and pricing
   pages don't use: a two-column hero, a full-bleed product shot, and a
   copy-beside-media row with its own heading scale. Everything else they need
   (hero band, stat cards, blue band, constellation, pricing preview,
   keep-exploring, CTA, chrome) already lives in components.css.
   ========================================================================== */

/* ==========================================================================
   Split hero - media on one side, copy on the other
   Figma (Projects & Setup 425:6208): shot 876x537 at x54, headline at x1019
   in Nunito Bold 85, lede Inter Regular 29, buttons beneath.
   ========================================================================== */

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-12);
  text-align: left;
}

.hero--split .hero__title {
  font-size: var(--fs-display-2xl);
  margin-bottom: var(--sp-5);
}

.hero--split .hero__lede {
  margin-inline: 0;
  max-width: 771px;
}

/* The media column comes first in the source order so it reads before the
   copy on a phone only when the design puts it there; by default copy wins. */
.hero--split .hero__media {
  margin-top: 0;
  margin-inline: 0;
  padding: 22px;
  border-radius: 23px;
  background-color: var(--c-white);
  box-shadow: var(--sh-xl);
}

.hero--split .hero__media img {
  border-radius: 12px;
}

.hero--split .hero__actions {
  margin-top: var(--sp-8);
  justify-content: flex-start;
}

/* ==========================================================================
   Feature row - copy beside a product shot
   Figma: section title Nunito Bold 72, body Poppins Light 18.
   ========================================================================== */

.feature-row__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-6);
}

.feature-row__lede {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
  max-width: 557px;
  margin-bottom: var(--sp-7);
}

.feature-row__media img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Bleed figure - a product shot that runs wider than the content column
   Figma frequently draws these past the 1748 container, edge to edge.
   ========================================================================== */

.bleed-figure {
  margin: var(--sp-10) 0 0;
}

.bleed-figure img {
  width: 100%;
  height: auto;
}

.bleed-figure--full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ==========================================================================
   Centred section intro with a row of coloured pills beneath
   ========================================================================== */

.pill-section__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-4);
}

.pill-section__lede {
  font-family: var(--ff-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-800);
  text-align: center;
  max-width: 1121px;
  margin: 0 auto var(--sp-9);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .hero--split .hero__inner {
    gap: var(--sp-9);
  }
}

@media (max-width: 768px) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: var(--sp-9);
  }

  /* copy above the shot once stacked, whatever the desktop order */
  .hero--split .hero__copy { order: -1; }

  .hero--split .hero__lede { margin-inline: auto; }

  .hero--split .hero__actions { justify-content: center; }

  .hero--split .hero__media { padding: 12px; border-radius: var(--r-md); }

  .feature-row__lede { max-width: none; }

  .bleed-figure { margin-top: var(--sp-8); }
}

/* ==========================================================================
   Index band - "Everything in the box"
   A full-width coloured band listing every feature in three columns.
   Figma (Tickets & Boards 426:8345): 1963x1885 band, linear #00de80 -> #00a05c.
   ========================================================================== */

.index-band {
  position: relative;
  padding-block: var(--sp-14);
  background: linear-gradient(160deg, #00de80 0%, #00a05c 100%);
  color: var(--c-white);
}

.index-band__eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-white);
  text-align: center;
  margin-bottom: var(--sp-4);
}

.index-band__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  text-align: center;
  margin-bottom: var(--sp-13);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10) var(--sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-item__title {
  /* Figma: Poppins SemiBold 25 */
  font-family: var(--ff-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}

.index-item__body {
  /* Figma: Poppins Light 18 */
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-white);
  opacity: 0.92;
}

@media (max-width: 1024px) {
  .index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-9) var(--sp-7);
  }
}

@media (max-width: 768px) {
  .index-band__title { margin-bottom: var(--sp-10); }

  .index-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* ==========================================================================
   Hero colour variants
   Most frames open on the blue band; a few use their own shape.
   ========================================================================== */

/* Design Canvas & AI (448:3405): violet-to-blue over green, with the same
   wave foot as the blue band. */
.hero--violet::before {
  background-image: url("../assets/shapes/canvas-hero-band.svg");
}

/* ==========================================================================
   Dark slant band
   A midnight section whose lower edge is cut on a diagonal, used where a dark
   band meets a white one (Design Canvas & AI).
   ========================================================================== */

.slant-band {
  position: relative;
  padding-block: var(--sp-13) var(--sp-15);
  background: var(--g-midnight);
  color: var(--c-white);
  text-align: center;
  overflow: hidden;
  /* the diagonal runs down to the right, as drawn in Figma */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 190px), 0 100%);
  margin-bottom: -60px;
}

.slant-band__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-8);
}

.slant-band__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--c-white);
  max-width: 1010px;
  margin: var(--sp-8) auto 0;
}

.slant-band .pill-row {
  margin-bottom: 0;
}

/* Soft brand glows behind the dark band. */
.slant-band__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: var(--r-circle);
  filter: blur(var(--blur-blob));
  opacity: 0.45;
  pointer-events: none;
}

.slant-band__glow--violet { background: var(--c-violet); top: -12%; right: 4%; }
.slant-band__glow--blue   { background: var(--c-blue-600); bottom: -20%; right: 18%; }

@media (max-width: 768px) {
  .slant-band {
    padding-block: var(--sp-12) var(--sp-13);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
    margin-bottom: -30px;
  }
}

/* Index band on blue rather than green (Testing, QA & Sign-off 448:3672). */
.index-band--blue {
  background: linear-gradient(160deg, #007bd3 0%, #00c8ff 100%);
}

.index-band__note {
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  text-align: center;
  margin: calc(var(--sp-13) * -1 + var(--sp-5)) 0 var(--sp-13);
  opacity: 0.92;
}

/* Some frames run the constellation without a centre photo; the lone middle
   item should then sit vertically centred between the two columns. */
.everything--no-media .everything__col--center {
  grid-row: 1;
  align-self: center;
}

/* Oversized section headline (Figma uses Nunito Bold 96 on a few frames). */
.section-head__title--mega {
  font-size: clamp(38px, 5.6vw, 96px);
  line-height: var(--lh-tight);
}

@media (max-width: 768px) {
  .everything--no-media .everything__col--center {
    grid-row: auto;
  }

  .index-band__note {
    margin: calc(var(--sp-10) * -1 + var(--sp-4)) 0 var(--sp-10);
  }
}

/* ==========================================================================
   Chips and tags
   A row of translucent capsules used on dark bands (Verso Knowledge Base),
   and the small paired tags at the foot of its cards.
   ========================================================================== */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-10);
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  background-color: var(--c-white-a21);
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--c-blue-a11);
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-blue-600);
}

@media (max-width: 768px) {
  .chip {
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
  }
}