/* =====================================================================
   "Picture of Jesus" modal — shown after marking Lessons 1-5 complete.
   Relies on the brand tokens defined in css/shared.css (loaded first).
   ===================================================================== */

body.modal-open{overflow:hidden;}

.picture-modal-overlay{
  position:fixed; inset:0; z-index:1000; padding:24px;
  background:rgba(1,34,52,.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; overflow-y:auto;
  animation:pm-fade .18s ease;
}
@keyframes pm-fade{ from{opacity:0;} to{opacity:1;} }

.picture-modal{
  position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:40px 36px 34px; animation:pm-rise .22s var(--ease);
}
.picture-modal--final{max-width:600px;}
@keyframes pm-rise{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }

.pm-x{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:var(--panel-tint); color:var(--gray-azure); border:0; cursor:pointer;
  font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.pm-x:hover{background:var(--light-azure); color:var(--dark-azure);}

.pm-tag{
  font-family:'League Spartan'; font-size:.72rem; color:var(--gold-deep); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;
}
.picture-modal h2{font-size:1.5rem; font-weight:800; color:var(--dark-azure); margin-bottom:14px;}
.pm-lede{color:var(--muted); font-size:1rem; line-height:1.65; font-weight:300;}

.pm-card{
  margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--off-white);
}
.pm-said{font-family:'League Spartan'; font-weight:700; color:var(--dark-azure); font-size:1.02rem; line-height:1.4;}
.pm-said::before{content:"\201C";}
.pm-said::after{content:"\201D";}
.pm-cap{margin-top:6px; font-size:.8rem; color:var(--gray-azure); font-weight:500;}
.pm-empty{margin-top:16px; color:var(--muted); font-size:.94rem; font-style:italic; line-height:1.6;}

.pm-grow{margin-top:20px; color:var(--gray-azure); font-size:.88rem; font-weight:300; line-height:1.6;}

.picture-modal > .btn{margin-top:24px; width:100%; justify-content:center;}

.pm-scripture{
  background:var(--light-azure); border-radius:12px; padding:18px 20px;
  color:var(--dark-azure); font-size:.98rem; line-height:1.7; font-style:italic;
}
.pm-subhead{
  margin-top:26px; font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; color:var(--gray-azure);
}
.pm-said-row{
  display:flex; gap:14px; align-items:baseline; padding:12px 0; border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.pm-said-lbl{
  flex-shrink:0; min-width:110px; font-family:'League Spartan'; font-weight:700;
  color:var(--dark-azure); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em;
}
.pm-said-val{color:#2b4457; font-size:.98rem; line-height:1.5;}
.pm-said-row--empty .pm-said-val{color:#9fb0bc; font-style:italic;}

.pm-actions{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}
.pm-actions .btn{flex:1; justify-content:center; margin-top:0; min-width:180px;}

@media (max-width:520px){
  .picture-modal{padding:32px 22px 26px;}
  .pm-said-lbl{min-width:100%;}
}