/* ============================================================
   SHARED · Section collapse — fold a whole topic-section-card away
   (prefix: seccol-)

   For LONG pages: the core teaching stays open, and the later
   reference/depth sections collapse to a single clickable header,
   CLOSED by default. The reader sees a short page and opens what
   they want.

   Native <details>/<summary> — same approach as the kit's .mk-drop,
   so there is no JS, it is keyboard accessible, and Ctrl-F still finds
   text in closed sections in most browsers.

   The card keeps its normal `.section-label` + `<h3>` (they move INSIDE
   the <summary>), so the house rule "every section has an eyebrow and a
   title" and the module-lint section scan both still hold.

   Markup contract — wrap the card's guts, change nothing else:
     <article class="topic-section-card full-width seccol" id="…">
       <details class="seccol__d">                 (add `open` to start expanded)
         <summary class="seccol__sum">
           <div class="section-label">Section 6 — …</div>
           <h3>The resistance ladder — MDR to XDR</h3>
           <span class="seccol__chev" aria-hidden="true">▾</span>
         </summary>
         <div class="seccol__body">
           …the whole original section body…
         </div>
       </details>
     </article>
   ============================================================ */

.seccol > .seccol__d { margin: 0; }

.seccol__sum {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
    margin: -4px;
    padding: 4px;
    transition: background 0.14s ease;
}
/* kill the native disclosure triangle (both engines) */
.seccol__sum::-webkit-details-marker { display: none; }
.seccol__sum::marker { content: ""; }

.seccol__sum:hover { background: rgba(10, 132, 255, 0.05); }
.seccol__sum:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.7);
    outline-offset: 2px;
}

/* the eyebrow + title keep their normal look; they just live in the summary now */
.seccol__sum > .section-label { grid-column: 1; margin: 0 0 2px; }
.seccol__sum > h3 { grid-column: 1; margin: 0; }

.seccol__chev {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
    background: #fff;
    color: #5b6b86;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.18s ease, border-color 0.14s ease;
}
.seccol__sum:hover .seccol__chev { border-color: rgba(10, 132, 255, 0.45); }
.seccol__d[open] .seccol__chev { transform: rotate(180deg); }

/* a hint that there IS more, shown only while closed */
.seccol__d:not([open]) .seccol__sum::after {
    content: "Show";
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    margin-right: 34px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a93a0;
}

.seccol__body { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
    .seccol__sum, .seccol__chev { transition: none; }
}