/* ================================================================
   Shared styles for POI detail pages (ford, lodging) and logistics.
   Each page also loads its own page-specific CSS.
   ================================================================ */

/* -- Description body (ford + lodging) -- */

.description-body {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 20px 22px;
  line-height: 1.6;
  font-size: 15px;
}
.description-body p { margin: 0 0 12px; }
.description-body p:last-child { margin-bottom: 0; }


/* -- Card chip base + hazard colors (ford + logistics) -- */

.card-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  background: #e8eaed;
  color: #5a6472;
}
.card-chip.hazard-e { background: #e8f5e8; color: #2f6c2f; }
.card-chip.hazard-m { background: #fff4c4; color: #806000; }
.card-chip.hazard-h { background: #ffe0b2; color: #9c3c00; }
.card-chip.hazard-d { background: #fdd2cc; color: #a02020; }


/* -- Photo carousel (ford + lodging, via shared PhotoCarousel component) -- */

.ford-photos,
.lodging-photos {
  margin-bottom: 28px;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1a;
}
.ford-photos .carousel-inner .item img,
.lodging-photos .carousel-inner .item img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}
.ford-photos .carousel-caption,
.lodging-photos .carousel-caption {
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 20px 16px;
  text-align: left;
  text-shadow: none;
}


/* -- Map legend (ford + lodging) -- */

.ford-map-legend,
.lodging-map-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: #5a6472;
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}