/* Ryder: quick guide to the Home page CSS
   What this file does:
   - Styles the "feature" section on the Home page only.

   How the layout responds:
   - Mobile-first: content stacks in this order → title, text, image.
   - Desktop (>= 820px): .feature__inner switches to a row and wraps:
       * The title spans the full width (first row).
       * The text and the image sit side-by-side (second row), sharing space.

   Image sizing:
   - .feature__media uses aspect-ratio to reserve space so the page doesn’t jump
     while the image loads.
   - .feature__img is set to width:100% and object-fit:cover for a clean crop.

   Where to tweak:
   - .feature__title ... title size/weight
   - .feature__content p ... body text spacing and size
   - .feature__media / .feature__img ... image container and behavior

   Tip:
   - This file pairs with the shared responsive header/nav rules in css/main.css.
*/
/* Home page styles */

/* Feature section */
.feature {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(24px, 6vw, 64px) 0;
}

/* FLEXBOX solves both requirements:
   mobile: title → text → image
   desktop: title spans full width; then text | image side-by-side */
.feature__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 40px);
  align-items: stretch;
}
.feature__inner > * {
  min-width: 0;
}

.yelp {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0;
}

.feature__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.15;
}

.feature__content p {
  margin: 0 0 0.9em;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.7;
}
.feature__content p:last-child {
  margin-bottom: 0;
}
.feature__content .lead {
  color: var(--fg);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
}

.yelp-media {
  margin-top: 30px;
  width: 100%;
  height: auto;
}

.feature__media {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  /* reserve space to reduce layout shift on load (simple approach) */
  aspect-ratio: 16 / 9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.35);
}
.feature__img {
  display: block;
  width: 100%;
  height: auto; /* keep aspect ratio */
  object-fit: cover; /* safe if you later give it a fixed height */
}

@media (min-width: 820px) {
  .feature__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .feature__title {
    flex-basis: 100%;
  }
  .feature__content,
  .feature__media {
    flex: 1 1 0;
    min-width: 0; /* prevent flex overflow */
  }
  .yelp-media {
  width: 50%;
  height: auto;
  }
  .yelp {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 0;
    margin-right: auto;
  }
  
}