/* ═══════════════════════════════════════════════════════════ */
/* FILE: sections/ethos.css                                   */
/* JURI PROJE — Interior Architecture                          */
/* Studio manifesto — asymmetric type-image pairing           */
/* ═══════════════════════════════════════════════════════════ */

.ethos {
  background-color: var(--color-bg-primary);
  padding: var(--space-8) 0;
}

.ethos-grid {
  align-items: start;
  row-gap: var(--space-6);
  padding: var(--space-6) 0;
}

.ethos-label {
  writing-mode: vertical-lr;
  color: var(--color-text-muted);
  padding-top: var(--space-2);
}

.ethos-manifesto {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ethos-image-block {
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-deep);
  overflow: hidden;
  position: relative;
}

.ethos-image-block svg,
.ethos-image-block img {
  width: 100%;
  height: 100%;
}

.ethos-image-block img {
  display: block;
  object-fit: cover;
}

.ethos-image-caption {
  margin-top: var(--space-2);
  text-align: right;
  color: var(--color-text-muted);
}

/* ─── Mobile Ethos ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .ethos {
    padding: var(--space-6) 0;
  }

  .ethos-label {
    writing-mode: horizontal-tb;
    padding-top: 0;
    margin-bottom: var(--space-3);
  }

  .ethos-grid {
    row-gap: var(--space-4);
  }
}