/* St. Xavier's Technical Institute — Director's Message
   Flat burgundy background · all other colours follow it · Poppins + Bebas Neue */
.xt-dr{
  --bg:#8B1E2D;            /* background (brand Deep Burgundy) */
  --on-bg:#fff;            /* text on the background */
  --accent:#F4B942;        /* Warm Gold: used for accents on the background */
  --deep:#6B1623;          /* darker burgundy for shapes */
  width:100%;padding:80px 20px;background:var(--bg);color:var(--on-bg);
  font:400 1.05rem/1.8 'Poppins','Segoe UI',Arial,sans-serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.xt-dr,.xt-dr *,.xt-dr *::before,.xt-dr *::after{box-sizing:border-box}
:where(.xt-dr) :is(h2,p,figure){margin:0}

.xt-dr-in{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:76px;align-items:center;max-width:1100px;margin:0 auto}

/* ---------- photo ---------- */
.xt-dr-fig{position:relative;margin:0 0 34px 18px}
.xt-dr-fig::before{content:'';position:absolute;left:-18px;bottom:-18px;width:78%;height:78%;border-radius:20px;background:var(--accent);transform-origin:left bottom;transition:transform .8s ease .2s}
.xt-dr-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:var(--deep)}
.xt-dr-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.xt-dr-plate{position:absolute;left:18px;right:18px;bottom:-26px;display:flex;flex-direction:column;gap:2px;padding:12px 18px 12px 16px;background:#fff;color:var(--bg);border-radius:12px;border-left:5px solid var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.xt-dr-name{font:400 1.5rem/1.1 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.xt-dr-role{color:#444;font:500 .85rem/1.3 'Poppins',sans-serif}

/* ---------- text ---------- */
.xt-dr-eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font:500 .95rem/1 'Poppins',sans-serif}
.xt-dr-eyebrow span{width:40px;height:2px;background:var(--accent)}
.xt-dr-title{margin-top:12px;font:400 clamp(2.2rem,4.4vw,3.2rem)/1.05 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.xt-dr-body{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.4)}
.xt-dr-body p{font-family:'Poppins','Segoe UI',Arial,sans-serif;font-weight:400;text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.xt-dr-body p+p{margin-top:14px}
.xt-dr-body strong{font-weight:600}
.xt-dr-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;min-height:48px;padding:10px 26px;border-radius:8px;background:var(--accent);color:var(--bg);font:600 .95rem 'Poppins',sans-serif;text-decoration:none;transition:background .25s,color .25s,opacity .7s ease,transform .7s ease}
.xt-dr-btn span{display:inline-block;transition:transform .25s}
.xt-dr-btn:hover{background:#fff}
.xt-dr-btn:hover span{transform:translateX(5px)}
.xt-dr :focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- scroll reveal (only when JS is on) ---------- */
.xt-dr--js .xt-dr-rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.xt-dr--js .xt-dr-rv--l{transform:translateX(-28px)}
.xt-dr--js .xt-dr-rv--r{transform:translateX(28px)}
.xt-dr--js .xt-dr-fig::before{transform:scale(.5)}
.xt-dr--js.is-in .xt-dr-rv{opacity:1;transform:none}
.xt-dr--js.is-in .xt-dr-fig::before{transform:none}
.xt-dr--js .xt-dr-btn.xt-dr-rv{transition:background .25s,color .25s,opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .xt-dr{padding:56px 18px}
  .xt-dr-in{grid-template-columns:minmax(0,1fr);gap:58px}
  .xt-dr-fig{width:min(100%,360px);margin:0 auto 34px;left:9px}   /* left:9px balances the gold block that sticks out on the left */
  .xt-dr--js .xt-dr-rv--l,.xt-dr--js .xt-dr-rv--r{transform:translateY(24px)}
}
@media (max-width:560px){
  .xt-dr{padding:42px 14px}
  .xt-dr-fig{width:min(100%,320px)}
  .xt-dr-plate{left:12px;right:12px}
  .xt-dr-name{font-size:1.3rem}
  .xt-dr-body{font-size:.97rem}
  .xt-dr-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .xt-dr--js .xt-dr-rv,.xt-dr--js .xt-dr-fig::before{opacity:1;transform:none;transition:none}
  .xt-dr-btn,.xt-dr-btn span{transition:none}
}