/**
 * MAYBACH SECTIONS
 * 
 * Two vehicle showcase sections with distinct responsive layouts:
 * 
 * 1. MAYBACH RED - Full-width image with text overlay
 *    - Mobile: Stacked grid (image + text below)
 *    - Desktop (768px+): Absolute positioned text overlay on bottom-left
 *    - Techniques: transform scale for zoom effect, fluid typography with clamp()
 * 
 * 2. MAYBACH WHEELS - Split content layout with image
 *    - Mobile: Vertical stack (title → image → content)
 *    - Desktop (650px+): Two-column grid with grid-template-areas
 *    - Techniques: Named grid areas for flexible reordering, flexbox button alignment
 * 
 * Key responsive patterns: Mobile-first, viewport-based fluid sizing, overlay positioning
 */

/* ========== MAYBACH RED SECTION ========== */

/* Mobile: Image and text stack with matching heights */
.maybach-red {
  display: grid;
  grid-template-rows: 1fr auto; /* Image row flexible, text row sized to content */
  min-height: calc(
    clamp(200px, 30vh, 350px) * 2
  ); /* 400px min - Minimum height for both sections combined */
  overflow: hidden; /* Contains scaled image */
}

/* Maybach Red image - Zoomed to show ~80% width */
.maybach-red .hero-image {
  width: 100%; /* Fills container */
  height: 100%; /* Fills grid cell (matches text height) */
  object-fit: cover; /* Crops to fill */
  object-position: center;
  display: block;
  transform: scale(1.15); /* Zooms in to show ~80% of image width */
}

/* Text area - Sized by content */
.maybach-red .container {
  padding-block: var(--spacing-flow); /* 1rem (16px) */
}

/* Maybach Red title */
.maybach-red .section-title {
  font-family: var(--font-family-body);
  padding-top: var(--spacing-flow); /* 1rem (16px) */
  text-align: center;
}

/* ===== LARGER MOBILE (450px+) ===== */

@media (min-width: 450px) {
  /* Increase padding on larger mobiles */
  .maybach-red .container {
    padding-inline: var(--spacing-section); /* 3rem (48px) */
    padding-top: var(--spacing-section); /* 3rem (48px) */
  }

  /* Fluid typography for title */
  .maybach-red .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* Fluid: 24px → 5% viewport → 32px */
  }
}

/* ===== TABLET/DESKTOP: OVERLAY LAYOUT (768px+) ===== */

@media (min-width: 768px) {
  /* Switch to overlay layout */
  .maybach-red {
    position: relative;
    display: block; /* Image drives height */
    overflow: hidden; /* Crops horizontal overflow */
    background-color: var(--white); /* Fallback background  - Solves the issue when shrinking*/
  }

  /* Full-height image, natural width */
  .maybach-red .hero-image {
    display: block;
    width: auto; /* Natural width based on height */
    height: auto; /* Shows full image height */
    margin-inline: auto; /* Centers image horizontally */
  }

  /* Text overlays bottom-left of image */
  .maybach-red .container {
    position: absolute;
    bottom: 0; /* Positions at bottom */
    left: 0; /* Positions at left */
    z-index: 1; /* Above image */
    margin-left: var(--spacing-section); /* 3rem (48px) */
    margin-bottom: var(--spacing-flow); /* 1rem (16px) */
  }

  /* Desktop title styling - Left-aligned, white text */
  .maybach-red .section-title {
    text-align: left;
    color: var(--color-text-inverse);
    font-size: clamp(2rem, 3vw, 2.5rem); /* Fluid: 32px → 3% viewport → 40px */
    line-height: var(--line-height-heading); /* 1.2 */
  }

  /* Desktop paragraph styling */
  .maybach-red p {
    color: var(--color-text-inverse);
    font-size: clamp(
      0.6rem,
      2vw,
      var(--font-size-body-small)
    ); /* Fluid: ~10px → 2% viewport → 14px */
    line-height: var(--line-height-body); /* 1.6 */
    max-width: clamp(
      14rem,
      50vw,
      30rem
    ); /* 224px → 50% viewport → 480px - Constrains line length */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for readability */
  }
}

/* ===== LARGE DESKTOP (1200px+) ===== */

@media (min-width: 1200px) {
  .maybach-red p {
    font-size: var(--font-size-body-small); /* 0.875rem (14px) */
    max-width: 30rem; /* 480px */
  }
}

/* ========== MAYBACH WHEELS SECTION ========== */

/* Maybach Wheels container - White background */
.maybach-wheels {
  background-color: var(--color-background-light-surface);
  padding-inline: var(--spacing-page); /* 0.65rem (10.4px) */
}

/* Mobile: Title → Image → Content (stacked vertically) */
.maybach-wheels .split-layout {
  display: grid;
  gap: var(--spacing-flow); /* 1rem (16px) */
  grid-template-areas:
    "title"
    "image"
    "content";
}

/* Wheels section title */
.maybach-wheels .section-title {
  grid-area: title;
  color: var(--color-text-primary);
  font-size: var(--font-size-title); /* 2rem (32px) */
  text-align: center;
}

/* Force title spans to stack on multiple lines for better mobile readability */
.maybach-wheels .section-title span {
  display: block; /* Each span on its own line */
}

/* Wheels image with rounded corners */
.maybach-wheels .card-media {
  grid-area: image;
  border-radius: var(--border-radius-medium); /* 15px */
  max-width: min(100%, 28rem); /* 448px max on mobile, prevents oversized image */
  margin-inline: auto; /* Centers image when constrained */
}



/* Wheels content area */
.maybach-wheels .maybach-content {
  grid-area: content;
}

/* Center button within content using flexbox */
.maybach-wheels .maybach-content.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-flow); /* 1rem (16px) */
  align-items: center; /* Centers button via flexbox */
}

/* ===== DESKTOP: TWO-COLUMN LAYOUT (650px+) ===== */

@media (min-width: 650px) {
  .maybach-wheels {
    padding-inline-start: var(--spacing-section); /* 3rem (48px) */
  }
  /* Two columns: Title/content left, image right */
  .maybach-wheels .split-layout {
    gap: var(--spacing-section); /* 3rem (48px) */
    grid-template-columns: 1fr 1fr; /* Equal columns */
    grid-template-areas:
      "title   image"
      "content image";
    align-items: center;
  }

  /* Left-aligned title on desktop */
  .maybach-wheels .section-title {
    align-self: center; /* Vertical centering */
    font-family: var(--font-family-body);
    font-size: clamp(
      1rem,
      3.5vw,
      2rem
    ); /* Fluid: 16px → 3.5% viewport → 32px */
    text-align: left;
  }

  /* Push content to top of its cell */
  .maybach-wheels .maybach-content {
    align-self: start;
    text-align: left;
  }

  /* Left-align button on desktop */
  .maybach-content .btn {
    align-self: flex-start;
  }

}

/* ===== DESKTOP LARGE: LARGER TYPOGRAPHY (900px+) ===== */

@media (min-width: 900px) {
  /* Larger title on big screens */
  .maybach-wheels .section-title {
    font-size: clamp(
      2rem,
      3.5vw,
      3rem
    ); /* Fluid: 32px → 3.5% viewport → 48px */
  }

  /* Larger paragraph text */
  .maybach-wheels .maybach-content p {
    font-size: var(--font-size-body-large); /* 1.125rem (18px) */
    padding-block: var(--spacing-flow); /* 1rem (16px) */
    padding-inline-end: var(--spacing-section); /* 3rem (48px) */
  }
}