/* ============================================================
   CASE CARD + PORTAL — nejsložitější komponenta webu.
   Karta reference se „průhledem" do živého webu: rámeček,
   rohové značky, URL bublina, clona a náhledový snímek.
   Chování při najetí řídí js/components/portals.js.
   ============================================================ */

.case-card{
  position:relative;
  border:1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(182,255,60,.06), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
  isolation:isolate;
  display:grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  text-decoration:none; color:inherit;
  transition: transform .5s var(--ease-out), border-color .35s;
  min-height: 380px;
}
.case-card:hover{ border-color:var(--line-3); transform:translateY(-3px) }
.case-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; pointer-events:none; background: radial-gradient(70% 60% at 50% 0%, rgba(182,255,60,.10), transparent 60%); opacity:0; transition: opacity .5s var(--ease) }
.case-card:hover::before{ opacity:1 }

/* zrcadlově obrácená varianta (fotka vlevo) */
.case-card.alt{ grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) }
.case-card.alt .case-copy{ order:2; border-right:0; border-left:1px solid var(--line) }
.case-card.alt .portal{ order:1 }

@media (max-width: 920px){
  .case-card, .case-card.alt{ grid-template-columns:1fr; min-height:unset }
  .case-card .case-copy{ border-right:0; border-bottom:1px solid var(--line) }
  .case-card.alt .case-copy{ border-left:0; border-bottom:1px solid var(--line); order:1 }
  .case-card.alt .portal{ order:2 }
  .portal{ aspect-ratio: 16/10 }
}

/* ---- textová část ---- */
.case-copy{
  padding: clamp(22px, 2.6vw, 36px);
  display:flex; flex-direction:column; gap:12px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,18,20,.4), transparent);
}
.case-copy .meta{ font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.case-copy .meta .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line-2); border-radius:999px; background:rgba(15,18,20,.6); color:var(--ink-dim) }
.case-copy .meta .chip.live{ color:var(--accent); border-color:rgba(182,255,60,.35) }
.case-copy .meta .chip .d{ width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor }
.case-copy h3{ margin: 8px 0 6px; font-size: clamp(24px, 2.6vw, 34px); font-weight:500; letter-spacing:-.022em; color:var(--ink-2); line-height:1.1 }
.case-copy h3 .serif{ color:var(--accent) }
.case-copy .blurb{ color:var(--ink-dim); font-size:15.5px; line-height:1.65; max-width:48ch; margin:0 0 20px }
.case-copy .results{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; border-top:1px solid var(--line); padding-top:22px; margin-top:auto }
.case-copy .results .v{ font-family:"JetBrains Mono", monospace; font-size:22px; color:var(--accent); font-weight:500; letter-spacing:-.02em }
.case-copy .results .k{ font-family:"JetBrains Mono", monospace; font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; margin-top:6px }
.case-copy .open-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); transition: gap .3s var(--ease); min-height:32px }
.case-card:hover .open-link{ gap:14px }
.case-copy .open-link svg{ width:14px; height:14px }

/* ---- průhled ---- */
.portal{ position:relative; overflow:hidden; background: radial-gradient(80% 100% at 50% 0%, rgba(182,255,60,.08), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--bg-2)); isolation:isolate }
.portal::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%) }

/* rohové značky */
.portal .corner{ position:absolute; width:18px; height:18px; z-index:6; pointer-events:none; border-color: rgba(182,255,60,.45); transition: border-color .35s var(--ease), width .35s var(--ease), height .35s var(--ease) }
.portal .corner.tl{ top:14px; left:14px; border-top:1px solid; border-left:1px solid }
.portal .corner.tr{ top:14px; right:14px; border-top:1px solid; border-right:1px solid }
.portal .corner.bl{ bottom:14px; left:14px; border-bottom:1px solid; border-left:1px solid }
.portal .corner.br{ bottom:14px; right:14px; border-bottom:1px solid; border-right:1px solid }
.case-card:hover .portal .corner{ border-color: var(--accent); width:24px; height:24px }

/* rámeček s náhledem */
.portal .frame{
  position:absolute; inset:24px;
  border-radius:8px; overflow:hidden;
  background:#0c0e10; border:1px solid var(--line-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 20px 50px -20px rgba(0,0,0,.7);
  z-index:1;
}
.portal .frame img.preview-shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: top left;
  opacity:0;
  filter: saturate(.9) brightness(.85);
  transform: scale(1);
  transition: transform 1.1s var(--ease-out), opacity .8s var(--ease), filter .6s var(--ease);
  background:#0c0e10;
  border:0; pointer-events:none;
}
.portal .frame img.preview-shot.loaded{ opacity:.9 }
.case-card:hover .portal .frame img.preview-shot.loaded{
  opacity:1; filter: saturate(1) brightness(1); transform: scale(1.04);
}

/* podklad, než se náhled načte (nebo když se nenačte vůbec) */
.portal .static-cover{ position:absolute; inset:24px; border-radius:8px; z-index:0; background: radial-gradient(60% 70% at 30% 20%, rgba(182,255,60,.08), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--bg-2)); display:flex; align-items:center; justify-content:center; color:var(--mute-2); font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--line-2) }
.portal .static-cover .logo{ font-family:"Instrument Serif", serif; font-style:italic; font-size:42px; color:var(--ink-2); letter-spacing:-.02em }

/* clona se štítkem a tlačítkem */
.portal .shield{
  position:absolute; inset:24px; border-radius:8px; z-index:3; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:20px;
  background: radial-gradient(80% 80% at 50% 100%, rgba(7,9,10,0), rgba(7,9,10,.7) 70%, rgba(7,9,10,.95) 100%), linear-gradient(180deg, rgba(7,9,10,.55), rgba(7,9,10,.2));
  transition: background .5s var(--ease), opacity .5s var(--ease);
}
.case-card:hover .portal .shield{ background: radial-gradient(80% 80% at 50% 100%, rgba(7,9,10,0), rgba(7,9,10,.25) 70%, rgba(7,9,10,.55) 100%) }
.portal .shield .tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:rgba(7,9,10,.7); border:1px solid var(--line-2); backdrop-filter:blur(6px); font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim) }
.portal .shield .tag .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent) }
.portal .shield .open{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  background:var(--accent); color:#0a0a0a;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  box-shadow: 0 10px 28px -10px rgba(182,255,60,.55);
  opacity:0; transform:translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.case-card:hover .portal .shield .open{ opacity:1; transform:translateY(0) }
.portal .shield .open svg{ width:12px; height:12px }

/* URL bublina */
.portal .url{ position:absolute; top:34px; left:50%; transform:translateX(-50%); z-index:4; pointer-events:none; display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; background:rgba(7,9,10,.85); border:1px solid var(--line-2); font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:.12em; color:var(--ink-dim); opacity:0; transition: opacity .4s var(--ease) .1s }
.portal .url i{ width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent) }
.case-card:hover .portal .url{ opacity:1 }

/* dotyková zařízení nemají hover — ukaž ovládací prvky rovnou */
@media (hover: none){
  .portal .shield{ background: radial-gradient(80% 80% at 50% 100%, rgba(7,9,10,0), rgba(7,9,10,.45) 70%, rgba(7,9,10,.75) 100%) }
  .portal .shield .open{ opacity:1; transform:none }
}