/* === MEET JORGE SECTION ===
   Uses the existing "meet-jorge" approach for ALL rows:
   #meet-jorge   (Image left, Text right)
   #meet-jorge-2 (Text left, Image right)
   #meet-jorge-3 (Image left, Text right)
*/

/* Base layout */
#meet-jorge,
#meet-jorge-2,
#meet-jorge-3 {
  background-color: var(--red);
  color: var(--white);
  display: grid;
  align-items: center;
  column-gap: 1rem;
}

/* Row 1: image left, text right */
#meet-jorge {
  grid-template-columns: 2fr 3fr;
}

/* Row 2: text left, image right */
#meet-jorge-2 {
  grid-template-columns: 3fr 2fr;
}

/* Row 3: image left, text right */
#meet-jorge-3 {
  grid-template-columns: 2fr 3fr;
}

/* Media (image) column */
.meet-jorge-media {
  width: 100%;
}

.meet-jorge-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.meet-jorge-text {
  padding: 3.2rem 1rem;
  margin: 0 auto;
}

.meet-jorge-title {
  text-align: left;
}

.meet-jorge-desc {
  line-height: 1.8;
  max-width: 64ch;
  margin: 0;
  font-weight: 500;
}

.meet-jorge-desc + .meet-jorge-desc {
  margin-top: 1.5rem;
}

#meet-jorge .cta-secondary {
  margin-top: 2rem;
}

/* Wider spacing on large screens */
@media (max-width: 1320px) {
  #meet-jorge,
  #meet-jorge-2,
  #meet-jorge-3 {
    column-gap: 2rem;
  }
}

/* Keep sensible proportions */
@media (max-width: 1024px) {
  #meet-jorge,
  #meet-jorge-3 {
    grid-template-columns: 2fr 3fr;
  }

  #meet-jorge-2 {
    grid-template-columns: 3fr 2fr;
  }
}

/* Tablet: equal columns */
@media (max-width: 896px) {
  #meet-jorge,
  #meet-jorge-2,
  #meet-jorge-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: stack and center */
@media (max-width: 767px) {
  #meet-jorge,
  #meet-jorge-2,
  #meet-jorge-3 {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .meet-jorge-media img {
    max-width: 360px;
    margin: 0 auto;
  }

  .meet-jorge-text {
    padding: 2rem 1rem;
    margin: 0 auto;
  }

  .meet-jorge-title,
  .meet-jorge-desc {
    text-align: center;
  }
}