/*
 * Guides (/guias/): the reading template (templates/page-guide.html → .prose--guide), the
 * guide patterns (byline, action line, related guides), the sources list, the hub index
 * (trioni/guide-list) and the glossary (trioni/glossary).
 * Loaded only on pages with the guide template or one of the two blocks, after content.css
 * (dependency), so these rules win over the generic .prose ones. Theme tokens only; every
 * rule that separates content is a border, so it survives forced colours.
 */

/* ---------- Reading column ---------- */
/* One column measured in the body size (68 characters), whatever the size of each element. */
.prose--guide {
  --guide-measure: 68ch;

  display: grid;
  grid-template-columns: minmax(0, var(--guide-measure));
}

.prose--guide > * {
  min-width: 0;
  max-width: none;
}

.prose--guide :is(h2, h3, dt)[id] {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

/* The answer sentence: a serif lead held by a gold rule. */
.prose--guide > .tg-answer {
  padding-left: var(--s-4);
  border-left: 2px solid var(--gold-ui);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Byline: a quiet caps line that closes the opening and opens the body. */
.prose--guide > .tg-byline {
  margin-top: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.prose--guide > .tg-byline + * {
  margin-top: var(--s-6);
}

.prose--guide > h2 {
  margin-top: var(--s-7);
  text-wrap: balance;
}

.prose--guide > .tg-byline + h2 {
  margin-top: var(--s-6);
}

.prose--guide > h3 {
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0;
}

/* Steps: the number carries the gold, the text stays ink. */
.prose--guide ol:where(.wp-block-list, :not([class])) > li::marker {
  color: var(--gold-text);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
}

/* ---------- Tables ---------- */
/* An ink rule on top, hairlines between rows, the first column as the row's name. */
.prose--guide .wp-block-table {
  margin-top: var(--s-5);
}

.prose--guide .wp-block-table table {
  border-top: 2px solid var(--ink);
}

.prose--guide .wp-block-table tbody :is(th, td):first-child {
  color: var(--text);
  font-weight: 600;
}

.prose--guide .wp-block-table :is(th, td):last-child {
  padding-right: 0;
}

/* Phones down to 320 px: tighter cells, words break at syllables before the table overflows. */
@media (max-width: 599px) {
  .prose--guide .wp-block-table :is(th, td) {
    padding: var(--s-2) var(--s-2) var(--s-2) 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .prose--guide .wp-block-table thead th {
    letter-spacing: 0;
  }

  /* Opt-in for tables with five or more columns: the figure scrolls, the page never does. */
  .prose--guide .wp-block-table.tg-table--wide {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .prose--guide .wp-block-table.tg-table--wide table {
    min-width: 34rem;
  }

  /* It scrolls, so a word or a figure never breaks in the middle («PUE STO», «110,8 1»). */
  .prose--guide .wp-block-table.tg-table--wide :is(th, td) {
    overflow-wrap: normal;
    hyphens: manual;
  }
}

/* ---------- Ranking (core/table .tg-ranking: the price comparison) ---------- */
/*
 * Four columns (owner, 08/10/2026: no notes column): the place, the business as the row header
 * (name link, town under it), the 18 k figure that sets the order (serif, the largest type of the
 * row) and the 24 k figure. Markup is only what core/table saves: <th scope="row"> for the
 * business, .has-text-align-right on the figures, <strong> for «nosotros»; the live table adds
 * .tg-ranking__mark («*») after a figure that is not current. Our row (the link to
 * /precio-oro-hoy/) gets a gold wash, a gold edge and its «nosotros» tag at its real place; the
 * first row only gets its numeral in ink. display: table at every width, so every cell keeps its
 * headers, and the four columns fit a 320 px phone without sideways scrolling. Three classes on
 * the root and placed after «Tables»: these rules win over the generic ones without !important.
 */
.prose--guide .wp-block-table.tg-ranking {
  --rk-rank: 3rem;
  --rk-18: 4.25rem;
  --rk-24: 3.75rem;
}

.prose--guide .wp-block-table.tg-ranking table {
  border-collapse: separate;
  border-spacing: 0;
}

.prose--guide .wp-block-table.tg-ranking :is(th, td) {
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
}

.prose--guide .wp-block-table.tg-ranking tr > :first-child {
  padding-left: var(--s-3);
}

.prose--guide .wp-block-table.tg-ranking :is(th, td):last-child {
  padding-right: var(--s-3);
}

.prose--guide .wp-block-table.tg-ranking :is(th, td).has-text-align-right {
  padding-right: var(--s-4);
  text-align: right;
  white-space: nowrap;
}

/* Head: quiet caps; the figure columns name the karat in serif, the unit under it. */
.prose--guide .wp-block-table.tg-ranking thead th {
  padding-block: var(--s-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  vertical-align: bottom;
  overflow-wrap: normal;
  hyphens: manual;
}

/* Place and figures as narrow as their content (with room for the figures), the business the rest. */
.prose--guide .wp-block-table.tg-ranking thead th:is(:nth-child(1), :nth-child(3), :nth-child(4)) {
  width: 1%;
  white-space: nowrap;
}

.prose--guide .wp-block-table.tg-ranking thead th:nth-child(3) {
  min-width: var(--rk-18);
}

.prose--guide .wp-block-table.tg-ranking thead th:nth-child(4) {
  min-width: var(--rk-24);
}

.prose--guide .wp-block-table.tg-ranking thead th.has-text-align-right {
  letter-spacing: 0;
  text-transform: none;
}

.prose--guide .wp-block-table.tg-ranking thead th.has-text-align-right::first-line {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 400;
}

.prose--guide .wp-block-table.tg-ranking thead th:nth-child(3)::first-line {
  color: var(--text);
}

/* The column that sets the order carries a gold arrow; decorative (empty alternative text). */
.prose--guide .wp-block-table.tg-ranking thead th:nth-child(3)::before {
  content: '\2193\00a0' / '';
  color: var(--gold-text);
  font-family: var(--font-sans);
}

/* Body: every cell sits on the baseline of the name; a stronger rule closes the table. */
.prose--guide .wp-block-table.tg-ranking tbody :is(th, td) {
  line-height: var(--lh-snug);
  vertical-align: baseline;
}

.prose--guide .wp-block-table.tg-ranking tbody tr:last-child > * {
  border-bottom-color: var(--line-strong);
}

/* Place: a serif numeral, muted; the leader's in ink (ours too, below). */
.prose--guide .wp-block-table.tg-ranking tbody td:first-child {
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 400;
}

.prose--guide .wp-block-table.tg-ranking tbody tr:first-child > td:first-child {
  color: var(--text);
}

/* Business (row header): the name, then the town in small muted type. */
.prose--guide .wp-block-table.tg-ranking tbody th {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-align: left;
  overflow-wrap: break-word;
}

.prose--guide .wp-block-table.tg-ranking tbody th a {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold-ui);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose--guide .wp-block-table.tg-ranking tbody th a:hover {
  color: var(--gold-text);
}

/* A business name opens its price page in a new tab: its last word and the new-tab mark stay on
   one line (Compare\Render\NameLinks wraps them in .new-tab-glue). */
.prose--guide .wp-block-table.tg-ranking tbody th .new-tab-glue {
  white-space: nowrap;
}

/* «nosotros»: a small ruled tag after our name; a word, so it never depends on colour. */
.prose--guide .wp-block-table.tg-ranking tbody th strong {
  display: inline-block;
  margin-left: var(--s-1);
  padding: 0 var(--s-1);
  border: 1px solid var(--gold-ui);
  border-radius: var(--radius);
  color: var(--gold-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 18 k: the figure the ranking is about. 24 k steps down. */
.prose--guide .wp-block-table.tg-ranking tbody td:nth-child(3) {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1;
}

.prose--guide .wp-block-table.tg-ranking tbody td:nth-child(4) {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

/* «*»: hangs in the right padding of the cell, so a marked figure stays aligned with the rest;
   the caption says what it means. */
.prose--guide .wp-block-table.tg-ranking .tg-ranking__mark {
  display: inline-block;
  width: 0.6em;
  margin-right: -0.6em;
  color: var(--gold-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
}

/* Our row: a gold wash across and a gold edge, at its real place. Without :has() the tag stays. */
.prose--guide .wp-block-table.tg-ranking tbody tr:has(a[href='/precio-oro-hoy/']) > * {
  background-color: var(--gold-wash);
}

.prose--guide .wp-block-table.tg-ranking tbody tr:has(a[href='/precio-oro-hoy/']) > td:first-child {
  box-shadow: inset 3px 0 0 var(--gold-ui);
  color: var(--text);
}

/* Following a row across: a stone tint under the pointer (ours keeps its gold). */
@media (hover: hover) {
  .prose--guide .wp-block-table.tg-ranking tbody tr:hover > * {
    background-color: var(--stone);
  }
}

/* Phones and small tablets: smaller type; headers in sentence case so «Puesto» fits. */
@media (max-width: 599px) {
  .prose--guide .wp-block-table.tg-ranking :is(th, td) {
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-1);
  }

  .prose--guide .wp-block-table.tg-ranking tr > :first-child {
    padding-right: var(--s-1);
    padding-left: var(--s-2);
  }

  .prose--guide .wp-block-table.tg-ranking :is(th, td).has-text-align-right {
    padding-right: var(--s-3);
  }

  .prose--guide .wp-block-table.tg-ranking thead th {
    letter-spacing: 0;
    text-transform: none;
  }

  .prose--guide .wp-block-table.tg-ranking tbody th {
    hyphens: auto;
  }

  .prose--guide .wp-block-table.tg-ranking tbody th a {
    font-size: var(--fs-sm);
  }

  .prose--guide .wp-block-table.tg-ranking tbody th strong {
    margin-left: 0;
    letter-spacing: 0.02em;
  }

  .prose--guide .wp-block-table.tg-ranking tbody td:nth-child(3) {
    font-size: var(--fs-lg);
  }

  .prose--guide .wp-block-table.tg-ranking tbody td:nth-child(4) {
    font-size: var(--fs-xs);
  }
}

/*
 * Phones: fixed columns, so the four fit the screen down to 320 px (no sideways scrolling): the
 * place and the figures keep their width, the business takes the rest and wraps.
 */
@media (max-width: 479px) {
  .prose--guide .wp-block-table.tg-ranking table {
    table-layout: fixed;
    width: 100%;
  }

  .prose--guide .wp-block-table.tg-ranking thead th:nth-child(1) {
    width: var(--rk-rank);
    padding-right: 0;
  }

  .prose--guide .wp-block-table.tg-ranking thead th:nth-child(2) {
    width: auto;
  }

  .prose--guide .wp-block-table.tg-ranking thead th:nth-child(3) {
    width: var(--rk-18);
  }

  .prose--guide .wp-block-table.tg-ranking thead th:nth-child(4) {
    width: var(--rk-24);
  }
}

/* Forced colours drop the wash and the edge shadow: our row keeps a ruled edge. */
@media (forced-colors: active) {
  .prose--guide .wp-block-table.tg-ranking tbody tr:has(a[href='/precio-oro-hoy/']) > td:first-child {
    border-left: 3px solid CanvasText;
  }
}

/* ---------- Action line (pattern trioni/guide-cta): one ruled line on paper, never a dark panel ---------- */
.tg-guide-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-7);
  padding-block: var(--s-4);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
}

.prose > .tg-guide-cta {
  margin-top: var(--s-7);
}

.tg-guide-cta__kicker {
  color: var(--gold-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.prose .tg-guide-cta a:not(.btn):not(.wp-element-button) {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-decoration-color: var(--gold-ui);
}

.prose .tg-guide-cta a:not(.btn):not(.wp-element-button):hover {
  color: var(--gold-text);
}

/* The whole line is the target (over 44 px), the link keeps its own text as its name. */
.tg-guide-cta a::before {
  content: '';
  position: absolute;
  inset: 0;
}

.tg-guide-cta a::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.4em;
  color: var(--gold-ui);
  transition: transform var(--dur-fast) var(--ease);
}

.tg-guide-cta a:hover::after {
  transform: translateX(4px);
}

.tg-guide-cta a:focus-visible {
  outline: 0;
}

.tg-guide-cta:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Sources (core/details + ul.tg-sources) ---------- */
.prose--guide > .tg-guide-sources {
  margin-top: var(--s-6);
  padding-block: var(--s-2);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.tg-guide-sources > summary {
  color: var(--text-soft);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.prose .tg-sources {
  padding: 0 0 var(--s-3) 1.2em;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.prose .tg-sources > li + li {
  margin-top: var(--s-2);
}

/* Each source is a 24 px target (2.5.8), clear of the summary above it. */
.prose .tg-sources a:not(.btn):not(.wp-element-button) {
  padding-block: 3px;
}

/* ---------- Related guides (pattern trioni/guide-related) ---------- */
.prose--guide > .tg-guide-related {
  margin-top: var(--s-7);
}

.prose .tg-guide-related__title {
  color: var(--gold-text);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.prose .tg-guide-related__list {
  display: grid;
  gap: 0 var(--s-6);
  margin-top: var(--s-3);
  padding-left: 0;
  list-style-position: inside;
}

.prose .tg-guide-related__list > li {
  margin-top: 0;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.prose .tg-guide-related__list > li::marker {
  content: '\2192\00a0';
  color: var(--gold-ui);
}

.prose .tg-guide-related__list a:not(.btn):not(.wp-element-button) {
  text-decoration-color: transparent;
}

.prose .tg-guide-related__list a:not(.btn):not(.wp-element-button):hover {
  text-decoration-color: var(--gold-ui);
}

@media (min-width: 600px) {
  .prose .tg-guide-related__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Hub index (block trioni/guide-list) ---------- */
/* A contents page: the service in the margin, its guides as serif titles on hairlines. */
.guide-list {
  border-bottom: 1px solid var(--ink);
}

.prose > .guide-list {
  margin-top: var(--s-6);
}

.guide-list__group {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: 1px solid var(--ink);
}

.prose .guide-list__service {
  color: var(--gold-text);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.guide-list__items > li + li {
  border-top: 1px solid var(--line);
}

.guide-list__items a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding-block: var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.guide-list__items a::after {
  content: '\2192';
  flex: none;
  color: var(--gold-ui);
  transition: transform var(--dur-fast) var(--ease);
}

.prose .guide-list__items a:not(.btn):not(.wp-element-button) {
  text-decoration-color: transparent;
}

.prose .guide-list__items a:not(.btn):not(.wp-element-button):hover {
  text-decoration-color: var(--gold-ui);
}

.guide-list__items a:hover {
  color: var(--gold-text);
}

.guide-list__items a:hover::after {
  transform: translateX(4px);
}

@media (min-width: 600px) {
  .guide-list__group {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--s-5);
  }

  .prose .guide-list__service {
    padding-top: 0.9em;
  }
}

/* ---------- Glossary (block trioni/glossary) ---------- */
.tg-glossary {
  border-bottom: 1px solid var(--ink);
}

.tg-glossary__item {
  padding-block: var(--s-4);
  border-top: 1px solid var(--line-strong);
}

.tg-glossary__item:first-child {
  border-top-color: var(--ink);
}

.tg-glossary dt {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.tg-glossary dd {
  margin: var(--s-2) 0 0;
  color: var(--text-soft);
}

.tg-glossary__guide {
  white-space: nowrap;
}

.tg-glossary__guide::after {
  content: '\00a0\2192';
  color: var(--gold-ui);
}

/* A term reached from a link (/guias/glosario/#onza-troy) is marked, with a border, not only a tint. */
.tg-glossary dt:target {
  padding-left: var(--s-3);
  border-left: 2px solid var(--gold-ui);
}

.tg-glossary__item:has(dt:target) {
  background: var(--gold-wash);
  box-shadow: 0 0 0 var(--s-3) var(--gold-wash);
}

@media (min-width: 720px) {
  .tg-glossary__item {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--s-5);
  }

  .tg-glossary dd {
    margin-top: 0.2em;
  }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .tg-guide-cta a::after,
  .guide-list__items a::after {
    transition: none;
  }

  .tg-guide-cta a:hover::after,
  .guide-list__items a:hover::after {
    transform: none;
  }
}

@media (forced-colors: active) {
  .tg-guide-cta {
    border-color: CanvasText;
  }

  .tg-guide-cta:focus-within {
    outline-color: Highlight;
  }

  .prose--guide > .tg-answer,
  .tg-glossary dt:target {
    border-left-color: CanvasText;
  }

  .prose :is(.tg-guide-related__list, .guide-list__items) a:not(.btn):not(.wp-element-button) {
    text-decoration-color: currentColor;
  }

  .tg-glossary__item:has(dt:target) {
    box-shadow: none;
  }
}