/**
 * HCDSB Chaplaincy Messages — front end
 *
 * Breakpoints match Kadence and the child theme: mobile <=767, tablet
 * 768-1024, desktop above. The three banner heights arrive as custom
 * properties on .hcdsb-ch__banner (set inline by PHP, since they are
 * settings); this file owns the media queries that choose between them.
 *
 * Colours reuse the child theme's --sk-* skin tokens where they exist, so a
 * chaplaincy page picks up each school's palette automatically. The fallbacks
 * are the board blue, for the case where a site has no palette block yet.
 */

.hcdsb-ch {
  --hcdsb-ch-accent: var(--sk-primary, #1b365d);
  --hcdsb-ch-rule: rgba(27, 54, 93, 0.12);
}

/* ---------- Banner ---------- */

/*
 * A background rather than an <img>, because background-repeat and a colour
 * behind the image have no <img> equivalent — object-fit has no tiling mode.
 *
 * Every value here arrives as a custom property set inline by PHP and
 * whitelisted server-side. The rules stay in this file so they are cached once
 * instead of repeated in the markup of every request.
 *
 * --hcdsb-ch-focal doubles as background-position: the keyword pairs are
 * identical between object-position and background-position, so one setting
 * drives both the old and new implementations.
 */
.hcdsb-ch__banner {
  margin: 0 0 2rem;
  height: var(--hcdsb-ch-h-d, 320px);
  background-color: var(--hcdsb-ch-bg, transparent);
  background-image: var(--hcdsb-ch-img, none);
  background-size: var(--hcdsb-ch-size, cover);
  background-repeat: var(--hcdsb-ch-repeat, no-repeat);
  background-position: var(--hcdsb-ch-focal, center center);
}

@media (max-width: 1024px) {
  .hcdsb-ch__banner {
    height: var(--hcdsb-ch-h-t, 240px);
  }
}

@media (max-width: 767px) {
  .hcdsb-ch__banner {
    height: var(--hcdsb-ch-h-m, 180px);
  }
}

/*
 * REMOVED: the .hcdsb-ch__banner--bleed viewport breakout, and the
 * overflow-x: clip that went with it.
 *
 * The banner used to sit inside a boxed .container and try to escape with
 * width:100vw; margin-left:calc(50% - 50vw). It never worked, and the reason
 * was the clip: overflow-x on .hcdsb-ch cut the breakout off at the very
 * element it needed to escape, so the banner stayed pinned to 1170px while
 * appearing to have full-bleed rules applied.
 *
 * The page is now forced full width and the BODY is constrained instead, so
 * the banner needs no breakout at all — it simply fills the canvas it is given.
 * Constraining the banner is now the special case, and it is done with a
 * container in the markup rather than viewport arithmetic here.
 */

/* ---------- Body ---------- */

.hcdsb-ch__intro {
  margin-bottom: 1.75rem;
}

.hcdsb-ch__date {
  margin: 0 0 0.25rem;
  color: #555;
  font-size: 0.9375rem;
}

.hcdsb-ch__title {
  margin: 0 0 1.25rem;
  color: var(--hcdsb-ch-accent);
}

.hcdsb-ch__thumb {
  margin: 0 0 1.5rem;
}

.hcdsb-ch__thumb img {
  max-width: 100%;
  height: auto;
}

.hcdsb-ch__empty {
  padding: 2rem 0;
  color: #555;
}

/* ---------- Previous messages ---------- */

.hcdsb-ch__previous {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hcdsb-ch-rule);
}

.hcdsb-ch__previous-heading {
  margin: 0 0 1rem;
  color: var(--hcdsb-ch-accent);
  font-size: 1.25rem;
}

.hcdsb-ch__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hcdsb-ch__item + .hcdsb-ch__item {
  border-top: 1px solid var(--hcdsb-ch-rule);
}

.hcdsb-ch__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.85rem 0;
  text-decoration: none;
}

.hcdsb-ch__link:hover .hcdsb-ch__item-title,
.hcdsb-ch__link:focus-visible .hcdsb-ch__item-title {
  text-decoration: underline;
}

.hcdsb-ch__item-title {
  color: var(--hcdsb-ch-accent);
  font-weight: 600;
}

.hcdsb-ch__item-date {
  color: #666;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ---------- Load more ---------- */

.hcdsb-ch__more-wrap {
  margin: 1.5rem 0 0;
}

.hcdsb-ch__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 1em;
  border: 1px solid #ffffff;
  border-radius: 12px;
  background: #005bc2;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.hcdsb-ch__more:hover,
.hcdsb-ch__more:focus-visible {
  background: var(--global-palette-btn-bg-hover, #0044b5);
  color: #ffffff;
}

.hcdsb-ch__more[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Shortcode output ---------- */

/* .hcdsb-ch__button and .hcdsb-ch-updated are styled in the CHILD THEME
 * (style.css section 6), not here. Both shortcodes are used on home page
 * heroes, and this stylesheet is only enqueued on the Chaplaincy page — styling
 * them here would leave them unstyled everywhere they are actually used. */

@media (prefers-reduced-motion: reduce) {
  .hcdsb-ch__more {
    transition: none;
  }
}