/* ==========================================================================
   Camera Settings — Field Cards product page
   Layout for /field-cards/. Builds on field-guide.css (fg-* classes); only
   what the phone-shaped cards need lives here.
   ========================================================================== */

/* Hero stage: five phone cards fanned up from the bottom edge */
.fc-stage img {
  width: 20%;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.20), 0 2px 8px rgba(10, 10, 10, 0.08);
}

.fc-stage .fc-1 { left: 6%;    bottom: -26%; transform: rotate(-6deg); z-index: 1; }
.fc-stage .fc-2 { left: 22.5%; bottom: -14%; transform: rotate(-3deg); z-index: 2; }
.fc-stage .fc-4 { left: 57.5%; bottom: -14%; transform: rotate(3deg);  z-index: 2; }
.fc-stage .fc-5 { left: 74%;   bottom: -26%; transform: rotate(6deg);  z-index: 1; }

.fc-stage .fc-3 {
  left: 39.5%;
  bottom: -6%;
  width: 21%;
  z-index: 3;
  box-shadow: 0 34px 80px rgba(10, 10, 10, 0.28), 0 2px 8px rgba(10, 10, 10, 0.12);
}

@media (max-width: 900px) {
  .fc-stage img {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .fc-stage .fc-1,
  .fc-stage .fc-5 {
    display: none;
  }
  .fc-stage img {
    width: 34%;
    border-radius: 12px;
  }
  .fc-stage .fc-2 { left: 3%;  bottom: -24%; }
  .fc-stage .fc-4 { left: 63%; bottom: -24%; }
  .fc-stage .fc-3 { left: 31%; bottom: -10%; width: 38%; }
}

/* Formats: two, not three */
.fc-decks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .fc-decks {
    grid-template-columns: 1fr;
  }
}