/* =========================
   UNIFIED FAQ SECTION
   Shared by every page (homepage, internship, refer & earn).
   Markup lives in one shape:

     section.got-questions-container
       > .got-questions-media   (optional illustration, sits on top)
       > .got-questions-header  (h1 + p)
       > .got-questions-grid
           > .got-questions-card
               > button.got-questions-btn
                   > span              (question text)
                   > .got-questions-icon-wrapper > .got-questions-icon
               > .got-questions-answer > p

   Behaviour comes from js/faq-unified.js (toggles .active on the card).
========================= */

.got-questions-container,
.got-questions-container * {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Main Container */
.got-questions-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-section) 20px;
}

/* Illustration — sits between the heading and the question grid, centred.
   Was 420px wide with 45px above it (header's margin-bottom) and 30px
   below — the biggest single source of empty space in this section. */
.got-questions-media {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto var(--space-gap);
}

/* Header */
.got-questions-header {
  text-align: center;
  margin-bottom: var(--space-gap);
}

.got-questions-header h1 {
  /* Was #ff6b26 on the whole h1, which fought the .bao-last span markup
     inside it (only "Questions?" is meant to be orange, same as every
     other bao-last heading on the site). Base colour now matches those:
     dark, with the span carrying the highlight. */
  font-size:var(--fs-section);
  color:var(--ink);
  margin-bottom: 12px;
  font-weight:800;
  line-height: 1.15;
}

/* The shared burst was dropped here on the grounds that this heading had a
   flourish of its own. It does not: there is no ::before or ::after anywhere
   in this file, and the only artwork nearby is the section illustration
   beside the grid, which is not attached to the heading. So the rule was
   simply hiding the span, and this was the one accented heading on the site
   that ended bare — on all four pages that share this block. */

.got-questions-header p {
  font-size:var(--fs-lead);
  color:var(--ink-500);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto;
    font-weight:400;
}

/* Grid Layout */
.got-questions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

/* Card */
.got-questions-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: none;

  box-shadow:
    0 0 3px 1px rgba(238, 126, 72, 0.75),
    0 4px 12px rgba(238, 126, 72, 0.35),
    0 8px 22px rgba(238, 126, 72, 0.18);

  transition: all 0.3s ease;
}

.got-questions-card:hover {
  box-shadow:
    0 0 5px 1px rgba(238, 126, 72, 0.9),
    0 6px 16px rgba(238, 126, 72, 0.45),
    0 10px 26px rgba(238, 126, 72, 0.25);
}

/* Button */
.got-questions-btn {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  color: #222;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  gap: 10px;
  transition: background-color .3s ease, color .3s ease;
}

.got-questions-btn span:first-child {
  flex: 1;
}

/* Icon */
.got-questions-icon-wrapper {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: rgba(255, 102, 0, 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  flex-shrink: 0;
  transition: background-color .3s ease, transform .3s ease;
}

.got-questions-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: #FF6600;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), color .3s ease;
}

.got-questions-icon i {
  font-size: 12px;
  line-height: 1;
}

/* Answer */
.got-questions-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height .35s ease, padding .35s ease;
}

.got-questions-answer p {
  color: #4A4A4A;
  line-height: 1.55;
  font-size: 12.5px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* Active Card */
.got-questions-card.active {
  background: #FFF8F3;
  box-shadow:
    0 0 5px 1px rgba(238, 126, 72, 0.85),
    0 8px 20px rgba(238, 126, 72, 0.45),
    0 12px 30px rgba(238, 126, 72, 0.22);
}

.got-questions-card.active .got-questions-btn {
  background: #ee7e48;
  color: #fff;
}

.got-questions-card.active .got-questions-icon-wrapper {
  background: rgba(255, 255, 255, .25);
}

.got-questions-card.active .got-questions-icon {
  color: #fff;
  transform: rotate(180deg);
}

/* Generous ceiling so longer answers never clip mid-sentence. */
.got-questions-card.active .got-questions-answer {
  max-height: 420px;
  padding: 12px 18px 16px;
}

.got-questions-card.active .got-questions-answer p {
  color: #332C28;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 850px) {

  .got-questions-container {
    padding: clamp(28px, 4vw, 48px) 16px;
  }

  .got-questions-media {
    max-width: 180px;
    margin-bottom: 16px;
  }

  .got-questions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .got-questions-card {
    height: auto;
  }

  .got-questions-btn {
    padding: 14px 16px;
    font-size: 13.5px;
    gap: 10px;
  }

  .got-questions-icon-wrapper {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .got-questions-icon {
    font-size: 12px;
  }

  .got-questions-answer {
    padding: 0 16px;
  }

  .got-questions-card.active .got-questions-answer {
    max-height: 600px;
    padding: 10px 16px 16px;
  }

  .got-questions-answer p,
  .got-questions-card.active .got-questions-answer p {
    font-size: 13px;
    line-height: 1.55;
  }

}