/*
 * The block catalogue of TheliaCMS: what its blocks look like out of the box.
 *
 * The module renders semantic markup carrying `cms-*` class names, and this file
 * is the socle that makes that markup read as a page on any theme. Before it
 * existed, a page opened on a theme that ships no CMS styles came out as
 * unstyled markup, which is what happened on the demo site.
 *
 * Colours go through `--cms-*` tokens. Text, surface and border tokens borrow
 * the token of the theme when it names its palette the way the Flexy design
 * system does, and fall back on neutrals otherwise. The accent is the exception
 * and is not borrowed: a background and the text written on it cannot be chosen
 * separately, so the four accent tokens carry a self-consistent default and a
 * theme states its own mapping.
 *
 * Contrast: every text pair used here was measured at 4.5:1 or better against
 * both palettes. Hairlines and decorative surfaces are not text and are not
 * held to that ratio; no click target is under 24 by 24 pixels.
 *
 * Loaded on every page rather than per block: the socle is a few kilobytes and
 * caches across the whole site, where per-page CSS is downloaded again on every
 * page (SPEC 3.5).
 */

/*
 * Everything below lives in a cascade layer, so a rule the theme writes outside
 * one wins over it whatever order the two stylesheets are loaded in. That is
 * what lets the module link its socle without ever fighting a theme that
 * restyles the catalogue, and it is why the theme does not need to care where
 * in the head this file lands.
 */
@layer cms {
  :root {
    /* Text. The neutrals are dark enough to clear 4.5:1 on white, and the muted
       and subtle steps stay above it too: a caption is not an excuse. */
    --cms-color-text: var(--color-black, #23272b);
    --cms-color-text-muted: var(--color-grey-darker, #43474c);
    --cms-color-text-subtle: var(--color-grey-dark, #54585e);
    --cms-color-text-faint: var(--color-grey, #6b6f75);

    /* Surfaces. `surface` tints a section, `on-dark` is what sits on an inverted
       one, and `border` draws a hairline that is not a colour of its own. */
    --cms-color-surface: var(--color-grey-lightest, #f4f5f6);
    --cms-color-on-dark: var(--color-white, #ffffff);
    --cms-color-border: var(--color-grey-lighter, #d8dade);

    /* The accent, and what is written on it. These four are the only tokens a
       theme has to map, and the reason is that a background and the text on it
       cannot be chosen separately: the Flexy palette wants dark text on its
       brand orange, a dark accent wants white. Borrowing the background from
       the theme while keeping our own text colour is how a button ends up
       unreadable, so the default here is a self-consistent dark pair and a
       theme states its own (see the mapping in the theme of the module). */
    --cms-color-accent: #2f3337;
    --cms-color-accent-strong: #1c1f22;
    --cms-color-on-accent: #ffffff;
    --cms-color-accent-surface: #f0f1f3;

    --cms-color-error: var(--color-error, #b3261e);
  }

  /* Both names: the module renders `cms-page__content`, and the class was
     written `cms-page-content` here first. */
  :is(.cms-page__content, .cms-page-content) {
    display: flex;
    flex-direction: column;
    gap: var(--cms-block-gap, 4rem);
  }

  /* A page written as plain prose rather than with the blocks of the catalogue,
     which is what the seeded legal pages are: a reading column, and the rhythm
     of a document rather than four centimetres between two paragraphs. */
  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) {
    --cms-block-gap: 1.5rem;

    padding-block: 3rem;
  }

  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) > * {
    width: min(48rem, 100% - 2rem);
    margin-inline: auto;
  }

  /* A picture is a direct child too, and a width set on it stretches it to the
     whole reading column: an icon with no width and height attributes, which is
     what an SVG imported from another site usually is, came out 768 pixels wide.
     Its own size, capped by the column. */
  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"]))
    > :is(img, svg, video, picture, iframe) {
    width: auto;
    max-width: min(48rem, 100% - 2rem);
    height: auto;
  }

  /* Headings written straight into the content carry no class, and the reset
     leaves them the size of body text. The scale of the theme is applied by hand
     here rather than through @apply, which would pull a utility into a file the
     blocks share. */
  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) :is(h1, h2, h3) {
    font-weight: var(--font-weight-h2, 600);
    line-height: 1.2;
  }

  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) h1 {
    font-size: var(--font-size-h1-d, 2.5rem);
  }

  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) h2 {
    font-size: var(--font-size-h2-d, 1.75rem);
    margin-top: 1.5rem;
  }

  :is(.cms-page__content, .cms-page-content):not(:has(> [class*="cms-"])) h3 {
    font-size: var(--font-size-h3-d, 1.375rem);
    margin-top: 1rem;
  }

  /* Free text written as a section of its own is held at a readable width. */
  .cms-richtext {
    --cms-block-inline: min(75rem, 100% - 2rem);

    margin-inline: auto;
    width: var(--cms-block-inline);
  }

  /* What the author typed in that free text carries no class: the reset of a
     theme left its headings the size of body text, its paragraphs touching and
     its lists without a bullet, on Flexy among others. The scale of plain prose
     above, and the rhythm of a document. */
  .cms-richtext > * + * {
    margin-top: 1rem;
  }

  .cms-richtext > * + :is(h2, h3) {
    margin-top: 2rem;
  }

  .cms-richtext :is(h1, h2, h3) {
    font-weight: var(--font-weight-h2, 600);
    line-height: 1.2;
  }

  .cms-richtext h1 {
    font-size: var(--font-size-h1-d, 2.5rem);
  }

  .cms-richtext h2 {
    font-size: var(--font-size-h2-d, 1.75rem);
  }

  .cms-richtext h3 {
    font-size: var(--font-size-h3-d, 1.375rem);
  }

  .cms-richtext :is(ul, ol) {
    padding-inline-start: 1.5rem;
  }

  .cms-richtext ul {
    list-style: disc;
  }

  .cms-richtext ol {
    list-style: decimal;
  }

  .cms-richtext li + li {
    margin-top: 0.25rem;
  }

  /* The document of a product or a category, printed by the module on a hook
     of the theme between two of its sections: the space the theme puts between
     its own. */
  .cms-item-hook {
    margin-block: 3rem;
  }

  /* `:where()` on purpose: these are defaults, and a block setting a colour of
     its own (a title on a dark call to action, for instance) has to win without
     having to out-specify the page. Written with a plain descendant selector,
     this rule beat every single-class block rule and painted that title black on
     black. */
  :where(.cms-page__content, .cms-page-content) :is(h1, h2, h3) {
    color: var(--cms-color-text);
    text-wrap: balance;
  }

  :where(.cms-page__content, .cms-page-content) p {
    color: var(--cms-color-text-muted);
  }

  /* A link an author typed into their text carries no class, and the reset leaves
     it the colour of the text around it with no underline: nothing at all says it
     is a link. Underlined rather than coloured, because colour on its own is not
     a distinction either (WCAG 1.4.1). Links the catalogue renders itself have
     classes and keep their own look. */
  :where(.cms-page__content, .cms-page-content) a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Columns ------------------------------------------------------------------ */

  /* Held at the width of free text, and stacked below 48rem: three columns of a
     few words each on a phone are three words a line. */
  .cms-columns {
    margin-inline: auto;
    width: min(75rem, 100% - 2rem);
  }

  .cms-columns__title {
    margin: 0 0 2rem;
    font-size: var(--font-size-h2-d, 1.75rem);
    font-weight: var(--font-weight-h2, 600);
    line-height: 1.2;
  }

  .cms-columns__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 48rem) {
    .cms-columns--2 .cms-columns__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-columns--3 .cms-columns__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cms-columns--4 .cms-columns__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* The image keeps its proportions inside a band of fixed height, so a row of
     logos of different shapes lines up; it follows the alignment of the text. */
  .cms-columns__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: 5rem;
    margin-bottom: 1rem;
    object-fit: contain;
    object-position: left center;
  }

  :where([style*="text-align:center"]) .cms-columns__image {
    margin-inline: auto;
    object-position: center;
  }

  :where([style*="text-align:right"]) .cms-columns__image {
    margin-left: auto;
    object-position: right center;
  }

  /* With proportions chosen (anything but the band), the image takes the width
     of its column and the height its proportions give: a ratio is written on
     the image (`aspect-ratio`, `object-fit`, `object-position`), the image as
     it is keeps its own. */
  .cms-columns__image--framed {
    width: 100%;
    height: auto;
  }

  .cms-columns__heading {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-h3-d, 1.375rem);
    font-weight: var(--font-weight-h2, 600);
    line-height: 1.25;
  }

  .cms-columns__text {
    margin: 0;
  }

  /* Highlights ---------------------------------------------------------------- */

  /* One to three blocks edge to edge, flush against each other, as the hero of
     the Figma board: the large block takes two thirds of the width, the others
     the last third, one above the other. The text sits in a panel of the lightest
     tone of the theme at the foot of the picture, left aligned, with a black pill
     button. Stacked below 48rem; the panel is then drawn at the scale of the
     small blocks. */
  .cms-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
  }

  .cms-highlights__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 22rem;
    overflow: hidden;
    background: var(--color-neutral-200, #e5e7eb);
    color: var(--color-black, #282828);
  }

  /* The publication may wrap the image in a `<picture>`, inline by default; an
     image written alone (a picture kept elsewhere) fills the block the same way. */
  .cms-highlights__item picture,
  .cms-highlights__item > .cms-highlights__image {
    position: absolute;
    inset: 0;
    display: block;
  }

  .cms-highlights__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cms-highlights__content {
    position: relative;
    box-sizing: border-box;
    width: 75%;
    padding: 1.5rem;
    background: var(--color-lightest, #fff5f1);
  }

  /* The colour is set on the text itself, under the class of the block: a theme
     rule on `p` beats the colour inherited from the item. */
  .cms-highlights .cms-highlights__title {
    margin: 0;
    color: var(--color-black, #282828);
    font-size: var(--font-size-paragraph-4, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: normal;
  }

  .cms-highlights .cms-highlights__text {
    margin: 0.25rem 0 0;
    color: var(--color-black, #282828);
    font-size: var(--font-size-paragraph-4, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
  }

  .cms-highlights__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 3.125rem;
    background: var(--color-black, #282828);
    color: var(--color-white, #fff);
    font-size: var(--font-size-button-s, 0.75rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: normal;
    text-decoration: none;
  }

  /* The arrow of the button: a chevron drawn with two borders, in the colour of the text. */
  .cms-highlights__button::after {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    margin: 0 0.375rem 0 0.125rem;
    border: solid currentcolor;
    border-width: 0.09375rem 0.09375rem 0 0;
    transform: rotate(45deg);
  }

  .cms-highlights__button:hover,
  .cms-highlights__button:focus-visible {
    background: var(--color-white, #fff);
    color: var(--color-black, #282828);
    box-shadow: inset 0 0 0 1px var(--color-black, #282828);
  }

  @media (min-width: 48rem) {
    /* The ratios of the board at 1920px: the large block 1280 by 648, the whole band 1920 by 648. */
    .cms-highlights--1 .cms-highlights__item {
      min-height: 0;
      aspect-ratio: 1920 / 648;
    }

    .cms-highlights--2,
    .cms-highlights--3 {
      grid-template-columns: 2fr 1fr;
    }

    .cms-highlights--3 {
      grid-template-rows: repeat(2, 1fr);
    }

    .cms-highlights--2 .cms-highlights__item,
    .cms-highlights--3 .cms-highlights__item {
      min-height: 0;
    }

    .cms-highlights__content {
      padding: 2rem 1.5rem;
    }

    .cms-highlights--2 .cms-highlights__item--lead,
    .cms-highlights--3 .cms-highlights__item--lead {
      aspect-ratio: 1280 / 648;
    }

    .cms-highlights--3 .cms-highlights__item--lead {
      grid-row: span 2;
    }

    /* The large block, and the only one: a panel of half its width, bigger type. */
    .cms-highlights--1 .cms-highlights__content,
    .cms-highlights__item--lead .cms-highlights__content {
      width: 49.375%;
      padding: 2.875rem 5rem 2.875rem 3rem;
    }

    .cms-highlights--1 .cms-highlights__title,
    .cms-highlights__item--lead .cms-highlights__title {
      font-size: var(--font-size-paragraph-1, 1.125rem);
    }

    .cms-highlights--1 .cms-highlights__text,
    .cms-highlights__item--lead .cms-highlights__text {
      font-size: var(--font-size-paragraph-2, 1rem);
    }

    .cms-highlights--1 .cms-highlights__button,
    .cms-highlights__item--lead .cms-highlights__button {
      padding: 1rem 1.5rem;
      font-size: var(--font-size-button-l, 1rem);
      font-weight: var(--font-weight-medium, 500);
    }

    .cms-highlights--1 .cms-highlights__button::after,
    .cms-highlights__item--lead .cms-highlights__button::after {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.5rem 0 0.25rem;
    }
  }

  /* Image -------------------------------------------------------------------- */

  /* `column` is the width of free text, `narrow` the reading column, `full` the
     whole screen, edge to edge. The publication may wrap the image in a
     `<picture>`, which is inline by default and would leave a gap under it. */
  .cms-image {
    margin: 0 auto;
    width: min(75rem, 100% - 2rem);
  }

  /* Components made on the site --------------------------------------------- */

  /* Held at the width of the content like the other blocks: the stylesheet of
     a component lays out what is inside, never the page around it. */
  .cms-site {
    margin-inline: auto;
    width: min(75rem, 100% - 2rem);
  }

  .cms-image--narrow {
    width: min(48rem, 100% - 2rem);
  }

  .cms-image--full {
    width: 100%;
  }

  /* A width the editor set, in pixels: the width is on the figure
     (`min(Wpx, 100% - 2rem)`), the proportions, the part kept and the fit
     are on the image, whose height follows its width. */
  .cms-image--custom {
    margin: 0 auto;
  }

  .cms-image__img--cover {
    object-fit: cover;
  }

  .cms-image__img--contain {
    object-fit: contain;
  }

  .cms-image picture,
  .cms-image__img {
    display: block;
  }

  .cms-image__img {
    width: 100%;
    height: auto;
  }

  .cms-image__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--cms-color-text-muted, currentColor);
  }

  .cms-image--full .cms-image__caption {
    margin-inline: auto;
    width: min(75rem, 100% - 2rem);
  }

  /* The footer menu ---------------------------------------------------------- */

  .cms-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cms-menu__link {
    display: inline-block;
    min-height: 1.75rem;
    color: var(--cms-color-text-muted);
    text-decoration: none;
  }

  .cms-menu__link:hover,
  .cms-menu__link:focus-visible {
    color: var(--cms-color-text);
    text-decoration: underline;
  }

  /* The footer menu written into the hook of a theme that does not render one
     itself. It lands wherever that hook fires, which on most themes is just
     above the footer rather than inside it, so it carries its own reading width
     and its own rule above: unstyled, it came out flush against the left edge
     of the window, under a section that stops well short of it. */
  .cms-menu--footer {
    width: min(85.375rem, 100% - 3rem);
    margin-inline: auto;
    padding-block: 1.5rem;
    border-top: 1px solid var(--cms-color-border);
  }

  .cms-menu--footer .cms-menu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
  }

  /* Underlined, like the links of a footer usually are: this list sits next to
     the ones the theme renders, and a link that does not look like its
     neighbours reads as a heading. */
  .cms-menu--footer .cms-menu__link {
    text-decoration: underline;
  }

  /* The header zone: what an editor published for the header of every page,
     drawn under the header of the theme. It takes the width of the window, the
     sections inside it keep their own. */
  .cms-zone--header {
    width: 100%;
    margin: 0;
  }

  /* Forms ------------------------------------------------------------------- */

  .cms-form {
    /* Narrower than the other blocks: a line of a form is read one field at a
       time, and a text input the width of the page is uncomfortable to scan. */
    --cms-block-inline: min(45rem, 100% - 2rem);

    margin-inline: auto;
    width: var(--cms-block-inline);
    /* Sending a form scrolls back to it by its anchor, and the header is sticky:
       without this the first thing the browser lands on — the sentence saying
       what went wrong — is hidden underneath it. */
    scroll-margin-top: 6rem;
  }

  .cms-form__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .cms-form__intro {
    margin: 0 0 1.5rem;
  }

  .cms-form__required-hint {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: var(--cms-color-text-muted);
  }

  .cms-form__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .cms-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .cms-form__label,
  .cms-form__legend {
    font-weight: 600;
  }

  .cms-form__input {
    width: 100%;
    /* 44 pixels tall at the default font size: comfortably past the 24 by 24
       minimum, and the size a thumb actually hits on a phone. */
    padding: 0.75rem;
    border: 1px solid var(--cms-color-text-faint);
    border-radius: 0.5rem;
    background: var(--cms-color-on-dark);
    color: var(--cms-color-text);
    font: inherit;
  }

  .cms-form__input:focus-visible {
    outline: 2px solid var(--cms-color-text);
    outline-offset: 2px;
  }

  /* The red border alone would carry the message by colour only, so an invalid
     field also gets its message in text underneath. */
  .cms-form__field.has-error .cms-form__input {
    border-color: var(--cms-color-error);
  }

  textarea.cms-form__input {
    resize: vertical;
  }

  /* A tick box and its wording form one target: the whole line is clickable,
     which is both easier to hit and what a label is for. */
  .cms-form__tick {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
  }

  .cms-form__tick input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--cms-color-text);
  }

  .cms-form__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .cms-form__legend {
    padding: 0;
    margin-bottom: 0.25rem;
  }

  .cms-form__help {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cms-color-text-muted);
  }

  .cms-form__error {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cms-color-error);
  }

  .cms-form__error-summary,
  .cms-form__refused {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: var(--cms-color-surface);
    border-inline-start: 4px solid var(--cms-color-error);
    font-weight: 600;
  }

  .cms-form__sent {
    margin: 0;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: var(--cms-color-surface);
    border-inline-start: 4px solid var(--cms-color-accent);
    font-weight: 600;
  }

  .cms-form__legal {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cms-color-text-muted);
  }

  .cms-form__legal-link {
    color: inherit;
  }

  .cms-form__submit {
    align-self: flex-start;
    min-height: 2.75rem;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--cms-color-accent);
    color: var(--cms-color-on-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .cms-form__submit:hover,
  .cms-form__submit:focus-visible {
    background: var(--cms-color-accent-strong);
  }

  .cms-form__submit:focus-visible {
    outline: 2px solid var(--cms-color-text);
    outline-offset: 2px;
  }

  /* The page around its sections ----------------------------------------------- */

  /* The title and the summary the fallback template of the module draws, for a
     theme that has no heading band of its own. */
  .cms-page__header {
    margin-inline: auto;
    width: min(75rem, 100% - 2rem);
    padding-block: 3rem 1rem;
  }

  .cms-page__title {
    margin: 0;
    color: var(--cms-color-text);
    font-size: var(--font-size-h1-d, 2.5rem);
    font-weight: var(--font-weight-h1, 700);
    line-height: 1.15;
    text-wrap: balance;
  }

  /* The title of a page that opens on its own sections: still its level 1
     heading for screen readers and search engines, off the screen. Important,
     because this layer gives way to any rule of the theme on `h1`. */
  .cms-page__title--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .cms-page__summary {
    margin-top: 1rem;
    color: var(--cms-color-text-muted);
  }

  /* The fields of the type of the page, read at a glance: "4 pers. · 45 min". */
  .cms-page__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0 auto 2.5rem;
    width: min(75rem, 100% - 2rem);
  }

  .cms-page__field dt {
    color: var(--cms-color-text-subtle);
    font-size: 0.875rem;
  }

  .cms-page__field dd {
    margin: 0;
    color: var(--cms-color-text);
    font-weight: 600;
  }

  /* Pages of a type -------------------------------------------------------- */

  .cms-page-list {
    margin-inline: auto;
    width: min(75rem, 100% - 2rem);
  }

  .cms-page-list__title {
    margin: 0 0 2rem;
    font-size: var(--font-size-h2-d, 1.75rem);
    font-weight: var(--font-weight-h2, 600);
    line-height: 1.2;
  }

  .cms-page-list__empty {
    color: var(--cms-color-text-subtle);
  }

  .cms-page-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cms-page-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--cms-color-border);
    border-radius: 0.5rem;
    background: var(--cms-color-on-dark);
  }

  .cms-page-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.25rem;
  }

  .cms-page-card__title {
    margin: 0;
    font-size: var(--font-size-h3-d, 1.375rem);
    font-weight: var(--font-weight-h3, 600);
    line-height: 1.25;
  }

  /* The whole card answers the click, its title says where it goes. */
  .cms-page-card__link {
    color: inherit;
    text-decoration: none;
  }

  .cms-page-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .cms-page-card:has(.cms-page-card__link:focus-visible) {
    outline: 2px solid var(--cms-color-text);
    outline-offset: 2px;
  }

  .cms-page-card__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
  }

  .cms-page-card__fields dt {
    color: var(--cms-color-text-subtle);
  }

  .cms-page-card__fields dd {
    margin: 0;
    color: var(--cms-color-text);
    font-weight: 600;
  }

  .cms-page-card__summary {
    color: var(--cms-color-text-muted);
  }

  /* The facade of an embedded video (`embed` prop of a component of the site):
     a dark frame with a play button, nothing loaded from the platform. The
     script of the module swaps it for the player on a click. */
  .cms-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--cms-color-accent-strong);
    color: var(--cms-color-on-accent);
  }

  .cms-embed__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .cms-embed__play:focus-visible {
    outline: 3px solid var(--cms-color-on-accent);
    outline-offset: -6px;
  }

  .cms-embed__icon {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--cms-color-on-accent);
    position: relative;
  }

  .cms-embed__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-style: solid;
    border-width: 0.9rem 0 0.9rem 1.5rem;
    border-color: transparent transparent transparent var(--cms-color-accent-strong);
    transform: translate(-50%, -50%);
  }

  .cms-embed__play:hover .cms-embed__icon {
    transform: scale(1.06);
  }

  .cms-embed__notice {
    position: absolute;
    inset: auto 0 0;
    margin: 0;
    padding: 0.5rem 1rem;
    background: rgb(0 0 0 / 0.6);
    color: var(--cms-color-on-accent);
    font-size: 0.8125rem;
    pointer-events: none;
  }

  .cms-embed__link {
    color: var(--cms-color-on-accent);
    text-decoration: underline;
    pointer-events: auto;
  }

  .cms-embed__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .cms-embed__icon {
      transition: transform 0.15s ease;
    }
  }
}