/* =================================================================
   GLOSSARY
   A–Z grouped term list built from ONE Loop Grid.
   Loaded by inc/enqueue.php.
   ================================================================= */

/* ---------------------------------------------------------------
   Setup
     Loop Grid      class  glossary-grid ; query the glossary CPT,
                    order Title A–Z, all posts (no pagination),
                    1 column in Elementor (the columns below take over)
     Loop item      Heading widget containing [ipg_letter_heading]
                    + a Divider, both inside a container with the
                    class  glossary-letter ; then the term title/link.

   Only the first item of each letter carries .ipg-letter--first (see
   inc/shortcodes.php), so every other item's letter container is
   hidden and the list reads as A-heading, terms, B-heading, terms…
   Search re-renders the grid server-side with only matching terms,
   so letters with nothing under them have no heading at all.
--------------------------------------------------------------- */
.glossary-letter:not(:has(.ipg-letter--first)) {
    display: none;
}

/* Newspaper flow: A–M down the left column, then N–Z down the right,
   as designed. Elementor's grid can't order top-to-bottom-then-across;
   CSS multi-column can. glossary.js wraps each letter's items in a
   .glossary-group, and a group never splits across the column break —
   so a whole letter moves to the next column rather than straddling
   both. (Before the script runs, single items are protected instead.) */
.glossary-grid .elementor-loop-container {
    display: block;
    columns: 2;
    column-gap: 48px;
}
.glossary-grid .glossary-group,
.glossary-grid .elementor-loop-container > .e-loop-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;   /* needed for break-inside to be honoured in Safari */
}
@media (max-width: 767px) {
    .glossary-grid .elementor-loop-container {
        columns: 1;
    }
}

/* Heading text: sized/coloured in Elementor via the Heading widget;
   scroll-margin so an A–Z jump link doesn't land under a sticky header. */
.ipg-letter--first {
    scroll-margin-top: 120px;
}