/* ==========================================================================
   INSIGHTS PAGE STYLES
   Order: page shell and hero -> page sections -> CTA -> footer
   ========================================================================== */

/* ==========================================================================
   Page: insights | Inline section styles
   ========================================================================== */
/* Italic serif for emphasis */
    .font-italic-serif {
      font-family: 'Playfair Display', serif;
      font-style: italic;
    }
    
    /* Custom gradient for the dark card */
    .bg-tech-gradient {
      background: linear-gradient(135deg, #050505 0%, #111111 100%);
      position: relative;
      overflow: hidden;
    }
    
    .wave-pattern {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      background-image: radial-gradient(circle at 70% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 60%);
      pointer-events: none;
    }

    /* Card styling for uniform appearance */
    .insight-card {
      min-height: 400px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: transform 0.3s ease;
    }
    .insight-card:hover {
      transform: translateY(-4px);
    }

/* ==========================================================================
   Page: insights | Inline section styles
   ========================================================================== */
/* Custom scrollbar hiding for the horizontal carousel if needed */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Gradient overlay for cards to ensure text readability if images are busy */
    .card-gradient-dark {
      background: linear-gradient(180deg, rgba(30, 27, 46, 0.2) 0%, rgba(30, 27, 46, 0.95) 100%);
    }
    
    /* Specific aspect ratio for the cards */
    .collection-card {
      min-width: 320px;
      height: 600px;
    }
    [data-purpose="insight-card-02"] .legacy-topics { display: none; }
    [data-purpose="insight-card-02"] > div:nth-of-type(2) .text-gray-300.text-sm { display: none; }
    [data-purpose="insight-card-02"] .text-gray-200 { font-size: 0; }
    [data-purpose="insight-card-02"] .text-gray-200::after {
      content: "Leadership implication: Make trust operational.";
      font-size: .875rem;
      line-height: 1.6;
    }
    [data-purpose="insight-card-05"] .text-gray-700 { font-size: 0; }
    [data-purpose="insight-card-05"] .text-gray-700::after {
      content: "Leadership implication: Measure business outcomes.";
      font-size: .875rem;
      line-height: 1.6;
    }

/* ==========================================================================
   Page: insights | Inline section styles
   ========================================================================== */
body {
      background-color: #03051a;
      color: #ffffff;
      margin: 0;
      padding: 0;
    }

    /* Background Glow and Abstract Lines */
    .hero-bg {
      position: relative;
      background: radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                  radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
      overflow: hidden;
    }

    .abstract-swirl {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: url('https://placehold.co/1200x800/03051a/8b5cf6?text=+') no-repeat;
      background-size: cover;
      opacity: 0.4;
      pointer-events: none;
      filter: blur(80px);
      z-index: 0;
    }

    /* Custom Card Borders and Backgrounds */
    .capability-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .capability-card:hover {
      border-color: rgba(167, 139, 250, 0.4);
      background: rgba(255, 255, 255, 0.05);
    }

    /* Keep Core Capabilities artwork fully visible inside each card frame. */
    #capabilities [data-purpose="featured-report-card"] > div:last-child,
    #capabilities [data-purpose="frameworks-card"] > div:last-child,
    #capabilities [data-purpose="expert-perspectives-card"] > div:last-child,
    #capabilities [data-purpose="industry-reports-card"] > div:last-child {
      right: 1rem;
      bottom: 1rem;
    }

    @media (max-width: 767px) {
       #capabilities [data-purpose="featured-report-card"] > div:last-child {
      right: 1rem;
      bottom: 4rem;
    }

    }

    #capabilities [data-purpose="frameworks-card"] > div:last-child,
    #capabilities [data-purpose="expert-perspectives-card"] > div:last-child,
    #capabilities [data-purpose="industry-reports-card"] > div:last-child {
      width: 55%;
    }

    #capabilities [data-purpose="featured-report-card"] img,
    #capabilities [data-purpose="frameworks-card"] img,
    #capabilities [data-purpose="expert-perspectives-card"] img,
    #capabilities [data-purpose="industry-reports-card"] img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      clip-path: none !important;
      transform: none !important;
    }

    /* Link Arrow Styling */
    .arrow-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      margin-left: 8px;
      font-size: 12px;
      transition: transform 0.3s ease;
    }

    .group:hover .arrow-icon {
      transform: translateX(4px);
      background-color: rgba(255, 255, 255, 0.1);
    }

/* ==========================================================================
   Page: insights | Inline section styles
   ========================================================================== */
/* Subtle flowing line art background simulation */
    .bg-abstract-lines {
      background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCmFpyjOEpYNlPWY0YO75UjkzVYJt4VaghFMJ4tpiSk5nsAFVcRB9zYE5BH_vlmd8QbIzXTR4Zrz7q0BB7nihva_YwAJVIOjNM_HK08u7kF2T1jQMVnB1SC5RSXKpywCVbp2LWkEPskUaojv3z37qsX9kNyoZUitacULbP1W0TWODPDW-GxSpp4wn_shQkS3AS2TSqnWNZel7MpUHXeEWoY9Ao2lDHl59U76dPWs_tzMtQdXCgAUahCTctXHOAEQsHwy41TPUkGAkSU');
      background-position: right center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .question-row:hover .arrow-icon {
      transform: translate(2px, -2px);
    }
    
    .arrow-icon {
      transition: transform 0.2s ease-in-out;
    }
.architecture-section {
  position: relative;
  overflow: hidden;
  background-image: url("./../../assets/images/backgrounds/saa-shared-background-insight-section5-bg.png") !important; /* Change to your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Products and Platforms accordion */
.question-row {
  display: block;
}

.question-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.question-summary > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.question-summary > :last-child {
  flex: 0 0 auto;
}

.question-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease, margin .3s ease;
}

.question-panel-content {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
  gap: 1.5rem;
  align-items: center;
  color: #475569;
  line-height: 1.7;
}

.question-panel img {
  width: 100%;
  border-radius: .75rem;
}

.question-row.is-open .question-panel {
  grid-template-rows: 1fr;
  margin: .5rem 0 1.5rem 3.75rem;
}

.question-row.is-open .question-toggle {
  background-color: #6d28d9;
  color: #fff;
  transform: rotate(45deg);
}

.question-toggle {
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

@media (max-width: 640px) {
  .question-panel-content { grid-template-columns: 1fr; }
  .question-row.is-open .question-panel { margin-left: 0; }
}

/*=============================
Products Accordion
==============================*/

.question-row{
    border-top:1px solid #d9d9d9;
    transition:.35s ease;
    overflow:hidden;
}

.question-row:last-child{
    border-bottom:1px solid #d9d9d9;
}

.question-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:30px 0;
}

.question-summary h3{
    font-size:28px;
    line-height:1.25;
    color:#1e293b;
    transition:.35s;
}

.question-toggle{
    width:42px;
    height:42px;
    border:1px solid #6d28d9;
    border-radius:999px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:transparent;
    color:#6d28d9;
    transition:.35s;
    flex-shrink:0;
}

.question-toggle svg{
    transition:.35s;
}

.question-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .45s ease;
}

.question-panel-content{
    overflow:hidden;

    display:grid;
    grid-template-columns:1fr 280px;
    gap:50px;

    align-items:center;

    padding:0 0 0 52px;
}

.question-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.question-tags span{
    font-size:13px;
    padding:8px 14px;
    border-radius:999px;
    background:#ffffff18;
    border:1px solid #ffffff22;
    color:#fff;
}

.question-panel p{
    color:#cbd5e1;
    line-height:1.8;
    max-width:600px;
}

.question-panel img{
    width:100%;
    border-radius:16px;
    display:block;
}

/* OPEN */

.question-row.is-open{
    background:#080808;
    border-radius:22px;
    padding:0 34px 34px;
    margin:18px 0;
    border:none;
}

.question-row.is-open .question-summary{
    padding:28px 0;
}

.question-row.is-open h3{
    color:#fff;
}

.question-row.is-open .question-summary .text-brand-purple{
    color:#fff;
}

.question-row.is-open .question-panel{
    grid-template-rows:1fr;
}

.question-row.is-open .question-toggle{
    background:#ff5722;
    border-color:#ff5722;
    color:#fff;
}

.question-row.is-open .question-toggle svg{
    transform:rotate(45deg);
}

.question-row:not(.is-open):hover .question-toggle{
    background:#6d28d9;
    color:#fff;
}

/* Responsive */

@media(max-width:900px){

.question-panel-content{
    grid-template-columns:1fr;
    padding-left:0;
}

.question-panel img{
    max-width:340px;
}

}

@media(max-width:640px){

.question-summary{
    gap:18px;
}

.question-summary h3{
    font-size:22px;
}

.question-row.is-open{
    padding:0 22px 22px;
}

}

.question-row.is-open{
    background:#0F172A;
    border:1px solid rgba(129,140,248,.18);
}

.question-toggle{
    border:1px solid #7C3AED;
    color:#7C3AED;
}

.question-row.is-open .question-toggle{
    background:linear-gradient(135deg,#8B5CF6,#6366F1);
    border-color:#8B5CF6;
    color:#fff;
}

.question-tags span{
    background:rgba(124,58,237,.10);
    border:1px solid rgba(124,58,237,.25);
    color:#C4B5FD;
}

@media (max-width:768px){

    .question-summary{
        display:grid;
        grid-template-columns:1fr auto;
        align-items:start;
        gap:20px;
    }

    .question-summary h3{
        font-size:30px;
        line-height:1.2;
        max-width:none;
        width:100%;
        word-break:normal;
        overflow-wrap:normal;
        text-wrap:balance; /* supported in modern browsers */
    }

    .question-toggle{
        width:52px;
        height:52px;
        margin-top:4px;
    }

}

/* Products and Platforms: mobile and tablet layout only */
@media (max-width: 768px) {
    #architecture .architecture-header {
        gap: 20px;
        margin-bottom: 32px;
    }

    #architecture [data-purpose="questions-list"] {
        margin-bottom: 48px;
    }

    #architecture .question-summary {
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        gap: 16px;
        padding: 20px 0;
    }

    #architecture .question-summary > div {
        min-width: 0;
        gap: 14px;
        align-items: flex-start;
    }

    #architecture .question-summary h3 {
        width: auto;
        margin: 0;
        font-size: clamp(1.125rem, 4.5vw, 1.5rem);
        line-height: 1.3;
        text-wrap: pretty;
    }

    #architecture .question-toggle {
        width: 42px;
        height: 42px;
        margin: 0;
    }

    #architecture .question-row.is-open {
        margin: 12px 0;
        padding: 0 18px 22px;
        border-radius: 16px;
    }

    #architecture .question-panel-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 0;
    }

    #architecture .question-panel p {
        max-width: none;
        font-size: .9375rem;
    }

    #architecture .question-panel img {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    #architecture .question-summary > div {
        gap: 10px;
    }

    #architecture .question-summary h3 {
        font-size: 0.8rem;
    }

    #architecture .question-tags {
        gap: 8px;
    }

    #architecture .question-tags span {
        padding: 6px 10px;
        font-size: .75rem;
    }
}


.no-scrollbar{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.no-scrollbar::-webkit-scrollbar{
    display:none;
}

.collection-card{
    width:380px;
    min-width:380px;
    flex:0 0 380px;
}

@media (max-width:480px){
    .collection-card{
        width:calc(100vw - 3rem);
        min-width:calc(100vw - 3rem);
        flex-basis:calc(100vw - 3rem);
    }
}

/* Keep the Knowledge Areas artwork visible without placing it over the copy. */
[data-purpose="carousel-wrapper"] .collection-card > div:first-child {
    isolation: isolate;
}

[data-purpose="carousel-wrapper"] .collection-card > div:first-child > :not(.absolute) {
    position: relative;
    z-index: 1;
}

[data-purpose="carousel-wrapper"] .collection-card > div:first-child > .absolute {
    z-index: 0;
    opacity: .62;
}

[data-purpose="carousel-wrapper"] .collection-card > div:first-child > .absolute img {
    filter: saturate(1.08) contrast(1.04);
}