:root{
  --bg0:#111318;
  --bg1:#171a22;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);

  --border:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.22);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius: 1.25rem;

  /* Fejtábla háttérkép (cserélhető saját képre) */
  --plaque-bg: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1800&q=70");
}

body{
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(900px 520px at 85% 18%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  min-height:100vh;
}

.muted{ color: var(--muted); }

.nav-quiet{
  background:rgba(20,22,28,.55);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.navbar .nav-link{ color:rgba(255,255,255,.78)!important; }
.navbar .nav-link:hover{ color:rgba(255,255,255,.95)!important; }

/* ===== PLAQUE / FEJTÁBLA ===== */
.plaque{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.72)),
    var(--plaque-bg) center/cover no-repeat;
  min-height:clamp(460px,72vh,760px);
}

.plaque::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(1200px 700px at 50% 110%, rgba(0,0,0,.45), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.62));
  pointer-events:none;
}

.plaque > *{ position:relative; z-index:1; }

/* Ornamentek (FIX – ne kerüljenek a flow-ba) */
.ornament{
  position:absolute;
  width:120px;
  height:120px;
  opacity:.60;
  pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.ornament.tl{ top:14px; left:14px; transform:rotate(-2deg); }
.ornament.tr{ top:14px; right:14px; transform:scaleX(-1) rotate(-2deg); }

.stone-panel{
  background:rgba(20,22,28,.52);
  border:1px solid var(--border-strong);
  border-radius:1.25rem;
  box-shadow:0 14px 46px rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}

.portrait{
  width:160px;
  height:190px;
  object-fit:cover;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  background:rgba(255,255,255,.08);
}

.name{
  font-weight:800;
  letter-spacing:.01em;
  font-size:clamp(1.75rem,3.3vw,2.6rem);
  margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

.dates{
  color:rgba(255,255,255,.82);
  letter-spacing:.06em;
  font-size:1.05rem;
  margin-top:.35rem;
}

.quote{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);
  font-size:1.02rem;
  line-height:1.65;
  width: 100%;
}

/* ===== Oldalsó tributes ===== */
.side-tributes{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.tcard{
  border:1px solid var(--border-strong);
  background:rgba(15,17,22,.45);
  border-radius:1rem;
  padding:.9rem;
}

.ticon{
  width:44px;
  height:44px;
  border-radius:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  font-size:22px;
}

.btn-quiet{
  border:1px solid var(--border-strong);
  background:rgba(25,28,36,.55);
  color:var(--text);
}
.btn-quiet:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  color:var(--text);
}
.btn-primary-quiet{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  color:var(--text);
}
.btn-primary-quiet:hover{
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.34);
  color:var(--text);
}

/* ===== Név szerinti, darabonkénti lista (gyertya/virág) ===== */
.tribute-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  max-height: 290px;
  overflow:auto;
  padding-right: .25rem;
}

.tribute-item{
  display:flex;
  gap:.6rem;
  align-items:center;
  padding:.5rem .55rem;
  border-radius:.85rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}

.candle-icon, .flower-icon{
  font-size:18px;
  opacity:.88;
  width: 22px;
  text-align:center;
  flex: 0 0 auto;
}

.tribute-meta{
  line-height:1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.tribute-name{
  font-size:.92rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tribute-date{
  font-size:.76rem;
  color:rgba(255,255,255,.58);
  margin-top:.15rem;
}

.tribute-exp{
  font-size:.72rem;
  color:rgba(255,255,255,.45);
  margin-top:.12rem;
}

/* ===== Alsó panelek ===== */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.node{
  border:1px solid var(--border);
  background:rgba(15,17,22,.42);
  border-radius:1rem;
  padding:.9rem;
  height:100%;
}

/* ===== Modal ===== */
.modal-content{
  background:
    linear-gradient(
      180deg,
      rgba(25,28,36,.96),
      rgba(18,20,26,.96)
    );
  border:1px solid rgba(255,255,255,.14);
}

.modal-header, .modal-footer{ border-color:rgba(255,255,255,.12)!important; }

.form-control, textarea{
  background:rgba(18,20,26,.55)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--text)!important;
}
.form-control::placeholder, textarea::placeholder{ color:rgba(255,255,255,.45); }

.modal-content .form-control,
.modal-content textarea{
  background: rgba(10,12,18,.95) !important;
}


/* Scrollbar finomítás (nem kötelező) */
.tribute-list::-webkit-scrollbar{ width:10px; }
.tribute-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
}
.tribute-list::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); border-radius: 999px; }
.tribute-meta .muted.small{
  font-style: italic;
  opacity: .9;
}
.modal-backdrop.show{
  opacity: .75 !important;
  background-color: #000;
}
/* Mobil overflow fixek */
.name{
  overflow-wrap:anywhere;   /* hosszú vezetéknév/tördelés */
  word-break:break-word;
}

.dates{
  overflow-wrap:anywhere;
  word-break:break-word;
  letter-spacing:.04em;     /* kicsit kisebb, hogy ne tolja szét */
}

/* Portré ne kényszerítsen két oszlopot mobilon */
/* Mobil: kép ne nőjön túl, és ne legyen kétoszlopos kilógás */
@media (max-width: 991.98px){ /* lg alatt minden mobil/tablet */
  .portrait{
    width: 100%;
    max-width: 260px;     /* ez fogja meg, hogy ne legyen óriási */
    height: 320px;        /* maradjon "portré" érzet */
    object-fit: cover;
    margin-left: auto;    /* középre */
    margin-right: auto;
    display: block;
  }
}
.name, .dates{
  overflow-wrap: anywhere;
  word-break: break-word;
}