/*
 * The Fortune Post - responsive and article-page refinements.
 * Loaded after the edition styles; plain CSS, no build step required.
 */

/* ── Global guards against horizontal overflow ───────────────────────────── */

/* The section bar scrolls sideways on small screens. Containing its paint
   stops mobile browsers from widening the whole page to fit the hidden links. */
.english-edition .edition-nav {
  contain: paint;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.english-edition .edition-nav > a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.english-edition img,
.english-edition video,
.english-edition iframe {
  max-width: 100%;
}

.english-edition h1,
.english-edition h2,
.english-edition h3 {
  overflow-wrap: break-word;
}

body.english-edition .cookie-consent:not([hidden]) {
  max-width: calc(100% - 24px);
  box-sizing: border-box;
}

/* The legal links are one unwrapped row; on tablets the last ones fell off
   the right edge and gave the whole page a sideways scroll. */
.english-edition .edition-footer-bottom,
.english-edition .edition-footer-bottom nav {
  flex-wrap: wrap;
}

.english-edition .edition-footer-bottom nav {
  row-gap: 6px;
  min-width: 0;
}

.english-edition :focus-visible {
  outline: 2px solid var(--blue, #245cde);
  outline-offset: 2px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.english-edition .breadcrumb {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.english-edition .breadcrumb > * {
  flex: 0 0 auto;
}

.english-edition .breadcrumb > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Article page: one reading column ────────────────────────────────────── */

/* Headline, byline, tools and everything after the body share the body's
   740px column, so the page reads as a single aligned measure. The lead
   image stays wider than the text, as on most news sites. */
.english-edition .article-main > .article-header,
.english-edition .article-main > .article-toc,
.english-edition .article-main > .article-footer,
.english-edition .article-main > .author-box,
.english-edition .article-main > .reaction-box,
.english-edition .article-main > .comments,
.english-edition .article-main > .newsletter-inline {
  max-width: 740px;
  margin-inline: auto;
}

.english-edition .article-header h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 14px 0 12px;
  text-wrap: balance;
}

.english-edition .article-subtitle {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--muted, #637083);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.english-edition .article-header__topline {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.english-edition .google-preferred-source {
  flex: 0 0 auto;
  width: 168px;
}

.english-edition .google-preferred-source img {
  width: 100%;
  height: auto;
}

.english-edition .article-meta__first {
  display: block;
  font-size: 0.85em;
  opacity: 0.85;
}

/* Tools: two groups on wide screens, one swipeable row on phones. */
.english-edition .article-actions {
  align-items: center;
  justify-content: space-between;
}

.english-edition .article-actions button,
.english-edition .article-actions a {
  min-width: 44px;
  min-height: 44px;
}

.english-edition .featured-figure {
  margin-block: 22px 26px;
}

.english-edition .featured-figure img {
  width: 100%;
  height: auto;
}

.english-edition .featured-figure figcaption,
.english-edition .article-prose figcaption {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, #637083);
  padding-top: 8px;
}

/* ── Article body content from the CMS ───────────────────────────────────── */

.english-edition .article-prose {
  overflow-wrap: break-word;
}

.english-edition .article-prose img {
  height: auto;
}

.english-edition .article-prose figure {
  margin: 28px 0;
}

.english-edition .article-prose iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 28px 0;
}

.english-edition .article-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 0.82em;
  line-height: 1.5;
  margin: 26px 0;
}

.english-edition .article-prose th,
.english-edition .article-prose td {
  border: 1px solid var(--rule, #dce2e9);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.english-edition .article-prose th {
  background: rgba(20, 36, 58, 0.05);
}

.english-edition .article-prose blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--blue, #245cde);
  font-style: italic;
}

.english-edition .article-prose h2 {
  font-size: 1.5em;
  line-height: 1.25;
  margin: 1.7em 0 0.5em;
}

.english-edition .article-prose h3 {
  font-size: 1.22em;
  line-height: 1.3;
  margin: 1.5em 0 0.4em;
}

.english-edition .article-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.english-edition .article-prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ── Wide screens: keep the sidebar in view while reading ────────────────── */

@media (min-width: 1101px) {
  .english-edition .article-shell > .sidebar {
    align-self: start;
  }

  .english-edition .article-shell > .sidebar > .widget:first-child {
    position: sticky;
    top: 18px;
    z-index: 1;
    background: var(--paper, #fff);
  }
}

/* ── Tablets ─────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .english-edition .article-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .english-edition .related-articles .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .english-edition .article-header h1 {
    margin-top: 10px;
  }

  .english-edition .google-preferred-source {
    width: 132px;
  }

  /* One row that scrolls sideways instead of wrapping a lone button. */
  .english-edition .article-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    contain: paint;
    scrollbar-width: none;
    padding-block: 10px;
  }

  .english-edition .article-actions::-webkit-scrollbar {
    display: none;
  }

  .english-edition .article-actions .article-share-group,
  .english-edition .article-actions .article-reader-group {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .english-edition .article-actions__label {
    display: none;
  }

  /* Lead image runs edge to edge; its caption keeps the page gutter. */
  .english-edition .article-main > .featured-figure {
    margin-inline: -16px;
  }

  .english-edition .article-main > .featured-figure figcaption {
    padding-inline: 16px;
  }

  .english-edition .article-body,
  .english-edition .article-prose {
    font-size: 1.09rem;
    line-height: 1.75;
  }

  .english-edition .related-articles .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .english-edition .author-box {
    flex-wrap: wrap;
  }

  .english-edition .comment-form input,
  .english-edition .comment-form textarea,
  .english-edition .comment-form button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Comfortable tap targets in the footer link lists. */
  .english-edition .edition-footer-grid a,
  .english-edition .edition-footer-bottom nav a,
  .english-edition .edition-footer-bottom nav button {
    padding-block: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .english-edition .edition-nav {
    scroll-behavior: auto;
  }
}