/* Solution detail page styles */

/* ─── SOLUTION ITEM PAGE ─── */
.solution-hero{padding:60px 0 48px;border-bottom:1px solid var(--line)}
.solution-hero .container--narrow{width:min(calc(100% - 56px),960px)}
.solution-hero-grid{display:grid;grid-template-columns:3fr 1fr;gap:60px;align-items:start}
.solution-item-title{
  margin-bottom:18px;
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:0;
}
.solution-item-body{font-size:1rem;font-weight:300;color:var(--text2);line-height:1.75;max-width:none;margin-bottom:28px}
.solution-meta-bar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:28px;
}
.solution-meta-item{
  display:flex;align-items:center;gap:8px;
  font-size:0.82rem;font-weight:300;color:var(--muted);
}
.solution-meta-item strong{color:var(--text2);font-weight:400}
.solution-meta-sep{color:var(--line2);font-size:0.7rem}
.solution-cta-inline{
  margin-left:auto;
}
.solution-content{padding:56px 0}

/* Solution detail responsive */
@media (max-width: 960px){
  .solution-hero-grid{grid-template-columns:1fr}
  .solution-meta-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .solution-meta-sep{display:none}
  .solution-cta-inline{margin-left:0}
}

@media (max-width: 600px){
  .solution-hero .container--narrow{width:calc(100% - 32px)}
}

/* ─── TWO-COLUMN EDITORIAL LAYOUT ─── */
.solution-content-grid{
  width:min(calc(100% - 56px),960px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:60px;
  align-items:start;
}

.solution-content-main{
  min-width:0;
}

/* ─── STICKY ASIDE ─── */
.solution-related-aside{
  position:sticky;
  top:calc(var(--nav-offset,96px) + 24px);
}

.related-cases-eyebrow{
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:16px;
}

.related-cases-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  max-height:600px;
  opacity:1;
  border-left:1px solid var(--line2);
  padding-left: 18px;;
  transition:max-height 0.5s ease-out, opacity 0.4s ease;
}

/* Collapsed state — triggered by JS after scrolling past page midpoint */
.solution-related-aside.is-collapsed{
  cursor:pointer;
}
.solution-related-aside.is-collapsed .related-cases-eyebrow{
  margin-bottom:0;
  color:var(--accent);
  transition:color 0.3s ease;
}
.solution-related-aside.is-collapsed .related-cases-eyebrow::after{
  content:' +';
  opacity:0.5;
  font-style:normal;
}
.solution-related-aside.is-collapsed .related-cases-list{
  max-height:0;
  opacity:0;
}

.related-case-item{
  display:block;
  padding:16px 18px;
  border:1px solid var(--line2);
  border-radius:var(--r);
  text-decoration:none;
  transition:background var(--tr),border-color var(--tr);
}

.related-case-item:hover{
  background:rgba(80,70,160,0.03);
  border-color:rgba(80,70,160,0.15);
}

.related-case-label{
  font-size:0.72rem;
  font-weight:400;
  color:var(--muted);
  margin-bottom:6px;
}

.related-case-title{
  font-size:0.88rem;
  font-weight:500;
  color:var(--text);
  line-height:1.4;
  margin-bottom:6px;
}

.related-case-desc{
  font-size:0.82rem;
  font-weight:300;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:10px;
}

.related-case-link{
  font-size:0.78rem;
  font-weight:400;
  color:var(--accent);
}

@media (max-width:860px){
  .solution-content-grid{
    grid-template-columns:1fr;
    width:min(calc(100% - 56px),740px);
    gap:0;
  }
  .solution-related-aside{
    position:static;
    margin-top:48px;
    order:99;
  }
}

@media (max-width:600px){
  .solution-content-grid{width:calc(100% - 32px)}
}

/* ─── FAQ ACCORDION ─── */
.sol-faq {
  padding: 56px 0 64px;
  border-top: 1px solid var(--line);
}

.sol-faq__inner {
  width: min(calc(100% - 56px), 960px);
  margin: 0 auto;
}

.sol-faq__eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 28px;
}

.sol-faq__item {
  border-top: 1px solid var(--line2);
}
.sol-faq__item:last-child { border-bottom: 1px solid var(--line2); }

.sol-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  line-height: 1.5;
  transition: color var(--tr);
}
.sol-faq__trigger:hover { color: var(--accent); }
.sol-faq__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* + icon that rotates to × when open */
.sol-faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color var(--tr), transform 0.25s ease;
}
.sol-faq__icon::before,
.sol-faq__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
}
.sol-faq__icon::before { width: 14px; height: 1.5px; }
.sol-faq__icon::after  { width: 1.5px; height: 14px; transition: transform 0.25s ease; }

.sol-faq__item.is-open .sol-faq__icon {
  color: var(--accent);
  transform: rotate(45deg);
}

/* Panel — grid-template-rows 0fr → 1fr height animation */
.sol-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
  overflow: hidden;
}
.sol-faq__item.is-open .sol-faq__panel {
  grid-template-rows: 1fr;
}
.sol-faq__panel-inner { min-height: 0; overflow: hidden; }

.sol-faq__list {
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sol-faq__bullet {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text2);
  line-height: 1.68;
  padding-left: 18px;
  position: relative;
}
.sol-faq__bullet::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 860px) {
  .sol-faq { padding: 40px 0 48px; }
  .sol-faq__inner { width: calc(100% - 56px); }
  .sol-faq__trigger { font-size: 0.92rem; padding: 18px 0; }
}
@media (max-width: 600px) {
  .sol-faq__inner { width: calc(100% - 32px); }
}