/* ===== inline-extra.css — ส่วนเสริมของ theme.css (responsive + class สำหรับ content fragment) ===== */

/* ---------- HERO (ทุกหน้า) ---------- */
.hero{
  position:relative;
  padding:clamp(2rem,5vw,4rem) 0 clamp(1.6rem,3.4vw,2.6rem);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -55% 40%;
  height:420px;background:radial-gradient(closest-side,rgba(43,189,238,.16),transparent 70%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#0a2033;background:linear-gradient(90deg,var(--brand-teal-2),var(--brand-teal));
  padding:.34rem .8rem;border-radius:999px;margin-bottom:.9rem;
}
.hero h1{margin-bottom:.75rem}
.hero-sub{
  color:var(--ink-dim);font-size:clamp(1rem,1.6vw,1.12rem);
  max-width:52ch;margin-bottom:1.3rem;
}
.figure-hero,.figure-full{margin:0}
.figure-hero img,.figure-full img{
  width:100%;border-radius:16px;display:block;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.figure-hero figcaption,.figure-full figcaption{
  color:var(--ink-dim);font-size:.82rem;margin-top:.6rem;padding-left:.25rem;
}
.figure-hero{margin-top:1rem}
.figure-full{margin:1.4rem 0}

/* ---------- ปุ่ม ---------- */
.btn-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;color:#04223a;
  background:linear-gradient(90deg,var(--brand-teal-2),var(--brand-teal));
  border:0;border-radius:12px;padding:.7rem 1.35rem;
  box-shadow:0 10px 26px rgba(43,189,238,.28);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(43,189,238,.38);color:#04223a}
.btn-cta.btn-lg{padding:.95rem 1.9rem;font-size:1.05rem}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;color:#dcecf7;
  border:1px solid rgba(43,189,238,.45);border-radius:12px;padding:.7rem 1.35rem;
  background:rgba(43,189,238,.08);
  transition:background .15s ease,color .15s ease;
}
.btn-ghost:hover{background:rgba(43,189,238,.18);color:#fff}

/* ---------- SECTION ---------- */
.section{padding:clamp(2rem,4.4vw,3.4rem) 0}
.section-alt{
  background:linear-gradient(180deg,rgba(11,37,64,.55),rgba(7,26,43,.15));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.section h2{margin-bottom:1.1rem}
.section h3{margin-top:1.6rem;margin-bottom:.6rem}

/* ---------- การ์ด ---------- */
.card-info{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:16px;
  padding:1.15rem 1.25rem;height:100%;
  transition:transform .15s ease,border-color .15s ease;
}
.card-info:hover{transform:translateY(-3px);border-color:rgba(43,189,238,.35)}
.card-info h3{margin:.15rem 0 .55rem;font-size:1.06rem}
.card-info .bi{color:var(--brand-teal-2);font-size:1.35rem;display:block;margin-bottom:.45rem}
.card-info p,.card-info ul{margin-bottom:0;color:var(--ink-dim);font-size:.95rem}

/* ---------- ลิสต์ ---------- */
.list-check{list-style:none;padding-left:0;margin:0 0 1rem}
.list-check li{
  position:relative;padding-left:2rem;margin-bottom:.6rem;color:var(--ink-dim);
}
.list-check li::before{
  content:"\F26E"; /* bi-check-circle-fill */
  font-family:"bootstrap-icons";position:absolute;left:0;top:.05rem;
  color:var(--brand-teal-2);font-size:1.05rem;
}

/* ---------- ตาราง (ข้อมูลตัวเลข) ---------- */
.table-data{
  --bs-table-bg:transparent;--bs-table-color:var(--ink-dim);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.table-data thead th{
  background:rgba(43,189,238,.12);color:#fff;font-weight:800;font-size:.9rem;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table-data td,.table-data th{border-color:var(--line);vertical-align:middle}
.table-data tbody tr:hover{background:rgba(255,255,255,.03)}

/* ---------- FAQ accordion ---------- */
.faq-box{padding-bottom:clamp(2.4rem,5vw,3.6rem)}
.accordion-item{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;overflow:hidden;
}
.accordion-button{
  background:transparent;color:#fff;font-weight:800;font-size:1rem;
  box-shadow:none;padding:1rem 1.15rem;
}
.accordion-button:not(.collapsed){
  background:rgba(43,189,238,.10);color:#fff;
}
.accordion-button:focus{box-shadow:none;border-color:rgba(43,189,238,.4)}
.accordion-button::after{filter:invert(1) brightness(2)}
.accordion-body{color:var(--ink-dim);padding:.35rem 1.15rem 1.05rem;font-size:.96rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(57,234,190,.18), transparent 70%),
    linear-gradient(180deg,rgba(11,37,64,.85),rgba(7,26,43,.6));
  border-top:1px solid var(--line);
}
.cta-band h2{margin-bottom:.6rem}
.cta-band p{color:var(--ink-dim);max-width:60ch;margin:0 auto 1.4rem}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .hero{text-align:left}
  .figure-hero{margin-top:1.6rem}
}
@media (max-width:575.98px){
  body{font-size:15.5px}
  .btn-cta,.btn-ghost{width:100%;justify-content:center}
  .hero .d-flex.gap-2{flex-direction:column}
}