/* =====================================================================
   sp-message.css — SP Message section (home page)
   Save as: assets/css/sp-message.css
   NOTE: classes are prefixed "spm-" so they cannot clash with other CSS files.
   ===================================================================== */
.spm { --n:#14213d; --b:#1f4e9c; --g:#c9a227; --t:#344054; }
@keyframes spmIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.spm-card { position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); overflow:hidden;
  background:#fff; border:1px solid #e3e8f0; border-radius:20px; box-shadow:0 8px 26px rgba(15,30,60,.09);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; animation:spmIn .6s cubic-bezier(.2,.7,.2,1) both; }
.spm-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(15,30,60,.17); }

/* ---- left: photo + name + designation (light panel, dark text = always readable) ---- */
.spm-side { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:34px 22px; text-align:center; background-color:#f3f6fb; background-image:linear-gradient(180deg,#eef3fb,#ffffff);
  border-right:1px solid #e3e8f0; border-top:5px solid var(--g); }
.spm-frame { display:block; width:170px; height:170px; border-radius:50%; overflow:hidden; background:#e9eef6;
  border:5px solid #fff; box-shadow:0 0 0 4px var(--g), 0 12px 28px rgba(15,30,60,.25);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.spm-frame img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.spm-card:hover .spm-frame { transform:scale(1.04); box-shadow:0 0 0 4px var(--g), 0 0 0 11px rgba(201,162,39,.25), 0 16px 34px rgba(15,30,60,.3); }
.spm-card:hover .spm-frame img { transform:scale(1.08); }
.spm-av { width:100%; height:100%; display:grid; place-items:center; font-size:64px; font-weight:700; color:#fff; background:var(--b); }

.spm-id { display:flex; flex-direction:column; gap:5px; }
.spm-name { display:block; font-size:1.2rem; font-weight:700; line-height:1.35; color:var(--n); }
.spm-des  { display:block; font-size:.98rem; font-weight:600; color:var(--b); }
.spm-org  { display:block; font-size:.82rem; color:#667085; }

/* ---- right: full message ---- */
.spm-body { position:relative; display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:38px 42px 30px 46px; background:linear-gradient(180deg,#fffdf6,#fff 60%); }
.spm-body::before { content:""; position:absolute; left:0; top:28px; bottom:28px; width:5px; border-radius:0 5px 5px 0; background:linear-gradient(var(--g),#e8cf72); }
.spm-q { position:absolute; top:4px; left:30px; font:110px/1 Georgia,"Times New Roman",serif; color:rgba(201,162,39,.28); pointer-events:none; user-select:none; transition:transform .4s ease, color .4s ease; }
.spm-card:hover .spm-q { transform:scale(1.12) rotate(-4deg); color:rgba(201,162,39,.45); }
.spm-text { position:relative; margin:14px 0 0; font-size:1.1rem; line-height:1.85; color:var(--t); overflow-wrap:anywhere; }

.spm-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; border-top:1px dashed #d5deec; }
.spm-sign { font-weight:700; color:var(--n); }
.spm-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--b); background:#fff; border:2px solid var(--b); transition:transform .2s, box-shadow .2s, background .2s, color .2s; }
.spm-btn:hover { background:var(--b); color:#fff; transform:translateY(-2px); box-shadow:0 10px 20px rgba(31,78,156,.3); }

@media (max-width:860px){
  .spm-card { grid-template-columns:1fr; }
  .spm-side { flex-direction:row; justify-content:flex-start; text-align:left; gap:18px; padding:22px; border-right:0; border-bottom:1px solid #e3e8f0; }
  .spm-frame { width:104px; height:104px; flex:none; border-width:4px; }
  .spm-body { padding:30px 22px 22px 28px; }
  .spm-q { left:18px; font-size:90px; }
  .spm-text { font-size:1.02rem; line-height:1.75; }
}
@media (max-width:480px){ .spm-side{flex-direction:column;text-align:center} .spm-foot{flex-direction:column;align-items:flex-start} }
@media (hover:none){ .spm-card:hover{transform:none} }
@media (prefers-reduced-motion:reduce){ .spm-card,.spm-frame,.spm-frame img,.spm-q,.spm-btn{transition:none!important;animation:none!important} }