/* ==============================
   ACADEMY – MODULES
============================== */
:root {
  --module-img-size: 10rem;
  --accordion-radius: 0.75rem;
  --accordion-bg: var(--glass, rgba(255, 255, 255, 0.05));
}

.mentorship-tip {
  font-size: .9rem;
  text-align: center;
  font-style: italic;
  margin-bottom: 2rem;
  opacity: 0.75;
}

/* ==============================
   MODULES (ACCORDION)
============================== */
.mentorship-modules {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: 0 0 1rem;
  border-radius: calc(var(--accordion-radius) + 0.25rem);
  border: 0.1rem solid transparent;
  background: linear-gradient(180deg,
      rgba(var(--color-primary), 0.04),
      rgba(var(--color-primary), 0.01));

  .module-accordion {
    background: var(--accordion-bg);
    border-radius: var(--accordion-radius);
    overflow: hidden;
    opacity: 0.5;
    margin: 0 1rem;
    transform: scale(1);
    transition:
      opacity 0.25s ease,
      transform 0.3s ease,
      box-shadow 0.3s ease;

    /* --------------------------
       OPEN STATE
    --------------------------- */
    &.open {
      .module-body {
        max-height: 100%;
        padding: 1rem;
      }
    }

    /* --------------------------
       SELECTED STATE
    --------------------------- */
    &.selected {
      opacity: 1;
    }

    /* ==========================
       BUNDLE (PARENT)
    =========================== */
    &.bundle {
      margin: 0;
      opacity: 1;
      border: 0.1rem solid transparent;

      &.open {
        .module-body {
          max-height: 100%;
          padding: 1rem;
          opacity: 1;
        }
      }

      .module-header {
        font-weight: 600;
        background: linear-gradient(135deg,
            rgba(var(--color-accent), 0.12),
            rgba(var(--color-accent), 0.02));
      }

      .module-body {
        max-height: 0;
        padding: 0 1rem;
        transition:
          max-height 0.45s ease,
          padding 0.3s ease,
          opacity 0.3s ease;
      }
    }

    .module-accordion:not(.bundle):not(.selected) {
      margin: 0 1rem;
      transform: scale(0.9);
      opacity: 0.5;
    }

    /* ==========================
       HEADER
    =========================== */
    .module-header {
      position: relative;
      display: grid;
      grid-template-columns: var(--module-img-size) 1fr auto;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      cursor: pointer;

      img {
        width: var(--module-img-size);
        height: var(--module-img-size);
        object-fit: cover;
        border-radius: 1rem;
      }

      .module-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        pointer-events: none;

        .module-title {
          font-size: 1.2rem;
          font-weight: 600;
          line-height: 1.2;
        }

        .module-price {
          font-size: 1rem;
          opacity: 0.75;
        }
      }

      .module-toggle {
        background: none;
        border: none;
        padding: 0;
        font-size: 2.4rem !important;
        cursor: pointer;
        color: inherit;
        z-index: 2;

        i {
          pointer-events: none;
          transition: transform 0.25s ease;
        }
      }
    }

    /* ==========================
       BODY
    =========================== */
    .module-body {
      max-height: 0;
      overflow-y: auto;
      padding: 0 1rem;
      transition:
        max-height 0.35s ease,
        padding 0.25s ease;
    }
  }
}

/* ==============================
   PRICE
============================== */

.mentorship-price {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1.8rem;
  margin: 1.5rem auto;
  padding: 2rem;
  background: var(--accordion-bg);
  border-radius: var(--accordion-radius);

  .prices-row,
  .prices-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem auto;
    font-size: 1rem;
    font-family: var(--font-heading);

    span,
    small,
    s {
      font-size: 1rem;
      font-weight: bold;
      text-transform: uppercase;
      color: rgba(var(--color-primary), 0.95);
    }

    small {
      font-size: .9rem;
      font-style: italic;
      opacity: 0.95;
      border-bottom: .1rem dashed rgba(var(--color-accent), 0.25);
    }

    s {
      width: 25vw;
      font-size: 1rem;
      text-align: center;
      text-decoration: line-through;
      background: rgba(var(--color-accent), 0.25);
      padding: 0.5rem;
      border-radius: var(--accordion-radius);
    }

    strong {
      padding: .75rem 0 0;
      font-size: 4rem;
      font-weight: bold;
      color: var(--color-accent-rgb);
    }

    &.price-bitaker,
    &.price-btc {
      font-size: .9rem;
      font-weight: bold;
      font-style: italic;
      opacity: 0.9;

      strong {
        font-size: .9rem;
        padding: 0;
      }
    }
  }

  .prices-col {
    flex-direction: column;
  }
}

/* ============ FAQ SECTION ============ */
.mentorship-faq {
  margin: 3rem 0;
  padding: 1rem;

  .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;

    /* Use <details> for accessible accordion behavior */
    details.faq-card {
      background: var(--glass);
      border-radius: var(--component-radius);
      overflow: hidden;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border: .12rem solid rgba(var(--color-primary), 0.06);
      transition: var(--transition-default);
      color: rgb(var(--color-primary));

      summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        cursor: pointer;
        padding: 1rem;
        background: linear-gradient(180deg, rgba(var(--color-primary), 0.02), rgba(var(--color-primary), 0.01));
      }

      summary h3 {
        width: 100%;
        font-size: 1.05rem;
        margin: 0;
        color: rgba(var(--color-primary), 0.95);
        text-transform: none;
        transition: color 180ms ease;
      }

      /* hide native marker */
      summary::-webkit-details-marker {
        display: none;
      }

      .faq-body {
        padding: 1.5rem 1.25rem;
        color: rgba(var(--color-primary), 0.95);
        line-height: 1.6;
        font-size: 0.95rem;

        p {
          margin: 0.75rem 0;
        }
      }

      &:hover {
        transform: translateY(-3px) scale(1.015);
      }

      &[open] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft);
      }

      &[open] summary h3 {
        color: rgb(var(--color-accent));
      }

      /* toggle hint rotates when open */
      .faq-toggle-hint {
        transition: transform 180ms ease;
        color: rgba(var(--color-primary), 0.7);
        font-size: 1rem;
      }

      &[open] .faq-toggle-hint {
        transform: rotate(90deg);
      }
    }
  }
}