/* Plan your trip: route chart, arrival photos, seasons calendar, inquiry form. Scoped to body.page-plan. */

/* A filler inset takes the height its grid row already has (desktop); on phones it keeps its own crop. */
@media (min-width: 1024px) {
  .page-plan .arrive__heli > .inset__pic { aspect-ratio: auto; height: 100%; }
  .page-plan .arrive__heli > .inset__pic img { position: absolute; inset: 0; }
}
@media (min-width: 1280px) {
  .page-plan .seasons__photo > .inset__pic { aspect-ratio: auto; height: 100%; }
  .page-plan .seasons__photo > .inset__pic img { position: absolute; inset: 0; }
}

/* ---------- Route chart: stops on a track, legs with their times ---------- */
.page-plan .route__field {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3) var(--s-2);
  background-color: var(--field);
}
.page-plan .route__line { display: grid; margin: 0; }
.page-plan .route__line > li { position: relative; padding-left: var(--s-6); padding-bottom: var(--s-3); }
.page-plan .route__line--air { padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* the track: solid by road and air, dashed across the water, dotted for the helicopter */
.page-plan .route__line > li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--fg);
}
.page-plan .route__line > .stop--sea::before,
.page-plan .route__line > .leg--sea::before { border-left-style: dashed; }
.page-plan .route__line > .leg--air::before { border-left-style: dotted; }
.page-plan .route__line > .stop:first-child::before { top: .75rem; }
.page-plan .route__line > .stop--end::before { display: none; }

.page-plan .stop__mark {
  position: absolute;
  left: calc(1rem + 1px - .5625rem);
  top: calc(.75rem - .5625rem);
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--fg);
  border-radius: 50%;
  background: radial-gradient(circle, var(--fg) 0 1.6px, var(--field) 2.2px);
}
.page-plan .stop__mark--home { background: var(--mango); }
.page-plan .stop__name { font-size: .875rem; line-height: 1.5rem; color: var(--fg); }
.page-plan .stop__code { color: var(--fg-2); font-size: var(--fs-small); }
.page-plan .stop__code.fig { font-size: .8125rem; letter-spacing: .08em; }

.page-plan .leg { display: grid; gap: var(--s-3); }
.page-plan .way { display: grid; gap: .25rem; align-content: start; }
.page-plan .way__time { order: -1; color: var(--fg-2); font: 500 var(--fs-label)/1 var(--sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.page-plan .way__time .fig,
.page-plan .way__word { margin-right: .25em; color: var(--fg); font-size: var(--fs-fig); letter-spacing: 0; text-transform: none; }
.page-plan .way__word { font-family: var(--sans); font-stretch: 125%; }
.page-plan .way__mode { margin-top: var(--s-1); font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; }
.page-plan .way__note { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; max-width: 30em; }

@media (min-width: 1024px) {
  .page-plan .route__field { padding: var(--s-6) var(--s-6) var(--s-4); gap: var(--s-4); }
  .page-plan .route__line { grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.4fr); }
  .page-plan .route__line > li { padding-left: 0; padding-right: var(--s-3); padding-top: var(--s-6); padding-bottom: 0; }
  .page-plan .route__line--air { padding-top: var(--s-4); }
  .page-plan .route__line > li::before { left: 0; right: 0; top: .75rem; bottom: auto; border-left: 0; border-top: 2px solid var(--fg); }
  .page-plan .route__line > .stop--sea::before,
  .page-plan .route__line > .leg--sea::before { border-top-style: dashed; }
  .page-plan .route__line > .leg--air::before { border-top-style: dotted; }
  .page-plan .route__line > .stop:first-child::before { left: .5rem; top: .75rem; }
  .page-plan .stop__mark { left: 0; top: calc(.75rem + 1px - .5625rem); }
  .page-plan .leg--air { grid-column: 1 / 5; }
  .page-plan .route__line--air .stop { grid-column: 5; }
}
@media (min-width: 1280px) {
  .page-plan .leg:not(.leg--air):has(.way + .way) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); }
}

/* arrival photographs, under the chart */
.page-plan .arrive { display: grid; gap: var(--col-gap); margin-top: var(--col-gap); }
@media (min-width: 1024px) {
  .page-plan .arrive { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-plan .arrive__dock { grid-column: 1 / span 7; }
  .page-plan .arrive__heli { grid-column: 8 / -1; }
}

/* ---------- Seasons: a month chart on pale chart paper ---------- */
.page-plan .seasons { display: grid; gap: var(--s-6) var(--col-gap); }
.page-plan .seasons__chart { display: grid; gap: var(--s-6); align-content: start; }

.page-plan .cal__body { display: grid; gap: var(--s-3); padding: var(--s-2); background-color: var(--bg); }
.page-plan .cal__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.page-plan .cal__table tr > :first-child { width: 6.25rem; }
.page-plan .cal__table th {
  padding: 0 var(--s-1) 0 0;
  color: var(--fg-2);
  font: 500 var(--fs-label)/1.2 var(--sans);
  font-stretch: 125%;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
.page-plan .cal__table thead th { padding: 0 0 .25rem; text-align: center; letter-spacing: 0; }
.page-plan .cal__table abbr { text-decoration: none; }
.page-plan .cal__table td { height: 1.5rem; padding: 0; }
.page-plan .is-pale { background-color: var(--water-300); outline: 1px solid var(--rule); outline-offset: -1px; }
.page-plan .is-green { background-color: var(--land-600); }
.page-plan .is-off { border: 1px dashed var(--neat); }
.page-plan .cal__key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; color: var(--fg-2); font: 500 var(--fs-label)/1.4 var(--sans); font-stretch: 125%; letter-spacing: .04em; }
.page-plan .cal__key li { display: inline-flex; align-items: center; gap: .5rem; }
.page-plan .cal__key .key { flex: none; width: .75rem; height: .75rem; }
.page-plan .seasons__notes .link { white-space: nowrap; }
@media (min-width: 768px) {
  .page-plan .cal__body { padding: var(--s-4); }
  .page-plan .cal__table tr > :first-child { width: 7.5rem; }
  .page-plan .cal__table td { height: 2rem; }
}
@media (min-width: 1280px) {
  .page-plan .seasons { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-plan .seasons__chart { grid-column: 1 / span 7; }
  .page-plan .seasons__photo { grid-column: 8 / -1; }
}

/* ---------- Inquiry form ---------- */
.page-plan .inq { display: grid; gap: var(--s-6) var(--col-gap); }
.page-plan .inq__text { display: grid; gap: var(--s-3); align-content: start; }
.page-plan .inq__contact { margin-top: var(--s-2); }
.page-plan .inq__form { display: grid; gap: var(--s-3) var(--col-gap); align-content: start; }
.page-plan .inq__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); }
@media (min-width: 480px) {
  .page-plan .inq__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-plan .inq__form .field--full,
  .page-plan .inq__end,
  .page-plan .inq__status { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .page-plan .inq__end .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .page-plan .inq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-plan .inq__text { grid-column: 1 / span 5; }
  .page-plan .inq__form { grid-column: 7 / -1; }
}

/* invalid: the field's border turns (shared), and a line names the fix */
.page-plan .field__error { display: flex; align-items: flex-start; gap: .5rem; color: var(--fg); font-size: var(--fs-small); line-height: 1.4; }
.page-plan .field__error svg,
.page-plan .inq__status svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }


/* sent: the status panel appears under the button */
.page-plan .inq__status:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--neat);
  background-color: var(--field);
  font-size: var(--fs-lede);
  line-height: 1.45;
}
.page-plan .inq__status svg { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.page-plan .inq__status:focus { outline: none; }
.page-plan .inq__status:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* night chart: the pale cells lift off the dark paper so they never read as green */
[data-theme="dark"] .page-plan .is-pale { background-color: color-mix(in oklab, var(--fg) 34%, transparent); }