/* ============================================================================
   Digitour — package.css
   Package detail: hero, gallery, fact grid, itinerary, inclusions, booking card.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.phero--pkg { padding-bottom: 32px; }
.phero__pkg { display: grid; gap: 24px; margin-top: 16px; }
@media (min-width: 1024px) { .phero__pkg { grid-template-columns: 1.6fr 340px; gap: 48px; align-items: start; } }

.phero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge--outline.on-dark { border-color: rgba(255,255,255,.3); color: var(--g100); }
.phero__sub { color: var(--g100); font-size: .9375rem; line-height: 1.66; max-width: 56ch; margin-top: 12px; }
.phero__rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; font-size: .8125rem; color: var(--on-dark);
}
.phero__rating .i { color: var(--gold); }
.phero__rating b { color: #fff; }
.phero__cta { margin-top: 20px; }

.pricebox {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: 20px;
}
.pricebox__from { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark-2); }
.pricebox__amount { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.pricebox__amount s { font-size: .9375rem; color: var(--on-dark-3); }
.pricebox__amount strong { font-family: var(--serif); font-size: 2.125rem; color: var(--gold); line-height: 1; }
.pricebox__unit { font-size: .75rem; color: var(--g100); line-height: 1.5; margin-bottom: 16px; }
.pricebox .btn + .btn { margin-top: 10px; }
.pricebox__note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .6875rem; color: var(--on-dark-2); margin-top: 14px; line-height: 1.5;
}
.pricebox__note .i { flex-shrink: 0; margin-top: 1px; }

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery { padding: 20px 0 0; background: var(--ivory); }
.gallery__grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.gallery__item { margin: 0; border-radius: var(--r-md); }
.gallery__item--lead { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
  .gallery__item--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery__item { height: 100%; }
  .gallery__item img { height: 100%; }
}

/* ── Two-column body ─────────────────────────────────────────────────────── */
.pkg__layout { display: grid; gap: 32px; padding-block: 40px 56px; }
@media (min-width: 1024px) {
  .pkg__layout { grid-template-columns: minmax(0,1fr) 360px; gap: 56px; padding-block: 56px 80px; align-items: start; }
}
.pkg__section + .pkg__section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.pkg__section > .t-h2 { margin-bottom: 16px; }
.pkg__section > .t-body { margin-bottom: 20px; }

/* ── Fact grid ───────────────────────────────────────────────────────────── */
.factgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 24px; }
@media (min-width: 768px) { .factgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.factgrid__item { background: var(--white); padding: 14px 16px; }
.factgrid dt {
  display: flex; align-items: center; gap: 6px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.factgrid dt .i { color: var(--g600); }
.factgrid dd { font-size: .875rem; font-weight: 500; margin-top: 5px; line-height: 1.4; }

/* ── Tick lists ──────────────────────────────────────────────────────────── */
.ticklist { display: grid; gap: 9px; }
.ticklist li { display: flex; gap: 10px; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.ticklist .i { flex-shrink: 0; margin-top: 3px; color: var(--g600); }
.ticklist--lead li { color: var(--ink); font-weight: 500; }
.ticklist--no .i { color: var(--muted); opacity: .6; }
.ticklist--sm li { font-size: .8125rem; gap: 8px; }
.ticklist--docs li { font-size: .875rem; padding-bottom: 2px; }

.pkg__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ── Itinerary ───────────────────────────────────────────────────────────── */
.itin { border-top: 1px solid var(--line); }
.itin__item { border-bottom: 1px solid var(--line); }
/* Small screens first: the day label sits on its own line above the title,
   and only widens into a single row once there is space for it. */
.itin__btn { align-items: center; gap: 14px; padding: 16px 0; flex-wrap: wrap; }
.itin__day {
  flex-shrink: 0; flex-basis: 100%; margin-bottom: 4px;
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--g600);
}
.itin__title { flex-basis: calc(100% - 42px); text-align: left; }
@media (min-width: 600px) {
  .itin__btn { flex-wrap: nowrap; }
  .itin__day { flex-basis: auto; min-width: 74px; margin-bottom: 0; }
  .itin__title { flex: 1; flex-basis: auto; }
}

/* ── Inclusions ──────────────────────────────────────────────────────────── */
.incl { display: grid; gap: 28px; }
@media (min-width: 768px) { .incl { grid-template-columns: 1fr 1fr; gap: 40px; } }
.incl__head { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.incl__head--yes { color: var(--g600); }
.incl__head--no  { color: var(--muted); }
.pkg__visa { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; font-size: .8125rem; line-height: 1.6; }
.pkg__visa .i { flex-shrink: 0; margin-top: 2px; color: var(--g600); }

/* ── Aside cards ─────────────────────────────────────────────────────────── */
.pkg__aside, .visa__aside { display: grid; gap: 16px; }
@media (min-width: 1024px) { .pkg__aside, .visa__aside { position: sticky; top: calc(var(--header-h) + 16px); } }

.bookcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--sh-2);
}
.bookcard__title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; }
.bookcard__sub { font-size: .8125rem; color: var(--muted); line-height: 1.6; margin: 6px 0 18px; }
.bookform .btn { margin-top: 18px; }
.bookform .form-note { margin-top: 10px; text-align: center; }

.asidecard {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px;
}
.asidecard--warn { background: var(--danger-bg); border-color: #f0cdc9; }
.asidecard--promise { background: var(--g100); }
.asidecard__title {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--g700); margin-bottom: 12px;
}
.asidecard--warn .asidecard__title { color: #8c231c; }
.asidecard__links { display: grid; gap: 2px; }
.asidecard__links a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: .8125rem; font-weight: 500; color: var(--g700);
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.asidecard__links li:last-child a { border-bottom: 0; }
.asidecard__links a:hover { color: var(--g600); text-decoration: underline; }
.asidecard .link-arrow { margin-top: 8px; font-size: .8125rem; }

/* ── Child ages inside the booking form ──────────────────────────────────── */
.childages {
  margin-top: 18px; padding: 16px; border-radius: var(--r-md);
  background: var(--g50); border: 1px solid var(--line-soft);
  animation: pop-in var(--dur-2) var(--ease);
}
.childages[hidden] { display: none; }
.childages__title { font-size: .8125rem; font-weight: 600; margin-bottom: 12px; }
.childages__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (min-width: 480px) { .childages__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.childage label {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.childage select {
  /* 16px, not smaller — base.css has a touch-media-query guard against
     exactly this, but a same-specificity rule declared later in the
     cascade (this one) silently wins and undoes it, which is what was
     actually causing iOS Safari to zoom the whole page in when this
     select rendered. Fixing the value here directly rather than relying
     on load-order luck between stylesheets. */
  width: 100%; min-height: 44px; padding: 8px 26px 8px 10px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23566159' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.childage select:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 3px rgba(20,107,75,.14); }
.childage.is-invalid select { border-color: var(--danger); background-color: var(--danger-bg); }
.childage.is-invalid label { color: var(--danger); }

/* ── Consultant mini card ────────────────────────────────────────────────── */
.consultantcard__row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.consultantcard__img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.consultantcard__img img { filter: grayscale(1) contrast(1.05); object-position: top center; }
.person__facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; }
.person__facts dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 2px; }
.person__facts dd { font-size: .8125rem; font-weight: 500; }
.consultantcard .btn { margin-top: 14px; }