/**
 * Alternating rows – flera text+bild-rader (varannan reversed).
 * Tydligare skillnad mot 50/50: lägre rader, smalare bildspalt, lite mindre text.
 * Depends: design/tokens.css
 */

.alternating-rows {
  padding: var(--section-padding-y) var(--content-gutter);
}

.alternating-rows__section-title:empty,
.alternating-rows__section-title[hidden] {
  display: none;
}

.alternating-rows__section-title {
  /* size/weight + margin följer global Site settings (design/rhythm.css) */
  text-align: center;
}

.alternating-rows__list {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.alternating-rows__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  /* Höjd följer theme_settings.section_density via --section-row-min */
  min-height: var(--section-row-min);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.alternating-rows__row:last-child {
  border-bottom: none;
}

.alternating-rows--no-row-borders .alternating-rows__row {
  border-bottom: none;
}

@media (min-width: 768px) {
  .alternating-rows__row {
    /* ~30px mer åt text / ~30px mindre åt bild jämfört med 1fr 1fr (proportionellt) */
    grid-template-columns: minmax(0, 21fr) minmax(0, 19fr);
    gap: var(--space-12);
  }

  .alternating-rows__row--reversed {
    direction: rtl;
  }

  .alternating-rows__row--reversed .alternating-rows__content,
  .alternating-rows__row--reversed .alternating-rows__media {
    direction: ltr;
  }
}

@media (max-width: 767px) {
  .alternating-rows--mobile-image-first .alternating-rows__content {
    order: 2;
  }

  .alternating-rows--mobile-image-first .alternating-rows__media {
    order: 1;
  }
}

.alternating-rows__title {
  color: var(--color-dark);
}

.alternating-rows__text {
  /* följer global body från Site settings */
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.alternating-rows__text p {
  /* margin följer global rhythm.css */
}

.alternating-rows__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-image, 0.5rem);
  object-fit: cover;
}

/* Exempel */
.alternating-rows {
  background-color: var(--color-bg-alt);
}

.alternating-rows__section-title {
  color: var(--color-dark);
}
/* Exempel */