/* ============================================================
   Principal's Zone extras (MVSD-NEWSLETTERS-LANDING, 2026-09-30):
   a school bulletin's Issue Date under its title, and the quiet
   "All issues" link under the button (PDF / outside-link bulletins).
   Attached by mvsd-superintendent-spotlight.html.twig when either shows.
   ============================================================ */

.sup-spotlight__date {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted, #5a5a5a);
}

/* Same quiet weight as the date; colour + underline so it still reads as a
   link (two indicators). */
.sup-spotlight__more {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.sup-spotlight__more a {
  color: var(--color-text-muted, #5a5a5a);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sup-spotlight__more a:hover {
  color: var(--color-primary, #01491f);
}
.sup-spotlight__more a:focus-visible {
  outline: 3px solid var(--color-focus-ring, #0b5cad);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Photo / video layout (panels.css) places every element in a named grid
   area; the date needs an area of its own or it auto-places into a stray
   cell. An empty row collapses to zero height. The doubled class out-ranks
   panels.css, which loads after module CSS. */
.sup-spotlight.sup-spotlight--has-media {
  grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas:
    ".     eyebrow"
    "media title"
    "media date"
    "media body"
    "media cta"
    "media more"
    "media slack";
}
.sup-spotlight.sup-spotlight--has-media .sup-spotlight__date { grid-area: date; }
.sup-spotlight.sup-spotlight--has-media .sup-spotlight__more { grid-area: more; }

/* Phones: mirror panels.css's 600px single, centred column. */
@media (max-width: 600px) {
  .sup-spotlight.sup-spotlight--has-media {
    grid-template-rows: auto;
    grid-template-areas:
      "eyebrow"
      "title"
      "date"
      "media"
      "body"
      "cta"
      "more";
  }
}