/* =========================================================
   PRINCIPAL'S MESSAGE PAGE — page-specific only.
   Loaded solely by principal-message.php via $pageExtraCss.
   Same layout pattern as founder-message.css / director-message.css.
   ========================================================= */

.pm-section{ padding:72px 0; }

.pm-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:48px;
  align-items:start;
}

/* ---- Portrait card ---- */
.pm-portrait{ position:sticky; top:100px; }
.pm-portrait-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
}
.pm-portrait-img{
  display:block; width:100%; aspect-ratio:4/5;
  object-fit:cover; background:var(--green-100);
}
.pm-portrait-body{
  padding:22px 20px; text-align:center;
  border-top:1px solid var(--line);
}
.pm-portrait-body h2{
  font-size:1.05rem; font-weight:800; color:var(--green-900); margin:0;
}
.pm-portrait-body span{
  display:block; margin-top:6px;
  font-size:.82rem; font-weight:600; color:var(--ink-soft);
  line-height:1.5;
}

/* ---- Message copy ---- */
.pm-content{ max-width:760px; }
.pm-content p{
  margin:0 0 22px;
  font-size:1rem; line-height:1.85; color:var(--ink-soft);
}
.pm-content p:last-child{ margin-bottom:0; }

.pm-quote{
  margin:32px 0;
  padding:26px 28px;
  border-left:4px solid var(--gold-500);
  background:var(--green-100);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.55;
  color:var(--green-900);
}

@media (max-width:900px){
  .pm-grid{ grid-template-columns:1fr; gap:32px; }
  .pm-portrait{ position:static; max-width:280px; margin:0 auto; }
}
@media (max-width:560px){
  .pm-section{ padding:48px 0; }
  .pm-quote{ padding:20px 20px; font-size:1.05rem; }
}