/* A single experience. Loaded by experience.php only.
   Photograph-led hero, a ruled "at a glance" row, then the story on the left
   and the request card on the right; other experiences on a rail below.
   The card's behaviour (steps, calendar) is assets/js/exp-book.js. */

/* ---- at a glance ------------------------------------------------------ */
.xp-glance { border-bottom: 1px solid var(--line-soft); }
.xp-glance__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xp-glance__list--1 { grid-template-columns: minmax(0, 1fr); }
.xp-glance__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xp-glance__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xp-glance__list > div { padding: 1.7rem 1.5rem 1.6rem; display: grid; gap: .4rem; align-content: start; }
.xp-glance__list > div:first-child { padding-left: 0; }
.xp-glance__list > div + div { border-left: 1px solid var(--line); }
.xp-glance dt { font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--moss); }
.xp-glance dd { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.3; color: var(--forest); }

/* ---- layout ------------------------------------------------------------ */
.xp__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.xp__main { grid-column: 1 / span 7; min-width: 0; }
.xp__aside { grid-column: 9 / span 4; position: sticky; top: calc(76px + 1.5rem); }

.xp__lede {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.3; color: var(--forest);
  max-width: 30ch;
}
.xp__intro { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.xp__skip { margin: 0 0 2.5rem; }
.xp__body { margin-top: clamp(2.5rem, 5vw, 4rem); }
.xp__body > h2:first-child { margin-top: 0; }

/* The small tracked heading over each block below the story. */
.xp-sub {
  font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--moss); line-height: 1.4; margin-bottom: 1.4rem;
}

/* ---- photographs ------------------------------------------------------- */
/* One wide frame, then up to three below it. The fifth frame onwards is in
   the markup for the lightbox only. */
.expgal { margin-bottom: 0; }
.expgal__grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.expgal__cell { grid-column: span 2; }
.expgal__cell:first-child { grid-column: 1 / -1; }
.expgal__cell:nth-child(n+5) { display: none; }
.expgal__cell:nth-child(2):nth-last-child(2), .expgal__cell:nth-child(3):last-child { grid-column: span 3; }
.expgal__cell:nth-child(2):last-child { grid-column: 1 / -1; }
.expgal__link { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.expgal__cell:first-child .expgal__link { aspect-ratio: 16 / 9; }
.expgal__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.expgal__link:hover img, .expgal__link:focus-visible img { transform: scale(1.04); }
.expgal__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(28,38,28,.5); color: var(--white);
  font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  pointer-events: none;
}

/* ---- prices ------------------------------------------------------------ */
.xp-prices { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ptable { list-style: none; border-top: 1px solid var(--forest); }
.ptable__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 2rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.ptable__label { min-width: 0; font-family: var(--serif); font-weight: 300; font-size: 1.45rem; line-height: 1.25; color: var(--forest); }
.ptable__label a { border-bottom: 1px solid var(--line); }
.ptable__label a:hover { border-color: var(--forest); }
.ptable__dur { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.ptable__price { text-align: right; font-size: .95rem; color: var(--forest); white-space: nowrap; }
.ptable__note { display: block; margin-top: .2rem; font-size: .78rem; color: var(--ink-soft); white-space: normal; }
.ptable__row--open { display: block; padding: 0; }
.ptable__sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: .4rem 1.5rem; align-items: baseline;
  padding: 1.25rem 0; list-style: none; cursor: pointer;
}
.ptable__sum::-webkit-details-marker { display: none; }
.ptable__sum:hover .ptable__label { color: var(--moss); }
.ptable__chev { width: 16px; height: 16px; fill: none; stroke: var(--moss); stroke-width: 1.4; transition: transform .3s var(--ease); align-self: center; }
.ptable__d[open] .ptable__chev { transform: rotate(180deg); }
.ptable__body { padding: 0 2.5rem 1.4rem 0; max-width: 60ch; }
.ptable__body p { color: var(--ink-soft); font-size: .94rem; line-height: 1.75; }
.ptable__body p + p { margin-top: .7rem; }
.pgroup + .pgroup { margin-top: 2.6rem; }
.pgroup__head { margin-bottom: 1rem; }
.pgroup__title { font-size: 1.6rem; }
.pgroup__lead { margin-top: .4rem; color: var(--ink-soft); font-size: .92rem; }

/* ---- included / bring, good to know ---------------------------------- */
.xp-lists {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 2.5rem var(--gutter);
  padding-top: 2.4rem; border-top: 1px solid var(--line);
}
.xp-lists .ticks li { font-size: .95rem; }
.xp-note {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 1.8rem 0 0 1.6rem; border-left: 1px solid var(--sage);
}
.xp-note .xp-sub { margin-bottom: .8rem; }
.xp-note p { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.45; color: var(--forest); max-width: 40ch; }

/* ---- the request card ------------------------------------------------ */
.exp-book { background: var(--paper); padding: clamp(1.6rem, 2.4vw, 2.2rem); border-top: 1px solid var(--forest); }
.exp-book__step[hidden] { display: none; }
.exp-form__head { font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--moss); }
.exp-book__name { margin-top: .6rem; font-family: var(--serif); font-weight: 300; font-size: 1.9rem; line-height: 1.1; color: var(--forest); }
.exp-book__price { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.exp-book__amount { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--forest); }
.exp-book__note { display: block; margin-top: .3rem; font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.exp-book__fields { display: grid; gap: 1.3rem; margin-top: 1.8rem; }
.exp-book__row { gap: 1.3rem; }
.exp-book .field input, .exp-book .field select, .exp-book .field textarea { font-size: .95rem; }
.exp-book__next { margin-top: 1.8rem; }
.exp-book__reassure { margin-top: 1.2rem; display: grid; gap: .35rem; }
.exp-book__reassure li { position: relative; padding-left: 1.3rem; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.exp-book__reassure li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 1px; background: var(--moss); }
.exp-book__direct { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; justify-items: start; }
.exp-book__direct > span { font-size: .82rem; color: var(--ink-soft); }

/* Step two: the form is the card's contents. */
.exp-form { gap: 1.2rem; }
.book-step__back { background: none; border: 0; padding: 0; justify-self: start; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.book-step__back:hover { color: var(--forest); }
.exp-book__summary { display: grid; gap: .2rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.exp-book__summary strong { font-family: var(--serif); font-weight: 300; font-size: 1.35rem; color: var(--forest); line-height: 1.2; }
.exp-book__summary em { font-style: normal; font-size: .86rem; color: var(--moss); }
.exp-book__summary span { font-size: .84rem; color: var(--ink-soft); }
.exp-form__msg { font-size: .85rem; color: var(--ink-soft); }
.exp-form__msg:empty { display: none; }
.exp-form__msg.is-error { color: #A3412F; }
.book-step__fine { font-size: .78rem; color: var(--ink-soft); }

/* Step three: sent. */
.book-done { display: grid; gap: 1rem; justify-items: start; }
.book-done__mark { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--moss); position: relative; }
.book-done__mark::after { content: ""; position: absolute; left: 16px; top: 13px; width: 9px; height: 16px; border: solid var(--forest); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.book-done h3 { font-size: 2rem; }
.book-done p { color: var(--ink-soft); font-size: .92rem; }
.book-done p strong { color: var(--forest); }
.book-done__wa-note { font-size: .82rem !important; }

/* Styled selects: the arrow comes from style.css .field select. */
.sel { display: block; }

/* ---- the date picker (built by exp-book.js over the native input) ---- */
.field input[type="date"].is-enhanced {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.xd { position: relative; }
.xd-field {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .85rem 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-size: .95rem; color: var(--sage); text-align: left;
  transition: border-color .25s;
}
.xd-field:hover, .xd-field:focus-visible, .xd-field[aria-expanded="true"] { outline: none; border-color: var(--forest); }
.xd.has-value .xd-field { color: var(--forest); }
.xd-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--moss); stroke-width: 1.3; stroke-linecap: round; }

.dr-pop {
  position: absolute; z-index: 60; top: calc(100% + .6rem); left: 0;
  width: min(20.5rem, calc(100vw - 2rem));
  background: var(--forest); color: var(--white);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 30px 70px -28px rgba(18,26,18,.75);
}
.dr-pop[hidden] { display: none; }
.dr-m__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.dr-m__name { font-family: var(--serif); font-size: 1.1rem; }
.dr-nav {
  width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--white);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.dr-nav:hover:not(:disabled) { background: var(--white); color: var(--forest); }
.dr-nav:disabled { opacity: 0; pointer-events: none; }
.dr-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lichen); margin-bottom: .35rem; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: .82rem; border: 0; padding: 0; background: none; border-radius: 50%; color: var(--white);
  transition: background .12s;
}
button.dr-cell:hover { background: rgba(255,255,255,.14); }
.dr-cell.is-empty { visibility: hidden; }
.dr-cell.is-disabled { color: rgba(255,255,255,.28); }
.dr-cell.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.dr-cell.is-sel { background: var(--white); color: var(--forest); font-weight: 600; }
.dr-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--line-dark); }
.dr-clear { background: none; border: 0; padding: 0; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lichen); }
.dr-clear:hover { color: var(--white); }
.dr-pop .btn { --btn-bg: var(--white); --btn-fg: var(--forest); --btn-bd: var(--white); min-height: 36px; padding: .45rem 1.1rem; }

/* ---- other experiences ---------------------------------------------- */
.xp-related .rail { --rail-card: clamp(250px, 24vw, 340px); }
.xp-related__tag { letter-spacing: .04em; text-transform: none; font-size: .82rem; line-height: 1.45; }

/* ---- the bar along the bottom of a phone ----------------------------- */
.exp-mobilebar { display: none; }

@media (max-width: 1100px) {
  .xp__main { grid-column: 1 / span 7; }
  .xp__aside { grid-column: 8 / span 5; }
}
@media (max-width: 900px) {
  .xp__grid { grid-template-columns: minmax(0, 1fr); }
  .xp__main, .xp__aside { grid-column: 1; }
  .xp__aside { position: static; margin-top: clamp(3.5rem, 8vw, 5rem); }
  .xp-glance__list, .xp-glance__list--3, .xp-glance__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-glance__list > div { padding: 1.2rem 1rem 1.1rem 0; }
  .xp-glance__list > div + div { border-left: 0; }
  .xp-glance__list > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .xp-glance__list > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .xp-glance dd { font-size: 1.1rem; }

  .exp-mobilebar {
    position: fixed; inset: auto 0 0 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  }
  @supports (backdrop-filter: blur(8px)) { .exp-mobilebar { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.2) blur(14px); } }
  .exp-mobilebar__price { min-width: 0; display: grid; line-height: 1.25; }
  .exp-mobilebar__price span { font-family: var(--serif); font-size: 1.05rem; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp-mobilebar__price strong { font-weight: 400; font-size: .76rem; color: var(--ink-soft); }
  .exp-mobilebar .btn { flex: none; }
  body.has-expbar { padding-bottom: 4.6rem; }
  html.menu-open .exp-mobilebar { display: none; }
}
@media (max-width: 520px) {
  .ptable__label { font-size: 1.25rem; }
  .ptable__row { gap: .3rem 1rem; }
  .expgal__grid { gap: .4rem; }
}