/* ==========================================================================
   Packages page (elementor-1261)
   Depends on main.css for tokens, header, footer, buttons and .final-cta.
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background-image: url('../img/pkg-hero.jpg');
  background-position: center;
  background-size: cover;
  border-radius: 15px;
}
/* Gradient sits at z-index 0 with the copy at 1 — a negative z-index here
   would paint behind .page-hero's own background-image and vanish. */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, rgba(255, 255, 255, 0) 78%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__title {
  max-width: 14ch;
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-wrap: balance;
}

.page-shell {
  background: #fff;
  border-radius: var(--radius-hero);
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  padding: 0 32px 8px;
}
@media (max-width: 767px) { .page-shell { padding: 0 16px 6px; } }

/* ---------- Heading ---------- */
.pkgs-head { padding: 3em 0 0; text-align: center; }
.pkgs-head__title {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 600;
  color: var(--e-global-color-primary);
}
.pkgs-head__lead { margin-top: 0.5rem; font-size: 16px; line-height: 1.8; color: var(--e-global-color-accent); }

/* ---------- Budget tabs ----------
   Reproduced from the live site, including the fact that they are inert:
   all three tab panels there are empty and the 31 cards sit in one grid
   below, so clicking a tab does not filter anything. */
.budget-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 2.5em;
}
.budget-tab {
  padding: 18px 46px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  background: var(--e-global-color-blue);
  border: 0;
  border-radius: var(--radius-card);
  cursor: default; /* not interactive on the live site — see note above */
}
.budget-tab + .budget-tab { background: #21b0b7; }

/* ---------- Card grid ---------- */
.pkgs { padding: 2.5em 0 5em; }
.pkgs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pkg {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 22px rgba(30.6, 30.6, 30.6, 0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pkg:hover { box-shadow: 0 10px 30px rgba(30.6, 30.6, 30.6, 0.22); transform: translateY(-3px); }

.pkg__media { position: relative; }
/* Source art is 1000x668 (1.497) but the live site crops the band to 1.845,
   measured at 382x207 in a 1280px viewport. */
.pkg__media img { width: 100%; aspect-ratio: 1.845; object-fit: cover; }

/* The hotspot widget renders a dot on every card; only two carry a label. */
.pkg__dot {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.pkg__badge {
  position: absolute;
  top: 22px;
  left: 34px;
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  border-radius: 4px;
}
.pkg__badge--off { background: var(--e-global-color-red); }
.pkg__badge--new { background: #0ba02c; }

.pkg__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 20px 22px; }

.pkg__rating { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.pkg__rating > span:last-child { font-family: var(--font-ui); font-size: 13px; color: #000; }

.pkg__title {
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6em;
  letter-spacing: -0.5px;
  color: #000621;
  text-wrap: pretty;
}
.pkg__title a { transition: color 0.25s ease; }
.pkg__title a:hover { color: var(--e-global-color-red); }

.pkg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
}
.pkg__price-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--e-global-color-text);
}
.pkg__price {
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3em;
  color: var(--e-global-color-primary);
}
.pkg__btn {
  flex: 0 0 auto;
  padding: 15px 26px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border-radius: 7px;
  background-image: linear-gradient(284deg, var(--e-global-color-red) 29%, var(--e-global-color-coral) 100%);
  transition: background-image 0.3s ease;
}
.pkg__btn:hover, .pkg__btn:focus-visible {
  background-image: linear-gradient(284deg, #000 15%, #000 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pkgs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .page-hero { min-height: 35vh; }
  .page-hero__title { font-size: 32px; }
  .pkgs-head__title { font-size: 26px; }
  .budget-tabs { gap: 12px; }
  .budget-tab { flex: 1 1 100%; padding: 15px 18px; font-size: 15px; text-align: center; }
  .pkgs__grid { grid-template-columns: 1fr; }
  .pkg__title { font-size: 18px; }
}