/*
 * Long-form article typography.
 *
 * style.css styles h2, h3 and p and stops there. The blog posts use ul (19),
 * li (84), h4 (10), blockquote and a numbered `.drop-cap` marker — and that
 * marker is only styled inside `ul.products.custom-list`, so on a post it
 * rendered as a bare "1" sitting in the text.
 *
 * Everything here derives from the theme's own tokens. This is not a new visual
 * identity; it is the missing half of an existing one.
 *
 * Scoped to .entry-content--article, not .entry-content. The front page uses
 * the same wrapper and holds the Top 5 as <ul class="products custom-list">, so
 * unscoped `.entry-content ul` rules put pink bullets and a text indent on the
 * product cards.
 *
 * The modifier alone was not enough: every site also has a /horse-games page
 * carrying the same product list, and pages are articles. So product lists are
 * excluded by name as well. Scope by what a thing IS, not by where it usually
 * appears.
 */

/* ===== BYLINE =====
 *
 * The one place this file spends any boldness. These articles are first-person
 * notes to young riders — one is signed "Hope, 11" — and the credit was a 60px
 * square photo floated into the opening sentence.
 *
 * The ring is the same gradient as the front page's numbered markers, so the
 * portrait reads as part of the same family rather than as a stray avatar.
 */
.entry-byline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bg);
  text-align: center;
}

.entry-byline__portrait {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  /* The ring is drawn with box-shadow rather than border so it sits outside the
     76px box and the face is not cropped tighter to make room for it. */
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 6px var(--primary),
    0 8px 24px rgba(219, 39, 119, 0.28);
}

.entry-byline__name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.entry-byline__name span {
  color: var(--gray-light);
  font-weight: 600;
  /* "By" is a connective, not the name. Keeping it quieter lets the eye land on
     the person, which is the only part a reader cares about. */
  margin-right: 0.4em;
}

/* ===== NUMBERED MARKERS =====
 *
 * These posts are genuinely sequences — "10 reasons why I love horses",
 * "5 things I have learned" — so the numbering carries information rather than
 * decorating. Same gradient disc the front page Top 5 uses, at a size that sits
 * in running text instead of dominating it.
 *
 * The source markup puts the span inside a <p> and sometimes immediately before
 * an <h2>, which the browser then restructures. Styling the span itself rather
 * than a wrapper survives that.
 */
.entry-content--article .drop-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  vertical-align: -0.35em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

/* A number introducing a heading belongs on the heading's baseline. */
.entry-content--article .drop-cap + h2,
.entry-content--article .drop-cap + h3 {
  display: inline;
}

/* ===== HEADINGS =====
 *
 * style.css sets size and weight; what is missing is rhythm. A heading needs
 * more space above it than below, or it reads as belonging to the paragraph it
 * follows rather than the one it introduces.
 */
.entry-content--article h2 { margin: 2em 0 0.6em; }
.entry-content--article h3 { margin: 1.75em 0 0.5em; }

.entry-content--article h4 {
  margin: 1.5em 0 0.4em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
}

.entry-content--article > :first-child { margin-top: 0; }

/* ===== LISTS =====
 *
 * Nothing styled these at all, so they inherited the reset — no marker, no
 * indent, indistinguishable from paragraphs.
 */
.entry-content--article ul:not(.products),
.entry-content--article ol:not(.products) {
  margin: 1.25em 0;
  padding-left: 1.4em;
  color: var(--gray);
  line-height: 1.8;
}

.entry-content--article ul:not(.products) { list-style: none; padding-left: 1.6em; }

.entry-content--article ul:not(.products) > li:not(.product) {
  position: relative;
  margin-bottom: 0.6em;
}

.entry-content--article ul:not(.products) > li:not(.product)::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.entry-content--article ol:not(.products) { list-style: decimal; }
.entry-content--article ol:not(.products) > li:not(.product) { margin-bottom: 0.6em; padding-left: 0.2em; }
.entry-content--article ol:not(.products) > li:not(.product)::marker {
  color: var(--primary);
  font-weight: 700;
}

.entry-content--article li:not(.product) > ul:not(.products),
.entry-content--article li:not(.product) > ol:not(.products) { margin: 0.5em 0; }

/* ===== QUOTES =====
 *
 * One post uses a blockquote. It had no styling, so a quotation was
 * indistinguishable from the text quoting it.
 */
.entry-content--article blockquote {
  margin: 1.75em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--dark);
  font-style: italic;
}

.entry-content--article blockquote p:last-child { margin-bottom: 0; }

/* ===== FEATURED IMAGE ===== */
.entry-featured-image {
  margin: 0 0 28px;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

.entry-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Inline images inside articles: the theme rounds cards but left these square. */
.entry-content--article :not(.product) > img,
.entry-content--article > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .entry-byline { margin-bottom: 28px; padding-bottom: 22px; }
  .entry-byline__portrait { width: 64px; height: 64px; }
  .entry-content--article .drop-cap {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    font-size: 0.85rem;
  }
}

/* ===== PHOTO CREDIT =====
 *
 * Moved from between the byline and the first sentence — the most prominent
 * position on the page — to the end of the article, where a credit belongs. It
 * is still legible and still attributed; it is simply no longer the first thing
 * a reader meets.
 */
.entry-credit {
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bg);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gray-light);
  word-break: break-word;
}

/* ===== COMMENTS ON ARTICLES =====
 *
 * The theme styles reviews and only reviews: eight rules, every one scoped to
 * `.single-product #reviews`. An article is not a single-product page, so a
 * comment on a blog post rendered as bare text next to a properly styled review
 * on a game page — same content, same worth, different treatment for no reason.
 *
 * The markup now matches a review exactly, so this mirrors the theme's own
 * declarations into the article context rather than inventing a second style.
 * If the theme's review styling changes, this is the one place to follow it.
 */
.comments-area .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comments-area .commentlist li.comment {
  padding: 20px;
  margin-bottom: 16px;
  background: var(--bg);
  border-radius: var(--radius);
}

.comments-area .commentlist .comment_container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.comments-area .commentlist .comment-text {
  flex: 1;
  min-width: 0;
}

.comments-area .commentlist .meta {
  margin-bottom: 12px;
}

.comments-area .commentlist .meta strong {
  font-size: 15px;
  color: var(--dark);
}

.comments-area .commentlist .meta time {
  display: block;
  font-size: 13px;
  color: var(--gray-light);
  margin-top: 4px;
}

.comments-area .commentlist .description p {
  margin: 0;
  color: var(--gray);
  font-size: 15px;
  line-height: 1.6;
}

/* The heading above the list, which had no treatment either. */
.comments-area .comments-title {
  margin: 40px 0 20px;
  padding-top: 32px;
  border-top: 2px solid var(--bg);
  font-size: 1.35rem;
}