/* ===========================================================
   SavoryWolper v2 — Product mode primitives
   Cards, depth, glass, stats, UI frames, integration logos.
   Activated on product-mode pages (platform, signup, deployment-modes,
   integrations) and as embedded product moments on mixed pages.

   See MAY-DESIGN.md §4 Product mode and §5 Product primitives.

   Depends on: tokens.css, base.css
   =========================================================== */

/* ---------- Card primitive ----------
   The base product card. Soft shadow, 1px outline on white surface.
   Used in feature grids and capability moments on product pages and
   embedded product moments on mixed pages.
   No glass blur, no gradient — that's a heavier variant. */
.sw-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius-md);
  padding: var(--sw-s-3);
  box-shadow:
    0 1px 0 rgba(11, 11, 11, 0.02),
    0 8px 24px -8px rgba(11, 11, 11, 0.06);
  transition: box-shadow var(--sw-dur) var(--sw-ease),
              transform var(--sw-dur) var(--sw-ease);
}

.sw-card:hover {
  box-shadow:
    0 1px 0 rgba(11, 11, 11, 0.02),
    0 12px 32px -8px rgba(11, 11, 11, 0.10);
  transform: translateY(-2px);
}

.sw-card__title {
  font-family: var(--sw-font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--sw-text);
  margin: 0 0 var(--sw-s-2);
}

.sw-card__body {
  font-family: var(--sw-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sw-text-2);
  margin: 0;
}

/* ---------- Features grid ----------
   Three-column responsive grid of `sw-card`s. Used on /platform/ and
   as the BlueHouse-features moment on the homepage. */
.sw-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sw-s-3);
  margin-top: var(--sw-s-3);
}

@media (max-width: 920px) {
  .sw-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .sw-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero: centered variant (product pages) ----------
   For pages where the product (not the team) is the subject of the hero.
   Single-column, centered text, optional mark above title. */
.sw-hero--centered .sw-hero__centered {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.sw-hero__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sw-s-3);
  opacity: 0.9;
}

.sw-hero--centered .sw-cta-group {
  justify-content: center;
}

/* ---------- Trust line (small italic tagline) ---------- */
.sw-trust-line {
  font-family: var(--sw-font-display);
  font-style: italic;
  font-size: var(--sw-t4-lede);
  line-height: 1.4;
  color: var(--sw-text-2);
  max-width: 52ch;
  margin: var(--sw-s-4) auto;
  text-align: center;
  border-top: 1px solid var(--sw-rule);
  padding-top: var(--sw-s-3);
}

/* ---------- Product section (text + image, 2-col with --reversed) ---------- */
.sw-product-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sw-s-6);
  align-items: center;
}

@media (max-width: 920px) {
  .sw-product-section {
    grid-template-columns: 1fr;
    gap: var(--sw-s-5);
  }
}

.sw-product-section--reversed .sw-product-section__text {
  order: 2;
}

@media (max-width: 920px) {
  .sw-product-section--reversed .sw-product-section__text {
    order: 0;
  }
}

.sw-product-section__text {
  max-width: 36rem;
}

.sw-product-section__text p {
  font-family: var(--sw-font-body);
  font-size: var(--sw-t4);
  line-height: 1.65;
  color: var(--sw-text-2);
  margin: 0 0 var(--sw-s-3);
  max-width: 56ch;
}

.sw-product-section__text p strong {
  color: var(--sw-text);
  font-weight: 500;
}

.sw-product-section__text h2 {
  margin-bottom: var(--sw-s-4);
}

.sw-product-section__visual {
  display: flex;
  justify-content: center;
}

.sw-product-section__img {
  width: 100%;
  height: auto;
  border-radius: var(--sw-radius-md);
  box-shadow:
    0 1px 0 rgba(11, 11, 11, 0.04),
    0 8px 28px -8px rgba(11, 11, 11, 0.12);
}

/* ---------- UI frame (real product screenshots, blauw glow) ---------- */
.sw-ui-frame {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sw-radius-md);
  box-shadow:
    0 12px 32px -8px rgba(11, 11, 11, 0.12),
    0 30px 60px -16px rgba(60, 157, 207, 0.18);
}

.sw-ui-frame--anchor {
  max-width: 1100px;
  margin: 0 auto;
}

.sw-ui-frame__caption {
  margin: var(--sw-s-3) auto 0;
  max-width: 64ch;
  font-family: var(--sw-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sw-text-3);
  font-style: italic;
  text-align: center;
}

/* ---------- Progression strip (01 → 02 → 03 with connectors) ---------- */
.sw-progression {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--sw-s-3);
  align-items: start;
  margin-top: var(--sw-s-4);
  padding-top: var(--sw-s-4);
  border-top: 1px solid var(--sw-rule);
}

@media (max-width: 720px) {
  .sw-progression {
    grid-template-columns: 1fr;
    gap: var(--sw-s-3);
  }
}

.sw-progression__num {
  font-family: var(--sw-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-system);
  display: block;
  margin-bottom: 6px;
}

.sw-progression__label {
  font-family: var(--sw-font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--sw-text);
  display: block;
  margin-bottom: 4px;
}

.sw-progression__desc {
  font-family: var(--sw-font-body);
  font-size: 0.9375rem;
  color: var(--sw-text-2);
  line-height: 1.45;
}

.sw-progression__connector {
  color: var(--sw-system);
  font-size: 1.5rem;
  line-height: 1;
  align-self: center;
}

@media (max-width: 720px) {
  .sw-progression__connector {
    display: none;
  }
}

/* ---------- Message (chat-style block; for "Max: pack ready...") ---------- */
.sw-message {
  background: var(--sw-surface-2);
  border-radius: var(--sw-radius-md);
  padding: var(--sw-s-3);
  margin: var(--sw-s-3) 0;
  font-family: var(--sw-font-body);
  font-size: var(--sw-t4);
  line-height: 1.55;
  color: var(--sw-text);
  font-style: italic;
}

.sw-message__from {
  font-family: var(--sw-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-system);
  font-style: normal;
  display: block;
  margin-bottom: 6px;
}

.sw-message + .sw-message {
  margin-top: var(--sw-s-2);
}

/* ---------- Product quote (large mid-page blockquote, no mark) ---------- */
.sw-product-quote {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--sw-s-5) 0;
  text-align: center;
}

.sw-product-quote p {
  font-family: var(--sw-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--sw-text);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sw-s-3);
  font-style: italic;
}

.sw-product-quote p + p {
  font-size: var(--sw-t4-lede);
  color: var(--sw-text-2);
}

/* ---------- Before / after stat (single-row, two-column contrast) ---------- */
.sw-before-after {
  background: var(--sw-surface);
  border: 1px solid var(--sw-rule);
  border-radius: var(--sw-radius-md);
  padding: var(--sw-s-3);
  margin-top: var(--sw-s-4);
  text-align: center;
  font-family: var(--sw-font-body);
  font-size: var(--sw-t4-lede);
  line-height: 1.4;
  color: var(--sw-text);
  font-weight: 500;
}

/* Future primitives to add as needed:
   .sw-card--glass       backdrop-blur variant
   .sw-card--soft        clay-tinted background variant
   .sw-integration-strip row of small partner / LLM logos
*/