/* Praha Tattoo — statická kopie Wix webu */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',sans-serif;font-weight:200;color:#000;background:#fff;font-size:18px;line-height:1.6}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}

/* Header */
.top{position:absolute;top:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.55);backdrop-filter:blur(2px)}
.topin{display:flex;flex-direction:column;align-items:flex-end;padding-top:18px;padding-bottom:10px}
.logo{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;font-weight:200;font-size:28px;line-height:1.15}
.logo span{background:#000;color:#fff;padding:0 8px;margin-bottom:3px}
nav ul{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:4px}
nav a{display:block;text-decoration:none;padding:4px 14px;font-size:17px;font-weight:200;white-space:nowrap}
nav a:hover,nav a.active{background:#000;color:#fff}
.has-sub{position:relative}
.sub{display:none!important;position:absolute;top:100%;left:0;background:#fff;flex-direction:column;min-width:200px;box-shadow:0 4px 14px rgba(0,0,0,.12);margin:0!important;padding:4px 0!important}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex!important}
.burger{display:none;position:absolute;top:18px;left:20px;font-size:30px;background:none;border:0;cursor:pointer}

/* Hero */
.hero{position:relative;height:560px;overflow:hidden;display:flex;align-items:flex-end}
.hero-home{height:780px;align-items:center;justify-content:center}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero h1{position:relative;margin:0;font-weight:200;font-size:71px;line-height:1.25;color:#fff;text-align:center}
.hero h1 span{background:#000;padding:0 18px;display:inline-block;margin:6px 0}
.hero-in{position:relative;width:100%;max-width:980px;margin:0 auto 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 20px 0 0}
.hero-in h1{font-size:52px;text-align:left}
.hero-in h1 span{padding:4px 20px;margin:0}

/* Buttons */
.btn{display:inline-block;background:#000;color:#fff;text-decoration:none;padding:10px 26px;font-weight:300;font-size:16px;border:1px solid #000;cursor:pointer;font-family:inherit;transition:.2s}
.btn:hover{background:#fff;color:#000}
.btn-hero{background:#fff;color:#000;border-color:#fff}
.btn-hero:hover{background:#000;color:#fff}
.btn.ghost{background:#fff;color:#000;padding:6px 16px;font-size:15px}
.btn.ghost:hover{background:#000;color:#fff}

/* Text */
.intro{padding:50px 20px 10px;text-align:center}
.intro.bold p{font-weight:600;font-size:20px}
.text{padding:30px 20px}
.text h2{font-weight:200;font-size:40px;margin:40px 0 10px;line-height:1.2}
.text h3.big{font-weight:200;font-size:32px;line-height:1.3}
.center{text-align:center}
ul.plain{list-style:none;padding:0;margin:10px 0}
ul.plain li{padding:2px 0}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:30px 20px 60px}
.feats h3{font-weight:300;font-size:24px;margin:0 0 8px}
.feats h3 a{text-decoration:none;border-bottom:1px solid #000}
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:20px 20px 40px}
.places h3{font-weight:300;font-size:24px;line-height:1.3;margin:0 0 6px}
.prices{list-style:none;padding:0;margin:10px 0 30px;max-width:640px}
.prices li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ddd;padding:8px 0}
.prices b{font-weight:600;white-space:nowrap}
.subnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:10px 20px 20px}
.gdpr{padding-top:200px;min-height:60vh}
.gdpr h1{font-weight:200;font-size:52px}
.map iframe{width:100%;height:380px;border:0;margin:20px 0 40px;filter:grayscale(1)}

/* Gallery */
.gallery{padding:20px 20px 60px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid figure{margin:0;aspect-ratio:3/4;overflow:hidden}
.grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;cursor:zoom-in}
.grid img:hover{transform:scale(1.04)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:100;cursor:zoom-out}
.lightbox img{max-width:92vw;max-height:92vh}

/* Placeholder (obrázek zatím chybí) */
.missing{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#e4e4e4 0 14px,#d9d9d9 14px 28px);color:#666;font-size:13px;font-weight:300;text-align:center;padding:8px;word-break:break-all}
.grid .missing{width:100%;height:100%}
.hero .missing{position:absolute;inset:0;font-size:16px;align-items:flex-start;padding-top:160px;background:repeating-linear-gradient(45deg,#3a3a3a 0 20px,#333 20px 40px);color:#aaa}

/* Footer */
footer{background:#000;color:#fff;padding:60px 0 20px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
footer h2{font-weight:200;font-size:36px;margin:0 0 20px}
footer p{margin:14px 0 6px}
footer .btn{background:#fff;color:#000;border-color:#fff;padding:6px 20px;font-size:15px}
footer .btn:hover{background:#000;color:#fff}
form input,form textarea{width:100%;display:block;margin:0 0 12px;padding:10px 12px;font-family:inherit;font-weight:300;font-size:16px;border:1px solid #fff;background:#000;color:#fff}
form input::placeholder,form textarea::placeholder{color:#bbb}
.hp{display:none}
.note{font-size:14px;color:#ccc}
.copy{margin-top:40px;font-size:13px;color:#999;text-align:center}
.copy a{color:#999}

/* Mobile */
@media (max-width:800px){
 body{font-size:16px}
 .top{position:relative;background:#fff}
 .burger{display:block}
 nav{display:none;width:100%}
 body.menu-open nav{display:block}
 nav ul{flex-direction:column;align-items:stretch;gap:0}
 nav a{padding:10px 4px;font-size:18px;text-align:right}
 .sub{display:flex!important;position:static;box-shadow:none;padding:0 0 0 0!important}
 .sub a{font-size:15px;color:#555}
 .hero{height:360px}
 .hero-home{height:420px}
 .hero h1{font-size:34px}
 .hero-in{flex-direction:column;align-items:flex-start;padding:0;margin-bottom:20px}
 .hero-in h1{font-size:30px}
 .hero-in .btn-hero{margin-left:20px}
 .hero .missing{padding-top:40px}
 .feats,.places,.fgrid{grid-template-columns:1fr}
 .grid{grid-template-columns:repeat(2,1fr)}
 .text h2{font-size:30px}
 .gdpr{padding-top:40px}
}