/* Poetry Section (Body Poetry collection only) */
.poetry-section {
  width: 100%;
  /* 100 px after the last artwork, 100 px before the collection links */
  margin: 100px 0;
  padding: 0 var(--spacing-md);
}

/* Inner block aligned with the page text column (max-width 1100, centered) */
.poetry-section__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* Picture: pinned to the left corner, sized to the section height */
.poetry-section__figure {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* Never cross the centre line into the poetry column */
  max-width: 50%;
  margin: 0;
  overflow: hidden;
}

.poetry-section__image {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}

.poetry-section__image-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Poetry column: pinned to the horizontal centre of the page */
.poetry-section__content {
  margin-left: 50%;
  width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Header row: intro label (left) + date (right) */
.poetry-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.poetry-section__intro {
  white-space: pre-line;
}

.poetry-section__intro,
.poetry-section__date {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
}

/* The poem block — its tallest instance sets the fixed section height */
.poetry-section__poem {
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.poetry-section__poem.is-leaving {
  opacity: 0;
  transform: translateY(10px);
}

.poetry-poem__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
  margin-bottom: var(--line-height-header);
}

.poetry-poem__verse {
  white-space: pre-line;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
}

.poetry-poem__note {
  white-space: pre-line;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
  margin-top: var(--spacing-md);
}

/* Footer row: counter (left) + Next (right), pinned to the bottom */
.poetry-section__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.poetry-section__counter {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
}

.poetry-section__next {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.poetry-section__next:hover {
  opacity: 1;
}

/* Mobile: stack top-to-bottom — picture first, then poetry */
@media (max-width: 640px) {
  .poetry-section {
    margin: 60px 0;
  }

  .poetry-section__figure {
    position: static;
    height: auto;
    width: 100%;
    max-width: none;
  }

  .poetry-section__image {
    width: 100%;
    height: auto;
  }

  .poetry-section__content {
    margin-left: 0;
    width: 100%;
    margin-top: var(--spacing-lg);
  }
}