/* ============ Why It's Different — V2: photo feature cards ============
   Additive layer for the .ampd-different--cards variant only — the V1
   icon list renders untouched with this file loaded. Grüns-style swipe
   rail on mobile (one card visible, next peeking, native scroll-snap —
   same mechanics as the reviews rail). The 2×2 grid is keyed off the
   SECTION's own width via container query, not the viewport — the page
   shell caps at 480px, so a desktop browser shows exactly what a phone
   will: the swipe rail. The grid only engages if the container itself
   is ever widened to true desktop proportions. */

.ampd-different--cards { container-type: inline-size; }

.ampd-feature-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bleed through the section's 24px padding so cards run edge-to-edge
     and the peeking next card reads immediately. */
  margin: 24px -24px 0;
  padding: 4px 24px 10px;
}
.ampd-feature-rail::-webkit-scrollbar { display: none; }

.ampd-feature-card {
  flex: 0 0 84%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11, 11, 14, 0.04), 0 12px 30px rgba(11, 11, 14, 0.07);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) {
  .ampd-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(11, 11, 14, 0.05), 0 20px 44px rgba(11, 11, 14, 0.11);
  }
}

/* Image leads the card at roughly 55–60% of its height. Fixed height —
   not aspect-ratio — so every card's image band is pixel-identical
   regardless of source image or card width rounding. */
.ampd-feature-card__img { height: 240px; flex-shrink: 0; background: #E9EAEF; }
.ampd-feature-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Portrait source frames — bias the crop toward the upper frame so
     faces stay the focal point. */
  object-position: center 28%;
}

/* Text box is a fixed-size band too: min-height fits the longest
   description (3 lines), flex:1 absorbs any stretch so every card's
   body matches the tallest — no ragged card bottoms. */
.ampd-feature-card__body { padding: 18px 20px 22px; flex: 1; min-height: 122px; }
.ampd-feature-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ampd-ink);
}
.ampd-feature-card__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ampd-body);
}

/* Desktop enhancement — 2×2 grid, no rail, no dots. Container query:
   fires on the section's own width, so it never triggers while the page
   shell is capped at 480px (see header comment). */
@container (min-width: 720px) {
  .ampd-feature-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    margin: 24px 0 0;
    padding: 0;
  }
  .ampd-feature-card { flex: none; }
  .ampd-feature-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ampd-feature-card { transition: none; }
  .ampd-feature-card:hover { transform: none; }
}