/* Column Smart Art CSS Library */

/* Main container */
.sm-column {
  --width: 200px; /* Width of each header */
  --height: 60px; /* Height of headers */
  --gap: 15px; /* Gap between items */
  --bg: #e0e0e0; /* Header background color */
  --fg: #000; /* Header foreground color */
  --bg-alt: transparent; /* COntent background color */
  --fg-alt: currentColor; /* Content foreground color */


  > ul,
  > ol {
    list-style: none; /* Remove default list styling */
    display: flex; /* Horizontal layout for items */
    align-items: stretch; /* Make all items same height */
    margin: 0 auto; /* Center the list */
    gap: var(--gap);

    /* Each item (contains header and content ul) */
    > li {
      display: flex; /* Vertical layout for header and content */
      flex-direction: column;
      position: relative; /* For z-index stacking */
      flex: 0 0 auto; /* Don't grow/shrink, use natural size */


      /* Header shapes (header inside li) */
      > :first-child {
        /* Dimensions */
        width: var(--width);
        height: var(--height);

        /* Styling */
        background-color: var(--bg);
        color: var(--fg);

        /* Layout */
        display: flex;
        align-items: center; /* Center text vertically */
        justify-content: center; /* Center text horizontally */
        position: relative;
        z-index: 2; /* Above content boxes for proper overlap */
      }

      /* Content boxes (ul inside li) */
      > ul,
      > ol,
      > img,
      > div {
        box-sizing: border-box;
        list-style: revert;

        background-color: var(--bg-alt);
        color: var(--fg-alt);

        flex: 1; /* Expand to fill remaining height */
        position: relative;
        z-index: 1; /* Below headers */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        /* Dimensions and positioning */
        width: var(--width);
      }
    }
  }
}