/*
 * Masuria Esport - single blog post (assets/css/single-post.css)
 * Markup: single.php. Behaviour: assets/js/single-share.js. Loaded only where is_singular('post') is true (inc/enqueue.php).
 * Requires tokens.css, base.css, components.css (.msr-btn, .msr-icon).
 * Design (1440 px, Figma frame "Masuria Esport - Single Article View"):
 * - Hero 712 px tall from the very top (the design shows a 112 px band under the bar; here the fixed header overlays the photo instead):
 *   photo at 60% opacity under a bottom-to-top #0a0a0a gradient, a 1024 px column (32 px padding) whose content sits 64 px above the hero's bottom edge:
 *   category badge + date (16 px apart), H1 Inter 900 60/75 -3px (white; the design's gold words are dropped on purpose), author 48 px round photo + name + role.
 * - Body: 1024 px column (x 208, 32 px padding) = 576 px article + 64 px + 320 px aside, 80 px below the hero. Article: lead (4 px gold rule, 20/32.5 italic),
 *   then the post content (.entry-content, see "Post content"), then the share row (48 px above it, 1 px hairline).
 *   Aside: the "latest updates" list only (three posts, 32 px apart).
 * - Closing CTA: 128 px padding, H2 Inter 900 48/48, primary button 20/28 with 4 px tracking, "job offers" link (line + icon), 350 px "MSR" watermark at 5%.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

/* ==========================================================================
   Shared column: 1024 px wide with 32 px padding (ADDED: not in design - the padding shrinks to 20 px on a phone)
   ========================================================================== */

.msr-single {
  --msr-single-quote-bg: #111111; /* blockquote card */
  --msr-single-pad: clamp(20px, 3.125vw, 32px);

  position: relative;
}

.msr-single__wrap {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--msr-single-pad);
}

/* ==========================================================================
   Hero: 712 px = the 112 px band the design leaves above the photo + the design's 600 px
   ========================================================================== */

.msr-single__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 49.4445vw, 712px); /* ADDED: not in design - lower on narrow screens, 712 at >= 1440 */
  overflow: hidden;
  background-color: var(--msr-bg);
}

.msr-single__hero-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.msr-single__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42.3%; /* at 1440 the photo lines up with the design's 600 px hero, which starts 112 px lower */
  opacity: 0.6;
}

/* The design's 600 px gradient sits on the lower 600 px; the 112 px above it (under the bar) is the plain photo */
.msr-single__hero-media::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(100%, 600px);
  background: linear-gradient(to top, var(--msr-bg) 0%, var(--msr-bg-40) 50%, rgba(10, 10, 10, 0) 100%);
}

.msr-single__hero-inner {
  position: relative;
  z-index: var(--msr-z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-24);
  padding-block: var(--msr-space-96) var(--msr-space-64); /* ADDED: not in design - the top keeps a tall title clear of the fixed bar */
}

/* Category badge + date: 16 px apart */
.msr-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msr-space-8) var(--msr-space-16);
  margin: 0;
}

.msr-single__badge {
  padding: var(--msr-space-4) var(--msr-space-12);
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider); /* 1px */
  text-transform: uppercase;
}

.msr-single__date {
  color: var(--msr-white-40);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 1.2px */
  text-transform: uppercase;
}

/* H1: Inter 900 60/75, -3px; white on purpose (the design's gold words were dropped) */
.msr-single__title {
  max-width: 100%; /* the design's box is 896 px but its text does not wrap there: the first line is 901 px wide */
  margin: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: clamp(2rem, 6.25vw, var(--msr-fs-60)); /* ADDED: not in design - fluid below 960 px */
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: 1.25; /* 75 / 60 */
  letter-spacing: var(--msr-ls-tighter); /* -3px */
  overflow-wrap: break-word; /* ADDED: not in design */
}

/* Author: 8 px extra above (design: pt 8 on top of the 24 px gap) */
.msr-single__author {
  display: flex;
  align-items: center;
  gap: var(--msr-space-16);
  margin-top: var(--msr-space-8);
}

.msr-single__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--msr-gold);
  border-radius: var(--msr-radius-full);
  object-fit: cover;
}

/* ADDED: not in design - no photo: the initials on the card colour */
.msr-single__avatar--initials {
  display: grid;
  place-items: center;
  background-color: var(--msr-surface);
  color: var(--msr-gold);
  font-size: var(--msr-fs-16);
  font-weight: var(--msr-fw-bold);
  line-height: 1;
  letter-spacing: var(--msr-ls-normal);
}

.msr-single__author-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.msr-single__author-name {
  color: var(--msr-white);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: -0.0195em; /* -0.27px */
}

.msr-single__author-role {
  color: var(--msr-white-40);
  font-size: var(--msr-fs-12);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 1.2px */
  text-transform: uppercase;
}

/* ==========================================================================
   Layout: article 576 | 64 | aside 320 (the article takes what the 960 px content column leaves)
   ========================================================================== */

.msr-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: var(--msr-space-64);
  align-items: start;
  padding-top: clamp(40px, 5.5556vw, var(--msr-space-80)); /* ADDED: not in design - 80 at >= 1440 */
}

/* ADDED: not in design - a post without a sidebar keeps the 576 px measure, centred */
.msr-single__layout--single {
  grid-template-columns: minmax(0, 576px);
  justify-content: center;
}

.msr-single__main {
  min-width: 0;
}

/* Lead (the manual excerpt): 4 px gold rule, 24 px gap, 20/32.5 Inter Medium italic, 70% white, 40 px above the first block */
.msr-single__lead {
  margin: 0 0 40px;
  padding-left: var(--msr-space-24);
  border-left: 4px solid var(--msr-gold);
  color: var(--msr-white-70);
  font-size: var(--msr-fs-20);
  font-style: italic;
  font-weight: 500;
  line-height: var(--msr-lh-relaxed); /* 32.5 */
  letter-spacing: -0.041em; /* -0.82px */
  overflow-wrap: break-word;
}

/* ==========================================================================
   Post content (.entry-content): natively styled elements of the block editor
   Vertical rhythm from the design: 48 px around figures / quotes / sub-headings, H2 23 px above its text, 80 px before the share row.
   The paragraph gap, lists, links, hr, code and tables are ADDED: not in design.
   ========================================================================== */

.msr-single__content {
  padding-bottom: 80px;
  color: var(--msr-white-50);
  font-size: var(--msr-fs-18);
  line-height: var(--msr-lh-relaxed); /* 29.25 */
  overflow-wrap: break-word;
}

.msr-single__content > :first-child {
  margin-top: 0;
}

.msr-single__content > :last-child {
  margin-bottom: 0;
}

.msr-single__content p {
  margin: 0 0 var(--msr-space-24); /* ADDED: not in design - the design's paragraphs are single blocks */
}

.msr-single__content strong,
.msr-single__content b {
  color: var(--msr-white-70);
  font-weight: var(--msr-fw-bold);
}

.msr-single__content a {
  color: var(--msr-gold);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 89, 0.4);
  text-underline-offset: 0.2em;
  transition:
    color var(--msr-duration) var(--msr-ease),
    text-decoration-color var(--msr-duration) var(--msr-ease);
}

@media (hover: hover) {
  .msr-single__content a:hover {
    color: var(--msr-gold-hover);
    text-decoration-color: currentcolor;
  }
}

/* H2: Inter 900 30/36, -0.75px; 48 px above (the lead's own 40 px margin applies to a first H2) */
.msr-single__content h2 {
  margin: var(--msr-space-48) 0 23px;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 1.875rem;
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: 1.2; /* 36 / 30 */
  letter-spacing: var(--msr-ls-tight); /* -0.75px */
  text-transform: none; /* base.css uppercases generic content headings */
}

/* H3: Inter 700 24/32, gold */
.msr-single__content h3 {
  margin: var(--msr-space-48) 0 15px;
  color: var(--msr-gold);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-24);
  font-style: normal;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-32);
  letter-spacing: var(--msr-ls-normal);
  text-transform: none;
}

/* ADDED: not in design - H4 to H6 */
.msr-single__content h4,
.msr-single__content h5,
.msr-single__content h6 {
  margin: var(--msr-space-32) 0 var(--msr-space-12);
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-20);
  font-style: normal;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-28);
  letter-spacing: var(--msr-ls-normal);
  text-transform: none;
}

/* Figure: 1 px hairline frame (radius 2) on the image, 16 px to the caption */
.msr-single__content figure {
  margin: var(--msr-space-48) 0;
}

.msr-single__content img,
.msr-single__content video {
  max-width: 100%;
  height: auto;
}

.msr-single__content figure img {
  width: 100%;
  border: 1px solid var(--msr-white-05);
  border-radius: var(--msr-radius-sm);
}

.msr-single__content figcaption,
.msr-single__content .wp-caption-text {
  margin: var(--msr-space-16) 0 0;
  color: var(--msr-white-30);
  font-size: var(--msr-fs-12);
  font-style: italic;
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 1.2px */
  text-align: center;
  text-transform: uppercase;
}

/* ADDED: not in design - alignment classes, wide / full images stay inside the 576 px column, classic captions */
.msr-single__content .alignwide,
.msr-single__content .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.msr-single__content .aligncenter {
  margin-inline: auto;
}

.msr-single__content .alignleft,
.msr-single__content .alignright {
  max-width: 50%;
  margin-block: var(--msr-space-8) var(--msr-space-24);
}

.msr-single__content .alignleft {
  float: left;
  margin-right: var(--msr-space-24);
}

.msr-single__content .alignright {
  float: right;
  margin-left: var(--msr-space-24);
}

.msr-single__content .wp-caption {
  max-width: 100%;
}

.msr-single__content::after {
  content: '';
  display: table;
  clear: both;
}

/* Blockquote: 1 px hairline card #111, 40 px padding, big faded gold quote mark 16 px from the top-left corner, text Inter 700 24/32 white, cite gold */
.msr-single__content blockquote,
.msr-single__content .wp-block-pullquote {
  position: relative;
  margin: var(--msr-space-48) 0;
  padding: var(--msr-space-40);
  border: 1px solid var(--msr-white-05);
  background-color: var(--msr-single-quote-bg);
  color: var(--msr-white);
  font-size: var(--msr-fs-24);
  font-style: normal;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-32);
  text-align: left;
}

.msr-single__content blockquote::before,
.msr-single__content .wp-block-pullquote::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 48px;
  background: url('../icons/single-quote.svg') no-repeat 0 0 / 42px 48px;
  pointer-events: none;
}

.msr-single__content blockquote > *,
.msr-single__content .wp-block-pullquote > * {
  position: relative; /* above the quote mark */
}

.msr-single__content blockquote p {
  margin: 0 0 var(--msr-space-16); /* ADDED: not in design - a quote of several paragraphs */
}

.msr-single__content blockquote p:last-child {
  margin-bottom: 0;
}

.msr-single__content cite,
.msr-single__content blockquote footer {
  display: block;
  margin-top: var(--msr-space-24);
  color: var(--msr-gold);
  font-size: var(--msr-fs-14);
  font-style: italic;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: 0.1em; /* 1.4px */
  text-transform: uppercase;
}

.msr-single__content blockquote cite::before {
  content: '\2014\00a0'; /* the design's "— " before the author */
}

/* ADDED: not in design - lists: 24 px indent, gold markers */
.msr-single__content ul,
.msr-single__content ol {
  margin: 0 0 var(--msr-space-24);
  padding-left: var(--msr-space-24);
}

.msr-single__content li {
  margin: 0 0 var(--msr-space-8);
  padding-left: var(--msr-space-4);
}

.msr-single__content li::marker {
  color: var(--msr-gold);
}

.msr-single__content li > ul,
.msr-single__content li > ol {
  margin: var(--msr-space-8) 0 0;
}

/* ADDED: not in design - horizontal rule, inline code, code blocks, tables */
.msr-single__content hr {
  height: 0;
  margin: var(--msr-space-48) 0;
  border: 0;
  border-top: 1px solid var(--msr-white-10);
  background: none;
}

.msr-single__content code,
.msr-single__content kbd,
.msr-single__content samp {
  padding: 2px 6px;
  border-radius: var(--msr-radius-sm);
  background-color: var(--msr-surface);
  color: var(--msr-white-70);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.msr-single__content pre {
  margin: var(--msr-space-32) 0;
  padding: var(--msr-space-24);
  overflow-x: auto;
  border: 1px solid var(--msr-white-05);
  background-color: var(--msr-single-quote-bg);
  color: var(--msr-white-70);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-relaxed);
  white-space: pre;
}

.msr-single__content pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.msr-single__content .wp-block-table {
  margin: var(--msr-space-32) 0;
  overflow-x: auto;
}

.msr-single__content table {
  width: 100%;
  margin: var(--msr-space-32) 0;
  border-collapse: collapse;
  font-size: var(--msr-fs-16);
  line-height: var(--msr-lh-24);
}

.msr-single__content .wp-block-table table {
  margin: 0;
}

.msr-single__content th,
.msr-single__content td {
  padding: var(--msr-space-12) var(--msr-space-16);
  border: 1px solid var(--msr-white-10);
  text-align: left;
  vertical-align: top;
}

.msr-single__content th {
  background-color: var(--msr-white-05);
  color: var(--msr-gold);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

/* ADDED: not in design - embeds, galleries, block buttons, page links of a multi-page post */
.msr-single__content iframe,
.msr-single__content embed,
.msr-single__content object {
  max-width: 100%;
}

.msr-single__content .wp-block-embed__wrapper {
  position: relative;
}

.msr-single__content .wp-block-gallery {
  margin: var(--msr-space-48) 0;
}

.msr-single__content .wp-block-button__link {
  border-radius: var(--msr-radius-none);
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  letter-spacing: var(--msr-ls-wider);
  text-decoration: none;
  text-transform: uppercase;
}

.msr-single__content .page-links,
.msr-single .page-links {
  margin-top: var(--msr-space-32);
  color: var(--msr-white-50);
  font-size: var(--msr-fs-14);
}

/* ==========================================================================
   Share row: 1 px hairline, 48 px padding, label + 40 x 40 buttons (16 px apart, radius 2, 5% white)
   The design's third button is an icon set of three social networks; here: X (a link) and copy link (ADDED: not in design - the glyph is a standard link icon)
   ========================================================================== */

.msr-single__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msr-space-16) var(--msr-space-24);
  padding-top: var(--msr-space-48);
  border-top: 1px solid var(--msr-white-05);
}

.msr-single__share-label {
  margin: 0;
  color: var(--msr-white-30);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 1.2px */
  text-transform: uppercase;
}

.msr-single__share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msr-space-16);
}

.msr-single__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--msr-radius-sm);
  background-color: var(--msr-white-05);
  color: var(--msr-white);
  cursor: pointer;
  /* ADDED: not in design - state transitions */
  transition:
    background-color var(--msr-duration) var(--msr-ease),
    transform var(--msr-duration-fast) var(--msr-ease);
}

.msr-single__share-btn:active {
  transform: translateY(1px);
}

@media (hover: hover) {
  .msr-single__share-btn:hover {
    background-color: var(--msr-white-20);
  }
}

/* ADDED: not in design - "Copied" confirmation next to the buttons (also the aria-live region) */
.msr-single__share-status {
  color: var(--msr-gold);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

.msr-single__share-status:empty {
  display: none;
}

/* ==========================================================================
   Aside: 320 px, holds only the "latest updates" list
   ========================================================================== */

.msr-single__aside {
  min-width: 0;
}

/* Heading: Inter 900 12/16, 4px tracking, gold; 1 px gold (20%) line 16 px below, 24 px above the list */
.msr-single__aside-title {
  margin: 0 0 var(--msr-space-24);
  padding-bottom: var(--msr-space-16);
  border-bottom: 1px solid var(--msr-gold-20);
  color: var(--msr-gold);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-16);
  letter-spacing: 4px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.msr-single__recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-32);
}

.msr-single__recent-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.msr-single__recent-date {
  color: var(--msr-white-30);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider); /* 1px */
  text-transform: uppercase;
}

.msr-single__recent-link {
  color: var(--msr-white);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: 1.375; /* 19.25 */
  overflow-wrap: break-word;
  transition: color var(--msr-duration) var(--msr-ease); /* ADDED: not in design - hover */
}

@media (hover: hover) {
  a.msr-single__recent-link:hover {
    color: var(--msr-gold);
  }
}

/* ==========================================================================
   Closing CTA: padding 128 (top: the section gap of the site), H2 48/48 + 48 px + button
   The design's section overlaps the share row by 45 px; here it starts a standard section gap below the article
   ========================================================================== */

.msr-single__cta {
  position: relative;
  overflow: hidden; /* the watermark is wider than a phone */
  padding: var(--msr-section-gap-fluid) clamp(20px, 4.4445vw, 64px) var(--msr-section-py-fluid);
  background-color: var(--msr-bg);
}

.msr-single__cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-48);
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
}

/* "MSR": Inter 900 350/350, -20px tracking, white at 5%, centred on the content (fluid below 1440: ADDED: not in design) */
.msr-single__cta-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--msr-white);
  font-size: clamp(7.5rem, 24.3056vw, 21.875rem);
  font-weight: var(--msr-fw-black);
  line-height: 1;
  letter-spacing: -0.0571em; /* -20px */
  white-space: nowrap;
  opacity: 0.05;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.msr-single__cta-title {
  position: relative;
  margin: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: clamp(2rem, 3.3334vw, var(--msr-fs-48));
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: 1;
  letter-spacing: var(--msr-ls-tight);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.msr-single__cta-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

/* Button: the shared .msr-btn--lg with the design's 20/28 type and 30px/40% glow (the default is 18px and 25px/30%) */
.msr-single__cta .msr-btn--lg {
  font-size: var(--msr-fs-20);
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-28);
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
}

/* ==========================================================================
   Responsive (ADDED: not in design) - the 1440 px pixels above are unchanged
   ========================================================================== */

/* Aside under the article */
@media (max-width: 1023px) {
  .msr-single__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-64);
  }
}

@media (max-width: 640px) {
  .msr-single__hero-inner {
    padding-block: var(--msr-space-96) var(--msr-space-40);
  }

  .msr-single__content {
    padding-bottom: var(--msr-space-48);
    font-size: var(--msr-fs-16);
  }

  .msr-single__lead {
    margin-bottom: var(--msr-space-32);
    padding-left: var(--msr-space-16);
    font-size: var(--msr-fs-18);
    letter-spacing: -0.02em;
  }

  .msr-single__content h2 {
    font-size: 1.5rem;
  }

  .msr-single__content h3 {
    font-size: var(--msr-fs-20);
    line-height: var(--msr-lh-28);
  }

  .msr-single__content blockquote,
  .msr-single__content .wp-block-pullquote {
    padding: var(--msr-space-32) var(--msr-space-24);
    font-size: var(--msr-fs-20);
    line-height: var(--msr-lh-28);
  }

  .msr-single__content .alignleft,
  .msr-single__content .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }

  /* The 435 px button would overflow a phone: smaller type and padding, may wrap on very narrow screens */
  .msr-single__cta .msr-btn--lg {
    max-width: 100%;
    padding: var(--msr-space-20) var(--msr-space-24);
    font-size: var(--msr-fs-16);
    letter-spacing: var(--msr-ls-wider);
    white-space: normal;
  }
}