/* ==========================================================================
   Template — Plan My Trip
   ==========================================================================
   Loaded only on the page using templates/pages/plan-my-trip.php.
   Shared controls live in components.css §19; this file is layout, the
   stepper, and the confirmation panel.
   ========================================================================== */

/* --- 1. Page frame ------------------------------------------------------ */

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

.tmg-plan__head{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  max-width:62ch;
  margin-block-end:var(--s-7);
}
.tmg-plan__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-plan__intro{margin-block-end:var(--s-7)}

/* --- 2. Two-column layout -----------------------------------------------
   The aside follows the form in the source order, so on a phone the first
   field is reachable without scrolling past a column of reassurance.
   ----------------------------------------------------------------------- */

.tmg-plan__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-7);
  align-items:start;
}
@media (min-width:1024px){
  .tmg-plan__layout{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:var(--s-8);
  }
  .tmg-plan__aside{
    position:sticky;
    /* Clears the header once it has shrunk to its stuck height. */
    top:calc(var(--header-h-stuck) + var(--s-5));
  }
}

/* --- 3. The form shell -------------------------------------------------- */

.tmg-plan-form{
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:var(--s-5);
}
@media (min-width:768px){
  .tmg-plan-form{padding:var(--s-7)}
}

/* --- 4. Progress --------------------------------------------------------
   Revealed by plan-form.js. Without the script every step is on screen at
   once, and a progress bar would describe a journey nobody is taking.
   ----------------------------------------------------------------------- */

.tmg-plan-form__progress{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  margin:0 0 var(--s-6);
  padding:0 0 var(--s-5);
  border-block-end:1px solid var(--color-border-soft);
  list-style:none;
  counter-reset:none;
}
.tmg-plan-form__progress[hidden]{display:none}

.tmg-plan-form__progress-item{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:13.5px;
  color:var(--color-text-faint);
  transition:color var(--t-micro) var(--ease);
}
.tmg-plan-form__progress-num{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  border:1px solid var(--color-border);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  transition:background var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease);
}
.tmg-plan-form__progress-item.is-done{color:var(--color-text-muted)}
.tmg-plan-form__progress-item.is-done .tmg-plan-form__progress-num{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}
.tmg-plan-form__progress-item.is-current{color:var(--color-text);font-weight:500}
.tmg-plan-form__progress-item.is-current .tmg-plan-form__progress-num{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
/* The label is the step's name; on a narrow screen the number carries it. */
@media (max-width:600px){
  .tmg-plan-form__progress-label{display:none}
  .tmg-plan-form__progress{gap:var(--s-3)}
}

/* --- 5. Steps ----------------------------------------------------------- */

.tmg-plan-form__step{
  border:0;
  margin:0;
  padding:0;
  min-width:0; /* A fieldset defaults to min-content, which breaks the grid. */
}
/* A step is only display:none when the script has collapsed it. The
   attribute alone loses to the rule above in every engine. */
.tmg-plan-form__step[hidden]{display:none}

/* Unstepped, the four fieldsets need separating from each other. */
.tmg-plan-form:not(.is-stepped) .tmg-plan-form__step + .tmg-plan-form__step{
  margin-block-start:var(--s-7);
  padding-block-start:var(--s-7);
  border-block-start:1px solid var(--color-border-soft);
}

.tmg-plan-form__legend{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  width:100%;
  padding:0;
  margin-block-end:var(--s-5);
}
.tmg-plan-form__legend-title{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-h3);
  color:var(--color-text);
}
.tmg-plan-form__legend-title:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:4px;
}

.tmg-plan-form__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-5);
}
@media (min-width:640px){
  .tmg-plan-form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tmg-plan-form__wide{grid-column:1 / -1}
}

/* --- 6. Footer: navigation and submit ----------------------------------- */

.tmg-plan-form__foot{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  margin-block-start:var(--s-7);
  padding-block-start:var(--s-6);
  border-block-start:1px solid var(--color-border-soft);
}

.tmg-plan-form__nav{display:flex;gap:var(--s-3);flex-wrap:wrap}
.tmg-plan-form__nav[hidden]{display:none}
.tmg-plan-form__nav .tmg-btn{flex:1 1 auto;justify-content:center}
@media (min-width:640px){
  .tmg-plan-form__nav .tmg-btn{flex:0 0 auto}
}

.tmg-plan-form__foot .tmg-btn[data-tmg-submit]{align-self:flex-start}
.tmg-plan-form__foot .tmg-btn[hidden]{display:none}
@media (max-width:639px){
  .tmg-plan-form__foot .tmg-btn[data-tmg-submit]{align-self:stretch;justify-content:center}
}

.tmg-plan-form__assurance{margin:0}

/* --- 7. Confirmation ----------------------------------------------------
   Replaces the form outright. A cleared form under a success message is an
   invitation to send the same enquiry twice.
   ----------------------------------------------------------------------- */

.tmg-plan__done{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-4);
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:var(--s-7) var(--s-5);
}
@media (min-width:768px){
  .tmg-plan__done{padding:var(--s-8) var(--s-7)}
}
.tmg-plan__done:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

.tmg-plan__done-mark{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:var(--r-pill);
  background:var(--color-primary);
  color:var(--color-white);
}
.tmg-plan__done-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;
}
.tmg-plan__done-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.tmg-plan__done-back{margin-block-start:var(--s-2)}

/* --- 8. Aside ----------------------------------------------------------- */

.tmg-plan__aside{
  display:flex;
  flex-direction:column;
  gap:var(--s-6);
}
.tmg-plan__aside-title{
  font-size:var(--fs-h4);
  font-weight:600;
  letter-spacing:0;
}

.tmg-plan__how{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  margin:0;
  padding:0;
  list-style:none;
}
.tmg-plan__how-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:var(--s-3);
  font-size:14.5px;
  line-height:1.55;
  color:var(--color-text-muted);
}
.tmg-plan__how-item strong{
  display:block;
  color:var(--color-text);
  font-weight:600;
  margin-block-end:2px;
}
.tmg-plan__how-num{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:var(--r-pill);
  border:1px solid var(--color-border);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--color-text);
}

.tmg-plan__direct{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-5);
  background:var(--color-surface-sunken);
  border-radius:var(--r-md);
}
.tmg-plan__direct-title{font-size:15px;font-weight:600;letter-spacing:0}
.tmg-plan__direct-list{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin:0;
  padding:0;
  list-style:none;
}
.tmg-plan__direct-list a{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:44px;
  font-size:15px;
  color:var(--color-text);
  text-decoration:none;
  border-block-end:1px solid transparent;
}
.tmg-plan__direct-list a:hover{border-block-end-color:var(--color-accent)}
.tmg-plan__direct-list .tmg-icon{color:var(--color-primary);flex:0 0 auto}