/* Hola Holidays — premium activity & tour cards.
   Reference-inspired: clean image area, balanced spacing, elegant type
   hierarchy, clear content zones and a polished full-width CTA. */

.market-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 26px;
}

.market-card-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ------------------------------------------------ Card container
   No top accent border and no shadow at rest: the card is defined by its
   radius and a hairline outline, and depth arrives on hover. Reference
   platforms (Airbnb / GetYourGuide) let the photography carry the card
   rather than framing every tile in colour. */
.market-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-lg);
  color: var(--brand-text, #15242B);
  background: #FFFFFF;
  box-shadow: var(--shadow-xs);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.market-card:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 55, 77, 0.22);
  box-shadow: var(--shadow-card-hover);
}

.market-card:focus-within {
  border-color: var(--brand-navy, #0B374D);
  box-shadow: 0 0 0 3px rgba(11, 55, 77, 0.16);
}

.market-card a:focus-visible,
.market-card button:focus-visible {
  outline: 3px solid var(--brand-navy, #0B374D);
  outline-offset: 3px;
}

/* ------------------------------------------------ Wishlist
   A single optional control in the top-right of the image. Kept above the
   card's stretched link (z-index 2 vs 1) so it stays independently clickable. */
.market-card__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--brand-navy, #0B374D);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.market-card__wish:hover {
  background: #fff;
  transform: scale(1.08);
}

.market-card__wish[aria-pressed="true"] {
  color: var(--brand-red, #D02A14);
}

.market-card__wish[aria-pressed="true"]:hover {
  color: var(--brand-accent-dark, #A81F0E);
}

/* ------------------------------------------------ Image area */
.market-card__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brand-sand, #F7F1E7);
}

.market-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 55, 77, 0.18), transparent 34%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.market-card:hover .market-card__media::after {
  opacity: 0.95;
}

.market-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 260ms ease;
}

/* Fallback state: shown only if every image in the chain fails. */
.market-card__media.is-image-missing,
.hm-card__media.is-image-missing {
  background: linear-gradient(135deg, #15242B, #0B374D);
}

.market-card__media.is-image-missing .market-card__image,
.hm-card__media.is-image-missing img {
  opacity: 0;
}

.market-card:hover .market-card__image {
  transform: scale(1.04);
}

/* ------------------------------------------------ Body */
.market-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
}

/* Location · category line. Gives the card a scannable "where / what"
   anchor above the product name. */
.market-card__eyebrow {
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--brand-muted, #65727A);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-card__title {
  min-height: 2.6em;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--brand-text, #15242B);
  font-family: var(--font-heading, 'Baloo 2', ui-rounded, sans-serif);
  font-size: clamp(1.08rem, 1.15vw, 1.24rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.market-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Stretched link: the whole card is the target, so the listing no longer
   repeats a loud full-width CTA on every tile. One tab stop per card. */
.market-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.market-card__title a:hover {
  color: var(--brand-navy, #0B374D);
}

.market-card__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 8px 0 0;
  color: var(--brand-muted, #65727A);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ------------------------------------------------ Meta info row */
.market-card__meta {
  min-height: 1.4em;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 14px;
  margin: 10px 0 0;
  color: var(--brand-muted, #65727A);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.market-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.market-card__meta-item i {
  color: var(--brand-navy, #0B374D);
  font-size: 0.78rem;
}

.market-card__meta-item + .market-card__meta-item::before { display: none; }

/* ------------------------------------------------ Badges
   One shape, one weight. Promotion is the only variant that changes colour,
   so a row of cards does not turn into a rainbow of competing labels. */
.market-card__badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  color: #fff;
  background: var(--brand-navy, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-card__media > .market-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  box-shadow: var(--shadow-sm);
}

.market-card__badge--promotion { background: var(--brand-red, #D02A14); }

.market-card__badge[data-sale-badge="true"] {
  background: var(--brand-red, #D02A14);
}

/* ------------------------------------------------ Footer: price
   Rating lives in the meta row, so the footer is just the conversion anchor
   and gets the full card width. At 4-up the card is ~255px wide — a
   side-by-side rating + price row overflowed and clipped "per person". */
.market-card__bottom,
.market-card__footer {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--brand-border, #E7E0D7);
}

.market-card__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.market-card__footer {
  display: block;
}

.market-card__footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.market-card__social-proof { min-width: 0; }

.market-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand-text, #15242B);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.market-card__rating-count {
  color: var(--brand-muted, #65727A);
  font-size: 0.74rem;
  font-weight: 600;
}

/* Rating stars sit on the white card surface, where the brand gold #E99A30
   only reaches 2.30:1 — below the 3:1 WCAG 1.4.11 minimum for non-text
   graphics. --brand-gold-dark (#C87F1C, 3.23:1) keeps the gold hue while
   passing. The numeric rating beside it stays dark (#15242B). */
.market-card__rating i { color: var(--brand-gold-dark, #C87F1C); font-size: 0.78rem; }

.market-card__rating-star {
  color: var(--brand-gold-dark, #C87F1C);
  font-size: 0.78rem;
}

/* Price reads as one line: small "From", the figure in navy, the unit muted.
   It is the conversion anchor, so it keeps the strongest weight on the row.
   The unit wraps to its own line only when the card is genuinely too narrow. */
.market-card__price {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 5px;
}

.market-card__price-from {
  color: var(--brand-muted, #65727A);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.market-card__price-current {
  color: var(--brand-navy, #0B374D);
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.market-card__price-unit {
  color: var(--brand-muted, #65727A);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
}

.market-card__price-old {
  color: var(--brand-muted, #65727A);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: line-through;
}

/* A live "was" price turns the current price into a deal price. */
.market-card__price:has(.market-card__price-old) .market-card__price-current {
  color: var(--brand-red, #D02A14);
}

/* Real, data-backed trust flag (e.g. free cancellation) rendered as a
   quiet green chip inside the card meta row. */
.market-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand-green, #008A05);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}
.market-card__flag i { font-size: 0.82em; }

.market-card__price--discount .market-card__price-current {
  color: var(--brand-red, #D02A14);
}

.market-card__price-context {
  color: var(--brand-muted, #65727A);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
}

/* ------------------------------------------------ Skeleton state
   Mirrors the real card's geometry so nothing shifts when data lands. */
.market-card--skeleton {
  pointer-events: none;
  box-shadow: none;
}

.market-card--skeleton .market-card__media,
.market-card--skeleton .sk-line {
  background: linear-gradient(90deg, #EFEAE2 25%, #F7F1E7 37%, #EFEAE2 63%);
  background-size: 400% 100%;
  animation: hh-shimmer 1.4s ease-in-out infinite;
}

.market-card--skeleton .market-card__media { aspect-ratio: 16 / 10; }

.sk-line {
  height: 11px;
  border-radius: var(--radius-xs);
}

.sk-line--eyebrow { width: 42%; margin-bottom: 10px; }
.sk-line--title { width: 92%; height: 15px; margin-bottom: 7px; }
.sk-line--title-2 { width: 64%; height: 15px; margin-bottom: 12px; }
.sk-line--meta { width: 78%; }
.sk-line--price { width: 46%; height: 17px; }

@keyframes hh-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .market-card--skeleton .market-card__media,
  .market-card--skeleton .sk-line { animation: none; }
}

/* ------------------------------------------------ States */
.tour-catalog-error {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: center;
}

/* ------------------------------------------------ Responsive */
@media (max-width: 1200px) {
  .market-card-grid,
  .market-card-grid--related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .market-card-grid,
  .market-card-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .market-card-grid,
  .market-card-grid--related {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .market-card {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .market-card__media {
    aspect-ratio: 4 / 3;
  }

  .market-card__body {
    padding: 18px 18px 16px;
  }

  .market-card__title {
    min-height: 0;
    font-size: 1.14rem;
  }

  .market-card__meta {
    min-height: 0;
  }

  .market-card__footer {
    gap: 10px;
  }

  .market-card__price-current {
    font-size: 1.1rem;
  }
}

@media (max-width: 360px) {
  .market-card__meta { gap: 6px 10px; font-size: 0.72rem; }
  .market-card__price-current { font-size: 1.04rem; }
  .market-card__price-unit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .market-card,
  .market-card__image,
  .market-card__media::after,
  .market-card__wish {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Listing two-layout system — Phase 5
   Tour cards     : .market-card[data-discovery-category="tour"]
   Activity cards : .market-card:not([data-discovery-category="tour"])
   Plus .tours-hero (tour editorial) and .activities-hero (activity).
   Mirrors the detail-page tour/activity split. No JS change needed —
   the card component already stamps data-discovery-category.
   ============================================================ */

/* ---- Card identity by category ----
   Previously each variant drew a 3px coloured top border and a full-width
   CTA, which turned a listing into a wall of colour. Identity now comes from
   typography and the price accent only — the card chrome stays neutral. */
.market-card[data-discovery-category="tour"] .market-card__title {
  font-family: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.market-card[data-discovery-category="tour"] .market-card__title a:hover {
  color: var(--brand-primary, #0B374D);
}
.market-card[data-discovery-category="tour"] .market-card__price-current {
  color: var(--brand-primary, #0B374D);
}

.market-card:not([data-discovery-category="tour"]) .market-card__price-current {
  color: var(--brand-primary, #0B374D);
}
.market-card:not([data-discovery-category="tour"]) .market-card__meta-item i {
  color: var(--brand-accent, #D02A14);
}

/* ---- Tour editorial hero (tours.html) ---- */
.tours-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-cream, #FCFAF6) 100%);
  padding-top: calc(var(--header-height, 86px) + 44px);
  padding-bottom: clamp(2.75rem, 5vw, 4.25rem);
}
.tours-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.tours-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--brand-primary, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tours-hero__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: var(--radius-xs);
  background: var(--brand-primary, #0B374D);
}
.tours-hero__title {
  margin: 0 0 18px;
  max-width: 16ch;
  color: var(--brand-black, #15242B);
  font-family: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tours-hero__lead {
  margin: 0 0 28px;
  max-width: 52ch;
  color: var(--color-gray, #65727A);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}
.tours-hero__cta.btn-primary {
  background: var(--brand-primary, #0B374D);
  border-color: var(--brand-primary, #0B374D);
}
.tours-hero__cta.btn-primary:hover {
  background: var(--brand-primary-dark, #082A3C);
  border-color: var(--brand-primary-dark, #082A3C);
}
.tours-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg, 1.25rem);
  background: var(--brand-sand, #F7F1E7);
  box-shadow: var(--shadow-lg, 0 20px 48px rgba(11, 55, 77, .13));
}
.tours-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Activity hero (agadir/activities.html, Taghazout/activities.html) ---- */
.activities-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--brand-navy-deep, #061E2B);
  background-size: cover;
  background-position: center;
  padding-top: calc(var(--header-height, 86px) + 52px);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.activities-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 30, 43, .52) 0%, rgba(6, 30, 43, .80) 100%);
}
.activities-hero > .container { position: relative; z-index: 1; }
.activities-hero h1 {
  margin: 14px 0 18px;
  max-width: 20ch;
  color: #fff;
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.08;
}
.activities-hero .activities-intro-copy { max-width: 64ch; }
.activities-hero .activities-intro-copy p { color: rgba(255, 255, 255, .9); }
.activities-hero .activities-breadcrumbs { color: rgba(255, 255, 255, .82); }
.activities-hero .activities-breadcrumbs a { color: #fff; }
.activities-hero .activities-breadcrumbs span { color: rgba(255, 255, 255, .55); }
.activities-hero .activities-top-links { margin-top: 28px; }
.activities-hero .activities-top-links a:hover {
  background: var(--brand-accent, #D02A14);
  border-color: var(--brand-accent, #D02A14);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .tours-hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .tours-hero__media { order: -1; aspect-ratio: 16 / 10; max-height: 220px; }
  .tours-hero__title { font-size: clamp(1.85rem, 7vw, 2.5rem); }
}
@media (max-width: 768px) {
  .activities-hero { padding-top: calc(var(--header-height, 76px) + 40px); padding-bottom: 2.6rem; }
  .activities-hero .activities-intro-copy p + p { display: none; }
}