/* ═══════════════════════════════════════════════
   solutions.css  —  Innovia Solutions Page
   ═══════════════════════════════════════════════ */

/* ── Page hero overrides ── */
.page-hero-sub {
  max-width: 560px;
  margin: .75rem auto 0;
  color: rgba(255,255,255,.62);
  font-size: .97rem;
  line-height: 1.8;
}

/* ── Solution nav pills bar ── */
.sol-nav-bar {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: var(--clr-ink);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.sol-nav-inner {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: .55rem 1.5rem;
}
.sol-nav-inner::-webkit-scrollbar { display: none; }
.sol-nav-pill {
  flex-shrink: 0;
  padding: .38rem 1rem;
  border-radius: 20px;
  font-size: .75rem;
  font-family: var(--ff-heading);
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: background .22s, color .22s;
  white-space: nowrap;
}
.sol-nav-pill:hover,
.sol-nav-pill.active {
  background: var(--clr-primary);
  color: #fff;
}

/* ── Section shells ── */
.sol-section {
  scroll-margin-top: 120px;
}
.sol-section--light  { background: #fff; }
.sol-section--tinted { background: var(--clr-bg); }
.sol-section--dark   { background: var(--clr-ink-2); }

/* ── Grid ── */
.sol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5.5rem 2rem;
}
.sol-grid--img-right { direction: ltr; }
.sol-grid--img-right .sol-content { order: -1; }

/* ── Media (image) ── */
.sol-media { position: relative; }
.sol-media-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.14);
}
.sol-media-wrap img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.sol-media-wrap:hover img { transform: scale(1.03); }

.sol-media-badge {
  position: absolute;
  bottom: 1.1rem;
  left: 1.1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--clr-primary);
  color: #fff;
  font-family: var(--ff-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .38rem .8rem;
  border-radius: 6px;
}
.sol-media-badge--amber  { background: var(--clr-accent); color: #0B1628; }
.sol-media-badge--violet { background: #7C3AED; color: #fff; }

/* ── Content ── */
.sol-index {
  font-family: var(--ff-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(0,191,165,.12);
  margin-bottom: -.8rem;
  letter-spacing: .02em;
  user-select: none;
}
.sol-index--dark { color: rgba(0,191,165,.08); }

.sol-content h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: .05em;
  line-height: 1.1;
  color: var(--clr-ink);
  margin: .4rem 0 1rem;
}
.sol-content h2 em { color: var(--clr-primary); font-style: normal; }

.sol-lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-ink);
  line-height: 1.65;
  margin-bottom: .75rem;
}
.sol-lead--dark { color: rgba(255,255,255,.9); }

.sol-body {
  font-size: .9rem;
  color: var(--clr-muted);
  line-height: 1.85;
  margin-bottom: 1.75rem;
}
.sol-body--dark { color: rgba(255,255,255,.5); }

/* ── Features grid ── */
.sol-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.sol-feature {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.sol-feature-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(0,191,165,.1);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sol-feature-icon--dark { background: rgba(0,191,165,.12); color: var(--clr-primary); }
.sol-feature-title {
  font-family: var(--ff-heading);
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-ink);
  letter-spacing: .02em;
  line-height: 1.3;
}
.sol-feature-title--dark { color: rgba(255,255,255,.9); }
.sol-feature-text {
  font-size: .76rem;
  color: var(--clr-muted);
  line-height: 1.55;
  margin-top: .18rem;
}
.sol-feature-text--dark { color: rgba(255,255,255,.4); }

/* ── Partner/tech tags ── */
.sol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.75rem;
}
.sol-tag {
  font-family: var(--ff-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 4px;
  background: rgba(0,191,165,.08);
  color: var(--clr-primary-dark);
  border: 1px solid rgba(0,191,165,.18);
}
.sol-tag--dark {
  background: rgba(0,191,165,.07);
  color: var(--clr-primary);
  border-color: rgba(0,191,165,.15);
}

/* ── CTA button ── */
.sol-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.5rem;
  border-radius: 8px;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--clr-primary);
  color: #fff;
  transition: background .2s, transform .2s;
}
.sol-cta:hover { background: var(--clr-primary-dark); transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sol-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 1.5rem;
  }
  .sol-grid--img-right .sol-content { order: 0; }
  .sol-media-wrap img { height: 260px; }
  .sol-index { font-size: 3.5rem; }
}

@media (max-width: 640px) {
  .sol-features { grid-template-columns: 1fr; }
  .sol-grid { padding: 3rem 1.25rem; }
  .sol-nav-pill { font-size: .7rem; padding: .32rem .8rem; }
}