/* SIMPLE CSS FIX FOR ALTERNATING LAYOUT */
/* Uses natural HTML DOM order for desktop, forces mobile stacking */

/* Desktop - use natural DOM order */
@media screen and (min-width: 769px) {
  .flex-section {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-direction: row !important;
  }

  .flex-content {
    flex: 1 !important;
  }

  .flex-image {
    flex: 1 !important;
  }
}

/* iPad - center text and prevent image overflow */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .flex-section .flex-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .flex-section .flex-content h2,
  .flex-section .flex-content h3,
  .flex-section .flex-content p,
  .flex-section .flex-content [data-field],
  #takecontrol-subtitle,
  #defend-subtitle,
  #realmoney-subtitle,
  #grow-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .flex-image {
    flex: 0.9 !important;
    max-width: 45%;
  }

  .flex-image img {
    max-width: 100%;
    height: auto;
  }
}

/* Mobile - force Text then Image order regardless of DOM */
@media screen and (max-width: 768px) {
  .flex-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Force text content to appear first on mobile */
  .flex-content {
    order: 1 !important;
  }

  /* Force images to appear second on mobile */
  .flex-image {
    order: 2 !important;
  }
}