/* 7. Pakete – three parallel cards.
   Cards: cream with a hairline. Featured card: beige frame and badge.
   Hover (pointer devices): the card lifts, a 2px frame fades in, its button fills
   and the arrow slides. Transform and opacity only. */
.package-list {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.package {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-200);
  border: var(--border-hairline) solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out);
}
/* hover frame */
.package::after {
  content: ""; position: absolute; inset: calc(var(--border-hairline) * -1);
  border: var(--border-card) solid var(--line-strong);
  border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
/* Featured: same light card, marked by a beige frame, a badge and the filled button */
.package--featured { border: var(--border-card) solid var(--accent); }
.package--featured::after { inset: calc(var(--border-card) * -1); }

/* Badge sits on the top edge, so all three cards keep the same rows */
.package__badge {
  position: absolute; top: 0; left: var(--space-6); z-index: 1;
  transform: translateY(-50%);
  transition: transform var(--duration-slow) var(--ease-out);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.package__price { margin-top: var(--space-3); }
.package__tagline { margin-top: var(--space-4); }

.package__features { margin-top: var(--space-6); flex: 1; }
.package__features > div {
  display: grid; grid-template-columns: var(--space-9) 1fr; gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-3);
  border-top: var(--border-hairline) solid var(--line);
}
.package__features dt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.package__features dd { font-weight: var(--fw-body-strong); }
.package__cta { margin-top: var(--space-6); }

.packages__note { margin-top: var(--space-7); text-align: center; }

@media (hover: hover) {
  .package:hover { transform: translateY(calc(var(--space-2) * -1)); }
  .package:hover::after, .package:focus-within::after { opacity: 1; }
  .package:hover .package__cta::before { opacity: 1; }
  .package:hover .btn__arrow { transform: translateX(var(--space-1)); }
  /* the badge floats up out of the way of the hover frame, and back down after */
  .package:hover .package__badge { transform: translateY(calc(-50% - var(--space-3))); }
}
/* touch: press feedback on the whole card */
.package:active { transform: scale(0.99); }

@media (max-width: 959px) {
  .package-list { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .package--featured { order: -1; }
}
@media (max-width: 767px) {
  .package { padding: var(--space-5); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .package:hover, .package:active { transform: none; }
}
@media (max-width: 767px) {
  .package__badge { left: var(--space-5); }
}