/**
 * O Bionele — page layer on top of the shared eco shell (pages/ekomaterialy.css).
 *
 * Only what the shell does not already cover: the four-up company photo strip,
 * the eco-leaf goals list, the owners' signature block, and .obio-flip — a
 * media-left variant that swaps the grid columns properly instead of handing the
 * image the wide column the way the shell's .media-left does.
 *
 * Scoped under .obio so the generic names never leak.
 */

/* ---- Text+photo block, photo on the left ---------------------------------- */
/*
 * The shell's .media-left only reorders the image, so it lands in the wide
 * minmax(0,1fr) column and squeezes the copy into 320px — right for a lush
 * full-bleed photo, wrong for a heading + list. Swapping the track sizes as well
 * keeps the photo at 320px and the copy wide, whichever side the photo is on.
 */
.obio .mat-block.obio-flip.has-media {
  grid-template-columns: 320px minmax(0, 1fr);
}
.obio .mat-block.obio-flip.has-media .mat-media {
  order: -1;
}

/* ---- Company photo strip -------------------------------------------------- */
.obio-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}
.obio-gallery__cell {
  margin: 0;
}
.obio-gallery__img {
  display: block;
  width: 100%;
  /* height:auto is required — wp_get_attachment_image() prints a height attribute
     and the global reset only sets max-width, so without it the attribute wins
     and aspect-ratio is ignored. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ---- Goals list (eco-leaf bullets, as on the legal pages) ------------------ */
.obio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.obio-list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--ink-soft-3);
  font-size: 15px;
  line-height: 1.7;
}
.obio-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 16px;
  height: 16px;
  background: var(--leaf-green) center / contain no-repeat;
}

/* ---- Owners' signature ---------------------------------------------------- */
.obio-sign {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.obio-sign__by {
  margin: 0 0 var(--space-3);
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
}
.obio-sign__img {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  /* Match the shell: one column, photo back under the copy. */
  .obio .mat-block.obio-flip.has-media {
    grid-template-columns: 1fr;
  }
  .obio .mat-block.obio-flip.has-media .mat-media {
    order: 0;
  }
  .obio-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .obio-gallery {
    gap: var(--space-3);
  }
}