/* BODY */

body{
margin:0;
font-family:Arial, sans-serif;
color:white;

background:
linear-gradient(
rgba(0,0,0,0.65),
rgba(0,0,0,0.9)
),
url("../img/bg.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}


/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:rgba(0,0,0,0.85);
}

.logo{
font-size:26px;
color:#f6b44b;
font-weight:bold;
}

nav a{
margin-left:20px;
color:white;
text-decoration:none;
}

nav a:hover{
color:#f6b44b;
}


/* MAIN */

main{
padding:40px 20px;
text-align:center;
}

section{
margin-bottom:40px;
}

.title{
margin-bottom:30px;
font-size:32px;
}


/* GRID HROBŮ */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}


/* KARTA HROBU */

.grave-card{
background:rgba(0,0,0,0.7);
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.7);
padding-bottom:20px;
transition:transform 0.2s;
text-align:center;
}

.grave-card:hover{
transform:translateY(-5px);
}


/* OBRÁZEK HROBU */

.grave-image{
position:relative;
}

.grave-img{
width:100%;
max-height:220px;
object-fit:cover;
display:block;
}


/* JMÉNO NA NÁHROBKU */

.grave-name{
position:absolute;
top:48%;
left:50%;
transform:translate(-50%, -50%);
text-align:center;
color:#eaeaea;

text-shadow:
0 3px 6px rgba(0,0,0,0.9),
0 0 12px rgba(0,0,0,0.9);
}

.grave-first{
font-size:20px;
}

.grave-last{
font-size:22px;
font-weight:bold;
}


/* TEXTY POD NÁHROBKEM */

.grave-card p{
color:#bbb;
margin:4px 0;
}

.years{
margin-top:6px;
color:#ddd;
}

.candle-count{
color:#f6b44b;
margin-top:6px;
font-size:14px;
}

.views{
font-size:13px;
color:#aaa;
}


/* BUTTON */

button,
.history-btn{

display:inline-block;

margin-top:12px;

padding:10px 22px;

border:none;

background:#f6a21b;

color:white;

border-radius:6px;

cursor:pointer;

text-decoration:none;

transition:background 0.2s, transform 0.15s;

}

button:hover,
.history-btn:hover{

background:#ffb640;

transform:translateY(-1px);

}


/* DETAIL HROBU */

.grave-detail{
text-align:center;
max-width:600px;
margin:auto;
padding:20px 20px 10px 20px;
}

.grave-detail h1{
margin-bottom:5px;
}

.description{
max-width:500px;
margin:15px auto;
color:#ccc;
}


/* FOTKA */

.grave-photo{
width:140px;
height:140px;
object-fit:cover;
border-radius:50%;
margin-bottom:15px;

border:4px solid #f6b44b;

box-shadow:0 0 18px rgba(255,200,100,0.3);
}


/* FORMULÁŘ */

.light-candle{
text-align:center;
padding:10px 20px;
}

.candle-form{
max-width:400px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;
}

.candle-form input,
.candle-form textarea{
padding:10px;
border-radius:6px;
border:none;
}

.candle-form textarea{
min-height:80px;
resize:vertical;
}


/* PIETNÍ BLOK SVÍČEK */

.candles-box{

max-width:900px;

margin:40px auto;

padding:35px;

background:rgba(0,0,0,0.55);

border:1px solid rgba(255,255,255,0.18);

border-radius:14px;

box-shadow:
0 10px 30px rgba(0,0,0,0.8),
inset 0 0 25px rgba(0,0,0,0.6);

}


/* NADPIS SVÍČEK */

.candles-title{
font-size:26px;
margin-bottom:5px;
}

.candles-subtitle{
color:#bbb;
font-size:14px;
margin-bottom:30px;
}


/* GRID SVÍČEK */

.candle-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}


/* KARTA SVÍČKY */

.candle-card{

background:rgba(0,0,0,0.55);

padding:20px;

border-radius:10px;

text-align:center;

transition:transform 0.2s;

}

.candle-card:hover{
transform:translateY(-4px);
}


/* SVÍČKA */

.candle{
width:40px;

filter:
drop-shadow(0 0 10px rgba(255,180,80,0.9))
drop-shadow(0 0 20px rgba(255,180,80,0.6));

margin-bottom:10px;
}


/* TEXT SVÍČKY */

.message{
margin-bottom:10px;
font-style:italic;
}

.author{
color:#f6b44b;
font-size:13px;
}

.date{
font-size:11px;
color:#aaa;
}


/* HISTORIE */

.candle-history{
margin-top:30px;
}


/* SEARCH */

.search-box{

width:100%;

display:flex;

justify-content:center;

margin-bottom:40px;

}

.search-box input{

width:420px;

max-width:90%;

padding:14px 18px;

border-radius:10px;

border:none;

font-size:16px;

background:rgba(0,0,0,0.8);

color:white;

outline:none;

box-shadow:
0 0 10px rgba(0,0,0,0.7),
inset 0 0 8px rgba(0,0,0,0.6);

}

.search-box input::placeholder{
color:#bbb;
}


/* FOOTER */

footer{
text-align:center;
padding:25px;
background:rgba(0,0,0,0.9);
margin-top:40px;
}


/* RESPONSIVE */

@media (max-width:700px){

.candle-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

.candle-grid{
grid-template-columns:1fr;
}


/* ADMIN LOGIN */

.admin-login{

max-width:420px;
margin:80px auto;

padding:30px;

background:rgba(0,0,0,0.7);

border-radius:12px;

border:1px solid rgba(255,255,255,0.15);

box-shadow:
0 10px 30px rgba(0,0,0,0.8),
inset 0 0 20px rgba(0,0,0,0.6);

}

.admin-login h2{

margin-bottom:20px;

}


/* ADMIN FORM */

.admin-form{

display:flex;
flex-direction:column;

gap:12px;

}

.admin-form input,
.admin-form textarea,
.admin-form select{

padding:10px;

border-radius:6px;

border:none;

background:#222;

color:white;

font-size:14px;

}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus{

outline:none;

box-shadow:0 0 8px rgba(246,180,75,0.6);

}


/* ADMIN BUTTON */

.admin-form button{

margin-top:10px;

padding:10px 20px;

border:none;

background:#f6a21b;

color:white;

border-radius:6px;

cursor:pointer;

transition:background 0.2s, transform 0.15s;

}

.admin-form button:hover{

background:#ffb640;

transform:translateY(-1px);

}


/* ADMIN LIST */

.admin-list{

max-width:900px;

margin:40px auto;

padding:30px;

background:rgba(0,0,0,0.6);

border-radius:12px;

border:1px solid rgba(255,255,255,0.15);

}

.admin-list ul{

list-style:none;
padding:0;

}

.admin-list li{

padding:10px;

border-bottom:1px solid rgba(255,255,255,0.08);

}

.admin-list li:last-child{

border:none;

}
/* GRID VZPOMÍNKOVÝCH MÍST */

.memorial-grid{

display:grid;

grid-template-columns:repeat(4, 1fr);

gap:25px;

max-width:1100px;

margin:auto;

}


/* KARTA */

.memorial-card{

background:rgba(0,0,0,0.65);

border-radius:12px;

padding:15px 10px;

text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,0.6);

}


/* OBRÁZEK */

.memorial-photo{

width:55px;

height:55px;

object-fit:cover;

border-radius:50%;

margin:0 auto 8px auto;

display:block;

border:2px solid #f6b44b;

}


/* NÁZEV */

.memorial-card h3{

font-size:15px;

margin:5px 0;

}


/* RESPONSIVE */

@media (max-width:900px){

.memorial-grid{
grid-template-columns:repeat(3, 1fr);
}

}

@media (max-width:600px){

.memorial-grid{
grid-template-columns:repeat(2, 1fr);
}

}