/* Components added for the CMS-driven pages: news listing, article shell,
   calendar grid, and small utility classes not present in style.css. */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line, #e3e4e6);
  background: #fff;
  color: var(--ink, #10161f);
  font-weight: 600;
}

.btn-ghost:hover {
  border-color: var(--ink, #10161f);
  transform: translateY(-2px);
}

.row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .feature-card,
.page-calendar .feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-news .feature-card h3 {
  margin: 0;
  font: 600 1.35rem/1.15 var(--serif, Georgia, serif);
}

.page-news .feature-card p {
  margin: 0;
  color: #5e646b;
}

.page-news .feature-card small,
.page-news .feature-card time {
  color: #8a9099;
}

.page-news .feature-card .image-placeholder,
.page-news > .wrap > img,
.page-news article > .wrap > img {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 6px;
  background: #ececed;
}

.page-news article > .wrap > img {
  width: 100%;
  display: block;
  margin-bottom: 26px;
}

.page-news .feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.empty {
  display: block;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--line, #e3e4e6);
  border-radius: 8px;
  color: #5e646b;
}

.empty[hidden] {
  display: none;
}

.empty strong {
  display: block;
  font: 600 1.25rem/1.2 var(--serif, Georgia, serif);
  color: var(--ink, #10161f);
  margin-bottom: 6px;
}

.timeline-item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line, #e3e4e6);
}

.timeline-item time {
  flex: 0 0 132px;
  font-weight: 700;
  color: var(--blue, #3c448c);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding-top: 4px;
}

.timeline-item h3 {
  margin: 0 0 4px;
  font: 600 1.2rem/1.2 var(--serif, Georgia, serif);
}

.timeline-item p {
  margin: 0 0 4px;
  color: #5e646b;
}

.timeline-item small {
  color: #8a9099;
}

/* ------------------------------------------------------------- home page news
   The homepage "Latest news" block reuses the exact card markup of the news
   listing page, so it is scoped here with the same rules to keep the two
   designs identical. */

.home-news .feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-news .feature-card h3 {
  margin: 0;
  font: 600 1.35rem/1.15 var(--serif, Georgia, serif);
}

.home-news .feature-card h3 a {
  text-decoration: none;
}

.home-news .feature-card h3 a:hover {
  color: var(--brick, #b14e47);
}

.home-news .feature-card p {
  margin: 0;
  color: #5e646b;
}

.home-news .feature-card small,
.home-news .feature-card time {
  color: #8a9099;
}

.home-news .feature-card .image-placeholder {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 6px;
  background: #ececed;
}

.home-news .feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-news .feature-card .tag {
  align-self: flex-start;
}

.home-news-link {
  margin-top: 26px;
}

/* ------------------------------------------------------------ footer variants
   The original footer used three columns. Pages carrying the fuller sitemap use
   a four-column layout so every major destination has a home; both variants sit
   on the same tokens so the footer reads as one design. */

.footer-grid-4 {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}

@media (max-width: 900px) {
  .footer-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------- article images
   The office can place images between paragraphs of a news article or event
   body, choose how wide each one is and which side it sits on, and group
   several into a gallery. paragraphsToHtml() emits .body-image and
   .body-gallery; the size and alignment classes come from an allow-list on the
   server, so a body can only ask for the options offered in the admin. */

.body-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  border-radius: 6px;
  background: #ececed;
}

.body-image.is-quarter {
  width: 25%;
}

.body-image.is-half {
  width: 50%;
}

.body-image.is-three-quarter {
  width: 75%;
}

.body-image.is-full {
  width: 100%;
}

.body-image.is-left {
  margin-left: 0;
  margin-right: auto;
}

.body-image.is-right {
  margin-left: auto;
  margin-right: 0;
}

/* A lone image in a narrow column would be unreadable on a phone. */
@media (max-width: 700px) {
  .body-image.is-quarter,
  .body-image.is-half,
  .body-image.is-three-quarter {
    width: 100%;
  }
}

.body-gallery {
  display: grid;
  gap: 14px;
  margin: 26px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.body-gallery .body-image {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  margin: 0;
}

/* A single image would look odd as a grid, so let it run the full width. */
.body-gallery:has(> .body-image:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
  .body-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- comments
   Threads on an article. Top-level comments carry an avatar; replies are
   indented and marked with a rule so the level is obvious at a glance.

   style.css is minified and only defines the core palette, so the few extra
   tokens used here are scoped to the component rather than added globally. */

.comments,
.comment-form {
  --tint: #e9eaef;
  --line-strong: rgba(9, 16, 26, 0.22);
  --muted: #616770;
  --panel: #fff;
  --radius: 6px;
  --ok: #1c7a4a;
  --bad: #b4342a;
}

.comments {
  margin-top: 8px;
}

.comments-title {
  font-size: 1.35rem;
  margin-bottom: 18px;
}

.comment-list,
.comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list > .comment-item + .comment-item {
  border-top: 1px solid var(--line);
}

.comment-item {
  display: flex;
  gap: 13px;
  padding: 16px 0;
}

.comment-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.comment-main {
  min-width: 0;
  flex: 1;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.comment-meta b {
  font-size: 0.95rem;
}

.comment-meta time {
  font-size: 0.76rem;
  color: var(--muted);
}

.comment-body {
  margin: 6px 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.comment-reply-btn {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.comment-reply-btn:hover {
  text-decoration: underline;
}

.comment-replies {
  margin: 14px 0 0 51px;
  padding-left: 16px;
  border-left: 2px solid var(--tint);
}

.comment-replies .comment-avatar {
  width: 30px;
  height: 30px;
  font-size: 0.72rem;
}

.comment-empty {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.comment-form {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.comment-form h3 {
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.comment-form .hint {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.comment-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.comment-form input,
.comment-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  text-transform: none;
  letter-spacing: normal;
}

.comment-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(60, 68, 140, 0.15);
}

.comment-form .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.comment-status {
  font-size: 0.84rem;
}

.comment-status.is-ok {
  color: var(--ok);
}

.comment-status.is-err {
  color: var(--bad);
}

.comment-form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Bot trap. Hidden from people, reachable by scripts that fill every input. */
.comment-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .comment-replies {
    margin-left: 0;
  }

  .comment-form {
    padding: 16px;
  }
}

/* ------------------------------------------------------------------ calendar */

.cal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cal-title {
  margin: 0;
  min-width: 15ch;
  text-align: center;
  font: 600 clamp(1.6rem, 3vw, 2.3rem)/1 var(--serif, Georgia, serif);
}

.cal-nav,
.cal-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #e3e4e6);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink, #10161f);
  background: #fff;
}

.cal-nav:hover,
.cal-today:hover {
  border-color: var(--ink, #10161f);
}

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line, #e3e4e6);
  border: 1px solid var(--line, #e3e4e6);
  border-radius: 8px;
  overflow: hidden;
}

.cal-week {
  background: #fff;
}

.cal-week span {
  padding: 10px 6px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9099;
}

.cal-cell {
  background: #fff;
  min-height: 104px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-cell.is-dim {
  background: #f7f7f8;
}

.cal-cell.is-dim .cal-day {
  color: #b9bcc1;
}

.cal-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--blue, #3c448c);
}

.cal-day {
  font-weight: 700;
  font-size: 0.85rem;
  color: #5e646b;
}

.cal-event {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 3px 6px;
  border-radius: 4px;
  background: #ececed;
  color: var(--ink, #10161f);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-event:hover {
  background: #dcdde1;
}

.cal-event.is-featured {
  background: var(--blue, #3c448c);
  color: #fff;
}

.cal-more {
  font-size: 0.68rem;
  color: #8a9099;
}

@media (max-width: 720px) {
  .cal-cell {
    min-height: 74px;
  }

  .cal-event {
    display: none;
  }

  .timeline-item {
    flex-direction: column;
    gap: 4px;
  }
}