/* Scoped to the Block M article only. Shared type tokens: editorial-type.css. */

body.blockm-story {
  background: #080b0b;
  color: #f2f4f1;
}

.blockm {
  background: #080b0b;
  color: #f2f4f1;
  max-width: 100%;
  overflow-x: clip;
}

.blockm-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - 81px);
  padding: clamp(3.2rem, 7vw, 6.5rem) var(--side) clamp(1.6rem, 4vw, 2.8rem);
  overflow: hidden;
  background-color: #080b0b;
  background-image: url("images/block-m/1434.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 48%;
}

.blockm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 11, 11, .28) 0%, rgba(8, 11, 11, .16) 30%, rgba(8, 11, 11, .82) 100%);
}

.blockm-hero > * {
  position: relative;
  z-index: 1;
}

.blockm-hero .kicker {
  color: #00B7CC;
  font-weight: 800;
  text-transform: uppercase;
}

.blockm-title {
  margin: .35rem 0 0;
  font-family: Impact, "Oswald", "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
}

.blockm-title .blockm-c {
  color: #00B7CC;
}

.blockm-meta {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid #2b2e30;
  border-bottom: 1px solid #2b2e30;
  padding: 1rem 0;
  color: #aca9a2;
  font-weight: 700;
  text-transform: uppercase;
}

.blockm-copy {
  margin: 0 auto;
  padding: clamp(4.2rem, 7vw, 6rem) 0;
}

.blockm-copy p {
  margin: 0 0 2rem;
  color: #d8d5cf;
}

.blockm-copy p:last-child {
  margin-bottom: 0;
}

.blockm-standfirst {
  margin: 0 0 5rem;
  color: #fff;
  font-weight: 700;
}

.blockm-copy strong {
  color: #fff;
  font-weight: 700;
}

.blockm-shot {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0;
}

.blockm-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.blockm-shot figcaption {
  padding: .65rem var(--side) clamp(2.4rem, 4vw, 4rem);
  color: #8d8b86;
  text-transform: uppercase;
}

.blockm-quote {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 9vw 0;
  color: #fff;
  /* Impact first (approved Block M display); Oswald is self-hosted for Android. */
  font-family: Impact, "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(3.3rem, 8vw, 8.2rem);
  line-height: .88;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.blockm-quote-a,
.blockm-quote-b {
  display: block;
}

.blockm-quote-a {
  font-size: clamp(1.8rem, 6vw, 6.2rem);
}

.blockm-quote .blockm-accent {
  color: #00B7CC;
}

.blockm-end {
  width: min(1180px, 92vw);
  margin: 3rem auto 0;
  padding: 8rem 0 10rem;
  border-top: 7px solid #00B7CC;
}

.blockm-end p {
  max-width: 950px;
  margin: 0;
  font-family: Impact, "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(3.7rem, 8.5vw, 8.8rem);
  line-height: .84;
  text-transform: uppercase;
  color: #fff;
}

/* Desktop: hard line after “remains.” — same visual as the former <br>. */
.blockm-end-break {
  display: block;
}

.blockm-end .blockm-accent {
  color: #00B7CC;
}

@media (max-width: 900px) {
  .blockm-hero {
    background-position: center 42%;
  }
}

@media (max-width: 700px) {
  .blockm-hero {
    min-height: calc(100svh - 81px);
    padding-top: 4.5rem;
    padding-bottom: 1.35rem;
    background-position: center 36%;
  }

  .blockm-copy {
    padding: 4.5rem 0;
  }

  .blockm-standfirst {
    margin-bottom: 3.5rem;
  }

  .blockm-shot figcaption {
    padding-bottom: 2.7rem;
  }

  .blockm-quote {
    padding: 20vw 0;
  }

  .blockm-end {
    padding: 5rem 0 7rem;
  }

  /*
   * Mobile closing: neutralize the hard break so the second sentence can reflow,
   * reduce display size, and balance lines — desktop break layout untouched.
   */
  .blockm-end-break {
    display: inline;
  }

  .blockm-end-break::before {
    content: " ";
  }

  .blockm-end p {
    font-size: clamp(2.15rem, 8.4vw, 3.1rem);
    line-height: .92;
    letter-spacing: -.02em;
    text-wrap: balance;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 430px) {
  .blockm-hero {
    background-position: center 32%;
  }

  .blockm-end p {
    font-size: clamp(2rem, 9.2vw, 2.55rem);
  }
}