/**
 * iNKPPL Design System v2.0 — Ruled Column Component (NEW)
 * iNKPPL signature editorial layout: 1px vertical gold line + rotated mono label.
 * AUDIT §2 "New components" specification; all tokens from --ruled-col-* group (AUDIT §1.3).
 */

.col-ruled {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 var(--ruled-col-gutter);
}

/* The vertical gold line */
.col-ruled__line {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.col-ruled__line::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: var(--ruled-col-line-width);
  background: var(--ruled-col-line-color);
}

/* The rotated label — use data-label attribute to supply text */
.col-ruled__line::after {
  content: attr(data-label);
  position: relative;
  z-index: 1;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--ruled-col-label-font);
  font-size: var(--ruled-col-label-size);
  letter-spacing: var(--ruled-col-label-tracking);
  color: var(--ruled-col-label-color);
  text-transform: uppercase;
  background: var(--color-bg);
  padding: var(--space-2) 0;
  margin-top: var(--space-8);
}

/* Content area */
.col-ruled__content {
  min-width: 0;
}

/* Grid items default to min-width:auto, so wide intrinsic content (e.g. an
   <img width="610"> on /about) refuses to shrink below its own width and blows
   out the page on mobile. Force every direct child to be shrinkable and cap any
   media inside the ruled content so inline width/height attrs can't overflow.
   Shared fix — only /about currently triggers it (other static pages have no
   images), legal pages unaffected. (INK footer-legal batch task16, 2026-06-16) */
.col-ruled > * {
  min-width: 0;
}

.col-ruled img,
.col-ruled video,
.col-ruled iframe {
  max-width: 100%;
  height: auto;
}

/* Mobile: cap the ruled line height, hide rotating label to avoid layout mess */
@media (max-width: 479px) {
  .col-ruled {
    grid-template-columns: minmax(0, 1fr);
  }

  .col-ruled__line {
    display: none;
  }

  /* Gold stub treatment: thin top border in brand accent */
  .col-ruled::before {
    content: '';
    display: block;
    width: var(--space-8);
    height: 2px;
    background: var(--ruled-col-line-color);
    margin-bottom: var(--space-4);
  }
}