/* Latest page: News is a list of closed items (date + title); the + circle opens
   one (Maria, 2026-10-02). Native <details>, so it works without JavaScript. The
   circle uses the "Get in touch" blue so it stands out. */
.news-summary { list-style: none; cursor: pointer; }
.news-summary::-webkit-details-marker { display: none; }
.news-toggle {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #06638F; color: #06638F; background: transparent;
}
/* The + is two bars; the upright one goes when the item is open, leaving −. */
.news-toggle::before, .news-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%);
}
.news-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > .news-summary .news-toggle::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .news-summary:hover .news-toggle { background: #06638F; color: #FCFAF6; }
}
.news-summary:focus-visible { outline: 2px solid #06638F; outline-offset: 4px; border-radius: 4px; }

/* Phones: date above the title, the circle on the right, text full width. */
@media (max-width: 760px) {
  .news-summary { grid-template-columns: minmax(0px, 1fr) auto !important; gap: 12px 20px !important; }
  .news-summary > h3 { grid-row: 2; }
  .news-summary > .news-toggle { grid-row: 1 / 3; grid-column: 2; }
  .news-body { padding-left: 0px !important; }
}

/* News images open larger in the lightbox (js/lightbox.js) when clicked. */
.news-zoom { display: block; max-width: 560px; cursor: zoom-in; border-radius: 12px; }