/* --- snippet: two-track-columns --- */
/* ============================================================
   Two-track side-by-side columns
   Used by: Friday Night Review — The Law of the King study outline
   Usage:
     > [!col-left] 🔴 Track title
     > > [!danger] nested card…

     > [!col-right] 🟢 Track title
     > > [!success] nested card…

     <div style="clear: both;"></div>   ← after both columns
   Columns render side-by-side in Reading view; they stack
   normally in editing/live-preview and on narrow panes.
   ============================================================ */

/* The column wrappers are invisible containers — only their
   title shows; the nested callouts keep their normal styling. */
.callout[data-callout="col-left"],
.callout[data-callout="col-right"] {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.callout[data-callout="col-left"] > .callout-title,
.callout[data-callout="col-right"] > .callout-title {
  font-size: 1.2em;
  font-weight: 700;
  padding-bottom: 0.4em;
}

.callout[data-callout="col-left"] > .callout-title {
  color: var(--color-red);
}

.callout[data-callout="col-right"] > .callout-title {
  color: var(--color-green);
}

/* Hide the default callout icon on the wrappers */
.callout[data-callout="col-left"] > .callout-title > .callout-icon,
.callout[data-callout="col-right"] > .callout-title > .callout-icon {
  display: none;
}

/* Side-by-side floats — Reading view only, so editing stays simple */
.markdown-reading-view .callout[data-callout="col-left"] {
  float: left;
  width: 49%;
  clear: left;
}

.markdown-reading-view .callout[data-callout="col-right"] {
  float: right;
  width: 49%;
  clear: right;
}

/* Stack the columns when the window is narrow */
@media (max-width: 1000px) {
  .markdown-reading-view .callout[data-callout="col-left"],
  .markdown-reading-view .callout[data-callout="col-right"] {
    float: none;
    width: 100%;
  }
}