/* ===========================================================
   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: 92px;
  height: auto;
  margin: 0 auto var(--sw-s-3);
  opacity: 0.9;
}

/* Product mark introducing a section (homepage 03). Same asset as the
   platform hero mark, smaller: it signs the section without competing
   with the heading. Height stays auto so the artwork is never squashed. */
/* Section opening with the product mark beside it: eyebrow and heading
   stacked on the left, mark on the right, vertically centred across both.
   The mark spans the full height of that block, so it reads as the section's
   signature rather than as an icon glued to one line. */
.sw-heading-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s-4);
  flex-wrap: wrap;
  margin: 0 0 var(--sw-s-3);
}

.sw-heading-mark__text {
  flex: 1 1 auto;
}

.sw-heading-mark .sw-eyebrow,
.sw-heading-mark .sw-h2 {
  margin-bottom: 0;
}

.sw-heading-mark .sw-h2 {
  margin-top: var(--sw-s-2);
}

.sw-section-mark {
  display: block;
  width: 92px;
  height: auto;
  flex: none;
  opacity: 0.9;
}

/* The reveal ends at opacity 1, which would override the muted 0.9 the mark
   shares with the platform hero mark. Land it on 0.9 instead. */
html.sw-js .sw-section-mark.sw-reveal.is-revealed,
html.sw-js .sw-section-mark.sw-reveal--build.is-revealed,
html.sw-js .sw-hero__mark.sw-reveal.is-revealed,
html.sw-js .sw-hero__mark.sw-reveal--build.is-revealed {
  opacity: 0.9;
}

/* On a phone the column is ~350 px: at 92 px the mark no longer fits beside
   the heading and drops to its own line. Scaling it down keeps the pairing. */
@media (max-width: 720px) {
  .sw-heading-mark {
    gap: var(--sw-s-2);
  }
  .sw-section-mark {
    width: 64px;
  }
}

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

/* Auto-centre block children that have their own max-width
   (.sw-lede = 60ch, .sw-body = 65ch). Without margin auto they would
   sit at the left edge of the centered parent, visually misaligned
   with the title above. */
.sw-hero--centered .sw-lede,
.sw-hero--centered .sw-body {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 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
*/