/* ==========================================================================
   Editorial listings and detail pages — case results and guides.

   The two sections differ in what they say and not in how they are laid out,
   so they share one card, one filter row and one article shell. Tokens come
   from css/secilen.css; css/tools.css brings the breadcrumbs.
   ========================================================================== */

:root {
  --entry-surface: #ffffff;
  --entry-soft: #f3f8fb;
  --entry-line: var(--c-border);
  --entry-ink: var(--c-dark);
  --entry-ink-soft: #4a6670;
}

/* ===== ARTICLE HEADER ===== */

/* The hero itself is .tool-hero, shared with the tools so the clearance under
   the fixed navbar is worked out in one place. These two lines are the only
   thing an editorial header adds to it. */
.entry-head__badge {
  margin: 0 0 .75rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.entry-head__badge a {
  color: var(--c-primary);
  text-decoration: none;
}
.entry-head__badge a:hover {
  text-decoration: underline;
}
.entry-head__meta {
  margin: var(--gap-xs) 0 0;
  font-size: var(--fs-sm);
  color: var(--entry-ink-soft);
}

/* A row of treatment filters. Each is a real link to the narrowed URL, so the
   filtered view is a page a search engine can reach and a visitor can send
   to someone — no JavaScript involved. */
.entry-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin: var(--gap-md) 0 0;
  padding: 0;
  list-style: none;
}
.entry-filter {
  display: inline-block;
  padding: .45rem .9rem;
  font-size: var(--fs-sm);
  color: var(--entry-ink-soft);
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--entry-line);
  border-radius: var(--radius-pill);
}
.entry-filter:hover,
.entry-filter:focus-visible {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.entry-filter.is-active {
  color: var(--c-white);
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.entry-filter__count {
  margin-left: .4rem;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

/* ===== CARD GRID ===== */

.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--gap-md) var(--gap-sm);
}
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--entry-surface);
  border: 1px solid var(--entry-line);
  border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card:hover,
.entry-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(7, 95, 134, .1);
}
.entry-card__image {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--entry-soft);
}
.entry-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.entry-card__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem;
}
.entry-card__badge {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.entry-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--entry-ink);
}
.entry-card__title a {
  color: inherit;
  text-decoration: none;
}
.entry-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.entry-card__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--entry-ink-soft);
  font-variant-numeric: tabular-nums;
}
.entry-card__summary {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--entry-ink-soft);
}

/* ===== EMPTY STATE ===== */

/* An editorial section can legitimately be empty in a language that has not
   been filled yet. Saying so plainly beats an empty grid. */
.entry-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--entry-ink-soft);
  background: var(--entry-soft);
  border-radius: var(--radius-lg);
}

/* ===== DETAIL PAGE ===== */

.entry-article__figure {
  margin: 0 0 var(--gap-md);
}
.entry-article__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.entry-article__caption {
  margin: .6rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--entry-ink-soft);
}

/* A guide's PDF — one button between the hero and the text, because it is
   what the page is for. */
.entry-download {
  margin: 0 0 var(--gap-md);
}

/* The body is written by an editor, so only the elements they can produce are
   styled here, and the measure is held at a readable width. */
.entry-body {
  max-width: 44rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--entry-ink);
}
.entry-body > * + * {
  margin-top: 1.1em;
}
.entry-body h2 {
  margin-top: 2.2em;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.entry-body h3 {
  margin-top: 1.8em;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.entry-body ul,
.entry-body ol {
  padding-left: 1.3rem;
}
.entry-body li + li {
  margin-top: .45em;
}
.entry-body blockquote {
  margin-left: 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--c-accent);
  color: var(--entry-ink-soft);
  font-style: italic;
}
.entry-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.entry-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.entry-body th,
.entry-body td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--entry-line);
}

/* ===== BEFORE / AFTER ===== */

/* A plain side-by-side pair rather than a slider: a slider invites a visitor
   to park it where the result looks best, which is the opposite of what a
   results page should do. */
.entry-compare {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0 0 var(--gap-md);
}
.entry-compare figure {
  margin: 0;
}
.entry-compare img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.entry-compare figcaption {
  margin-top: .5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--entry-ink-soft);
}

/* ===== KEY FACTS ===== */

.entry-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: 0 0 var(--gap-md);
  padding: 0;
  overflow: hidden;
  background: var(--entry-line);
  border: 1px solid var(--entry-line);
  border-radius: var(--radius-lg);
}
.entry-fact {
  padding: 1rem 1.25rem;
  background: var(--entry-surface);
}
.entry-fact__label {
  margin: 0 0 .2rem;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--entry-ink-soft);
}
.entry-fact__value {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--entry-ink);
}

/* ===== QUESTIONS AND ANSWERS ===== */

/* A definition list rather than <details>: these answers are the reason the
   page ranks, and collapsing them hides the text people came for. */
.entry-faq {
  max-width: 48rem;
  margin: 0;
}
.entry-faq__item + .entry-faq__item {
  margin-top: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--entry-line);
}
.entry-faq__q {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--entry-ink);
}
.entry-faq__a {
  margin: 0;
  line-height: 1.7;
  color: var(--entry-ink-soft);
}

/* ===== A TO Z ===== */

.entry-az {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 var(--gap-md);
  padding: 0;
  list-style: none;
}
.entry-az a,
.entry-az span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 1px solid var(--entry-line);
  border-radius: var(--radius);
}
.entry-az a {
  color: var(--entry-ink);
}
.entry-az a:hover {
  color: var(--c-white);
  background: var(--c-primary);
  border-color: var(--c-primary);
}
/* A letter with nothing behind it stays in place so the row does not reflow
   between languages, but reads as unavailable. */
.entry-az span {
  color: var(--entry-ink-soft);
  opacity: .4;
}
.entry-letter {
  margin: var(--gap-lg) 0 var(--gap-sm);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  color: var(--c-primary);
}
.entry-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===== RELATED ===== */

.entry-related {
  padding: var(--section-pad) 0;
  background: var(--entry-soft);
}
.entry-related__title {
  margin: 0 0 var(--gap-md);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--entry-ink);
}

@media (prefers-reduced-motion: reduce) {
  .entry-card {
    transition: none;
  }
}