/* =====================================================================
   TripMate - listing pages (guides, agencies, packages, destinations)
   and the detail profiles they link to.
   ===================================================================== */

.listing-hero {
  background:
    radial-gradient(ellipse 80% 100% at 85% 0%, rgba(86, 156, 250, .34), transparent 62%),
    radial-gradient(ellipse 55% 60% at 2% 100%, rgba(255, 145, 90, .16), transparent 60%),
    linear-gradient(145deg, #081A38, #0F2D5B 55%, #13366B);
  color: #fff;
  padding: var(--sp-7) 0;
  position: relative; overflow: hidden; isolation: isolate;
}
/* Same contour motif as the homepage hero, at a lower amplitude: these are
   section headers, not the main event. */
.listing-hero::after {
  content: ""; position: absolute; inset: -30% -10%; z-index: -1;
  background-image: repeating-radial-gradient(circle at 90% 20%, transparent 0 52px, rgba(255,255,255,.045) 52px 53px);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 80% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 100% at 80% 30%, #000, transparent 75%);
  pointer-events: none;
}
.listing-hero > * { position: relative; }
.listing-hero .eyebrow { color: var(--sky-400); }
.listing-hero h1 { color: #fff; margin-bottom: var(--sp-3); letter-spacing: -0.02em; }
.listing-hero p { color: rgba(255, 255, 255, .76); margin: 0; max-width: 60ch; font-size: var(--fs-lg); }

/* ---- Guide / agency cards ---------------------------------------- */
.guide-card { display: flex; flex-direction: column; }
.guide-card .card__body { flex: 1; }
.guide-card__top {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) 0;
}
/* A soft ring around the portrait: it reads as a person, and it separates
   the face from the card when the photo has a pale background. */
.guide-card__top .avatar {
  box-shadow: 0 0 0 1px var(--line-200), 0 0 0 4px var(--surface), 0 2px 8px rgba(15, 45, 91, .1);
}
.guide-card__top .card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); letter-spacing: -0.012em; }
.guide-card__top .card__title a { color: var(--navy-900); }
.guide-card__top .card__title a:hover { color: var(--tm-link); }
.guide-card__headline {
  font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card__stats { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- Favourite toggle -------------------------------------------- */
.fav-btn {
  background: none; border: 0; cursor: pointer; padding: var(--sp-2);
  color: var(--ink-400); border-radius: var(--r-md); line-height: 0;
  transition: color var(--transition), background var(--transition);
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fav-btn:hover { color: var(--tm-accent-text); background: var(--coral-100); }
.fav-btn.is-saved { color: var(--tm-accent-text); }
.fav-btn.is-saved svg { fill: var(--tm-accent-text); }

/* ---- Agency cards ------------------------------------------------ */
.agency-card__logo {
  width: 56px; height: 56px; border-radius: var(--r-md); object-fit: contain;
  background: var(--surface-3); padding: var(--sp-2); flex-shrink: 0;
}

/* ---- Destination cards -------------------------------------------
   The photograph carries the card, so the label sits on a scrim that is
   tall and soft rather than a hard bar: the image stays readable at the
   top while the type below it keeps AA contrast on any photo. */
.dest-card { position: relative; }
.dest-card .card__media { aspect-ratio: 4 / 3; }
.dest-card__overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(
    to top,
    rgba(8, 20, 38, .92) 0%,
    rgba(8, 20, 38, .78) 32%,
    rgba(8, 20, 38, .36) 66%,
    transparent 100%
  );
  color: #fff; padding: var(--sp-8) var(--sp-4) var(--sp-4);
  pointer-events: none;
}
.dest-card__overlay h3 {
  color: #fff; margin-bottom: var(--sp-1);
  font-size: var(--fs-xl); letter-spacing: -0.015em; line-height: 1.15;
  text-shadow: 0 1px 12px rgba(8, 20, 38, .55);
}
.dest-card__overlay p {
  margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .88);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-1);
}
/* Location pin ahead of the country, so the metadata line is scannable
   without adding an element to the PHP that builds it. */
.dest-card__overlay p::before {
  content: ""; width: 13px; height: 13px; flex-shrink: 0; align-self: center;
  background: var(--tm-accent-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Homepage destination cards end in a full-width solid button. Six of them
   in one grid shout over the photography they sit under, so the link is
   demoted to an inline action with a travelling arrow. It is the same
   anchor and the same href — only its weight changes. The selector is
   deliberately narrow (block button inside a destination card body), which
   is the homepage pattern; the listing page's footer button is untouched. */
.dest-card .card__body > .btn--block {
  display: inline-flex; width: auto;
  background: none; border: 0; box-shadow: none;
  padding: 0; min-height: 0;
  color: var(--tm-link); font-weight: 700; font-size: var(--fs-sm);
  gap: var(--sp-2);
}
.dest-card .card__body > .btn--block::after {
  content: "→"; transition: transform var(--transition);
}
.dest-card .card__body > .btn--block:hover {
  background: none; color: var(--teal-700); box-shadow: none; transform: none;
}
.dest-card .card__body > .btn--block:hover::after { transform: translateX(4px); }
/* Keyboard users still get a clear, self-contained focus target. */
.dest-card .card__body > .btn--block:focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- Package cards ----------------------------------------------- */
.package-card__price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.package-card__price strong {
  font-size: var(--fs-xl); color: var(--navy-900);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
}
.package-meta {
  display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-500);
}
/* Bullet separators between metadata items, drawn rather than typed. */
.package-meta > * { position: relative; }
.package-meta > * + *::before {
  content: ""; position: absolute; left: calc(var(--sp-4) / -2 - 1px); top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: var(--ink-400);
}

/* ---- Profile header ---------------------------------------------- */
.profile-head {
  background: var(--surface); border-bottom: 1px solid var(--line-200);
  padding: var(--sp-7) 0 var(--sp-6);
  position: relative;
}
/* A whisper of warmth behind the profile identity block. */
.profile-head::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-100) 0%, transparent 55%);
  opacity: .5; pointer-events: none;
}
.profile-head > * { position: relative; }
.profile-head__inner { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.profile-head__body { flex: 1; min-width: 260px; }
.profile-head h1 { margin-bottom: var(--sp-2); }
.profile-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.profile-head__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.profile-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

/* ---- Rating breakdown -------------------------------------------- */
.rating-summary { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.rating-summary__score { text-align: center; }
.rating-summary__score strong { display: block; font-size: var(--fs-4xl); line-height: 1; color: var(--navy-900); }
.rating-summary__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--sp-2); }

.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.criteria-grid div { font-size: var(--fs-sm); }
.criteria-grid strong { display: block; color: var(--navy-900); }

/* ---- Reviews ------------------------------------------------------ */
.review { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-200); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.review__author { font-weight: 600; color: var(--navy-900); }
.review__body { color: var(--ink-700); }
.review__image { max-width: 220px; border-radius: var(--r-md); margin-top: var(--sp-3); }

/* ---- Availability calendar --------------------------------------- */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__label { font-size: var(--fs-xs); text-align: center; color: var(--ink-400); font-weight: 700; padding-bottom: var(--sp-2); }
.calendar__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-3); color: var(--ink-400);
}
.calendar__day--available { background: var(--success-100); color: var(--success-600); }
.calendar__day--booked { background: var(--danger-100); color: var(--danger-600); }
.calendar__day--blocked { background: var(--line-200); color: var(--ink-400); text-decoration: line-through; }
.calendar__legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); margin-top: var(--sp-3); }
.calendar__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.calendar__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* .info-list moved to main.css: the planner and the dashboards use it too,
   and they do not load this stylesheet. */

/* ---- Destination call-to-action stack ----------------------------- */
.trip-cta { display: flex; flex-direction: column; gap: var(--sp-2); }
.trip-cta__hint { margin: calc(var(--sp-2) * -1 + 2px) 0 var(--sp-1); }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-aside { position: static; }
}
@media (max-width: 560px) {
  .listing-hero { padding: var(--sp-6) 0; }
  .profile-head__actions .btn { flex: 1; }
  .rating-summary { justify-content: center; text-align: center; }
}

/* ---- FAQ accordion (help centre) ---------------------------------- */
.faq { border-bottom: 1px solid var(--line-200); padding: var(--sp-3) 0; }
.faq:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--navy-900);
  list-style: none; padding-right: var(--sp-5); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 0;
  color: var(--tm-link); font-size: var(--fs-lg); line-height: 1;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: var(--sp-3) 0 0; color: var(--ink-700); font-size: var(--fs-sm); }