/**
 * is-style-apply-band : Apply Now full-bleed section rhythm.
 *
 * Mirrors .apply-additional in sass/pages/apply-now/_sections.sass:
 *   padding: 144px 0;  // 80px 0 below 1024px
 */

.wp-block-group.is-style-apply-band {
  padding-top: 144px;
  padding-bottom: 144px;
}

/* Any alignfull group inside .entry-content escapes the content
   width cap so its background spans viewport-edge to viewport-edge.
   The apply-band variant above just adds extra padding; this rule
   gives every full-bleed group the escape. Editor-canvas excluded —
   Gutenberg handles alignfull there; mixing in the viewport calc
   shoves blocks off-axis. */
.entry-content .wp-block-group.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 1023px) {
  .wp-block-group.is-style-apply-band {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/**
 * is-style-apply-begin-bg : Begin Your Application section.
 * Textured photo background with a tan-tinted gradient overlay,
 * 144/80 padding rhythm, full-bleed escape, 842px inner cap on a
 * direct wp:columns child so cards line up to the design.
 */
.wp-block-group.is-style-apply-begin-bg {
  position: relative;
  padding: 144px 0 80px;
  background: #EFE9D9 url('../img/apply/begin-application.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* Viewport-edge escape only on the front end — Gutenberg already
   handles alignfull width in the editor canvas. */
.entry-content .wp-block-group.is-style-apply-begin-bg {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wp-block-group.is-style-apply-begin-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #FBFAF7, rgba(224, 211, 180, 0.67));
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}

.wp-block-group.is-style-apply-begin-bg > * {
  position: relative;
  z-index: 1;
}

.wp-block-group.is-style-apply-begin-bg > .wp-block-heading {
  text-align: center;
  margin-bottom: 56px;
  color: #1E1E1E;
}

.wp-block-group.is-style-apply-begin-bg > .wp-block-columns {
  max-width: 842px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1023px) {
  .wp-block-group.is-style-apply-begin-bg {
    padding: 80px 24px;
  }
}

/* ------------------------------------------------------------------
 * ACCENT PANEL PIECES
 *
 * These read the page's custom properties instead of hardcoding colors, so an
 * author drops a standard group and it takes the branch's color automatically.
 * Fallbacks keep them usable outside a themed page.
 *
 * is-style-vmi-accent-band : the colored header band above a panel body
 *   (Figma: accent fill + 5px #313132 rule, white centered Trajan title —
 *   the same treatment as the page title band).
 * is-style-vmi-panel       : the light panel body / side-rail fill.
 * ------------------------------------------------------------------ */

.wp-block-group.is-style-vmi-accent-band {
  background-color: var(--rotc-accent, #4F5872);
  border-bottom: 5px solid #313132;
  padding: 32px 48px;
}

.wp-block-group.is-style-vmi-accent-band .wp-block-heading {
  font-family: "Trajan Pro", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  margin: 0;
}

.wp-block-group.is-style-vmi-panel {
  background-color: var(--rotc-panel-bg, #EEEEEE);
  padding: 48px;
}

/*
 * The panel is narrower when it is used as a side rail (the Fast Facts column),
 * so Figma tightens its padding rather than letting 48px eat the column.
 */
.wp-block-column .wp-block-group.is-style-vmi-panel {
  padding: 32px 24px;
}

/*
 * Side-by-side cards must be equal height (Figma: the two cards fill the row).
 *
 * The COLUMNS already are equal - flexbox stretches them. It is the panel inside that
 * was not filling: the group is only as tall as its own content, so the shorter card
 * left a strip of page showing below its background.
 *
 * Fixed here rather than by painting the same colour onto the column, because the panel
 * fill is NOT a fixed grey - it is var(--rotc-panel-bg), which the branch drives (grey on
 * most pages, tan on Army). Colouring the column would hardcode one branch's value in a
 * second place, where it can drift from the first, and would put the author back in the
 * business of picking a hex. Letting the panel fill keeps one source of truth.
 *
 * Harmless outside a column: percentage heights resolve to auto against an auto-height
 * block parent, so a standalone panel is unaffected.
 */
.wp-block-column > .wp-block-group.is-style-vmi-panel {
  height: 100%;
}

/*
 * These two are CONTAINERS, so their own padding is what insets their content.
 *
 * A group defaults to WordPress's "constrained" layout, which caps every child at
 * the theme's 720px contentSize and centres it. Inside a 972px box that leaves a
 * 126px gutter on each side ON TOP of the padding, and the content floats in the
 * middle of the box. An author can switch it off per block ("Inner blocks use
 * content width"), but that is a setting they must remember on every panel and
 * band on every page — one miss and the page drifts.
 *
 * So state it once here, in the component: a panel's children fill the panel.
 * The block then renders correctly whichever way the layout toggle is left.
 */
.wp-block-group.is-style-vmi-panel.is-layout-constrained > *,
.wp-block-group.is-style-vmi-accent-band.is-layout-constrained > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}