/* ============================================================
   KIBO CMS page (src/pages/platform/cms-new.astro), loaded only on that
   page, after public/home/tokens.css, public/home/home.css and
   public/search/search.css (which give it the buttons, the closing band and
   every section it shares with the Search page). This file holds only what is
   new on the CMS page. Brand colors: src/styles/tokens.css. Sections in page
   order; each group names its component in src/components/sections/cms/.
   Breakpoints: 1340 (FAQ stacks), 900, 760 (resources), 700, 640.
   ============================================================ */

/* ==== Hero (the Search page's SearchHero.astro): text lines up with the sections below ==== */
.kcms-page .ks-hero__in { max-width: calc(1280px + 2 * var(--ks-gutter)); }

/* ==== Benefits band (CmsStats.astro) ==== */
.kcms-stats { max-width: 840px; margin: 0 auto; }
.kcms-stats__h { margin: 0 auto 64px; text-align: center; }
.kcms-stats__list { display: grid; grid-auto-rows: 1fr; border-top: 1.5px solid var(--kibo-yellow); }
.kcms-stat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 96px; padding: 20px 0; border-bottom: 1.5px solid var(--kibo-yellow); }
.kcms-stat__value { margin: 0; font-family: var(--font-base); font-size: 22px; line-height: 1.1; font-weight: 600; color: var(--kibo-yellow); }
.kcms-stat__text { margin: 0; font-size: 16px; line-height: 1.4; color: var(--kibo-white); white-space: nowrap; }

/* ==== Problem statement (CmsProblem.astro): the card's yellow words and a few graphic parts ==== */
.kcms-card-text strong { color: var(--kibo-yellow); font-weight: 600; }
.kcms-g-reg { font-weight: 400; }
.kcms-g-text-y { fill: var(--kibo-yellow); }
.kcms-g-faint { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.kcms-g-dot-y { fill: var(--kibo-yellow); }
.kcms-g-dot-w { fill: var(--kibo-white); }

/* ==== Tab rails (CmsRail.astro, Search page classes) ==== */
.kcms-rail-h { flex: 1 1 560px; min-width: 0; }
.kcms-page .ks-rail__panel { min-height: 502px; }
.kcms-page .ks-rail__panel--caps { min-height: 522px; }
/* the "editor" icon's mask: the screen shows, the hand cuts it */
.kcms-mask-show { fill: var(--kibo-white); stroke: none; }
.kcms-mask-hide { fill: var(--kibo-black); stroke: var(--kibo-black); stroke-width: 1.5; }

/* ==== FAQ (CmsFaq.astro): a row of panels, one open ==== */
.kcms-faq { margin: 28px 0 0; display: flex; gap: 4px; align-items: stretch; height: 240px; overflow: hidden; }
.kcms-faq__item {
  flex: 1 1 0px; min-width: 0; will-change: flex-grow; position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: var(--kibo-dark-grey); color: var(--kibo-white);
  transition: flex-grow .7s var(--ks-ease-faq), background .5s var(--ks-ease-faq), border-color .5s var(--ks-ease-faq);
}
.kcms-faq__item.is-open { flex-grow: 4; background: var(--kibo-link); border-color: var(--kibo-link); }
.kcms-faq__item:focus-visible { outline: 2px solid var(--kibo-dark-grey); outline-offset: 2px; }
.kcms-faq__face { position: absolute; top: 0; left: 0; bottom: 0; width: 520px; max-width: 100%; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ks-ease-faq) .2s; }
.kcms-faq__item.is-open .kcms-faq__face { opacity: 1; }
.kcms-faq__q { margin: 0; font-size: 19px; line-height: 25px; font-weight: 400; text-wrap: balance; }
.kcms-faq__a { margin: 0; font-size: 14px; line-height: 21px; font-weight: 400; color: var(--kibo-white); text-wrap: pretty; }
.kcms-faq__rail { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; padding: 24px 18px; display: flex; align-items: center; justify-content: flex-start; opacity: 1; pointer-events: none; transition: opacity .35s var(--ks-ease-faq); }
.kcms-faq__item.is-open .kcms-faq__rail { opacity: 0; }
.kcms-faq__short { display: block; white-space: pre; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--kibo-white); text-align: left; }
.kcms-faq__long { display: none; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--kibo-white); text-wrap: pretty; }

/* ==== Resource tiles (CmsResources.astro): four across ==== */
.kcms-res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcms-res__tile { padding: 56px 32px 36px; }

/* ==== Closing band (CmsFinalCta.astro, home.css .kh-finalcta) ==== */
.kcms-finalcta h2 { max-width: 28ch; margin-bottom: 20px; }
.kcms-page .kcms-btn-ghost { background: transparent; color: var(--kibo-white); border-color: var(--kibo-white); }
.kcms-page .kcms-btn-ghost:hover { background: var(--kibo-white); color: var(--kibo-dark-grey); border-color: var(--kibo-white); }

/* =================== Responsive =================== */

/* FAQ becomes a stacked accordion; closed rows show the whole question */
@media (max-width: 1340px) {
  .kcms-faq { flex-direction: column; height: auto; }
  .kcms-faq__item { flex: none; min-height: 56px; }
  .kcms-faq__item.is-open { flex-grow: 0; }
  .kcms-faq__item.is-open .kcms-faq__face { position: relative; width: auto; }
  .kcms-faq__item:not(.is-open) .kcms-faq__face { display: none; }
  .kcms-faq__item.is-open .kcms-faq__rail { display: none; }
  .kcms-faq__item:not(.is-open) .kcms-faq__rail { position: relative; width: auto; padding: 18px 20px; }
  .kcms-faq__short { display: none; }
  .kcms-faq__long { display: block; }
}

@media (max-width: 900px) {
  .kcms-stat__text { white-space: normal; }
}

@media (max-width: 760px) {
  .kcms-res { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .kcms-stat { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
}

@media (max-width: 640px) {
  .kcms-stats__h { margin-bottom: 44px; }
  .kcms-faq__face { padding: 24px 20px; }
  .kcms-res__tile { padding: 40px 28px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .kcms-faq__item, .kcms-faq__face, .kcms-faq__rail { transition: none !important; }
}