/* St. Xavier's Technical Institute — Announcements (compact two-panel)
   Headings: Bebas Neue · Body: Poppins · lighter red + yellow */
.xt-an{
  --red:#8B1E2D;--red2:#7A1826;--ink:#fff;--y:#F5C842;--yd:#7A1515;
  width:100%;padding:22px 14px;background:#FFF9EC;color:#2b1414;
  font:400 .8rem/1.45 'Poppins','Segoe UI',Arial,sans-serif;
}
:where(.xt-an),:where(.xt-an) *,:where(.xt-an) *::before,:where(.xt-an) *::after{box-sizing:border-box}
:where(.xt-an) :is(h2,h3,p,ul,li){margin:0;padding:0}
:where(.xt-an) ul{list-style:none}
:where(.xt-an) a{color:inherit;text-decoration:none}
.xt-an :focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 5px var(--yd)}
.xt-an-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.xt-an-main-title{max-width:1200px;margin:0 auto 14px;text-align:center;color:var(--red);font:400 clamp(2rem,4.5vw,2.8rem)/1.05 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.xt-an-main-title::after{content:'';display:block;width:64px;height:4px;margin:8px auto 0;border-radius:4px;background:var(--y)}
.xt-an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1200px;margin:0 auto}
.xt-an-box{display:flex;flex-direction:column;gap:10px;padding:14px 14px 14px;border-radius:18px;box-shadow:0 10px 24px rgba(120,20,20,.16)}

/* heading: condensed caps with a side bar */
.xt-an-h{padding-left:10px;border-left:4px solid;font:400 1.7rem/1.05 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}

.xt-an-panel{padding:6px;border-radius:12px}
.xt-an-vp{position:relative;height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 6%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 92%,transparent)}
.xt-an-list{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 0 6px;will-change:transform}

.xt-an-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;transition:background .2s}
.xt-an-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px}
.xt-an-ic svg{width:17px;height:17px}
.xt-an-dt{display:flex;flex-direction:column;align-items:center;justify-content:center;width:38px;padding:4px 0 3px;border-radius:9px;line-height:1}
.xt-an-dt b{font:500 .95rem 'Poppins',sans-serif}
.xt-an-dt small{margin-top:1px;font:500 .55rem 'Poppins',sans-serif;letter-spacing:.08em}
.xt-an-tx{font:500 .8rem/1.4 'Poppins',sans-serif;text-wrap:pretty}
.xt-an-act svg{display:block;width:15px;height:15px;opacity:.85}

/* panel A — red background, white notices */
.xt-an-box--a{color:#fff;background:linear-gradient(160deg,#C63434,#A92424)}
.xt-an-box--a .xt-an-h{border-color:var(--y)}
.xt-an-box--a .xt-an-panel{background:rgba(255,255,255,.12)}
.xt-an-box--a .xt-an-card{background:#fff;color:#3a0f15}
.xt-an-box--a .xt-an-card:hover{background:#FFF4CC}
.xt-an-box--a .xt-an-act{color:var(--red)}
.xt-an-box--a .xt-an-ic{background:var(--red);color:var(--y)}

/* panel B — yellow */
.xt-an-box--x{color:#4a1111;background:linear-gradient(160deg,#FBD965,#F0BF38)}
.xt-an-box--x .xt-an-h{border-color:var(--red)}
.xt-an-box--x .xt-an-panel{background:rgba(255,255,255,.35)}
.xt-an-box--x .xt-an-card{background:#fff}
.xt-an-box--x .xt-an-card:hover{background:#FFF4CC}
.xt-an-box--x .xt-an-dt{background:var(--red);color:#fff}
.xt-an-box--x .xt-an-dt small{color:var(--y)}
.xt-an-box--x .xt-an-act{color:var(--red)}

@media (max-width:900px){
  .xt-an-main-title{max-width:1200px;margin:0 auto 14px;text-align:center;color:var(--red);font:400 clamp(2rem,4.5vw,2.8rem)/1.05 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.xt-an-main-title::after{content:'';display:block;width:64px;height:4px;margin:8px auto 0;border-radius:4px;background:var(--y)}
.xt-an-grid{grid-template-columns:minmax(0,1fr)}
  .xt-an-vp{height:280px}
}
@media (max-width:560px){
  .xt-an{padding:16px 8px}
  .xt-an-box{padding:12px;border-radius:16px}
  .xt-an-h{font-size:1.5rem}
  .xt-an-main-title{margin-bottom:10px}
  .xt-an-vp{height:min(50vh,280px)}
  .xt-an-tx{font-size:.78rem}
}