/* ==========================================================================
   Wiztra Chat — Solution (agent) pages
   Converted from src/pages/solutions/components/SolutionPageTemplate.tsx.

   One component set shared by all four agent pages; each page differs only in
   copy and image filenames. The alternating band order and the reversed image
   side are handled by :nth-of-type, not by per-section classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.sol-hero {
  position: relative;
  overflow: hidden;
  padding-block: 112px 64px;
  background: var(--background-50);
}
@media (min-width: 1024px) { .sol-hero { padding-block: 144px 96px; } }

/* Soft gold wash behind the hero. Decorative only. */
.sol-hero-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: none;
  height: 600px;
  border-radius: 999px;
  opacity: 0.05;
  pointer-events: none;
  background: radial-gradient(circle, var(--primary-500) 0%, transparent 70%);
}

.sol-hero-inner { position: relative; z-index: 10; }

.sol-hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  .sol-hero-layout { flex-direction: row; gap: 64px; }
}

.sol-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
@media (min-width: 1024px) { .sol-hero-copy { width: 50%; } }

.sol-hero-title {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--foreground-950);
}
@media (min-width: 768px)  { .sol-hero-title { font-size: 48px; } }
@media (min-width: 1024px) { .sol-hero-title { font-size: 54px; } }

/* Gold emphasis inside the headline. */
.sol-mark { color: var(--primary-500); }

.sol-hero-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--foreground-600);
  max-width: 540px;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .sol-hero-sub { font-size: 18px; } }

.sol-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 32px;
  width: 100%;
}
@media (min-width: 640px) {
  .sol-hero-actions { flex-direction: row; align-items: flex-start; width: auto; }
}

.sol-assurances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--foreground-500);
}
.sol-assurances li { display: flex; align-items: center; gap: 6px; }
.sol-assurances i { font-size: 14px; color: var(--primary-500); }

/* --------------------------------------------------------------------------
   2. Framed screenshot — shared by the hero and the feature bands
   -------------------------------------------------------------------------- */

.sol-shot {
  width: 100%;
  border-radius: 16px;
  border: 1px solid oklch(var(--background-200c) / 0.7);
  background: var(--background-50);
  overflow: hidden;
}

.sol-shot-hero { box-shadow: var(--shadow-xl); }
.sol-shot-band { box-shadow: var(--shadow-lg); }

.sol-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sol-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media (min-width: 1024px) { .sol-hero-media { width: 50%; } }

/* --------------------------------------------------------------------------
   3. Alternating feature bands
   -------------------------------------------------------------------------- */

.sol-band { padding-block: 64px; }
@media (min-width: 1024px) { .sol-band { padding-block: 96px; } }

/* Bands alternate: -a is the plain background with the image on the left,
   -b is the tinted background with the image on the right. The class is set
   per band in the HTML rather than derived with :nth-of-type, so the rhythm
   does not depend on how many other <section>s precede the bands. */
.sol-band-a { background: var(--background-50); }
.sol-band-b { background: oklch(var(--background-100c) / 0.6); }

.sol-band-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1024px) {
  .sol-band-layout { flex-direction: row; gap: 64px; }
  .sol-band-b .sol-band-layout { flex-direction: row-reverse; }
}

.sol-band-media,
.sol-band-copy { width: 100%; }
@media (min-width: 1024px) {
  .sol-band-media,
  .sol-band-copy { width: 50%; }
}

.sol-band-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-band-copy { display: flex; flex-direction: column; }

.sol-band-title {
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--foreground-950);
  margin-bottom: 20px;
}
@media (min-width: 768px)  { .sol-band-title { font-size: 34px; } }
@media (min-width: 1024px) { .sol-band-title { font-size: 38px; } }

.sol-bullets { display: flex; flex-direction: column; gap: 16px; }

.sol-bullet { display: flex; align-items: flex-start; gap: 12px; }

.sol-bullet-icon {
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-50);
}
.sol-bullet-icon i { font-size: 12px; color: var(--primary-500); }

.sol-bullet span:last-child {
  font-size: 15px;
  line-height: 1.65;
  color: var(--foreground-700);
}

/* --------------------------------------------------------------------------
   4. Closing CTA — reuses .cta-* from css/styles.css, on a light band
   -------------------------------------------------------------------------- */

.cta-on-light { background: var(--background-50); }

.cta-title-wide { max-width: 680px; }
@media (min-width: 1024px) { .cta-title-wide { font-size: 52px; } }