/* ==========================================================
   page-faq.css
   Base  = structural / shared (no sizing)
   < 640  = phone
   >= 640 = sm (small tablet)
   >= 768 = md (tablet)
   >= 1024 = lg (desktop)
   ========================================================== */

/* --- Base (structural only) --- */
.faq-category { margin: 0; }
.faq-cat-head { display: grid; align-items: center; }
.faq-cat-title { color: var(--theme-color-blue); font-weight: 800; margin: 0; }
.faq-cat-badge { width: auto; display: grid; place-items: center; position: relative; }
.faq-cat-badge img { display: block; }
.faq-cat-badge-label { font-size: 12px; font-weight: 700; color: #fff; position: absolute; }
.faq-cat-badge-num { font-weight: 900; color: #fff; line-height: 1; position: absolute; }
.faq-item { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.faq-q { display: grid; align-items: center; cursor: pointer; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { font-weight: 800; color: var(--theme-color-blue); }
.faq-icon { border-radius: 999px; display: grid; place-items: center; position: relative; justify-self: end; }
.faq-icon::before { content: ""; border-right: 3px solid var(--theme-color-blue); border-bottom: 3px solid var(--theme-color-blue); transform: rotate(45deg); }
.faq-item[open] .faq-icon::before { transform: rotate(-135deg); }
.faq-a-text { margin: 0; color: #000; }

/* --- Phone --- */
@media (width < 640px) {
  .faq-section { padding-bottom: 96px; }
  .faq-inner { display: grid; gap: 56px; }
  .faq-cat-head { grid-template-columns: 110px 1fr; gap: 18px; }
  .faq-cat-title { font-size: 20px; }
  .faq-cat-badge { height: 112px; }
  .faq-cat-badge img { width: 110px; height: 112px; }
  .faq-cat-badge-label { top: 30px; right: 20px; }
  .faq-cat-badge-num { font-size: 30px; top: 50px; right: 32px; }
  .faq-accordion { display: grid; gap: 16px; margin-top: 18px; }
  .faq-q { grid-template-columns: 1fr 44px; gap: 12px; padding: 18px; }
  .faq-q-text { font-size: 18px; }
  .faq-icon { width: 34px; height: 34px; }
  .faq-icon::before { width: 10px; height: 10px; margin-top: -2px; }
  .faq-item[open] .faq-icon::before { margin-top: 4px; }
  .faq-a { padding: 0 18px 18px; }
  .faq-a-text { font-size: 15px; line-height: 1.8; }
}

/* --- sm (small tablet) --- */
@media (width >= 640px) {
  .faq-section { padding-bottom: 96px; }
  .faq-inner { display: grid; gap: 56px; }
  .faq-cat-head { grid-template-columns: 110px 1fr; gap: 18px; }
  .faq-cat-title { font-size: 20px; }
  .faq-cat-badge { height: 112px; }
  .faq-cat-badge img { width: 110px; height: 112px; }
  .faq-cat-badge-label { top: 30px; right: 20px; }
  .faq-cat-badge-num { font-size: 30px; top: 50px; right: 32px; }
  .faq-accordion { display: grid; gap: 16px; margin-top: 18px; }
  .faq-q { grid-template-columns: 1fr 44px; gap: 12px; padding: 18px; }
  .faq-q-text { font-size: 18px; }
  .faq-icon { width: 34px; height: 34px; }
  .faq-icon::before { width: 10px; height: 10px; margin-top: -2px; }
  .faq-item[open] .faq-icon::before { margin-top: 4px; }
  .faq-a { padding: 0 18px 18px; }
  .faq-a-text { font-size: 15px; line-height: 1.8; }
}

/* --- md (tablet) --- */
@media (width >= 768px) {
  .faq-cat-title { font-size: 26px; }
}

/* --- lg (desktop) --- */
@media (width >= 1024px) {
  .faq-inner { max-width: 896px; margin: 0 auto; }
}