/**
 * /packages/ — hero band, filter bar, adventure activities, empty state and
 * pagination. Ported from Packages.dc.html. Enqueued conditionally from
 * archive-package.php and page-templates/tpl-packages.php only (depends on
 * 'rnta-shared', which already carries .rnta-archive-grid, .rnta-card and
 * .rnta-cta-band — this file only adds what those don't cover).
 *
 * No package photography has been supplied yet (HANDOFF.md §11), so the hero
 * is a plain navy gradient rather than the DC's photo + gradient overlay —
 * never an <image-slot> substitute.
 */

/* =====================================================================
 * Hero band
 * ================================================================== */
.rnta-packages-hero {
  padding: var(--rn-space-72) 0 var(--rn-space-88);
  background: linear-gradient(100deg, var(--rn-navy-deep) 0%, var(--rn-navy) 65%);
}
.rnta-packages-hero__inner {
  max-width: 720px;
}
.rnta-packages-hero__eyebrow {
  color: var(--rn-gold);
}
.rnta-packages-hero__title {
  margin: var(--rn-space-14) 0;
  color: var(--rn-white);
  font-size: var(--rn-fs-46);
  line-height: 1.08;
  letter-spacing: -1.7px;
}
.rnta-packages-hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: var(--rn-fs-17);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 720px) {
  .rnta-packages-hero {
    padding: var(--rn-space-56) 0 var(--rn-space-56);
  }
  .rnta-packages-hero__title {
    font-size: var(--rn-fs-34);
  }
}

/* =====================================================================
 * Grid section + filter bar
 * ================================================================== */
.rnta-packages-grid-section {
  padding: var(--rn-space-48) var(--rn-gutter) var(--rn-space-88);
}
@media (max-width: 720px) {
  .rnta-packages-grid-section {
    padding: var(--rn-space-32) var(--rn-gutter-mobile) var(--rn-space-56);
  }
}

.rnta-packages-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rn-space-8);
  margin-bottom: var(--rn-space-26);
}
.rnta-packages-filter__label {
  margin-right: var(--rn-space-8);
  font-family: var(--rn-font-label);
  font-size: var(--rn-fs-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rn-body);
}
.rnta-packages-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--rn-space-10) var(--rn-space-16);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius-pill);
  background: var(--rn-white);
  color: var(--rn-navy);
  font-size: var(--rn-fs-13);
  font-weight: 700;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.rnta-packages-filter__chip:hover {
  border-color: var(--rn-blue);
  color: var(--rn-blue);
}
.rnta-packages-filter__chip.is-active {
  border-color: var(--rn-blue);
  background: var(--rn-blue);
  color: var(--rn-white);
}
.rnta-packages-filter__chip.is-active:hover {
  color: var(--rn-white);
}

/* =====================================================================
 * Empty state
 * ================================================================== */
.rnta-packages-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rn-space-16);
  padding: var(--rn-space-40);
  background: var(--rn-surface-blue);
  border: 1px dashed rgba(15, 54, 123, 0.2);
  border-radius: var(--rn-radius-16);
}
.rnta-packages-empty p {
  margin: 0;
  max-width: 520px;
}

/* =====================================================================
 * Pagination
 * ================================================================== */
.rnta-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-8);
  margin-top: var(--rn-space-8);
}
.rnta-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--rn-space-12);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius-8);
  color: var(--rn-navy);
  font-size: var(--rn-fs-14);
  font-weight: 700;
}
.rnta-pagination .page-numbers.current {
  background: var(--rn-blue);
  border-color: var(--rn-blue);
  color: var(--rn-white);
}
.rnta-pagination .page-numbers:not(.current):not(.dots):hover {
  border-color: var(--rn-blue);
  color: var(--rn-blue);
}
.rnta-pagination .dots {
  border-color: transparent;
}

/* =====================================================================
 * Adventure activities
 * ================================================================== */
.rnta-packages-activities {
  padding: var(--rn-space-72) var(--rn-gutter);
  background: var(--rn-surface);
  border-top: 1px solid var(--rn-line);
  border-bottom: 1px solid var(--rn-line);
}
.rnta-packages-activities__title {
  margin: var(--rn-space-12) 0 var(--rn-space-32);
  max-width: 620px;
  font-size: var(--rn-fs-32);
  line-height: 1.25;
  letter-spacing: -1.1px;
}
.rnta-packages-activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rn-space-14);
}
.rnta-packages-activities__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rn-space-14);
  padding: var(--rn-space-22);
  background: var(--rn-white);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius-12);
}
.rnta-packages-activities__item .rnta-icon {
  flex: none;
  color: var(--rn-blue);
}
.rnta-packages-activities__item span {
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-4);
}
.rnta-packages-activities__item strong {
  font-family: var(--rn-font-display);
  font-size: var(--rn-fs-17);
  font-weight: 700;
  color: var(--rn-navy);
}
.rnta-packages-activities__item span span {
  font-size: var(--rn-fs-14);
  line-height: 1.5;
  color: var(--rn-body);
}

@media (max-width: 1080px) {
  .rnta-packages-activities__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .rnta-packages-activities {
    padding: var(--rn-space-56) var(--rn-gutter-mobile);
  }
  .rnta-packages-activities__grid {
    grid-template-columns: 1fr;
  }
  .rnta-packages-activities__title {
    font-size: var(--rn-fs-25);
    line-height: 1.3;
  }
}