/*
 * Trinity Pages — STRUCTURE only. Typography is left to the site's global
 * styles (Montserrat, 16px/1.4, #404040, h1-h6, .headline, .subheading,
 * .button-yellow) so a page built here is indistinguishable from an
 * Oxygen-built one.
 *
 * Every value below is lifted from the site's page template — Board of
 * Ministry (uploads/oxygen/css/239.css), which the old Oxygen EOY page was
 * duplicated from — and the global .hero rule. The .cta-panel document rows
 * are copied verbatim from the code block on page 239, where they only exist
 * inline; scoped under .tg-page so they cannot fight that copy if both ever
 * meet on one page.
 */

.tg-page *,
.tg-page *::before,
.tg-page *::after {
  box-sizing: border-box;
}
.tg-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The site's content width, same 20px gutter as an Oxygen section. */
.tg-page__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- HERO (global .hero: 55vh; template caps 768/480) ----------
   The site header is absolutely positioned over the top of the page, so the
   photo starts at the top and runs under it. */
.tg-page__hero {
  position: relative;
  height: 55vh;
  overflow: hidden;
  background: #005a99;
}
.tg-page .tg-page__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- TITLE BAND (#section-4-239 / #headline-5-239) ---------- */
.tg-page__titleband {
  background-color: #006db6;
  color: #ffffff;
}
.tg-page__titleband .tg-page__wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}
.tg-page .tg-page__title {
  margin: 0;
  font-size: 3em;
  font-weight: 600;
  color: #ffffff;
}

/* ---------- SECTIONS ----------
   Intro = template's #section-7-239 (75px top, measured on page 239).
   Submit = template's gray action section #section-242-239 (#f9f9fa, 75/85). */
.tg-page__section--intro .tg-page__wrap {
  padding-top: 75px;
  padding-bottom: 75px;
}
.tg-page__section--submit {
  background-color: #f9f9fa;
}
.tg-page__section--submit .tg-page__wrap {
  padding-top: 75px;
  padding-bottom: 85px;
}
.tg-page .headline {
  margin: 0 0 12px;          /* template: text block sits 12px under the headline */
}
/* Verse attribution: the template's italic caption (#text_block-85-239),
   in the lockup's dark blue so it reads as part of the verse, not the body. */
.tg-page .tg-page__attribution {
  margin: 0 0 24px;
  font-style: italic;
  font-size: 1.1em;
  color: #004073;
}
.tg-page .tg-page__submit {
  margin-top: 12px;          /* template's action section: #link_button-248-239 */
}
.tg-page .tg-page__contact {
  margin-top: 1.5em;
}

/* ---------- ICON LOCKUP (#div_block-29-239 / #fancy_icon-30-239 / #headline-31-239) ----------
   The template's device for a key callout: gold-ringed circular icon beside a
   dark-blue .subheading. Here it carries the deadline. */
.tg-page .tg-page__lockup {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
  margin: 32px 0;
}
.tg-page .tg-page__lockup-icon {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid #dfa425;
  padding: 12px;
  color: #004073;
}
.tg-page .tg-page__lockup-icon > svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}
.tg-page .tg-page__lockup-body {
  display: flex;
  flex-direction: column;
  gap: 5px;                  /* #div_block-259-239 */
}
.tg-page .tg-page__lockup-title {
  margin: 0;
  color: #004073;
  font-weight: 600;
}
.tg-page .tg-page__lockup-body p {
  margin: 0;
}

/* ---------- DOCUMENT ROWS (copied from page 239's code block) ---------- */
.tg-page .cta-panel * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.tg-page .cta-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
.tg-page .cta-panel a.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f2f2f3;
  border-radius: 16px;
  padding: 28px 32px;
  text-decoration: none;
  color: #0a1f44;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.tg-page .cta-panel a.cta-box:hover {
  background: #e8e8ea;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(10, 31, 68, 0.08);
}
.tg-page .cta-box__label {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #0a1f44;
  flex: 1;
  padding-right: 24px;
}
.tg-page .cta-box__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tg-page .cta-panel a.cta-box:hover .cta-box__arrow {
  transform: translateX(8px);
}
.tg-page .cta-box__arrow svg {
  width: 26px;
  height: 26px;
}

/* ---------- BREAKPOINTS (same as the template) ---------- */
@media (max-width: 1200px) {
  .tg-page__hero { max-height: 768px; }
  .tg-page__titleband .tg-page__wrap,
  .tg-page__section--intro .tg-page__wrap,
  .tg-page__section--submit .tg-page__wrap { padding-left: 30px; padding-right: 30px; }
  .tg-page .tg-page__title { font-size: 2.5em; }
}
@media (max-width: 991px) {
  .tg-page .tg-page__title { font-size: 2.2em; }
}
@media (max-width: 768px) {
  .tg-page .cta-panel a.cta-box { padding: 24px 26px; }
  .tg-page .cta-box__label { font-size: 18px; }
}
@media (max-width: 767px) {
  .tg-page__hero { max-height: 480px; }
  .tg-page__section--intro .tg-page__wrap { padding-top: 57px; }
  /* #div_block-29-239: the lockup stacks and centres on phones */
  .tg-page .tg-page__lockup { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .tg-page .cta-panel { gap: 10px; }
  .tg-page .cta-panel a.cta-box { padding: 22px 20px; }
  .tg-page .cta-box__label { font-size: 16px; padding-right: 16px; }
  .tg-page .cta-box__arrow svg { width: 22px; height: 22px; }
}
@media (max-width: 479px) {
  .tg-page__titleband { text-align: center; }
  .tg-page .tg-page__title { line-height: 1.1; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-page .cta-panel a.cta-box,
  .tg-page .cta-box__arrow { transition: none; }
  .tg-page .cta-panel a.cta-box:hover { transform: none; }
  .tg-page .cta-panel a.cta-box:hover .cta-box__arrow { transform: none; }
}