/* The old pages' blocks, rebuilt from the design's tokens and components. Markup: inc/modern.php. Loaded after style.css, in its layer order.
   The one button and the partner panel are the design's (.a-btn, .atl-cta): here only what they need in old text.
   Type comes from the design's scale only, --t1 to --t5, spacing is in rem. No shadow, no gradient, no colour of its own. */
@layer comp {
  /* The partner panel of an XTB link: the design's plate with XTB's logo. A second button beside the panel is a ghost, close under it. */
  .atl-cta[data-broker="xtb"]::before { background-image: url(/wp-content/uploads/2024/05/xtb-logo.png); background-size: calc(100% - .875rem); }
  @media (min-width: 620px) { .a-prose .atl-cta > a { max-width: 20rem; } }
  .a-partner-l { font-weight: 600; }
  .atl-risk { font-size: var(--t1); line-height: 1.3; }
  .a-prose a.a-btn--ghost { color: var(--ink); text-decoration: none; }
  .a-prose .a-btnrow { display: flex; flex-wrap: wrap; gap: .625rem; margin-block: -.75em 1.75em; }
  @media (max-width: 619px) { .a-btnrow .a-btn { width: 100%; } }
  .a-btnbox { margin-block: 1.75em; }
  .a-prose .a-btnbox .atl-cta { margin-block: 0; }
  .a-prose .a-btnbox__line { margin: .5rem 0 0; font-size: var(--t1); line-height: 1.3; }

  /* Plain top of a page */
  .a-intro-h { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
  .a-logoplate { display: inline-flex; flex: none; width: 3rem; height: 3rem; padding: .375rem; border-radius: var(--r-s); background: var(--band-ink); box-shadow: inset 0 0 0 1px var(--line); }
  .a-prose .a-logoplate img { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: none; object-fit: contain; }
  .a-prose .a-intro-l { margin: 0; font-size: var(--t4); line-height: 1.35; }
  .a-intro-l strong { font-weight: inherit; }

  /* Check list */
  .a-prose ul.a-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .375rem 1.5rem; margin: 1.25rem 0; padding: 0; list-style: none; }
  .a-prose .a-checks li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 0; }
  .a-checks .a-i { width: 1.25rem; height: 1.25rem; margin-top: .2em; color: var(--up); }
  .a-checks-t { min-width: 0; }

  /* Code or offer panel */
  .a-code { display: grid; gap: .5rem; margin-block: 1.75em; padding: 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
  .a-prose .a-code-l, .a-prose .a-code-d { margin: 0; }
  .a-prose .a-code-l { font-weight: 600; }
  .a-prose .a-code-t { margin: 0; font-size: var(--t4); font-weight: 600; line-height: 1.3; }
  .a-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; }
  .a-code-v { font-size: var(--t5); font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
  .a-code-v .a-copied { margin-left: .5rem; font-size: var(--t1); font-weight: 400; letter-spacing: 0; }
  .a-copy { display: none; }
  .a-js .a-copy { display: inline-grid; }
  .a-copy:has(.a-copied:not(:empty)) .a-copy-t { display: none; }
  .a-prose .a-offer .atl-cta { margin-block: .5rem 0; padding: 0; border: 0; background: none; }

  /* Numbered steps. On a phone the number and the title share a line, and text and images take the whole column. */
  .a-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .875rem; margin-block: 1.75rem; }
  .a-step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--plate-z); height: var(--plate-z); border-radius: var(--r-s); background: var(--plate); color: var(--plate-ink); font-weight: 600; }
  .a-step-b { min-width: 0; padding-top: .3rem; }
  .a-prose .a-step-t, .a-prose .a-step-b h3 { margin: 0 0 .35em; font-size: var(--t4); font-weight: 600; line-height: 1.3; }
  .a-step-t strong { font-weight: inherit; }
  @media (max-width: 619px) {
    .a-step { align-items: center; gap: .5rem .75rem; }
    .a-step-b { display: contents; }
    .a-step-b > * { grid-column: 1 / -1; }
    .a-prose .a-step-b > :first-child { grid-column: 2; margin: 0; }
  }
  .a-step-b > :last-child, .a-bcard-b > :last-child, .a-faq-a > :last-child, .a-callout-b > :last-child { margin-bottom: 0; }

  /* One grid of cards, the design's card look. A plate or a number and the title share a line, the text runs under both. */
  .a-bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; margin-block: 1.5rem; }
  .a-bgrid--long { grid-template-columns: minmax(0, 1fr); }
  .a-bgrid > .a-bcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .a-bcard { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
  .a-bcard--m { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: .625rem .75rem; }
  .a-bcard--m .a-bcard-b { display: contents; }
  .a-bcard--m .a-bcard-b > * { grid-column: 1 / -1; }
  .a-bcard--m .a-bcard-b > :first-child { grid-column: 2; }
  .a-prose .a-bcard-t, .a-prose .a-bcard-b h3, .a-prose .a-bcard-b h4 { margin: 0; font-size: var(--t3); font-weight: 600; line-height: 1.3; }
  .a-bcard:not(.a-bcard--m) .a-bcard-b > :first-child { margin-bottom: .25rem; }
  .a-bcard-t strong { font-weight: inherit; }

  /* One FAQ look */
  .a-faq { margin-block: 1rem 1.75rem; border-top: 1px solid var(--line); }
  .a-faq-i { padding-block: 1.125rem; border-bottom: 1px solid var(--line); }
  .a-prose .a-faq-q { margin: 0 0 .35em; font-size: var(--t4); font-weight: 600; line-height: 1.3; }
  .a-faq-n { color: var(--ink-2); }

  /* One quiet note panel */
  .a-callout { display: flex; gap: .75rem; margin-block: 1.5rem; padding: .875rem 1rem; border-radius: var(--r); background: var(--card-2); }
  .a-callout > .a-i { width: 1.25rem; height: 1.25rem; margin-top: .2em; color: var(--ink-2); }
  .a-callout-b { flex: 1; min-width: 0; }

  /* One table look for tables in old text. Hairlines only, the best row quietly marked. Scrolls in its own wrapper when it does not fit. */
  .a-tscroll { overflow-x: auto; margin-block: 1.5rem; -webkit-overflow-scrolling: touch; }
  table.a-table { width: 100%; border-collapse: collapse; font-size: var(--t2); line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
  .a-table caption { padding-bottom: .5rem; font-weight: 600; text-align: left; }
  .a-table th, .a-table td { min-width: 7rem; padding: .625rem .75rem .625rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }
  .a-table :is(th, td):last-child { padding-right: 0; }
  .a-table td:empty, .a-table:has(td:empty) th:first-child { min-width: 0; }
  @media (max-width: 619px) { .a-table :is(th, td):last-child { min-width: 11rem; } }
  .a-table th { font-size: var(--t1); font-weight: 600; }
  .a-table .a-tgroup td { padding-top: 1.25rem; font-weight: 600; }
  .a-table .a-best td { font-weight: 600; }
  .a-table a { overflow-wrap: anywhere; }

  /* Images and video in text. White behind an image, so that a transparent one stays readable in the dark theme. */
  .a-prose img { width: auto; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--band-ink); }
  .a-prose .a-flag { border: 0; border-radius: 2px; }
  .a-fig { margin-block: 1.25rem; }
  .a-fig figcaption { margin-top: .5rem; color: var(--ink-2); font-size: var(--t1); line-height: 1.4; text-wrap: pretty; }
  .a-video { position: relative; aspect-ratio: 16 / 9; margin-block: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2); overflow: hidden; }
  .a-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* Old running text */
  .a-prose h4 { margin: 1.25em 0 .35em; font-size: var(--t3); font-weight: 600; line-height: 1.3; }
  .a-prose mark { background: none; color: inherit; font-weight: 600; }
  .a-prose hr { height: 0; margin-block: 2rem; border: 0; border-top: 1px solid var(--line); }
  .a-prose code { font: inherit; font-weight: 600; }
  .a-prose ol.a-li-bare, .a-prose li.a-li-bare { margin: 0; padding: 0; list-style: none; }
  .a-prose li.a-li-bare > ol { padding-left: 1.35em; }
  .a-prose > :nth-last-child(1 of :not(script)) { margin-bottom: 0; }

  /* The long risk text */
  .atl-disclaimer { padding: .875rem 1rem; border-radius: var(--r); background: var(--card-2); font-size: var(--t2); line-height: 1.45; }
  .atl-disclaimer p { margin: 0 0 .6em; }
  .atl-disclaimer p:last-child { margin-bottom: 0; }
  .atl-disclaimer a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
}

@layer print {
  @media print {
    .a-copy, .a-video { display: none !important; }
  }
}