add some new components

app/src/components/Glossary.astro

@@ -0,0 +1,336 @@
+---
+interface Props {
+  /** The word or term to define */
+  term: string;
+  /** The definition of the term */
+  definition: string;
+  /** Optional CSS class to apply to the term */
+  class?: string;
+  /** Optional style to apply to the term */
+  style?: string;
+  /** Tooltip position (top, bottom, left, right) */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Delay before showing tooltip in ms */
+  delay?: number;
+  /** Disable tooltip on mobile */
+  disableOnMobile?: boolean;
+}
+
+const {
+  term,
+  definition,
+  class: className = "",
+  style: inlineStyle = "",
+  position = "top",
+  delay = 300,
+  disableOnMobile = false,
+} = Astro.props as Props;
+
+// Generate a unique ID for this component
+const tooltipId = `glossary-${Math.random().toString(36).slice(2)}`;
+---
+
+<div class="glossary-container" data-glossary-container-id={tooltipId}>
+  <span
+    class={`glossary-term ${className}`}
+    style={inlineStyle}
+    data-glossary-term={term}
+    data-glossary-definition={definition}
+    data-glossary-position={position}
+    data-glossary-delay={delay}
+    data-glossary-disable-mobile={disableOnMobile}
+    data-glossary-id={tooltipId}
+    tabindex="0"
+    role="button"
+    aria-describedby={`${tooltipId}-tooltip`}
+  >
+    {term}
+  </span>
+
+  <div
+    id={`${tooltipId}-tooltip`}
+    class="glossary-tooltip"
+    data-glossary-tooltip-id={tooltipId}
+    data-position={position}
+    role="tooltip"
+    aria-hidden="true"
+  >
+    <div class="glossary-tooltip__content">
+      <div class="glossary-tooltip__term">{term}</div>
+      <div class="glossary-tooltip__definition">{definition}</div>
+    </div>
+    <div class="glossary-tooltip__arrow"></div>
+  </div>
+</div>
+
+<script is:inline>
+  // Global script for all Glossary tooltips
+  if (!window.glossaryInitialized) {
+    window.glossaryInitialized = true;
+
+    function initAllGlossaryTooltips() {
+      const glossaryTerms = document.querySelectorAll(".glossary-term");
+
+      glossaryTerms.forEach((termElement) => {
+        const tooltipElement =
+          termElement.parentElement.querySelector(".glossary-tooltip");
+
+        if (!tooltipElement) return;
+
+        const term = termElement.getAttribute("data-glossary-term");
+        const definition = termElement.getAttribute("data-glossary-definition");
+
+        if (!term || !definition) return;
+
+        // Fonction pour afficher le tooltip au niveau de la souris
+        const showTooltip = (event) => {
+          tooltipElement.style.display = "block";
+          tooltipElement.style.opacity = "1";
+          tooltipElement.style.position = "fixed";
+          tooltipElement.style.top = event.clientY + 10 + "px";
+          tooltipElement.style.left = event.clientX + 10 + "px";
+          tooltipElement.style.zIndex = "9999";
+          tooltipElement.style.pointerEvents = "none";
+        };
+
+        const hideTooltip = () => {
+          tooltipElement.style.display = "none";
+          tooltipElement.style.opacity = "0";
+        };
+
+        // Add events
+        termElement.addEventListener("mouseenter", showTooltip);
+        termElement.addEventListener("mouseleave", hideTooltip);
+        termElement.addEventListener("mousemove", showTooltip);
+      });
+    }
+
+    // Initialize when DOM is ready
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initAllGlossaryTooltips);
+    } else {
+      initAllGlossaryTooltips();
+    }
+
+    // Observe DOM changes for new elements
+    if (window.MutationObserver) {
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "childList") {
+            mutation.addedNodes.forEach((node) => {
+              if (
+                node.nodeType === 1 &&
+                node.querySelector &&
+                node.querySelector(".glossary-term")
+              ) {
+                initAllGlossaryTooltips();
+              }
+            });
+          }
+        });
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+</script>
+
+<style>
+  /* ============================================================================ */
+  /* Glossary Component */
+  /* ============================================================================ */
+
+  .glossary-container {
+    display: inline;
+    position: relative;
+  }
+
+  .glossary-term {
+    color: var(--primary-color) !important;
+    text-decoration: none !important;
+    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
+    border-bottom: 1px dashed
+      color-mix(in srgb, var(--primary-color) 100%, transparent) !important;
+    cursor: help;
+    transition: all 0.2s ease;
+    border-radius: 3px;
+    margin: 0 2px;
+    padding: 4px 8px;
+  }
+
+  .glossary-term:hover,
+  .glossary-term:focus {
+    color: var(--primary-color-hover) !important;
+    text-decoration: none !important;
+    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
+    outline: none;
+  }
+
+  .glossary-term:focus {
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--primary-color) 20%, transparent);
+  }
+
+  .glossary-tooltip {
+    position: fixed;
+    top: -9999px;
+    left: -9999px;
+    z-index: var(--z-tooltip);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+    pointer-events: none;
+    max-width: 300px;
+    min-width: 200px;
+  }
+
+  .glossary-tooltip.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .glossary-tooltip__content {
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px 16px;
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.12),
+      0 2px 8px rgba(0, 0, 0, 0.06);
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+
+  .glossary-tooltip__term {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--primary-color);
+    margin-bottom: 4px;
+    line-height: 1.3;
+  }
+
+  .glossary-tooltip__definition {
+    font-size: 13px;
+    color: var(--text-color);
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .glossary-tooltip__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+  }
+
+  /* Arrow positioning */
+  .glossary-tooltip[data-position="top"] .glossary-tooltip__arrow {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="top"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -7px;
+    left: -6px;
+    border: 6px solid transparent;
+    border-top-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="bottom"] .glossary-tooltip__arrow {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="bottom"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -6px;
+    border: 6px solid transparent;
+    border-bottom-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="left"] .glossary-tooltip__arrow {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="left"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -7px;
+    border: 6px solid transparent;
+    border-left-color: var(--surface-bg);
+  }
+
+  .glossary-tooltip[data-position="right"] .glossary-tooltip__arrow {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--border-color);
+  }
+
+  .glossary-tooltip[data-position="right"] .glossary-tooltip__arrow::after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -5px;
+    border: 6px solid transparent;
+    border-right-color: var(--surface-bg);
+  }
+
+  /* Mode sombre */
+  [data-theme="dark"] .glossary-tooltip__content {
+    background: var(--surface-bg);
+    border-color: var(--border-color);
+  }
+
+  [data-theme="dark"] .glossary-tooltip__term {
+    color: var(--primary-color);
+  }
+
+  [data-theme="dark"] .glossary-tooltip__definition {
+    color: var(--text-color);
+  }
+
+  /* Responsive - hide on mobile if disabled */
+  @media (max-width: 768px) {
+    .glossary-term[data-glossary-disable-mobile="true"] {
+      border-bottom: none;
+      color: inherit;
+      cursor: default;
+    }
+
+    .glossary-term[data-glossary-disable-mobile="true"]:hover,
+    .glossary-term[data-glossary-disable-mobile="true"]:focus {
+      background: none;
+      color: inherit;
+      border-bottom: none;
+    }
+  }
+
+  /* Accessibility improvement */
+  @media (prefers-reduced-motion: reduce) {
+    .glossary-tooltip {
+      transition: none;
+    }
+
+    .glossary-term {
+      transition: none;
+    }
+  }
+</style>

app/src/components/Hero.astro

@@ -91,21 +91,37 @@ const pdfBase = titleRaw ? stripHtml(titleRaw) : stripHtml(title);
 const pdfFilename = `${slugify(pdfBase)}.pdf`;
 ---
 
-<section class="hero">
-  <h1 class="hero-title" set:html={title} />
-  <div class="hero-banner">
+<section class="w-full pt-12 pb-4 px-4 text-center">
+  <h1
+    class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight m-0 mb-2 max-w-full mx-auto"
+    set:html={title}
+  />
+  <div class="max-w-4xl mx-auto">
     <HtmlEmbed src="banner.html" frameless />
-    {description && <p class="hero-desc">{description}</p>}
+    {
+      description && (
+        <p class="text-gray-500 dark:text-gray-400 italic m-0 mb-4">
+          {description}
+        </p>
+      )
+    }
   </div>
 </section>
 
-<header class="meta" aria-label="Article meta information">
-  <div class="meta-container">
+<header
+  class="border-t border-b border-gray-200 dark:border-gray-700 py-4 text-sm"
+  aria-label="Article meta information"
+>
+  <div
+    class="max-w-4xl mx-auto flex flex-row justify-between px-4 gap-2 md:flex md:gap-2 max-md:flex-wrap"
+  >
     {
       normalizedAuthors.length > 0 && (
-        <div class="meta-container-cell">
-          <h3>Author{normalizedAuthors.length > 1 ? "s" : ""}</h3>
-          <ul class="authors">
+        <div class="meta-cell flex flex-col gap-2 max-w-64 md:min-w-0 max-xs:text-center">
+          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+            Author{normalizedAuthors.length > 1 ? "s" : ""}
+          </h3>
+          <ul class="m-0 list-none p-0 flex flex-wrap">
             {normalizedAuthors.map((a, i) => {
               const supers =
                 shouldShowAffiliationSupers &&
@@ -114,8 +130,17 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
                   <sup>{a.affiliationIndices.join(",")}</sup>
                 ) : null;
               return (
-                <li>
-                  {a.url ? <a href={a.url}>{a.name}</a> : a.name}
+                <li class="whitespace-nowrap mr-1">
+                  {a.url ? (
+                    <a
+                      href={a.url}
+                      class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
+                    >
+                      {a.name}
+                    </a>
+                  ) : (
+                    a.name
+                  )}
                   {supers}
                   {i < normalizedAuthors.length - 1 && ", "}
                 </li>
@@ -127,14 +152,21 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       Array.isArray(affiliations) && affiliations.length > 0 && (
-        <div class="meta-container-cell meta-container-cell--affiliations">
-          <h3>Affiliation{affiliations.length > 1 ? "s" : ""}</h3>
+        <div class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center">
+          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+            Affiliation{affiliations.length > 1 ? "s" : ""}
+          </h3>
           {hasMultipleAffiliations ? (
-            <ol class="affiliations">
+            <ol class="m-0 pl-5 max-xs:list-inside max-xs:pl-0 max-xs:ml-0">
               {affiliations.map((af) => (
-                <li value={af.id}>
+                <li value={af.id} class="m-0 max-xs:text-center">
                   {af.url ? (
-                    <a href={af.url} target="_blank" rel="noopener noreferrer">
+                    <a
+                      href={af.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
+                    >
                       {af.name}
                     </a>
                   ) : (
@@ -144,12 +176,13 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
               ))}
             </ol>
           ) : (
-            <p>
+            <p class="m-0">
               {affiliations[0]?.url ? (
                 <a
                   href={affiliations[0].url}
                   target="_blank"
                   rel="noopener noreferrer"
+                  class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
                 >
                   {affiliations[0].name}
                 </a>
@@ -163,17 +196,21 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       (!affiliations || affiliations.length === 0) && affiliation && (
-        <div class="meta-container-cell meta-container-cell--affiliations">
-          <h3>Affiliation</h3>
-          <p>{affiliation}</p>
+        <div class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center">
+          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+            Affiliation
+          </h3>
+          <p class="m-0">{affiliation}</p>
         </div>
       )
     }
     {
       published && (
-        <div class="meta-container-cell meta-container-cell--published">
-          <h3>Published</h3>
-          <p>{published}</p>
+        <div class="meta-cell flex flex-col gap-2 max-w-64 md:min-w-0 max-xs:text-center">
+          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+            Published
+          </h3>
+          <p class="m-0">{published}</p>
         </div>
       )
     }
@@ -183,11 +220,17 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
         <p><a href={`https://doi.org/${doi}`} target="_blank" rel="noopener noreferrer">{doi}</a></p>
       </div>
     )} -->
-    <div class="meta-container-cell meta-container-cell--pdf">
-      <h3>PDF</h3>
-      <p>
+    <div
+      class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center"
+    >
+      <h3
+        class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+      >
+        PDF
+      </h3>
+      <p class="m-0">
         <a
-          class="button"
+          class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-150 no-underline"
           href={`/${pdfFilename}`}
           download={pdfFilename}
           aria-label={`Download PDF ${pdfFilename}`}
@@ -200,113 +243,18 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 </header>
 
 <style>
-  /* Hero (full-width) */
-  .hero {
-    width: 100%;
-    padding: 48px 16px 16px;
-    text-align: center;
-  }
-  .hero-title {
-    font-size: clamp(28px, 4vw, 48px);
-    font-weight: 800;
-    line-height: 1.1;
-    margin: 0 0 8px;
-    max-width: 100%;
-    margin: auto;
-  }
-  .hero-banner {
-    max-width: 980px;
-    margin: 0 auto;
-  }
-  .hero-desc {
-    color: var(--muted-color);
-    font-style: italic;
-    margin: 0 0 16px 0;
+  /* Flex behavior for meta cells */
+  .meta-cell {
+    flex: 1 1 calc(50% - 8px);
   }
 
-  /* Meta (byline-like header) */
-  .meta {
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-    padding: 1rem 0;
-    font-size: 0.9rem;
-  }
-  .meta-container {
-    max-width: 760px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0 auto;
-    padding: 0 var(--content-padding-x);
-    gap: 8px;
-  }
-  /* Subtle underline for links in meta; keep buttons without underline */
-  .meta-container a:not(.button) {
-    color: var(--primary-color);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    text-decoration-thickness: 0.06em;
-    text-decoration-color: var(--link-underline);
-    transition: text-decoration-color 0.15s ease-in-out;
-  }
-  .meta-container a:hover {
-    text-decoration-color: var(--link-underline-hover);
-  }
-  .meta-container a.button,
-  .meta-container .button {
-    text-decoration: none;
-  }
-  .meta-container-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    max-width: 250px;
-  }
-  .meta-container-cell h3 {
-    margin: 0;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--muted-color);
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-  }
-  .meta-container-cell p {
-    margin: 0;
-  }
-  .authors {
-    margin: 0;
-    list-style-type: none;
-    padding-left: 0;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .authors li {
-    white-space: nowrap;
-    margin-right: 4px;
-  }
-  .affiliations {
-    margin: 0;
-    padding-left: 1.25em;
-  }
-  .affiliations li {
-    margin: 0;
-  }
-
-  header.meta .meta-container {
-    flex-wrap: wrap;
-    row-gap: 12px;
-  }
-
-  @media (max-width: 768px) {
-    .meta-container-cell--affiliations,
-    .meta-container-cell--pdf {
-      text-align: right;
-    }
+  .meta-cell.max-xs\:flex-1 {
+    flex: 1 1 100% !important;
   }
 
   @media print {
-    .meta-container-cell--pdf {
-      display: none !important;
+    .max-md\\:text-right {
+      @apply hidden;
     }
   }
 </style>

app/src/components/Image.astro

@@ -25,6 +25,8 @@ interface Props {
   linkTarget?: string;
   /** Optional rel for the link (default: noopener noreferrer when linkHref provided) */
   linkRel?: string;
+  /** Make the image span full width */
+  fullWidth?: boolean;
   /** Any additional attributes should be forwarded to the underlying <AstroImage> */
   [key: string]: any;
 }
@@ -39,11 +41,13 @@ const {
   linkHref,
   linkTarget,
   linkRel,
+  fullWidth,
   ...imgProps
 } = Astro.props as Props;
 const hasCaptionSlot = Astro.slots.has("caption");
 const hasCaption =
   hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
+const hasTitle = Astro.slots.has("title");
 const uid = `ri_${Math.random().toString(36).slice(2)}`;
 const dataZoomable =
   zoomable === true || (imgProps as any)["data-zoomable"] ? "1" : undefined;
@@ -56,7 +60,12 @@ const resolvedTarget = hasLink ? linkTarget || "_blank" : undefined;
 const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
 ---
 
-<div class="ri-root" data-ri-root={uid}>
+<div
+  class={`ri-root`}
+  data-ri-root={uid}
+  data-has-title={hasTitle}
+  data-has-caption={hasCaption}
+>
   {
     hasCaption ? (
       <figure
@@ -165,10 +174,18 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
         target={resolvedTarget}
         rel={resolvedRel}
       >
-        <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+        <AstroImage
+          {...imgProps}
+          data-zoomable={dataZoomable}
+          class={fullWidth ? "full" : ""}
+        />
       </a>
     ) : (
-      <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+      <AstroImage
+        {...imgProps}
+        data-zoomable={dataZoomable}
+        class={fullWidth ? "full" : ""}
+      />
     )
   }
 </div>
@@ -472,4 +489,20 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
   [data-theme="dark"] .img-dl-btn:hover {
     background: var(--primary-color-hover);
   }
+
+  /* Conditional margins based on title and caption presence */
+  .ri-root:not([data-has-title="true"]) {
+    margin-top: 20px;
+  }
+
+  .ri-root:not([data-has-caption="true"]) {
+    margin-bottom: 20px;
+  }
+
+  /* full image styles */
+  img.full {
+    width: 100% !important;
+    min-width: 100%;
+    max-width: 100%;
+  }
 </style>

app/src/components/Stack.astro

@@ -0,0 +1,159 @@
+---
+interface Props {
+    /** Layout mode: number of columns or 'auto' for responsive */
+    layout?: "2-column" | "3-column" | "4-column" | "auto";
+    /** Gap between items - can be a predefined size or custom value (e.g., "2rem", "20px", "1.5em") */
+    gap?: "small" | "medium" | "large" | string;
+    /** Optional class to apply on the wrapper */
+    class?: string;
+    /** Optional ID for the stack */
+    id?: string;
+}
+
+const {
+    layout = "2-column",
+    gap = "medium",
+    class: className,
+    id,
+} = Astro.props as Props;
+
+// Generate flex properties based on layout
+const getFlexProperties = () => {
+    switch (layout) {
+        case "2-column":
+            return { flexBasis: "50%", maxWidth: "50%" };
+        case "3-column":
+            return { flexBasis: "33.333%", maxWidth: "33.333%" };
+        case "4-column":
+            return { flexBasis: "25%", maxWidth: "25%" };
+        case "auto":
+            return { flexBasis: "auto", maxWidth: "none" };
+        default:
+            // By default, all children on one line with equal width
+            return { flexBasis: "auto", maxWidth: "none" };
+    }
+};
+
+const getGapSize = () => {
+    // If it's a predefined size, return the corresponding value
+    switch (gap) {
+        case "small":
+            return "0.5rem";
+        case "medium":
+            return "1rem";
+        case "large":
+            return "1.5rem";
+        default:
+            // If it's a custom value, return it as-is (e.g., "2rem", "20px", "1.5em")
+            return gap;
+    }
+};
+
+const flexProps = getFlexProperties();
+const gapSize = getGapSize();
+---
+
+<div
+    class={`stack ${className || ""}`}
+    data-layout={layout}
+    data-gap={gap}
+    {id}
+    style={`gap: ${gapSize}`}
+>
+    <slot />
+</div>
+
+<style>
+    .stack {
+        display: grid;
+        gap: 1rem;
+        margin: var(--block-spacing-y) 0;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    /* Layout configurations */
+    .stack[data-layout="2-column"] {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .stack[data-layout="3-column"] {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .stack[data-layout="4-column"] {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .stack[data-layout="auto"] {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+
+    /* Default layout (2-column) */
+    .stack:not([data-layout]) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* Ensure child elements don't overflow */
+    .stack :global(> *) {
+        min-width: 0 !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+        overflow: hidden !important;
+    }
+
+    /* Handle code blocks inside stack */
+    .stack pre {
+        overflow-x: auto;
+        max-width: 100%;
+        width: 100%;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        box-sizing: border-box;
+        min-width: 0 !important;
+    }
+
+    .stack code {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        max-width: 100%;
+        box-sizing: border-box;
+        min-width: 0 !important;
+    }
+
+    /* Override the min-width: 100% from _code.css */
+    .stack pre code {
+        min-width: 0 !important;
+    }
+
+    /* Override section.content-grid pre code min-width rule */
+    .stack section.content-grid pre code {
+        min-width: 0 !important;
+    }
+
+    /* Responsive behavior */
+    @media (max-width: 768px) {
+        .stack[data-layout="3-column"],
+        .stack[data-layout="4-column"],
+        .stack[data-layout="2-column"],
+        .stack:not([data-layout]) {
+            grid-template-columns: 1fr !important;
+        }
+    }
+
+    @media (min-width: 769px) and (max-width: 1100px) {
+        .stack[data-layout="3-column"],
+        .stack[data-layout="4-column"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+
+    @media (min-width: 1101px) and (max-width: 1400px) {
+        .stack[data-layout="4-column"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+</style>