/* ============================================
   Mykorrizha Project Page — Page-specific styles
   ============================================ */

/* Spacing: default space-1; hero (loose) uses space-3 for collage + title + meta */
.page.mykorrizha .section,
.page.mykorrizha .section.section--tight {
  gap: var(--space-1);
}

.page.mykorrizha .section.section--loose {
  gap: var(--space-3);
}

.page.mykorrizha .columns-equal-height,
.page.mykorrizha .columns-equal-height__col {
  gap: var(--space-1);
}

.page.mykorrizha .more-projects-grid {
  gap: var(--space-1);
}

/* Tight grids for project meta matching Pulse */
.mykorrizha__project-meta {
  gap: var(--space-1);
}

.mykorrizha__project-meta .text-block--secondary p {
  margin: 0;
  white-space: normal; /* allow multiple lines unlike pulse */
}

.mykorrizha__project-meta .text-block--secondary {
  min-width: 0;
}

/* AI Section Layout */
.mykorrizha__ai-layout {
  gap: var(--space-1);
}

.mykorrizha__ai-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mykorrizha__ai-col > .text-block--primary {
  flex: none;
}

.mykorrizha__ai-col > .text-block--secondary {
  flex: 1; /* Stretch to match right visual height */
}

/* ============================================
   Interactive Neural/Fungi Visual
   ============================================ */

.mykorrizha__placeholder {
  flex: 1;
  width: 100%;
  min-height: clamp(24rem, 40vw, 36rem);
  background-color: var(--color-border);
  display: flex;
  padding: var(--space-3);
  box-sizing: border-box;
}

.mykorrizha__placeholder-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* ============================================
   System Section Layout
   ============================================ */

.mykorrizha__system-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mykorrizha__system-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.mykorrizha__system-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Force full width on the final block */
.mykorrizha__system-footer {
  /* margin-top removed to restore normal gap based on user feedback */
}

@media (max-width: 768px) {
  .mykorrizha__system-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Skills Section — rigid 2×2 grid per row (aligned gutters)
   ============================================ */

.mykorrizha__skills-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}

.mykorrizha__skills-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-1);
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.mykorrizha__skills-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
  min-height: 0;
}

/* Placeholders: width only. Do not set min-height: 0 here — it overrides --tall / --very-tall. */
.mykorrizha__skills-cell .mykorrizha__placeholder {
  flex: 0 0 auto;
  width: 100%;
}

.mykorrizha__skills-cell .mykorrizha__placeholder--tall {
  min-height: clamp(20rem, 30vw, 28rem);
}

.mykorrizha__skills-cell .mykorrizha__placeholder--very-tall {
  min-height: clamp(34rem, 45vw, 42rem);
}

.mykorrizha__placeholder--tall {
  min-height: clamp(20rem, 30vw, 28rem);
  flex: none;
}

.mykorrizha__placeholder--very-tall {
  min-height: clamp(34rem, 45vw, 42rem);
  flex: none;
}

/* One full-bleed row: title + text use full main width */
.mykorrizha__skills-row--full {
  grid-template-columns: 1fr;
}

.mykorrizha__skills-cell--historical {
  width: 100%;
  max-width: 100%;
}

.mykorrizha__skills-cell--historical .text-block {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Right column: headers + text; bottom grey block grows to match row height */
.mykorrizha__skills-cell--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.mykorrizha__skills-cell--stack > .text-block {
  flex: none;
}

.mykorrizha__skills-cell--stack .mykorrizha__placeholder--tall {
  flex: 1 1 auto;
  min-height: clamp(20rem, 30vw, 28rem);
}

@media (max-width: 768px) {
  .mykorrizha__skills-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Learned Section Layout
   ============================================ */

.mykorrizha__learned-layout {
  gap: var(--space-1);
}

.mykorrizha__learned-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mykorrizha__learned-col > .text-block--primary {
  flex: none;
}

.mykorrizha__learned-col > .text-block--secondary {
  flex: 1;
}