/* K-BEAUTY MEETS 2026 hub — .amlab-kbm-* classes. Hero / programmes(modes) /
   operating(areas) / stake(audience) reuse the .amlab-about-* styles; this file
   adds the stats bar, quick facts, timeline, hero buttons, and FAQ. */

.amlab-kbm-center { text-align: center; }
.amlab-kbm-center-eyebrow { justify-content: center; }

/* Hero buttons */
.amlab-kbm-hero__btns { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.amlab-kbm-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s, border-color .15s; }
.amlab-kbm-btn--gold { background: #c5a15a; color: #1a2238; }
.amlab-kbm-btn--gold:hover { background: #b8934a; }
.amlab-kbm-btn--ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.amlab-kbm-btn--ghost:hover { border-color: rgba(255, 255, 255, .6); }

/* 2. Stats bar */
.amlab-kbm-stats { background: #fff; padding: 26px 0; }
.amlab-kbm-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.amlab-kbm-stat { display: flex; align-items: center; gap: 14px; background: #fbf9f5; border: 1px solid rgba(32, 41, 64, .07); border-radius: 12px; padding: 16px 20px; }
.amlab-kbm-stat__ico { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #c5a15a; flex: 0 0 auto; box-shadow: 0 2px 8px -4px rgba(32, 41, 64, .3); }
.amlab-kbm-stat__ico svg { width: 20px; height: 20px; }
.amlab-kbm-stat__value { color: #202940; font-weight: 800; font-size: 1.1rem; margin: 0; }
.amlab-kbm-stat__label { color: #6b7280; font-size: .82rem; margin: 2px 0 0; }

/* 3. Quick Facts */
.amlab-kbm-facts { background: #f6f3ec; padding: 60px 0; }
.amlab-kbm-facts__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.amlab-kbm-facts__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.amlab-kbm-facts__tabs span { background: #fff; border: 1px solid #e6e0d5; border-radius: 999px; padding: 6px 14px; font-size: .8rem; color: #5a6577; }
.amlab-kbm-facts__side { display: grid; gap: 16px; }
.amlab-kbm-facts__media { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 14px 40px -18px rgba(32, 41, 64, .35); }
.amlab-kbm-facts__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amlab-kbm-facts__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amlab-kbm-fcard { background: #fff; border: 1px solid rgba(32, 41, 64, .07); border-radius: 12px; padding: 18px; }
.amlab-kbm-fcard__ico { width: 26px; height: 26px; color: #c5a15a; display: block; margin-bottom: 10px; }
.amlab-kbm-fcard__ico svg { width: 100%; height: 100%; }
.amlab-kbm-fcard__title { color: #202940; font-weight: 700; font-size: .95rem; margin: 0 0 6px; }
.amlab-kbm-fcard__desc { color: #5a6577; font-size: .82rem; line-height: 1.5; margin: 0; }

/* 4. Modes — center the header (reuses .amlab-about-programmes navy band) */
.amlab-kbm-modes .amlab-about-eyebrow { justify-content: center; }
.amlab-kbm-modes__title { text-align: center; margin-bottom: 28px; }

/* 5. Key Timeline */
.amlab-kbm-timeline { background: #f6f3ec; padding: 56px 0; }
.amlab-kbm-timeline__list { display: grid; gap: 14px; max-width: 900px; margin: 8px auto 0; }
.amlab-kbm-trow { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid rgba(32, 41, 64, .07); border-radius: 12px; padding: 18px 22px; }
.amlab-kbm-trow__date { flex: 0 0 auto; min-width: 64px; color: #c5a15a; font-weight: 700; font-size: .9rem; }
.amlab-kbm-trow__title { color: #202940; font-weight: 700; font-size: 1rem; margin: 0 0 4px; }
.amlab-kbm-trow__desc { color: #5a6577; font-size: .88rem; line-height: 1.55; margin: 0; }

/* 6. Key areas — 3-col grid; white cards + cream/gold icon badge (Vercel). */
.amlab-kbm-areas__grid { grid-template-columns: repeat(3, 1fr); }
.amlab-kbm-areas .amlab-about-opcard { background: #fff; border-color: #e6eaf0; border-radius: 8px; }
.amlab-kbm-areas .amlab-about-opcard__ico { background: #f6eedc; color: #8c6822; box-shadow: none; }

/* 7. Audience — centered header, 3-col pills (reuses .amlab-about-stake) */
.amlab-kbm-audience__grid { grid-template-columns: repeat(3, 1fr); }

/* 8. FAQ */
.amlab-kbm-faq { background: #f6f3ec; padding: 56px 0 64px; }
.amlab-kbm-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.amlab-kbm-faq__item { background: #fff; border: 1px solid rgba(32, 41, 64, .07); border-radius: 12px; padding: 0 20px; }
.amlab-kbm-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #202940; font-weight: 600; font-size: .95rem; padding: 18px 0; }
.amlab-kbm-faq__item summary::-webkit-details-marker { display: none; }
.amlab-kbm-faq__chevron { color: #9aa2ae; transition: transform .2s; }
.amlab-kbm-faq__item[open] .amlab-kbm-faq__chevron { transform: rotate(180deg); }
.amlab-kbm-faq__item p { color: #5a6577; font-size: .88rem; line-height: 1.6; margin: 0; padding: 0 0 18px; }

/* Responsive */
@media (max-width: 900px) {
	.amlab-kbm-stats__grid, .amlab-kbm-facts__grid, .amlab-kbm-faq__grid { grid-template-columns: 1fr; }
	.amlab-kbm-areas__grid, .amlab-kbm-audience__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.amlab-kbm-facts__cards, .amlab-kbm-areas__grid, .amlab-kbm-audience__grid { grid-template-columns: 1fr; }
}