/* בלק צ'רי — עמוד חבילות אירוח (packages) · לפי פיגמה 660:19201 + 660:19800 */

/* ── Hero ── */
.pk-hero { position: relative; min-block-size: clamp(300px, 40vh, 420px); display: grid; place-items: center; overflow: hidden; }
.pk-hero-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pk-hero-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(26,10,14,.45), rgba(26,10,14,.55)); }
.pk-hero-content { position: relative; text-align: center; color: var(--bc-white); padding-inline: 20px; max-inline-size: 820px; }
.pk-hero-content h1 { font-size: var(--fs-hero); font-weight: 500; margin-block-end: .35em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.pk-hero-content p { font-size: var(--fs-lg); margin: 0; opacity: .95; }

/* ── רשת חבילות ── */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.pk-card {
  background: var(--bc-cream-warm); border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(59,15,26,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.pk-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bc-cream); }
.pk-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; }
.pk-card:hover .pk-media img { transform: scale(1.045); }
.pk-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pk-name { font-size: var(--fs-lg); font-weight: 600; margin: 0; color: var(--bc-ink); }
.pk-desc { color: var(--bc-ink-soft); font-size: var(--fs-sm); margin: 0; flex: 1; }
.pk-diners { align-self: flex-start; margin-block-start: 2px; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-block-start: 10px; }
.pk-price { font-weight: 600; color: var(--bc-ink); }
.pk-foot .btn { padding: .55em 1.5em; font-size: var(--fs-sm); }

/* ── מצב "בקרוב" (עד שהחבילות מליטל יעלו) ── */
.pk-soon {
  grid-column: 1 / -1;
  background: var(--bc-cream-warm); border-radius: var(--radius-card);
  padding: clamp(2.2rem, 5vw, 3.5rem) 20px; text-align: center;
  box-shadow: 0 2px 10px rgba(59,15,26,.05);
}
.pk-soon-icon {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  margin: 0 auto 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--bc-rose); color: var(--bc-primary);
}
.pk-soon-icon svg { inline-size: 30px; block-size: 30px; }
.pk-soon h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--bc-primary); margin-block-end: .4em; }
.pk-soon p { color: var(--bc-ink-soft); max-inline-size: 46ch; margin: 0 auto 1.3rem; }

/* ── אירועים מיוחדים ושירותי בר ── */
.pk-services { margin-block-start: var(--space-section); }
.pk-services .container { border-block-start: 1px solid rgba(59,15,26,.12); padding-block-start: clamp(2.5rem, 6vw, 4rem); }
.pk-services-title { font-size: var(--fs-h2); font-weight: 500; color: var(--bc-ink); margin-block-end: 2rem; text-align: start; }
.pk-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.pk-service {
  background: var(--bc-cream-warm); border-radius: var(--radius-card);
  padding: 1.4rem 1.4rem 1.5rem;
}
.pk-service-head { display: flex; align-items: center; gap: .6rem; margin-block-end: .45rem; }
.pk-service-head svg { inline-size: 22px; block-size: 22px; color: var(--bc-primary); flex-shrink: 0; }
.pk-service h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; color: var(--bc-ink); }
.pk-service p { color: var(--bc-ink-soft); font-size: var(--fs-sm); margin: 0; }
.pk-vat-note { text-align: center; color: var(--bc-ink-soft); font-size: var(--fs-sm); margin-block-start: 2rem; }

/* ── פופאפ חבילה (deal preview) ── */
.pk-layer {
  position: fixed; inset: 0; z-index: 100; background: rgba(26,10,14,.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px;
}
.pk-layer[hidden] { display: none; }
.pk-modal {
  position: relative; display: grid; grid-template-columns: minmax(320px, 440px) 1fr;
  inline-size: min(1150px, 100%); max-block-size: 92vh; overflow: hidden;
  background: var(--bc-white); border-radius: 16px; box-shadow: var(--shadow-pop);
}
.pk-modal.no-image { grid-template-columns: 1fr; inline-size: min(720px, 100%); }
.pk-modal-media { background: var(--bc-cream-warm); }
.pk-modal.no-image .pk-modal-media { display: none; }
.pk-modal-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pk-modal-body {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 3.5vw, 2.8rem); overflow-y: auto;
}
.pk-close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2;
  background: var(--bc-white); box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.pk-modal-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; color: var(--bc-primary); text-align: start; margin-block: .2em .6em; }
.pk-modal-tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-end: 1.4rem; }
.pk-pill {
  border: 1px solid rgba(59,15,26,.3); border-radius: var(--radius-pill);
  padding: .35em 1.1em; font-size: var(--fs-sm); color: var(--bc-ink-soft); background: var(--bc-white);
}
.pk-modal-desc { color: var(--bc-ink-soft); margin: 0 0 1.2rem; max-inline-size: 56ch; }
.pk-modal-sub { font-size: var(--fs-lg); font-weight: 600; color: var(--bc-ink); margin-block-end: .9rem; }
.pk-contents { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 2rem; }
.pk-contents li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-sm); color: var(--bc-ink); }
.pk-contents li svg { inline-size: 18px; block-size: 18px; color: var(--bc-primary); flex-shrink: 0; margin-block-start: .15em; }
.pk-modal-price { font-size: 1.7rem; font-weight: 700; color: var(--bc-ink); margin-block-end: 1rem; }
.pk-modal-foot {
  margin-block-start: auto; padding-block-start: 1.3rem;
  border-block-start: 1px solid rgba(59,15,26,.12);
  display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem;
}
.pk-modal-foot .btn { min-inline-size: 260px; }
.pk-qty {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--bc-cream-warm); border-radius: 10px; padding: .25rem .4rem;
}
.pk-qty button {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: 8px; color: var(--bc-ink); font-size: 1.15rem; transition: background .15s;
}
.pk-qty button:hover { background: rgba(59,15,26,.08); }
.pk-qty output { min-inline-size: 2ch; text-align: center; font-weight: 600; }

/* ── רספונסיב ── */
@media (max-width: 960px) {
  .pk-grid { grid-template-columns: 1fr; max-inline-size: 480px; margin-inline: auto; }
  .pk-services-grid { grid-template-columns: 1fr 1fr; }
  .pk-layer { padding: 12px; }
  .pk-modal { grid-template-columns: 1fr; max-block-size: 94vh; }
  .pk-modal-media { max-block-size: 220px; }
  .pk-modal-media img { max-block-size: 220px; }
  .pk-contents { grid-template-columns: 1fr; }
  .pk-modal-foot { flex-wrap: wrap; }
  .pk-modal-foot .btn { max-inline-size: none; flex-basis: 100%; order: 2; }
  .pk-qty { order: 1; margin-inline: auto; }
}
@media (max-width: 560px) {
  .pk-services-grid { grid-template-columns: 1fr; }
}