/* A faithful Polish wording sample, with field explanations localised by the
   page surrounding it. The image itself is intentionally Polish on every
   locale so readers can recognise the format encountered in Poland. */
.atlas-wording-sample {
  margin: clamp(28px, 4vw, 42px) 0;
  padding: clamp(14px, 2.2vw, 22px);
  border: 1px solid var(--article-line, rgba(239, 231, 220, .14));
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(223, 126, 158, .09), transparent 48%),
    rgba(255, 255, 255, .018);
}

.atlas-wording-sample__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none !important;
  margin: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
}

.atlas-wording-sample__visual {
  position: relative;
  width: min(100%, 568px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(239, 231, 220, .12);
  border-radius: 13px;
  background: #0e111a;
}

.atlas-wording-sample__locale-title {
  position: absolute;
  z-index: 1;
  top: 5.55%;
  right: 6%;
  left: 9.5%;
  display: flex;
  align-items: center;
  height: 8.2%;
  color: #ffc5de;
  font-family: var(--article-ui, var(--tr-font-ui, Arial, sans-serif));
  font-size: clamp(13px, 1.75vw, 13px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.atlas-wording-sample figcaption {
  max-width: 68ch;
  margin: 15px auto 0;
  color: var(--article-muted, #c2b5a7);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}

.atlas-wording-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.atlas-wording-guide > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(239, 231, 220, .1);
  border-radius: 12px;
  background: rgba(5, 5, 6, .42);
}

.atlas-wording-guide dt {
  margin: 0 0 5px;
  color: var(--article-pink, #df7e9e);
  font-family: var(--article-ui, inherit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.atlas-wording-guide dd {
  margin: 0;
  color: var(--article-muted, #c2b5a7);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .atlas-wording-sample { margin-inline: -2px; }
  .atlas-wording-guide { grid-template-columns: 1fr; }
  .atlas-wording-guide > div { padding: 12px 13px; }
  .atlas-wording-sample__locale-title { letter-spacing: .11em; }
}