/* ============================================================
   wallbox.css — layout specifický pro /wallbox/ (v barvách webu,
   ne aplikace — viz app-preview.css pro obsah náhledů).
   ============================================================ */

.page-hero{text-align:center; padding:26px 24px 40px; background:radial-gradient(ellipse 780px 340px at 50% 0%, rgba(56,189,248,0.10), transparent 65%);}
.page-h1{font-family:'Orbitron',sans-serif; font-weight:900; font-size:2.4rem; margin:8px 0 12px; color:var(--text);}
.page-lead{max-width:600px; margin:0 auto; color:var(--text-dim); font-size:1rem; line-height:1.6;}

section.sec{padding:44px 24px;}

.feat-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.feat-card{background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:19px; display:flex; flex-direction:column; gap:9px;}
.feat-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(56,189,248,0.10); color:var(--blue);}
.feat-icon svg{width:17px; height:17px;}
.feat-title{font-weight:700; font-size:0.92rem;}
.feat-desc{color:var(--text-dim); font-size:0.81rem; line-height:1.5; margin:0;}

.gal-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch;}
.bcard{background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.bcard-bar{height:29px; background:#0d1420; display:flex; align-items:center; gap:6px; padding:0 11px; border-bottom:1px solid var(--panel-border); flex-shrink:0;}
.bdot{width:6px; height:6px; border-radius:50%; background:#3f3f46;}
.burl{margin-left:7px; font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:var(--text-mute); background:#0a0f18; padding:2px 8px; border-radius:5px;}
/* Otisk skutečné stránky - iframe s reálným HTML/CSS zařízení
   (wallbox/previews/*.html), jen zmenšený (transform:scale), NE oříznutý -
   výška rámečku se dopočítá podle skutečné výšky stránky (viz i18n.js,
   zpráva "falconHeight" od preview-lang.js), takže je vidět CELÁ obrazovka. */
.bcard-frame{position:relative; overflow:hidden; background:#0f172a; height:200px; flex:1 0 auto;}
.bcard-frame iframe{position:absolute; top:0; left:0; width:400px; height:800px; border:0;
  transform:scale(0.88); transform-origin:top left; pointer-events:none;}
.bcard-label{padding:9px 14px; font-size:0.72rem; color:var(--text-mute); font-weight:600; border-top:1px solid var(--panel-border); flex-shrink:0;}

.price-card{width:100%; max-width:440px; margin:0 auto; background:var(--panel); border:1px solid rgba(56,189,248,0.3); border-radius:16px; padding:28px 32px; text-align:center;
  box-shadow:0 0 0 1px rgba(56,189,248,0.08), 0 30px 60px -30px rgba(56,189,248,0.3);}
.price-icon{width:40px; height:40px; margin:0 auto 12px; border-radius:12px; background:rgba(234,179,8,0.12); color:var(--yellow); display:flex; align-items:center; justify-content:center;}
.price-icon svg{width:21px; height:21px;}
.price-title{font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.05rem; margin-bottom:6px;}
.price-value{font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.05rem; margin:8px 0 4px; color:var(--blue);}
.price-note{color:var(--text-mute); font-size:0.76rem; margin-bottom:18px;}
.price-list{list-style:none; margin:0 0 20px; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px;}
.price-list li{display:flex; gap:9px; font-size:0.83rem; color:var(--text-dim); align-items:flex-start;}
.price-list svg{width:14px; height:14px; color:#10b981; flex-shrink:0; margin-top:2px;}
.price-cta{width:100%; background:var(--blue); color:#04121a; border:none; font-weight:700; font-size:0.87rem; padding:12px; border-radius:10px; cursor:pointer;}
.price-mail{margin-top:28px; font-size:0.74rem; color:var(--text-mute);}
.price-mail a{color:var(--text-mute);}
.price-mail a:hover{color:var(--cyan);}

@media (max-width:900px){
  .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .gal-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width:640px){
  .page-h1{font-size:1.9rem;}
  section.sec{padding:32px 16px;}
  .feat-grid{grid-template-columns:1fr;}
  .gal-grid{grid-template-columns:1fr;}
  .price-card{padding:22px 18px;}
}