/* ==========================================================================
   Listing card (element/touria/package-card.php)

   Moved out of the inline <style> blocks in Packages/view_destinations.php and
   Cruises/index.php, which each carried an identical copy, so the legacy and
   the Touria layout render the same card from one source.
   Values are unchanged from those blocks; the compat section at the bottom
   only restates what the legacy base CSS used to provide.
   ========================================================================== */

.package-card {
  background: #ffffff;
  width: 100%;
  height: 263px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  transition: transform 0.2s ease;
}

.package-card:hover {
  transform: translateY(-5px);
}

/* Card Image Container */
.package-image {
  width: 258px;
  min-width: 258px;
  height: 100%;
  position: relative;
}

.package-image img {
  width: 100%;
  height: 263px;
  object-fit: cover;
}

/* Most Popular Badge */
.most-popular-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  min-width: 83px;
  background: rgba(15, 76, 129, 1);
  color: rgba(255, 255, 255, 1);
  padding: 8px;
  border-radius: 72px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

/* Card Content */
.package-content {
  background: rgba(255, 255, 255, 1);
  padding: 20px;
  border: 1px solid rgba(182, 221, 255, 1);
  border-radius: 16px;
  margin-left: -20px;
  z-index: 9;
}

/* Package Title */
.package-title h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(15, 76, 129, 1);
}

.package-title:hover {
  color: #ff6b00;
}

/* Package Description */
.package-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: rgba(119, 119, 119, 1);
  margin-bottom: 10px;
}

/* Package Meta Info */
.package-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 8px;
  border-radius: 32px;
  border: 0.64px solid rgba(228, 230, 232, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(0, 0, 0, 1);
  box-shadow: 0px 1.29px 4.51px 0px rgba(0, 0, 0, 0.07);
}

.meta-item i {
  color: #ff6b00;
}

/* Package Price Section */
.package-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid rgba(208, 208, 208, 1);
  padding-top: 15px;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(0, 0, 0, 1);
}

.price-amount {
  font-size: 22px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  color: #ff6b00;
}

/* Discover More Button */
.discover-more {
  border: 1px solid rgba(228, 242, 255, 1);
  padding: 10px;
  border-radius: 48px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 107, 1, 1) !important;
  transition: background 0.2s ease;
}

.discover-more:hover {
  background: rgba(255, 107, 1, 1);
  color: #fff !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .package-card {
    flex-direction: column;
    height: auto;
  }

  .package-image {
    width: 100%;
    height: 200px;
  }

  .package-content {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Layout compatibility.

   On the legacy layout these cards inherit the base sheet's typography and
   link colours. The Touria layout has its own (Playfair headings, themed link
   colours, its own heading margins), so restate what the card relied on —
   scoped to that layout's body class so the legacy pages keep rendering
   exactly as they do today.
   -------------------------------------------------------------------------- */
body.h-bg .package-card,
body.h-bg .package-card a,
body.h-bg .package-card h3,
body.h-bg .package-card span,
body.h-bg .package-card div {
  font-family: "Roboto", sans-serif;
  letter-spacing: normal;
}

body.h-bg .package-card .package-title h3 {
  margin: 0 0 8px;
  font-family: "Roboto", sans-serif;
}

body.h-bg .package-card a {
  text-decoration: none;
}

/* The content panel is a plain block on the legacy layout and fills the card
   only because the excerpt is long enough to push it. Make that explicit so a
   short description cannot leave a gap beside the image. */
.package-card .package-content {
  flex: 1;
  min-width: 0;
}

/* The design fixes the card at 263px and hides the overflow, so a title that
   wraps to two lines pushed the description and the price row out of sight —
   on every viewport narrower than ~1440px, which is most laptops. Let the card
   grow past its minimum instead. Cards whose content fits are untouched, so the
   row still reads as one height at wide widths. (The legacy cruise pages clip
   the same way; this is scoped to the Touria layout so they keep rendering as
   they do today.) */
@media (min-width: 769px) {
  body.h-bg .package-card {
    height: auto;
    min-height: 263px;
  }
  /* the image column has to stretch with the card, otherwise a grown card
     leaves a white strip under the photo */
  body.h-bg .package-image {
    height: auto;
    align-self: stretch;
  }
  /* percentage heights don't resolve against a stretched auto height, so fill
     the (position:relative) image column instead */
  body.h-bg .package-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Star rating row: sits under the description, on its own line rather than
   inside a .meta-item pill. */
.package-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.package-rating i {
  color: #ff6b00;
  font-size: 13px;
}