/* Horizontal layout only applies at wider viewports. Below 600px it falls
   back to the base plugin's own default vertical card styling untouched —
   simpler and more robust than trying to reset each individual overlap-trick
   property (negative margins/padding, row-alignment offsets) for a stacked
   layout that doesn't need them anyway. */
@media (min-width: 601px) {
  .ucla-card__person.ucla-card-people--horizontal,
  .ucla-card-people--horizontal-editor .ucla-card__person {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  /* The base People Card block's edit.js renders a bare <img> with no
     .ucla-card__image-link wrapper (unlike save.js, which does wrap it) — so
     in the editor the image itself is the direct flex child that needs this
     treatment. The ">" keeps this from also matching the frontend's
     .ucla-card__image, which is nested one level deeper inside
     .ucla-card__image-link there. */
  .ucla-card__person.ucla-card-people--horizontal .ucla-card__image-link,
  .ucla-card-people--horizontal-editor .ucla-card__person > .ucla-card__image {
    flex: 0 0 160px;
    width: 160px;
    margin-top: 60px;
    margin-left: 0px;
    z-index: 1;
  }

  /* Three class-selectors (via .ucla-card__person), not two, so this reliably
     beats the base plugin's own equally-specific editor-only rule
     (.wp-block-ucla-wordpress-plugin-card-people .ucla-card__image) regardless
     of which stylesheet happens to load last. */
  .ucla-card__person.ucla-card-people--horizontal .ucla-card__image,
  .ucla-card-people--horizontal-editor .ucla-card__person .ucla-card__image {
    width: 160px;
    max-width: 160px;
    height: 160px;
    object-fit: cover;
    margin-left: 0;
  }

  /* Same specificity concern as above — the base plugin's editor-only
     .ucla-card__body rule (for its vertical overlap effect) sets
     padding-left/margin-top/background-color at the same 2-class specificity.
     On a tie the cascade falls back to load order, which isn't guaranteed, so
     this needs the extra .ucla-card__person qualifier to win outright. */
  .ucla-card__person.ucla-card-people--horizontal .ucla-card__body,
  .ucla-card-people--horizontal-editor .ucla-card__person .ucla-card__body {
    margin-left: -170px;
    margin-top: 25px;
    padding-left: 170px;
    padding-top: 40px;
    flex: 1 1 auto;
    min-width: 0;
    background-color: #F2F2F2;
  }
}