/* Package page */
.pkg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: 8px var(--sec); }
.pkg-main > * + * { margin-top: clamp(32px, 4vw, 48px); }
.pkg-main h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 18px; }
.pkg-side { position: sticky; top: calc(var(--head-h) + 12px); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
/* The icon spans label and value, so it sits at the vertical centre of each cell */
.facts div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: center; padding: 22px 14px 22px 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { display: contents; font-size: 1rem; line-height: 1.25; color: var(--ink-soft); }
.facts dt .i { grid-row: 1 / 3; align-self: center; width: 24px; height: 24px; stroke-width: 1.5; color: var(--wood); }
.facts dd { grid-column: 2; margin-top: 0px; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.incl h3 { margin-bottom: 10px; }
.itin-note { margin: -8px 0 16px; color: var(--ink-soft); font-size: 1.05rem; }
.itin ol { border-left: 3px solid var(--turmeric); margin-left: 6px; }
.itin li { position: relative; padding: 0 0 22px 24px; }
.itin li:last-child { padding-bottom: 0; }
.itin li::before { content: ""; position: absolute; left: -9px; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: var(--turmeric); border: 3px solid var(--paper); }
.itin li > span { font-weight: 700; color: var(--lantern-dark); font-size: 1.02rem; }
.itin h3 { margin-top: 2px; }
.itin p { margin-top: 2px; color: var(--ink-soft); line-height: 1.32; }
.other-pkgs { padding-bottom: var(--sec); }
.other-pkgs h2 { margin-bottom: 24px; }
.pkg-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pkg-rows a { display: grid; grid-template-columns: 100px 1fr; gap: 14px; text-decoration: none; align-items: start; }
.pkg-rows img { width: 100px; height: 125px; object-fit: cover; border-radius: var(--r-photo); }
.pkg-rows strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1.12; }
.pkg-rows a:hover strong { text-decoration: underline; text-decoration-color: var(--lantern); text-underline-offset: 3px; }
.pkg-rows a > span > span { display: block; margin-top: 3px; font-size: 1.02rem; line-height: 1.25; color: var(--ink-soft); }
.pkg-rows .from { color: var(--night); }
@media (max-width: 1040px) {
  .pkg-layout { grid-template-columns: minmax(0, 1fr); }
  .pkg-side { position: static; max-width: 560px; width: 100%; }
  .pkg-rows { grid-template-columns: 1fr; }
}
/* Two by two wherever a cell would be too narrow for icon and label: phones, and the two-column package layout before it has room */
@media (max-width: 760px), (min-width: 1041px) and (max-width: 1240px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div { padding-block: 18px; }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 340px) {
  .facts div { column-gap: 8px; padding-right: 6px; }
  .facts div + div { padding-left: 12px; }
}
@media (max-width: 760px) {
  .incl { grid-template-columns: 1fr; }
}
/* Know before you go: a short bring list beside the notes, on a soft canvas panel */
.know-grid { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: clamp(20px, 2.6vw, 28px); background: var(--canvas); border-radius: var(--r-panel); }
.know-bring h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.know-bring h3 .i, .know-notes .i { flex: none; width: 24px; height: 24px; stroke-width: 1.5; color: var(--wood); }
.know-bring li { position: relative; padding: 5px 0 5px 18px; line-height: 1.32; }
.know-bring li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 6px; height: 6px; border-radius: 50%; background: var(--turmeric); }
.know-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding-block: 12px; border-top: 1px solid var(--line-strong); }
.know-notes li:first-child { padding-top: 0; border-top: 0; }
.know-notes li:last-child { padding-bottom: 0; }
.know-notes .i { margin-top: 1px; }
.know-notes p { margin-top: 2px; line-height: 1.36; color: var(--ink-soft); }
@media (max-width: 760px) {
  .know-grid { grid-template-columns: 1fr; }
}