/* content-components.css - Reusable Editorial Content Components for Neeladri Portfolio V2 */

/* --- TEXT COLUMN MEASURE SYSTEM --- */
:root {
  --content-narrow: 720px;
  --content-medium: 960px;
  --content-wide: 1240px;
}

.text-narrow {
  max-width: var(--content-narrow);
  margin-left: 0;
  margin-right: auto;
}

.text-medium {
  max-width: var(--content-medium);
  margin-left: 0;
  margin-right: auto;
}

.text-wide {
  max-width: var(--content-wide);
  margin-left: 0;
  margin-right: auto;
}

/* Base Body Paragraph Styling */
.prose-text {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

.prose-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* --- EDITORIAL 12-COLUMN GRID SYSTEM --- */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-10);
}

.grid-4-8 .col-text { grid-column: span 4; }
.grid-4-8 .col-visual { grid-column: span 8; }

.grid-5-7 .col-text { grid-column: span 5; }
.grid-5-7 .col-visual { grid-column: span 7; }

.grid-3-9 .col-text { grid-column: span 3; }
.grid-3-9 .col-visual { grid-column: span 9; }

.grid-6-6 .col-left { grid-column: span 6; }
.grid-6-6 .col-right { grid-column: span 6; }

.grid-12 .col-full { grid-column: span 12; }

/* --- REUSABLE PROJECT FIGURE COMPONENT --- */
.project-figure {
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
  width: 100%;
}

.figure-frame {
  position: relative;
  background-color: var(--paper-white);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}

.figure-frame img,
.figure-frame video {
  width: 100%;
  height: auto;
  display: block;
}

.figure-caption-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 10px;
  padding: 0 4px;
}

.figure-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  text-transform: uppercase;
  flex-shrink: 0;
}

.figure-caption {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  flex-grow: 1;
}

/* --- EDITORIAL CALLOUT COMPONENTS --- */
.editorial-callout {
  border-left: 3px solid var(--blue);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  background-color: rgba(18, 84, 245, 0.03);
  border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
}

.callout-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
  display: block;
}

.callout-quote {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

.callout-detail {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* Specific Callout Variants */
.callout-constraint {
  border-left-color: var(--orange);
}
.callout-constraint .callout-type {
  color: var(--orange);
}

.callout-learning {
  border-left-color: var(--ink);
}
.callout-learning .callout-type {
  color: var(--ink);
}

/* --- PROJECT STATUS TAGS --- */
.status-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}

.status-shipped { background-color: var(--mint); color: #0d6e48; }
.status-in-use { background-color: var(--blue-soft); color: var(--blue); }
.status-prototype { background-color: #fef3c7; color: #92400e; }
.status-experiment { background-color: #f3e8ff; color: #6b21a8; }
.status-concept { background-color: #e0f2fe; color: #0369a1; }
.status-not-adopted { background-color: #fee2e2; color: #991b1b; }

/* --- HANDWRITTEN ANNOTATIONS --- */
.hand-annotation {
  font-family: var(--font-hand);
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
  transform: rotate(-2deg);
  display: inline-block;
}