/* Fixology Hub editorial reading layer.
 * Presentation-only: improves long-form guide readability across desktop and
 * compact phones without changing routing, SEO ownership, intake, or business
 * behavior.
 */

.fx-article-hero,
.fx-article-cover,
.fx-article-body,
.fx-article-cta {
  min-width: 0;
}

.fx-article-body {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.78;
  text-wrap: pretty;
}

.fx-article-body p,
.fx-article-body li {
  overflow-wrap: break-word;
}

.fx-article-body p {
  margin-top: 0;
  margin-bottom: 1.35em;
}

.fx-article-body h2,
.fx-article-body h3 {
  max-width: 24ch;
  text-wrap: balance;
}

.fx-article-body h2 {
  margin-top: 2.1em;
  margin-bottom: .7em;
  line-height: 1.12;
}

.fx-article-body h3 {
  margin-top: 1.7em;
  margin-bottom: .55em;
  line-height: 1.2;
}

.fx-article-body ul,
.fx-article-body ol {
  margin: 0 0 1.5em;
  padding-left: 1.35em;
}

.fx-article-body li + li {
  margin-top: .55em;
}

.fx-article-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.fx-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 680px) {
  .fx-article-hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .fx-article-body {
    max-width: none;
    font-size: 16px;
    line-height: 1.72;
  }

  .fx-article-body h2 {
    font-size: clamp(28px, 8.5vw, 34px);
    margin-top: 1.85em;
  }

  .fx-article-body h3 {
    font-size: clamp(21px, 6.5vw, 25px);
  }

  .fx-article-body p {
    margin-bottom: 1.25em;
  }

  .fx-article-cover {
    aspect-ratio: 4 / 3;
  }

  .fx-article-cta {
    margin-top: 42px;
  }
}

/* Compact phones need the same deliberate density as the booking and city
 * surfaces. Keep long guide titles readable without letting the masthead or
 * editorial image consume most of the first screen at 320/360/390px widths. */
@media (max-width: 430px) {
  .fx-article-hero {
    padding: 34px 14px 30px;
  }

  .fx-article-hero h1 {
    font-size: clamp(34px, 11vw, 40px);
    line-height: 1.02;
    letter-spacing: -.04em;
    overflow-wrap: break-word;
  }

  .fx-article-hero .fx-lede {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.58;
  }

  .fx-article-meta {
    gap: 8px 12px;
    margin-top: 16px;
    line-height: 1.45;
  }

  .fx-article-cover {
    margin-bottom: 36px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .fx-article-cover img {
    min-height: 0;
    border-radius: 16px;
  }

  .fx-article-body {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 72px;
  }

  .fx-article-body h2 {
    font-size: clamp(27px, 8.4vw, 32px);
    margin-top: 1.7em;
  }

  .fx-article-callout,
  .fx-article-cta {
    padding: 20px;
  }

  .fx-article-cta {
    margin-top: 36px;
  }
}