/* ==========================================================================
   Template — single trip
   ==========================================================================
   The theme owns everything here except the booking control itself, which WP
   Travel Engine renders inside .tmg-trip-book__widget. See §6: that block is
   deliberately styled from the outside only.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------ */

.tmg-trip-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(62vh,560px);
  padding-block:calc(var(--header-h) + var(--s-8)) var(--s-7);
  background:var(--color-primary-dark);
  color:var(--color-white);
}
.tmg-trip-hero__media{position:absolute;inset:0;overflow:hidden}
.tmg-trip-hero__img{width:100%;height:100%;object-fit:cover}
.tmg-trip-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(8,26,22,.85) 0%,
    rgba(8,26,22,.45) 48%,
    rgba(8,26,22,.15) 100%);
}
.tmg-trip-hero__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  max-width:min(64ch,100%);
}
.tmg-trip-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;
  color:var(--color-white);
}
.tmg-trip-hero__lede{color:rgba(255,255,255,.86)}
.tmg-trip-hero .tmg-eyebrow{color:var(--color-accent)}
.tmg-trip-hero .tmg-breadcrumbs,
.tmg-trip-hero .tmg-breadcrumbs a{color:rgba(255,255,255,.74)}

/* --- 2. Layout ----------------------------------------------------------
   The booking column follows the content in source order, so on a phone the
   trip is read before it is priced.
   ----------------------------------------------------------------------- */

.tmg-trip__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-7);
  align-items:start;
  padding-block:var(--sec-y);
}
@media (min-width:1024px){
  .tmg-trip__layout{
    grid-template-columns:minmax(0,1fr) 360px;
    gap:var(--s-8);
  }
  .tmg-trip__aside{
    position:sticky;
    top:calc(var(--header-h-stuck) + var(--s-5));
  }
}

.tmg-trip__main{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}

.tmg-trip-section{display:flex;flex-direction:column;gap:var(--s-5)}
.tmg-trip-section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
}
.tmg-trip-section__title{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-h2);
  font-weight:400;
}

/* --- 3. Facts ----------------------------------------------------------- */

.tmg-trip-facts__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-5);
  margin:0;
  padding:var(--s-5) 0;
  border-block:1px solid var(--color-rule);
}
.tmg-trip-facts__item{display:flex;flex-direction:column;gap:4px;min-width:0}
.tmg-trip-facts__label{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.tmg-trip-facts__value{margin:0;font-size:16px;line-height:1.4;color:var(--color-text)}

/* --- 4. Itinerary -------------------------------------------------------
   A timeline, not an accordion stack: the rule and the markers are what make
   a sequence of days read as a route rather than a FAQ.
   ----------------------------------------------------------------------- */

.tmg-itinerary{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
}

.tmg-itinerary__day{
  position:relative;
  padding-inline-start:var(--s-6);
  padding-block-end:var(--s-5);
}
/* The connecting line stops at the last day rather than trailing into space. */
.tmg-itinerary__day:not(:last-child)::before{
  content:"";
  position:absolute;
  inset-inline-start:5px;
  inset-block:14px 0;
  width:1px;
  background:var(--color-border);
}
.tmg-itinerary__marker{
  position:absolute;
  inset-inline-start:0;
  inset-block-start:11px;
  width:11px;
  height:11px;
  border-radius:var(--r-pill);
  border:2px solid var(--color-primary);
  background:var(--color-background);
}

.tmg-itinerary__heading{margin:0;font-size:inherit;font-weight:inherit}

.tmg-itinerary__trigger{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:var(--s-2) var(--s-3);
  width:100%;
  padding-block:var(--s-2);
  text-align:start;
  color:inherit;
}
.tmg-itinerary__trigger:not(.is-static):hover .tmg-itinerary__title{color:var(--color-primary)}
.tmg-itinerary__trigger.is-static{cursor:default}

.tmg-itinerary__label{
  grid-column:1 / -1;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--color-accent);
}
.tmg-itinerary__title{
  font-size:var(--fs-h3);
  line-height:1.25;
  letter-spacing:var(--ls-h3);
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  transition:color var(--t-micro) var(--ease);
}
.tmg-itinerary__chevron{
  align-self:center;
  color:var(--color-text-muted);
  transition:transform var(--t-std) var(--ease);
}
.tmg-itinerary__trigger.is-open .tmg-itinerary__chevron{transform:rotate(180deg)}
.tmg-itinerary__trigger.is-static .tmg-itinerary__chevron{display:none}

.tmg-itinerary__panel{padding-block:var(--s-2) var(--s-3);max-width:68ch}
.tmg-itinerary__panel[hidden]{display:none}

.tmg-itinerary__toggle-all{
  font-size:var(--fs-small);
  color:var(--color-text-muted);
  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-itinerary__toggle-all:hover{color:var(--color-text);border-block-end-color:var(--color-accent)}
.tmg-itinerary__toggle-all[hidden]{display:none}

/* --- 5. Inclusions ------------------------------------------------------ */

.tmg-inclusions{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-6);
}
@media (min-width:640px){
  .tmg-inclusions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tmg-inclusions__col{display:flex;flex-direction:column;gap:var(--s-3)}
.tmg-inclusions__title{font-size:var(--fs-h4);font-weight:600;letter-spacing:0}
.tmg-inclusions__list{display:flex;flex-direction:column;gap:var(--s-2);margin:0;padding:0;list-style:none}
.tmg-inclusions__list li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:var(--s-2);
  font-size:15px;
  line-height:1.5;
}
.tmg-inclusions__list .tmg-icon{margin-block-start:4px}
.tmg-inclusions__list--in .tmg-icon{color:var(--color-success)}
.tmg-inclusions__list--out{color:var(--color-text-muted)}
.tmg-inclusions__list--out .tmg-icon{color:var(--color-text-faint)}

/* --- 6. Booking column --------------------------------------------------
   Everything inside .tmg-trip-book__widget belongs to WP Travel Engine. It
   is given room and a boundary and is otherwise left alone: restyling a
   plugin's internals from here means a plugin update silently breaks the
   trip page's most important control.
   ----------------------------------------------------------------------- */

.tmg-trip-book{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  padding:var(--s-5);
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}

.tmg-trip-book__price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--s-2);
  padding-block-end:var(--s-5);
  border-block-end:1px solid var(--color-border-soft);
}
.tmg-trip-book__from{font-size:var(--fs-small);color:var(--color-text-muted)}
.tmg-trip-book__amount{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--color-primary);
  letter-spacing:-.01em;
}
.tmg-trip-book__was{
  font-size:var(--fs-small);
  color:var(--color-text-faint);
  text-decoration:line-through;
}
.tmg-trip-book__unit{flex-basis:100%;font-size:13px;color:var(--color-text-muted)}

.tmg-trip-book__widget > * + *{margin-block-start:var(--s-4)}

.tmg-trip-book__enquire{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding-block-start:var(--s-5);
  border-block-start:1px solid var(--color-border-soft);
}
.tmg-trip-book__cta{width:100%;justify-content:center}

/* --- 7. Gallery + lightbox ---------------------------------------------- */

.tmg-trip-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap);
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){
  .tmg-trip-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tmg-trip-gallery__item{position:relative;border-radius:var(--r-md);overflow:hidden}

/* The open control covers the tile rather than sitting on it, so the whole
   photograph is the target — and it is a real button, so it is focusable. */
.tmg-trip-gallery__open{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:zoom-in;
  background:none;
}
.tmg-trip-gallery__open:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:-2px;
}

.tmg-lightbox{
  width:min(92vw,1100px);
  max-width:none;
  padding:0;
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--color-white);
  overflow:visible;
}
.tmg-lightbox::backdrop{background:rgba(8,26,22,.9)}
.tmg-lightbox__figure{margin:0}
.tmg-lightbox__img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:var(--r-md);
}
.tmg-lightbox__close{
  position:absolute;
  inset-block-start:-44px;
  inset-inline-end:0;
  width:36px;
  height:36px;
  font-size:26px;
  line-height:1;
  color:var(--color-white);
}
.tmg-lightbox__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-5);
  padding-block-start:var(--s-4);
}
.tmg-lightbox__prev,
.tmg-lightbox__next{
  width:44px;
  height:44px;
  font-size:26px;
  line-height:1;
  color:var(--color-white);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill);
}
.tmg-lightbox__prev:hover,
.tmg-lightbox__next:hover{background:rgba(255,255,255,.12)}
.tmg-lightbox__count{font-size:var(--fs-small);color:rgba(255,255,255,.74);font-variant-numeric:tabular-nums}