/* ==========================================================
   mod_vipbox – VIP Box & Bottle Service
   Navazuje na DEER design tokeny (typography.css / user.css).
   Fallbacky jsou uvedeny pro případ samostatného nasazení.
   ========================================================== */

.mod-vipbox {
  --vipbox-gold:      var(--c-grain-400, #C2A361);
  --vipbox-ink:       var(--c-forest-400, #23142D);
  --vipbox-ink-hover: var(--c-forest-300, #392745);
  --vipbox-cream:     var(--c-surface, #F0F3FF);

  --vipbox-radius:     var(--radius-card, 16px);
  --vipbox-radius-img: 12px;

  /* vroubkovaný (ticket) okraj – kolečko 8×8 px, s mezerou mezi kolečky */
  --vipbox-scallop-d:   8px;   /* průměr kolečka */
  --vipbox-scallop-gap: 6px;   /* rovná mezera mezi kolečky */
}

/* Titulek modulu (Zobrazit nadpis: Ano) – jen mechanika, vzhled řeší utility třídy */
.mod-vipbox .vipbox-title {
  margin: 0 0 clamp(12px, 1.4vw, 20px);
}

/* Volitelný tmavý rám kolem karty (aubergine) */
.mod-vipbox--framed {
  background: var(--vipbox-ink);
  border-radius: calc(var(--vipbox-radius) + 8px);
  padding: clamp(16px, 1.8vw, 22px);
}

/* Zlatá karta */
.mod-vipbox .vipbox-card {
  position: relative;
  background: var(--vipbox-gold);
  border-radius: var(--vipbox-radius);
  padding: clamp(24px, 3.4vw, 48px);
}

/* Vroubkovaný okraj – zlaté půlkruhy (kolečko 8×8 px) nahoře a dole.
   Kolečka se NEdotýkají – mezi nimi je rovná mezera (--vipbox-scallop-gap).
   Vodorovně odsazené o poloměr rohu, aby se do zaoblených rohů netlačil
   zlomený oblouček. */
.mod-vipbox .vipbox-card--scallop::before,
.mod-vipbox .vipbox-card--scallop::after {
  content: "";
  position: absolute;
  left: var(--vipbox-radius);
  right: var(--vipbox-radius);
  height: calc(var(--vipbox-scallop-d) / 2);
  background-repeat: repeat-x;
  background-size: calc(var(--vipbox-scallop-d) + var(--vipbox-scallop-gap)) 100%;
  background-position: center;
  pointer-events: none;
}
.mod-vipbox .vipbox-card--scallop::before {
  top: calc(-1 * var(--vipbox-scallop-d) / 2 + 0.5px);
  background-image: radial-gradient(
    calc(var(--vipbox-scallop-d) / 2) at 50% 100%,
    var(--vipbox-gold) 99%, transparent 100%
  );
}
.mod-vipbox .vipbox-card--scallop::after {
  bottom: calc(-1 * var(--vipbox-scallop-d) / 2 + 0.5px);
  background-image: radial-gradient(
    calc(var(--vipbox-scallop-d) / 2) at 50% 0,
    var(--vipbox-gold) 99%, transparent 100%
  );
}

/* Řádek */
.mod-vipbox .vipbox-row {
  position: relative;
  z-index: 2;
  column-gap: 0;
}

/* ---------- Obsahový sloupec ---------- */
.mod-vipbox .vipbox-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(8px, 1.2vw, 20px) clamp(12px, 1.6vw, 28px);
}

.mod-vipbox .vipbox-emblem {
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.mod-vipbox .vipbox-emblem img {
  display: block;
  width: clamp(40px, 4vw, 52px);
  height: auto;
}

.mod-vipbox .vipbox-heading {
  font-family: var(--ff-head, "Swear Display", "Times New Roman", Georgia, serif);
  font-weight: 700;
  color: var(--vipbox-ink);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.mod-vipbox .vipbox-text {
  color: color-mix(in srgb, var(--vipbox-ink) 82%, transparent);
  font-size: var(--typo-c1-fs, 14px);
  line-height: var(--typo-c1-lh, 22px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 46ch;
  margin-bottom: clamp(22px, 2.8vw, 36px);
}
.mod-vipbox .vipbox-text p { margin: 0 0 0.5rem; }
.mod-vipbox .vipbox-text p:last-child { margin-bottom: 0; }

/* Tlačítko – čisté, plné (bez vroubků / čárkovaného lemu) */
.mod-vipbox .vipbox-actions { margin-top: auto; }
.mod-vipbox .vipbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--vipbox-ink);
  color: var(--vipbox-cream);
  border: 1px solid transparent;
  border-radius: var(--radius-btn, 8px);
  padding: 14px 26px;
  min-height: 44px;
  font-family: var(--ff-body, "Inter Tight", system-ui, sans-serif);
  font-size: var(--typo-btn-fs, 12px);
  line-height: var(--typo-btn-lh, 20px);
  font-weight: var(--typo-w-ui, 500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mod-vipbox .vipbox-btn:hover,
.mod-vipbox .vipbox-btn:focus-visible {
  background: var(--vipbox-ink-hover);
  color: var(--vipbox-cream);
  outline: none;
}

/* ---------- Obrázkový sloupec ---------- */
.mod-vipbox .vipbox-media {
  height: 100%;
  min-height: clamp(240px, 30vw, 360px);
}
.mod-vipbox .vipbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--vipbox-radius-img);
}

/* ---------- Responsivita ---------- */
@media (max-width: 991.98px) {
  .mod-vipbox .vipbox-content { padding-bottom: clamp(24px, 4vw, 32px); }
  .mod-vipbox .vipbox-media { min-height: clamp(200px, 56vw, 320px); }
  /* na mobilu fotka pod obsahem bez ohledu na volbu left/right */
  .mod-vipbox .vipbox-col-media { order: 2 !important; }
  .mod-vipbox .vipbox-col-content { order: 1 !important; }
}

@media (max-width: 575.98px) {
  .mod-vipbox--framed { padding: 12px; }
  .mod-vipbox .vipbox-card { padding: 20px; }
  .mod-vipbox .vipbox-btn { width: 100%; }
}