/**
 * ROSC List styles
 */

.rosc-list {
  position: relative;
  
  .rosc-header {
    width: 100%;
  }
  
  .rosc-columns {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
  
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      text-align: left;
    }
  }
  
  /* Flip the order of columns on mobile */
  @media (max-width: 992px) {
    .rosc-column-left {
      order: 1; /* Move title to the top */
      margin-bottom: var(--spacing-md);
    }
    
    .rosc-column-right {
      order: 2; /* Move quote to the bottom */
    }
  }

  .rosc-column-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    h2 {
      color: var(--color-blue-dark);
    }
  }
  
  .rosc-column-right {
    display: flex;
    
    .quote-wrapper-dark-blue {
      background-color: var(--color-blue-dark);
      border-radius: 8px;
      padding: var(--spacing-lg);
      color: white;
      position: relative;
      padding-left: calc(var(--spacing-xl) + 35px); /* Extra space for the quote icon */
      
      &::before {
        content: '';
        position: absolute;
        left: var(--spacing-lg);
        top: var(--spacing-lg);
        width: 41px;
        height: 32px;
        background-image: url("data:image/svg+xml,%3Csvg width='41' height='32' viewBox='0 0 41 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.44 24.6C40.44 25.92 40.08 27.12 39.36 28.2C38.68 29.24 37.72 30.08 36.48 30.72C35.28 31.36 33.92 31.68 32.4 31.68C30.08 31.68 28.1 30.7 26.46 28.74C24.82 26.74 24 23.56 24 19.2C24 17.2 24.32 15.14 24.96 13.02C25.64 10.86 26.62 8.84003 27.9 6.96003C29.22 5.08003 30.82 3.52003 32.7 2.28003C34.62 1.04003 36.82 0.300026 39.3 0.0600247C39.74 0.0200276 40.08 0.0400286 40.32 0.120028C40.56 0.160025 40.68 0.440023 40.68 0.960024V3.54002C40.68 4.06002 40.54 4.40002 40.26 4.56003C39.98 4.72003 39.62 4.84002 39.18 4.92002C37.38 5.20003 35.72 5.96003 34.2 7.20003C32.68 8.40003 31.5 9.96003 30.66 11.88C29.82 13.76 29.5 15.86 29.7 18.18C29.78 18.66 29.94 18.84 30.18 18.72C30.42 18.6 30.7 18.44 31.02 18.24C31.5 17.92 31.96 17.72 32.4 17.64C32.88 17.56 33.44 17.52 34.08 17.52C36.08 17.52 37.64 18.2 38.76 19.56C39.88 20.92 40.44 22.6 40.44 24.6ZM16.44 24.6C16.44 25.92 16.08 27.12 15.36 28.2C14.68 29.24 13.72 30.08 12.48 30.72C11.28 31.36 9.92 31.68 8.4 31.68C6.08 31.68 4.1 30.7 2.46 28.74C0.82 26.74 8.9407e-08 23.56 8.9407e-08 19.2C8.9407e-08 17.2 0.32 15.14 0.96 13.02C1.64 10.86 2.62 8.84003 3.9 6.96003C5.22 5.08003 6.82 3.52003 8.7 2.28003C10.62 1.04003 12.82 0.300026 15.3 0.0600247C15.74 0.0200276 16.08 0.0400286 16.32 0.120028C16.56 0.160025 16.68 0.440023 16.68 0.960024V3.54002C16.68 4.06002 16.54 4.40002 16.26 4.56003C15.98 4.72003 15.62 4.84002 15.18 4.92002C13.38 5.20003 11.72 5.96003 10.2 7.20003C8.68 8.40003 7.5 9.96003 6.66 11.88C5.82 13.76 5.5 15.86 5.7 18.18C5.78 18.66 5.94 18.84 6.18 18.72C6.42 18.6 6.7 18.44 7.02 18.24C7.5 17.92 7.96 17.72 8.4 17.64C8.88 17.56 9.44 17.52 10.08 17.52C12.08 17.52 13.64 18.2 14.76 19.56C15.88 20.92 16.44 22.6 16.44 24.6Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left top;
      }
      
      .quote-text {
        line-height: 1.3;
        margin-bottom: var(--spacing-sm);
        font-weight: 600;
      }
      
      .quote-meta {
        font-style: italic;
        font-size: 1rem;
        opacity: 0.9;
      }
    }
  }
  
  .accordion-item {
    margin-bottom: var(--spacing-md);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-gray);
  }
   
  .accordion-header {
    width: 100%;
 
  }
  
  .accordion-button {
    width: 100%;
    border: none;
    padding: calc(var(--spacing-md) + var(--spacing-xs));
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--color-gray);
    
    &.dark-blue {
      background-color: var(--color-gray);
      color: var(--color-blue-dark);
      
      &:hover {
        background-color: #d1dada; /* Slightly darker shade of var(--color-gray) */
      }
      
      
    }
    
    &:focus {
      outline: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none !important;
      color: inherit;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    &.collapsed {
      .icon-minus {
        display: none !important;
      }
      
      .icon-plus {
        display: block !important;
      }
    }
    
    &:not(.collapsed) {
      .icon-minus {
        display: block !important;
      }
      
      .icon-plus {
        display: none !important;
      }
    }
  }
  
  .toggle-icon {
    margin-right: var(--spacing-sm);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .icon-plus {
      display: block;
    }
    
    .icon-minus {
      display: none;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  
  .accordion-content {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    
    .rosc-grid {
      padding: calc(var(--spacing-md) + var(--spacing-xs));
      padding-top: 0;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    &.open {
      max-height: 2000px; /* Large enough to accommodate content */
      
      .rosc-grid {
        opacity: 1;
      }
    }
  }
  
  .rosc-grid {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .coming-soon-message {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-blue-dark);
  }
}