/* ==========================================================================
   Template — destination archive
   ==========================================================================
   The listing itself is styled by trips.css, which is NOT loaded here: the
   enqueue picks exactly one template sheet, and destination wins over trips
   for this view. So the filter bar and listing frame are repeated at the
   bottom of this file rather than inherited.
   ========================================================================== */

/* --- 1. Hero -------------------------------------------------------------
   A destination is a landing page before it is a filtered list, so it leads
   with the place. The scrim is two stops rather than a flat overlay — a flat
   one greys the photograph out to make text legible, which costs the image
   the very thing it was chosen for.
   ----------------------------------------------------------------------- */

.tmg-dest-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  padding-block:var(--s-8) var(--s-7);
  background:var(--color-surface-sunken);
}
.tmg-dest-hero--image{
  min-height:min(52vh,460px);
  padding-block-start:calc(var(--header-h) + var(--s-8));
  color:var(--color-white);
}

.tmg-dest-hero__media{position:absolute;inset:0;overflow:hidden}
.tmg-dest-hero__img{width:100%;height:100%;object-fit:cover}
.tmg-dest-hero--image .tmg-dest-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(8,26,22,.82) 0%,
    rgba(8,26,22,.45) 45%,
    rgba(8,26,22,.12) 100%);
}

.tmg-dest-hero__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  max-width:min(62ch,100%);
}
.tmg-dest-hero__title{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-size:var(--fs-h1);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  font-weight:400;
}
.tmg-dest-hero--image .tmg-dest-hero__title{color:var(--color-white)}
.tmg-dest-hero--image .tmg-eyebrow{color:var(--color-accent)}
.tmg-dest-hero--image .tmg-lede{color:rgba(255,255,255,.86)}
.tmg-dest-hero--image .tmg-breadcrumbs,
.tmg-dest-hero--image .tmg-breadcrumbs a{color:rgba(255,255,255,.74)}

.tmg-dest-hero__intro > * + *{margin-block-start:var(--s-3)}

/* --- 2. Listing ---------------------------------------------------------
   Mirrors trips.css. Kept in sync by hand, which is acceptable only because
   it is this small; anything more and it belongs in components.css.
   ----------------------------------------------------------------------- */

.tmg-listing{padding-block:var(--sec-y)}

.tmg-listing__count{
  margin-block:var(--s-5) var(--s-4);
  color:var(--color-text-muted);
}

.tmg-filters{
  padding:var(--s-5);
  background:var(--color-surface-sunken);
  border-radius:var(--r-md);
}
.tmg-filters__row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
  align-items:end;
}
@media (min-width:640px){
  .tmg-filters__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .tmg-filters__row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
.tmg-filters__field{min-width:0}
.tmg-filters .tmg-select{background-color:var(--color-surface)}
.tmg-filters__actions{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  min-height:48px;
}
.tmg-filters__apply[hidden]{display:none}
.tmg-filters__clear{
  font-size:var(--fs-small);
  color:var(--color-text-muted);
  text-decoration:none;
  border-block-end:1px solid var(--color-border);
  padding-block-end:1px;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.tmg-filters__clear:hover{color:var(--color-text);border-block-end-color:var(--color-accent)}