/* Folded sections ("Fold this section", 2026-10-05; the client's checklist:
   shorter pages, accordions). Loaded by a folded block only (cms/src/frontend
   /blocks). Every selector starts with `html`: this file loads BEFORE site.css,
   whose section rules these override. The row is the Training Events fold's
   (product.css .prod-acc-row), so the site has one accordion look. */

/* Consecutive folds stack as one list; the first and last keep a section's
   breathing room from what is around them. */
html .fold-section{padding:7px 0;background:var(--warm)}
html :not(.fold-section) + .fold-section{padding-top:clamp(40px,5vw,64px)}
html .fold-section:has(+ :not(.fold-section)),html .fold-section:last-child{padding-bottom:clamp(40px,5vw,64px)}

html .fold{border:1px solid rgba(53,0,79,.1);border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(53,0,79,.04)}
html .fold > summary{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 24px;cursor:pointer;list-style:none}
html .fold > summary::-webkit-details-marker{display:none}
html .fold > summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:16px}
html .fold-title{margin:0;font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700;line-height:1.3;color:var(--plum)}
html .fold-chev{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(53,0,79,.2);border-radius:50%;background:#fff;transition:border-color .2s ease}
html .fold-chev::before{content:"";width:9px;height:9px;border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
html .fold[open] .fold-chev::before{transform:translateY(2px) rotate(225deg)}
html .fold > summary:hover .fold-chev{border-color:var(--plum)}

/* The section inside: its band, padding and container give way to the card,
   so it reads as the row's content. The numbered list keeps a rounded panel
   of the lavender ground (purple until 2026-10-13, the client: too purple). */
html .fold-body{padding:0 24px 24px;border-top:1px solid var(--hair)}
html .fold-body > *{margin:0;padding-top:24px;padding-bottom:0;background:transparent}
html .fold-body > * > .container,html .fold-body > .container{width:auto;max-width:none;margin:0}
html .fold-body > :is(.dark,.numbered-dark){margin-top:24px;padding:32px 28px;border-radius:16px;background:var(--warm)}
html .fold-body > :is(.dark,.numbered-dark) > .container{padding:0}

/* The row carries the heading: a renderer that draws its heading whatever
   it holds leaves an empty one (and its rule) behind, which is hidden, from
   screen readers too. */
html .fold-body :is(h2,h3):empty,html .fold-body .section-head > div:empty{display:none}
html .fold-body .section-head:not(:has(:is(h2,h3,p,.lead):not(:empty))){display:none}

@media (max-width:640px){
  html .fold > summary{padding:16px;gap:14px}
  html .fold-body{padding:0 16px 16px}
  html .fold-body > :is(.dark,.numbered-dark){padding:24px 18px}
}