/* Offers (special-packages.php). Loaded by that page only.
   The leading offer as a large feature (photograph, inset, numeral), any
   others as ruled rows, then "something else" and the enquiry dialog. */

/* ---- the leading offer ------------------------------------------------ */
.ofr-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.ofr-feature__media { grid-column: 1 / span 6; position: relative; margin-bottom: clamp(2rem, 5vw, 4rem); }
.ofr-feature__inset {
  position: absolute; right: -18%; bottom: calc(-1 * clamp(2rem, 5vw, 4rem)); width: 38%;
  border: 10px solid var(--white); z-index: 1;
}
.ofr-feature__body { grid-column: 8 / span 5; position: relative; padding-block: 2rem; }
.ofr-feature__num {
  position: absolute; z-index: -1; right: -.04em; top: -.32em;
  font-family: var(--serif); font-weight: 300; line-height: 1; letter-spacing: -.04em;
  font-size: clamp(12rem, 24vw, 22rem); color: var(--mist);
  pointer-events: none; user-select: none;
}
.ofr-feature__body h2 { font-size: clamp(2.4rem, 3.7vw, 3.5rem); margin-bottom: 2rem; }
.ofr-price { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--forest); margin-bottom: 1.6rem; }
.ofr-price:empty { display: none; }
.ofr-feature__items { padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ofr-feature__items li { font-size: 1.02rem; color: var(--ink); }
.ofr-feature__note { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-soft); }
.ofr-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; margin-top: 2.6rem; }
.ofr-lead { overflow: hidden; }

/* ---- more offers ------------------------------------------------------ */
.ofr-list { border-top: 1px solid var(--line); }
.ofr-row {
  display: grid; grid-template-columns: 3rem minmax(0, 18rem) minmax(0, 1fr) auto;
  gap: 1.2rem clamp(1.5rem, 3vw, 2.8rem); align-items: start;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--line);
}
.ofr-row__n { font-size: .7rem; letter-spacing: .2em; color: var(--sage); padding-top: .4rem; }
.ofr-row__tag { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); margin-bottom: .7rem; }
.ofr-row__name { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.08; margin-bottom: 1rem; }
.ofr-row .ofr-price { font-size: 1.2rem; margin-bottom: 1rem; }
.ofr-row__go { align-self: center; }

/* ---- something else --------------------------------------------------- */
.ofr-bespoke .split__body h2 { margin-bottom: 1.8rem; }
.ofr-bespoke .split__body p { color: var(--ink-soft); max-width: 40ch; }
.ofr-bespoke .link-line { margin-top: 2.2rem; }
.ofr-terms { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ofr-terms p { font-size: .8rem; color: var(--ink-soft); }

/* ---- the enquiry dialog ----------------------------------------------- */
.pkgdlg {
  margin: auto; /* the global margin reset removes the native centring */
  width: min(560px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem);
  padding: 0; border: 0; border-top: 2px solid var(--forest); border-radius: 0;
  background: var(--white); color: var(--ink); overflow-y: auto;
}
.pkgdlg::backdrop { background: rgba(28,38,28,.72); }
.pkgdlg__form { padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem) clamp(1.8rem, 4vw, 2.6rem); gap: 1.3rem; }
.pkgdlg__head { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.pkgdlg__head .eyebrow { margin-bottom: 1rem; }
.pkgdlg__title { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; padding-right: 2.5rem; }
.pkgdlg__price { margin-top: .5rem; font-family: var(--serif); font-size: 1.15rem; color: var(--moss); }
.pkgdlg__price:empty { display: none; }
.pkgdlg__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--forest);
  transition: background .3s, color .3s, border-color .3s;
}
.pkgdlg__close:hover { background: var(--forest); color: var(--white); border-color: var(--forest); }
.pkgdlg__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.pkgdlg__msg { font-size: .86rem; color: var(--ink-soft); text-align: center; }
.pkgdlg__msg:empty { display: none; }
.pkgdlg__msg.is-error { color: #A3412F; }
.pkgdlg__note { font-size: .78rem; color: var(--ink-soft); text-align: center; }
.pkgdlg__done { display: grid; gap: 1.2rem; padding-block: 1rem; }
.pkgdlg__done .eyebrow { margin-bottom: 0; }
.pkgdlg__done p { color: var(--ink-soft); }

/* ---- smaller screens -------------------------------------------------- */
@media (max-width: 1100px) {
  .ofr-feature__body { grid-column: 8 / -1; }
  .ofr-feature__inset { right: -12%; width: 34%; }
}
@media (max-width: 900px) {
  .ofr-feature { grid-template-columns: minmax(0, 1fr); }
  .ofr-feature__media, .ofr-feature__body { grid-column: 1; }
  .ofr-feature__media { width: 88%; margin-bottom: clamp(3rem, 10vw, 5rem); }
  .ofr-feature__inset { right: -12%; width: 42%; border-width: 8px; }
  .ofr-feature__body { padding-top: 1rem; }
  .ofr-feature__num { top: -.15em; font-size: clamp(9rem, 40vw, 14rem); }
}
@media (max-width: 760px) {
  .ofr-row { grid-template-columns: minmax(0, 1fr); }
  .ofr-row__n { padding: 0; }
  .ofr-row__go { align-self: start; }
}