/* Feature opening + Next Steps Cards v5 (2026-11-11: everything on one centre line; see the end). Was v4 (dev1). Carried over from the open-letter template for the Norwest 18 post.
   Loaded only on blog posts that use the "Feature opening" option or the [nw_next] block. */

/* 1. Top video at the template's width: 1160px, centred on the page (the article column is 900px).
   At >=1700px the article itself is nudged left (blog-single CSS), so the video is nudged back by the same amount
   to stay centred under the hero. Phones: edge to edge. */
.nw-blog-modern .nwbm-article .nwbm-fvideo {
  --nwbm-shift: 0px;
  position: relative;
  left: 50%;
  width: min(1160px, calc(100vw - 2 * clamp(24px, 5vw, 64px)));
  max-width: none;
  margin: 0 0 clamp(48px, 5vw, 72px);
  transform: translateX(calc(-50% + var(--nwbm-shift)));
  background: #231F20;
}
@media (min-width: 1700px) {
  .nw-blog-modern .nwbm-article .nwbm-fvideo { --nwbm-shift: min(72px, (100vw - 1700px) / 4 + 24px); }
}
.nw-blog-modern .nwbm-article .nwbm-fvideo iframe,
.nw-blog-modern .nwbm-article .nwbm-fvideo video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
}
@media (max-width: 767px) {
  .nw-blog-modern .nwbm-article .nwbm-fvideo { width: 100vw; margin-bottom: 40px; }
}

/* 2. First line: the template's opener (large DM Serif italic, teal) on the prose measure */
.nw-blog-modern .nwbm-article > p.nwbm-lede {
  font-family: var(--nw-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 2.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--nw-teal);
  margin-top: 0;
  margin-bottom: 1.1em;
  text-wrap: balance;
}
@media (max-width: 767px) {
  .nw-blog-modern .nwbm-article > p.nwbm-lede { font-size: 28px; }
}

/* 3. Next Steps Cards: the template's end cards, same width as the wide video */
.nw-blog-modern .nwbm-article .nw-b-next {
  --nwbm-shift: 0px;
  position: relative;
  left: 50%;
  width: min(1160px, calc(100vw - 2 * clamp(24px, 5vw, 64px)));
  margin: clamp(64px, 7vw, 104px) 0 0;
  transform: translateX(calc(-50% + var(--nwbm-shift)));
}
@media (min-width: 1700px) {
  .nw-blog-modern .nwbm-article .nw-b-next { --nwbm-shift: min(72px, (100vw - 1700px) / 4 + 24px); }
}
.nw-blog-modern .nw-b-next__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.nw-blog-modern .nw-b-next__grid--1 { grid-template-columns: minmax(0, 1fr); }
.nw-blog-modern .nwbm-article a.nw-b-next__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--nw-teal);
  color: var(--nw-cream);
  text-decoration: none !important;
  transition: background-color .35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nw-blog-modern .nwbm-article a.nw-b-next__card--2 { background: var(--nw-dark); }
.nw-blog-modern .nwbm-article a.nw-b-next__card:hover,
.nw-blog-modern .nwbm-article a.nw-b-next__card:focus-visible { background: var(--nw-deepteal); color: var(--nw-cream); outline: none; }
.nw-blog-modern .nw-b-next__title { font: 400 clamp(30px, 3vw, 42px)/1.08 var(--nw-serif); color: var(--nw-cream); }
.nw-blog-modern .nw-b-next__desc { max-width: 440px; margin-top: 16px; font: 400 15px/1.6 var(--nw-sans); color: rgba(230, 230, 219, 0.78); text-wrap: pretty; }
.nw-blog-modern .nw-b-next__arrow { margin-top: auto; padding-top: 32px; color: var(--nw-cream); }
.nw-blog-modern .nw-b-next__arrow svg { display: block; width: 44px; height: 14px; transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nw-blog-modern .nwbm-article a.nw-b-next__card:hover .nw-b-next__arrow svg,
.nw-blog-modern .nwbm-article a.nw-b-next__card:focus-visible .nw-b-next__arrow svg { transform: translateX(8px); }
@media (max-width: 767px) {
  .nw-blog-modern .nwbm-article .nw-b-next { left: 0; width: auto; transform: none; margin-top: 56px; }
  .nw-blog-modern .nw-b-next__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nw-blog-modern .nwbm-article a.nw-b-next__card { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-blog-modern .nwbm-article a.nw-b-next__card, .nw-blog-modern .nw-b-next__arrow svg { transition: none; }
}

/* v2: self-hosted top video = the open-letter template's player (poster + ring play button; click = sound + controls) */
.nw-blog-modern .nwbm-article .nwbm-fvideo--own video { object-fit: cover; background: #231F20; }
.nw-blog-modern .nwbm-fvideo__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; margin: 0; border: 0; border-radius: 0; padding: 0; cursor: pointer; color: #F9F9F6;
  background: linear-gradient(180deg, rgba(35, 31, 32, 0.05) 40%, rgba(35, 31, 32, 0.45));
  transition: background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nw-blog-modern .nwbm-fvideo__play:hover,
.nw-blog-modern .nwbm-fvideo__play:focus-visible {
  background: linear-gradient(180deg, rgba(35, 31, 32, 0.12) 30%, rgba(35, 31, 32, 0.55)); color: #F9F9F6; outline: none;
}
.nw-blog-modern .nwbm-fvideo__icon {
  width: 72px; height: 72px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31.25' fill='none' stroke='%23F9F9F6' stroke-opacity='0.85' stroke-width='1.5'/%3E%3Cpath d='M27 22.5 42.5 32 27 41.5z' fill='%23F9F9F6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nw-blog-modern .nwbm-fvideo__play:hover .nwbm-fvideo__icon { transform: scale(1.06); }
.nw-blog-modern .nwbm-fvideo__label { font: 400 12px/1 var(--nw-sans); letter-spacing: 3px; text-transform: uppercase; }
.nw-blog-modern .nwbm-fvideo.is-playing .nwbm-fvideo__play { display: none; }
@media (max-width: 767px) {
  .nw-blog-modern .nwbm-fvideo__icon { width: 56px; height: 56px; }
  .nw-blog-modern .nwbm-fvideo__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-blog-modern .nwbm-fvideo__play, .nw-blog-modern .nwbm-fvideo__icon { transition: none; }
}

/* v3: password screen for a password-protected blog post (templates/blog-gate.php) */
main.nwbm-gate {
  display: flex; align-items: center; justify-content: center; min-height: 72vh;
  padding: clamp(150px, 16vw, 210px) 24px clamp(96px, 10vw, 140px);
  background: var(--nw-bg, #E6E6DB);
}
.nwbm-gate__in { width: min(560px, 100%); }
.nwbm-gate__h { margin: 0 0 14px; font: 400 clamp(34px, 3.4vw, 46px)/1.1 var(--nw-serif); color: var(--nw-teal); text-wrap: balance; }
.nwbm-gate__p { margin: 0 0 28px; font: 400 16px/1.6 var(--nw-sans); color: var(--nw-body); }
.nwbm-gate__err { margin: -12px 0 20px; font: 500 15px/1.5 var(--nw-sans); color: #B23A2E; }
/* WordPress's own intro line is replaced by the heading above */
.nwbm-gate .post-password-form > p:not(:last-of-type) { display: none; }
.nwbm-gate .post-password-form p:last-of-type { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.nwbm-gate .post-password-form label { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; font: 400 14px/1.4 var(--nw-sans); color: var(--nw-muted); }
.nwbm-gate .post-password-form input[type="password"] {
  box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--nw-hair, #C9C9BB); border-radius: 0;
  background: #F9F9F6; color: var(--nw-dark); font: 400 16px/1 var(--nw-sans); box-shadow: none;
}
.nwbm-gate .post-password-form input[type="password"]:focus { outline: 2px solid var(--nw-teal); outline-offset: 0; border-color: var(--nw-teal); }
.nwbm-gate .post-password-form input[type="submit"] {
  flex: 0 0 auto; height: 52px; margin: 0; padding: 0 30px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--nw-teal); color: #F9F9F6; font: 400 13px/1 var(--nw-sans); letter-spacing: 3px; text-transform: uppercase;
  transition: background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nwbm-gate .post-password-form input[type="submit"]:hover,
.nwbm-gate .post-password-form input[type="submit"]:focus-visible { background: var(--nw-deepteal); outline: none; }
@media (max-width: 767px) {
  main.nwbm-gate { align-items: flex-start; min-height: 0; padding-top: 140px; }
  .nwbm-gate .post-password-form p:last-of-type { flex-direction: column; align-items: stretch; }
  .nwbm-gate .post-password-form input[type="submit"] { width: 100%; }
}

/* v4: play button contrast. The control sits bottom-left on a solid dark square, so it reads on light frames (the
   video's light grey title cards) and dark ones, and it no longer covers the centred title text. The whole video is
   still the click target. Square corners, no blur. */
.nw-blog-modern .nwbm-fvideo__play,
.nw-blog-modern .nwbm-fvideo__play:hover,
.nw-blog-modern .nwbm-fvideo__play:focus-visible {
  align-items: flex-end; justify-content: flex-start; padding: clamp(16px, 2.2vw, 28px); background: none; outline: none;
}
.nw-blog-modern .nwbm-fvideo__pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px;
  background: rgba(13, 18, 20, 0.82); color: #F9F9F6;
  transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nw-blog-modern .nwbm-fvideo__play:hover .nwbm-fvideo__pill,
.nw-blog-modern .nwbm-fvideo__play:focus-visible .nwbm-fvideo__pill { background: rgba(7, 72, 91, 0.94); }
.nw-blog-modern .nwbm-fvideo__play:focus-visible .nwbm-fvideo__pill { outline: 2px solid #F9F9F6; outline-offset: 3px; }
.nw-blog-modern .nwbm-fvideo__icon { width: 40px; height: 40px; }
.nw-blog-modern .nwbm-fvideo__label { display: inline; font-size: 12px; letter-spacing: 3px; color: #F9F9F6; }
@media (max-width: 767px) {
  .nw-blog-modern .nwbm-fvideo__play, .nw-blog-modern .nwbm-fvideo__play:hover, .nw-blog-modern .nwbm-fvideo__play:focus-visible { padding: 12px; }
  .nw-blog-modern .nwbm-fvideo__pill { gap: 10px; padding: 6px 14px 6px 6px; }
  .nw-blog-modern .nwbm-fvideo__icon { width: 32px; height: 32px; }
  .nw-blog-modern .nwbm-fvideo__label { display: inline; font-size: 11px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) { .nw-blog-modern .nwbm-fvideo__pill { transition: none; } }

/* v5 (2026-11-11, Adam: "some weird shift such that blog content isn't actually centered").
   The standard template nudges the article up to 72px LEFT at 1700px+ to balance a right-hand "at a glance" card (dev1
   only; the live site has no such nudge), and v4 pushed the wide video + end cards back RIGHT by the same amount. Result:
   on dev1 the text sat left of everything else; on the live site (no nudge to undo) the video and cards were pushed
   right of the page. This variant has no side card, so: no nudge, no counter-push. Everything centres on the page. */
@media (min-width: 1700px) {
  .nw-blog-modern .nwbm-article { transform: none; }
  .nw-blog-modern .nwbm-article .nwbm-fvideo,
  .nw-blog-modern .nwbm-article .nw-b-next { --nwbm-shift: 0px; }
}