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

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

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

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

.page.aidea .project-meta,
.page.aidea .more-projects-grid {
  gap: var(--space-1);
}

/* Project meta — four equal cells (matches Pulse / Orientation rhythm) */
.aidea__project-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
}

@media (max-width: 768px) {
  .aidea__project-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Base visual — square corners, 1px stroke (matches Pulse / Orientation) */
.aidea__visual {
  width: 100%;
  display: block;
  object-fit: cover;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
}

/* Column with a full-height image: matches text stack height in sibling column */
.aidea__media-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.aidea__media-col > .aidea__visual {
  flex: 1;
  min-height: clamp(12rem, 22vw, 20rem);
  height: 100%;
}

.aidea__media-col > .aidea__interface-duo {
  flex: 1;
  min-height: 0;
}

.aidea__media-col > .project-collage__item--embed {
  flex: 1;
  min-height: clamp(12rem, 30vw, 20rem);
}

/* Interface Design: same grid + gutter rhythm as other project pages */
.aidea__interface-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.aidea__interface-block--text-right {
  grid-template-columns: 4fr 6fr;
}

.aidea__interface-block--text-right .columns-equal-height__col:nth-child(1) {
  order: 2;
}

.aidea__interface-block--text-right .columns-equal-height__col:nth-child(2) {
  order: 1;
}

@media (max-width: 768px) {
  .aidea__interface-block--text-right {
    grid-template-columns: 1fr;
  }

  .aidea__interface-block--text-right .columns-equal-height__col:nth-child(1),
  .aidea__interface-block--text-right .columns-equal-height__col:nth-child(2) {
    order: unset;
  }
}

.aidea__interface-media--split {
  min-height: 0;
}

.aidea__interface-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  height: 100%;
  min-height: clamp(12rem, 22vw, 20rem);
  min-width: 0;
  align-items: stretch;
}

.aidea__interface-duo .aidea__visual {
  min-height: 0;
  height: 100%;
}

/* Conclusion: grey area */
.aidea__conclusion-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.aidea__placeholder {
  width: 100%;
  flex: 1;
  min-height: clamp(16rem, 28vw, 24rem);
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}

/* Conclusion / takeaways text column */
.aidea__takeaways-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Primary card natural; secondary text blocks grow to meet grey box */
.aidea__takeaways-col > .text-block--primary {
  flex: none;
}

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

.aidea__embed-wrap {
  width: 100%;
  flex: 1;
  min-height: clamp(12rem, 30vw, 20rem);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: var(--color-bg-primary);
}

.aidea__embed-wrap .project-collage__embed {
  flex: 1;
  min-height: 12rem;
  border: 0;
}

/* Hero: optional secondary line */
.aidea__hero-sub {
  margin: 0;
  max-width: 100%;
}

.aidea__caption {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  text-align: center;
}

/* Hero Video */
.aidea__hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Interface copy column — primary = feature title, secondary = body (matches grid) */
.aidea__interface-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.aidea__interface-copy > .text-block--primary {
  flex: none;
}