/*  
Basic structure of .feature-row flex containers:

<div class="feature-row">
  <div class="feature-image">
    <img src="...">
  </div>
  <div class="feature-text">
    <h2>Title</h2>
    <p>Paragraph text...</p>
  </div>
</div>
*/

.feature-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 60px 5%;
    width: 100%; 
    max-width: 1200px; /* ← Optional for large screens */
    box-sizing: border-box;
    background-color: #fffaf0; /* light beige */
}

.feature-row.reverse {
    flex-direction: row-reverse; /* not currently coded or deployed anywhere*/
    background-color: #fef6e4; /* alternate color */ 
}

.feature-text {
    flex: 1;
	font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    color: #333;
}

.feature-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
	text-align: center;
    color: #d67009;
	font-family: 'Lobster', cursive;
}

.feature-image {
    flex: 1;
}

.feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    object-fit: cover;
		/*This is a CSS descendant selector */
}


@media (max-width: 768px) {
  .feature-row,
  .feature-row.reverse {
    flex-direction: column;
    align-items: center;
	padding: 40px 20px; /* smaller horizontal padding */
    width: 100%;        /* ensure full width */
  }

  .feature-image,
  .feature-text {
    width: 100%;
	max-width: none;
  }

  /* Ensure image always appears first on mobile */
  .feature-image {
    order: 1;
  }

  .feature-text h2 {
    order: 2;
    margin-top: 1rem;
  }

  .feature-text {
    order: 3;
  }
}

/* Desktop & Tablet Overrides (for wider screens) */
/* The purpose of this min-width block is to re-assert the correct width on larger screens only, because mobile overrides (like max-width: 100%) are global unless contained. */
@media (min-width: 769px) {
  .feature-image,
  .feature-text {
    max-width: 600px;
  }
}