/* ==========================================================
   COURSE OUTLINE - MATERIAL ACCORDION (FIXED)
   ========================================================== */

  .mat-accordion-group {
      /*max-width: 900px;*/
      /* Reduced for better vertical readability */
      width: 100%;
      margin: 30px auto 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  /* Accordion Card */
  .mat-accordion {
      background: var(--bg-card, #ffffff);
      border-radius: var(--border-radius-sm, 8px);
      box-shadow: var(--shadow-elevation-1, 0 2px 4px rgba(0, 0, 0, 0.05));
      border: 1px solid var(--border-color, #e2e8f0);
      overflow: hidden;
      transition: all 0.3s ease;
      height: max-content;
      /* Prevents vertical stretching */
  }

  /* Hover effect */
  .mat-accordion:hover {
      box-shadow: var(--shadow-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.1));
  }

  /* Header */
  .mat-accordion summary {
      padding: 18px 22px;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-main, #1e293b);
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
  }

  /* Left content (icon + text) */
  .mat-accordion summary span {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  /* Remove default arrow (Safari/Chrome) */
  .mat-accordion summary::-webkit-details-marker {
      display: none;
  }

  /* Custom arrow */
  .mat-accordion summary::after {
      content: "+";
      font-size: 18px;
      font-weight: 700;
      color: var(--primary, #6366f1);
      transition: transform 0.25s ease;
  }

  /* Open state styling */
  .mat-accordion[open] {
      box-shadow: var(--shadow-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.1));
      border-color: var(--primary-tint, #a5b4fc);
  }

  .mat-accordion[open] summary {
      border-bottom: 1px solid var(--border-color, #e2e8f0);
      color: var(--primary, #6366f1);
  }

  /* Change + to − */
  .mat-accordion[open] summary::after {
      content: "−";
  }

  /* Content Area */
  .mat-accordion-content {
      padding: 24px 30px;
      font-size: 14px;
      line-height: 1.5;
      /* Increased from 1.2 for much better readability */
      color: var(--text-muted, #64748b);
      background: var(--bg-light, #f8fafc);
      animation: accordionFade 0.25s ease-out;
  }

  /* Fix UL styles inside content */
  .mat-accordion-content ul {
      display: flex;
      flex-wrap: wrap;
      gap: 5px !important;
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .mat-accordion-content ul li {
      list-style: disc;
      margin-bottom: 8px;
      width: 100%;
      flex: 0 0 calc(100% - 0px) !important;
      position: relative;
      padding-left: 0px !important;
      box-sizing: border-box;
  }

  .mat-accordion-content ul li:last-child {
      margin-bottom: 0;
  }

  .mat-accordion-content ul li::before,
  .mat-accordion-content ul li::after {
      content: none !important;
  }

  /* Smooth entry animation */
  @keyframes accordionFade {
      from {
          opacity: 0;
          transform: translateY(-8px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ==========================================================
       RESPONSIVE LAYOUT ADJUSTMENTS
       ========================================================== */

  /* ==========================================================
   RESPONSIVE GRID LOOK (FIXED POSITION STRETCHING)
   ========================================================== */

  @media (min-width: 900px) {
      .mat-accordion-group {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          /* Aligns items to the top of their grid cell so they don't stretch vertically */
          align-items: start;
      }
  }

  /* Tablet */
  @media (max-width: 900px) and (min-width: 601px) {
      .mat-accordion-group {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          align-items: start;
      }
  }

  /* Mobile */
  @media (max-width: 600px) {
      .mat-accordion-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
      }
  }