/* ===== Frontend – mřížka karet + dialog (sjednocené barvy pro veterinární web) ===== */
#vet-praxe{
  --primary:#0B65D8;
  --red:#B71C1C;
  --ink:#0C1C3C;
  --muted:#667085;
  --card:#ffffff;
  --bg:#F7FAFF;
  --radius:16px;
  --shadow:0 10px 28px rgba(12,28,60,.10);
  --shadow-hov:0 16px 36px rgba(12,28,60,.16);
  --gap:22px;
}
#vet-praxe *{box-sizing:border-box}
#vet-praxe .vp-wrap{max-width:1200px;margin-inline:auto;padding:20px clamp(14px,3vw,24px) 28px}

#vet-praxe .vp-title{
  margin:0; display:flex; align-items:center; gap:12px;
  font:800 clamp(22px,3.2vw,32px)/1.15 'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--primary);
}
#vet-praxe .vp-title .cap{color:var(--red)}
#vet-praxe .vp-divider{height:2px;border-radius:999px;margin:10px 0 18px;background:linear-gradient(90deg,var(--red) 0%,rgba(11,101,216,.6) 45%,rgba(11,101,216,.15) 100%)}
#vet-praxe .vp-lead{margin:0 0 14px;color:var(--muted)}

#vet-praxe .vp-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(12,1fr)}
@media (max-width:899.98px){ #vet-praxe .vp-grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width:599.98px){ #vet-praxe .vp-grid{grid-template-columns:repeat(2,1fr)} }

#vet-praxe .vp-card{grid-column:span 3}
@media (max-width:899.98px){ #vet-praxe .vp-card{grid-column:span 3} }
@media (max-width:599.98px){ #vet-praxe .vp-card{grid-column:span 2} }

#vet-praxe .vp-card__inner{
  width:100%; display:block; text-align:left; cursor:pointer; background:var(--card); border:1px solid rgba(12,28,60,.08);
  border-radius:var(--radius); padding:10px; box-shadow:var(--shadow); transition:transform .14s ease, box-shadow .14s ease;
}
#vet-praxe .vp-card__inner:hover{ transform:translateY(-1px); box-shadow:var(--shadow-hov); }

#vet-praxe .vp-media{display:grid;place-items:center;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#fff;margin:0 0 10px}
#vet-praxe .vp-media img{display:block;width:100%;height:100%;object-fit:contain}
#vet-praxe .vp-media__ph{font-weight:600;color:var(--muted);opacity:.6}

#vet-praxe .vp-card__title{margin:0;font-weight:700;color:var(--ink);line-height:1.25;font-size:clamp(16px,1.6vw,18px)}
#vet-praxe .vp-card__sub{margin:.2em 0 0;color:var(--muted);font-size:.95em}

/* ───────── Dialog (okno + strop) ───────── */
#vet-praxe .vp-dialog{position:relative; z-index:0;}
#vet-praxe .vp-dialog[hidden]{display:none !important}

/* Výchozí strop pro případ, že JS neběží */
:root{ --vp-top: 2vh; }
/* značka v layoutu (vkládáš jako .vp-stop) */
.vp-stop{ height:0; margin:0; padding:0; }

#vet-praxe .vp-backdrop{
  position:fixed;
  inset: var(--vp-top, 2vh) 0 0 0;         /* nepřeleze header */
  background:rgba(12,28,60,.36);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .15s ease;
  z-index:2147483646;
}
#vet-praxe .vp-dialog.is-open .vp-backdrop{opacity:1}

#vet-praxe .vp-dialog__panel{
  position:fixed;
  inset: var(--vp-top, 2vh) 0 auto 0;      /* horní okraj = strop */
  margin:auto; max-width:min(980px,94vw);
  height: calc(100vh - var(--vp-top, 2vh) - 2vh);
  background:#fff; border-radius:18px; box-shadow:0 24px 64px rgba(12,28,60,.28);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(0); opacity:1; isolation:isolate;
  z-index:2147483647;
}
@media (max-width:699.98px){
  #vet-praxe .vp-dialog__panel{
    inset: var(--vp-top, 2vh) 0 0 0;
    height: calc(100vh - var(--vp-top, 2vh));
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
}

/* Hlavička */
#vet-praxe .vp-dialog__head{ padding:14px 16px 8px; flex:0 0 auto; }
#vet-praxe .vp-dialog__head h3{ margin:0; font:800 22px/1.2 'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; color:var(--ink) }
#vet-praxe .vp-dialog__sub{ margin:.3em 0 0; color:var(--muted) }

/* Obrázek – pružná výška + vertikální scroll, ať je vždy vidět celý */
#vet-praxe .vp-dialog__media{
  flex:1 1 auto; min-height:0;
  overflow:auto;
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0 16px 10px;
}
#vet-praxe .vp-dialog__media img{
  display:block; border-radius:14px;
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
}

/* Text */
#vet-praxe .vp-dialog__content{ flex:0 0 auto; padding:0 16px 18px; color:var(--ink) }
#vet-praxe .vp-dialog__content p{ margin:.6em 0; line-height:1.6 }

/* ───────── PILLOVÉ tlačítko × Zavřít (pravý spodní roh) ───────── */
/* Rezerva, aby tlačítko nepřekrývalo obsah */
#vet-praxe .vp-dialog__media{ padding-bottom:78px; }
#vet-praxe .vp-dialog__content{ padding-bottom:92px; }

/* samotné tlačítko – jen jako přímý potomek panelu, tím přepíšeme staré styly */
#vet-praxe .vp-dialog__panel > .vp-dialog__close{
  position:absolute;
  right:12px; bottom:12px;
  top:auto; left:auto;               /* jistota, že není přilepené nahoře */
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  width:auto; height:auto;
  border-radius:999px;
  appearance:none;
  background:#fff; color:var(--red);
  border:2px solid #fff;
  font-weight:700; font-size:16px; line-height:1;
  cursor:pointer; user-select:none;
  z-index:2;
  box-shadow:0 10px 26px rgba(12,28,60,.18);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#vet-praxe .vp-dialog__panel > .vp-dialog__close:hover,
#vet-praxe .vp-dialog__panel > .vp-dialog__close:focus{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(12,28,60,.28);
}
#vet-praxe .vp-dialog__panel > .vp-dialog__close span{
  font-size:20px; line-height:1; transform:translateY(-1px);
}
#vet-praxe .vp-dialog__panel > .vp-dialog__close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(183,28,28,.6);
}

/* ───────── Mobilní inline režim (rozbalení uvnitř karty) ───────── */
@media (max-width:699.98px){
  #vet-praxe .vp-dialog.is-inline .vp-backdrop{ display:none !important; }
  #vet-praxe .vp-dialog.is-inline .vp-dialog__panel{
    position:relative; inset:auto; width:100%; height:auto; max-height:none;
    border-radius:12px; box-shadow:var(--shadow); transform:none;
  }
  #vet-praxe .vp-dialog.is-inline .vp-dialog__media{ padding:0 10px 70px; }
  #vet-praxe .vp-dialog.is-inline .vp-dialog__content{
    padding:0 10px calc(80px + env(safe-area-inset-bottom,0px));
  }
  /* pilulka v rohu „karty“ */
  #vet-praxe .vp-dialog.is-inline .vp-dialog__panel > .vp-dialog__close{
    right:10px; bottom:10px;
    padding:10px 14px; font-size:15px;
    box-shadow:0 8px 22px rgba(12,28,60,.22);
  }
}

/* ───────── Stránkování ───────── */
#vet-praxe .vp-pagination{margin:20px 0 0}
#vet-praxe .vp-pagination ul{list-style:none;display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap}
#vet-praxe .vp-pagination a,#vet-praxe .vp-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:10px;padding:0 10px;
  text-decoration:none;color:var(--ink);background:#fff;border:1px solid rgba(12,28,60,.1)
}
#vet-praxe .vp-pagination .current{background:var(--primary);color:#fff;border-color:transparent}
#vet-praxe .vp-empty{color:var(--muted);margin:14px 0 0}

/* ==== Lepší práce s výškou viewportu (dvh) + sticky Close pro nízká okna ==== */

/* použij 100dvh, když je k dispozici; fallback je vlastní --vh z JS */
#vet-praxe .vp-dialog__panel{
  height: calc(var(--vh, 1vh) * 100 - var(--vp-top, 2vh) - 2vh);
}
@supports (height: 100dvh){
  #vet-praxe .vp-dialog__panel{
    height: calc(100dvh - var(--vp-top, 2vh) - 2vh);
  }
}

/* Když je okno nízké (tablet/mobil na šířku), nech panel celý scrollovat
   a "Zavřít" držet STICKY u spodního okraje panelu. */
@media (max-height: 640px){
  #vet-praxe .vp-dialog__panel{
    overflow:auto;                 /* posouvá se celý panel */
  }
  #vet-praxe .vp-dialog__panel > .vp-dialog__close{
    position: sticky;              /* drž se spodku panelu */
    margin-left:auto;
    bottom:12px;                   /* sticky offset */
    top:auto; left:auto; right:12px;
  }
  /* menší rezervy, ať se k tlačítku snadno dostane */
  #vet-praxe .vp-dialog__media{ padding-bottom:36px; }
  #vet-praxe .vp-dialog__content{ padding-bottom:56px; }
}

/* landscape režim – ještě o fous přísnější */
@media (orientation: landscape) and (max-height: 520px){
  #vet-praxe .vp-dialog__panel > .vp-dialog__close{ bottom:8px; }
  #vet-praxe .vp-dialog__media{ padding-bottom:28px; }
  #vet-praxe .vp-dialog__content{ padding-bottom:46px; }
}

/* --- Delší text: samostatný scroll v textové části + plynulé tažení na mobilu --- */

/* Obrázek necháme pevný blok; text dostane zbytek výšky a bude scrollovat */
#vet-praxe .vp-dialog__media{
  flex:0 0 auto;                 /* už neflexuje, nebere prostor textu */
  max-height:58vh;               /* když je obrázek vysoký, sám může scrollovat */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

#vet-praxe .vp-dialog__content{
  flex:1 1 auto;                 /* zabere zbytek panelu */
  min-height:0;                  /* umožní smrštění v nízkém okně */
  overflow:auto;                 /* ← vlastní posuvník pro dlouhý text */
  -webkit-overflow-scrolling: touch; /* plynulé tažení na iOS */
}

/* Pro opravdu nízká okna (tablet/mobil na šířku) dovolíme scroll i celému panelu
   a pilulku „Zavřít“ držíme sticky u spodu. */
@media (max-height: 640px){
  #vet-praxe .vp-dialog__panel{ overflow:auto; overscroll-behavior:contain; }
  #vet-praxe .vp-dialog__panel > .vp-dialog__close{
    position:sticky; bottom:12px; right:12px; margin-left:auto;
  }
  /* menší nárazník, ať je tlačítko rychle dosažitelné */
  #vet-praxe .vp-dialog__media{ padding-bottom:28px; }
  #vet-praxe .vp-dialog__content{ padding-bottom:44px; }
}

/* Když je v mobilním inline režimu otevřeno, skryj mini kartu */
#vet-praxe .vp-card.vp-inline-open > .vp-card__inner{
  display:none !important;
}