/* File: assets/css/faq.css
   TGT — FAQ grid (12 items), hero background, glass cards, gold accents
*/

:root{
  --tgt-colour-white:#fff;
  --tgt-colour-gold:#d4a574;
  --tgt-colour-gold-2:#e8c196;
  --tgt-frost:rgba(255,255,255,.06);
  --tgt-frost-bd:rgba(255,255,255,.14);
  --tgt-shadow-xl:0 28px 60px rgba(0,0,0,.28);
  --tgt-radius-xl:20px;
}

/* Section uses the same hero gradient as timeline/footer */
body .tgt-faq{
  background:var(--tgt-gradient-hero, linear-gradient(135deg,#102842 0%,#0f1f35 55%,#7a2448 100%));
  color:var(--tgt-colour-white);
  padding:clamp(3.5rem,8vw,6rem) min(5vw,48px);
  position:relative;
  overflow:hidden;
}

body .tgt-faq__header{
  text-align:center;
  max-width:900px;
  margin-inline:auto;
  margin-bottom:clamp(2rem,5vw,3rem);
}

body .tgt-faq__title{
  margin:0 0 .35rem;
  font-weight:800;
  font-size:clamp(2rem,4vw,3rem);
  color:var(--tgt-colour-gold);
}

body .tgt-faq__sub{
  margin:0; opacity:.9;
}

/* Grid: 3 per row desktop, 2 tablet, 1 mobile */
body .tgt-faq__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  max-width:1200px;
  margin:0 auto;
}

@media (max-width: 980px){
  body .tgt-faq__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  body .tgt-faq__grid{ grid-template-columns:1fr; }
}

/* Card */
body .tgt-faq__item{
  border:1px solid var(--tgt-frost-bd);
  background:var(--tgt-frost);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-radius:var(--tgt-radius-xl);
  box-shadow:var(--tgt-shadow-xl);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
@media (hover:hover){
  body .tgt-faq__item:hover{
    transform:translateY(-2px);
    border-color:rgba(212,165,116,.32);
  }
}

/* Question button */
body .tgt-faq__q{
  width:100%;
  text-align:left;
  padding:22px 56px 22px 24px;
  background:transparent;
  border:0;
  color:var(--tgt-colour-white);
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  position:relative;
}

body .tgt-faq__q:focus-visible{
  outline:2px solid var(--tgt-colour-gold);
  outline-offset:2px;
  border-radius:12px;
}

/* plus/minus gold badge */
body .tgt-faq__q::after{
  content:"+";
  position:absolute;
  right:16px; top:50%;
  translate:0 -50%;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:900; font-size:1rem;
  color:#0d1b2b;
  background:radial-gradient(60% 60% at 45% 40%, var(--tgt-colour-gold-2) 0%, var(--tgt-colour-gold) 100%);
  border:3px solid #3d4a5d;
  box-shadow:0 0 0 8px rgba(16,40,66,.22), 0 10px 20px rgba(0,0,0,.35);
  transition:transform .25s ease, rotate .25s ease;
}
body .tgt-faq__item.is-open .tgt-faq__q::after{
  content:"–";
  rotate:180deg;
}

/* Answer panel (animated height) */
body .tgt-faq__a{
  padding:0 24px 0 24px;
  overflow:hidden;
  height:0; /* JS will animate height and remove hidden */
  opacity:0;
}
body .tgt-faq__a p{
  margin:0 0 20px;
  color:rgba(255,255,255,.88);
  line-height:1.7;
}

/* When open (post-animation state) */
body .tgt-faq__item.is-open .tgt-faq__a{
  opacity:1;
}

/* Tighten spacing inside grid on very small screens */
@media (max-width:420px){
  body .tgt-faq__q{ padding:18px 56px 18px 18px; }
  body .tgt-faq__a{ padding:0 18px; }
}