/* page-module.code-example — read-only code snippet(s) with syntax highlighting.

   Why this stays separate from codestudy (decision 2026-04-24):
   code_example uses our custom <mark> highlighting system — annotation
   over snippets to call out specific lines/tokens. codestudy is for
   interactive code. Different teaching purposes; different rendering.
*/


page-module.code-example {
   .warning {
      color: var(--ink-error);
      margin-top: 1em;
   }

   .snippet-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 60px;
   }

   .section-heading + .snippet-list {
      margin-top: var(--above-block);
   }

   text-content {
      margin-top: var(--below-block);
   }

   padding-inline-end: 0;
}

[data-prominence='featured'] page-module.code-example {
   @media (width >= 1000px) {
      grid-column: 2 / -2;
      display: grid;
      grid-template-columns: subgrid;

      > inner-column {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: subgrid;

         .snippet-list {
            grid-column: 1 / -1;   /* fills the featured bleed */
            max-width: 100%;
         }

         .section-heading,
         text-content {
            grid-column: 2 / -2;   /* of subgrid = section 3-15 = reading band */
         }
      }
   }
}

[data-prominence='full'] page-module.code-example {
   @media (width >= 1000px) {
      grid-column: 3 / -1;
      display: grid;
      grid-template-columns: subgrid;

      padding-inline-end: 0;

      > inner-column {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: subgrid;

         .snippet-list {
            grid-column: 1 / -1;   
            /* fills the featured bleed */
            max-width: 100%;
         }

         .section-heading,
         text-content {
            grid-column: 1 / -1;   
            /* of subgrid = section 3-15 = reading band */
         }
      }
   }
}