/* ==============================================================
   PTTA -- small additions to style.css / pages.css
   Announcements page: each <li> in content/announcements.html
   is shown as its own numbered card.
   ============================================================== */
.announce-list{ list-style:none; margin:0; padding:0; display:grid; gap:23px; counter-reset:ann; }
.announce-list > li{ counter-increment:ann; position:relative; margin:0; padding:32px; border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; scroll-margin-top:119px; font-size:16px; color:#5b6c83; line-height:1.8; }
.announce-list > li:first-child{ border-top:3px solid var(--blue); background:linear-gradient(140deg,#f5f8ff,#fff 70%); }
.announce-list > li::before{ content:counter(ann, decimal-leading-zero); display:block; font-size:12px; color:#567aaa; letter-spacing:.1em; font-weight:600; margin-bottom:12px; }
.announce-list > li > strong{ display:block; font-family:Manrope,sans-serif; font-size:27px; line-height:1.3; letter-spacing:-.025em; color:var(--ink); margin:0 0 18px; }
.announce-list a{ color:#1753c5; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.announce-list a:hover{ color:#09265a; }
.announce-list ul{ padding-left:22px; margin:14px 0 0; }
.announce-list ul li{ margin:10px 0; }
.announce-list ul li::marker{ color:#4074d6; }
@media (max-width:760px){
  .announce-list > li{ padding:24px; }
  .announce-list > li > strong{ font-size:23px; }
}

/* About page, sections 02 and 03: the whole card and every
   meeting date / Executive member respond to the mouse. */
.page-about #dates-title-panel,
.page-about #exec-title-panel{ transition:border-color .25s, box-shadow .25s, transform .25s; }
.page-about #dates-title-panel:hover,
.page-about #exec-title-panel:hover{ border-color:#b9ccf5; box-shadow:0 16px 40px rgba(24,47,79,.10); transform:translateY(-3px); }
.page-about .timeline li,
.page-about .exec li{ transition:transform .2s, box-shadow .2s, border-color .2s, background .2s; cursor:default; }
.page-about .timeline li:hover,
.page-about .exec li:hover{ transform:translateY(-3px); border-color:var(--blue); background:#fff; box-shadow:0 10px 24px rgba(24,91,255,.12); }
.page-about .timeline li:hover .when,
.page-about .exec li:hover .exec__name{ color:var(--blue); }
@media (prefers-reduced-motion:reduce){
  .page-about #dates-title-panel:hover, .page-about #exec-title-panel:hover,
  .page-about .timeline li:hover, .page-about .exec li:hover{ transform:none; }
}