/**
 * Digital Safety Media listing.
 *
 * The grid, cards, caption overlay, action buttons and page header all come
 * from the active theme's "newsletter" library — this listing emits the same
 * .newsletter-grid / .newsletter-card / .card-image markup so the two pages
 * stay visually identical from a single stylesheet.
 *
 * The newsletter puts a thumbnail in .card-image, which is what gives that
 * card its height. Artwork is optional here, so the rules below supply the
 * height and a branded fill for the cards that have none.
 */

.digital-safety-media-listing .card-image {
  /* Matches the ratio the theme sets on .card-image, and stands in for it
     when the listing runs on a theme without the newsletter styles. */
  aspect-ratio: 410 / 432;
  background: linear-gradient(135deg, #0E7A8C, #29B8C6);
}

.digital-safety-media-listing .card-image--video {
  background: linear-gradient(135deg, #2A5F97, #3E82C4);
}

/* Document / video glyph, centred above the caption overlay. */
.digital-safety-media-listing .card-image::before {
  content: "";
  position: absolute;
  inset-block-start: 34%;
  /* Centred with auto margins rather than "inset-inline-start: 50%" plus a
     -50% translate: the inset flips to the right edge under RTL while the
     translate keeps pulling left, which pushed the glyph off-centre in
     Arabic. Auto margins centre it the same way in both directions. */
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  opacity: .4;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

/* An uploaded image replaces the gradient tile and its glyph. */
.digital-safety-media-listing .card-image--has-image {
  background: none;
}

.digital-safety-media-listing .card-image--has-image::before {
  content: none;
}

.digital-safety-media-listing .card-image--video::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E");
}

/**
 * Modal video player.
 *
 * Opened by js/digital-safety-media.js when a video card's button is clicked;
 * the card keeps its plain link for the no-JavaScript case.
 */

.dsm-video-dialog {
  border: 0;
  padding: 0;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  width: min(1100px, 92vw);
  background: transparent;
  overflow: visible;
}

.dsm-video-dialog::backdrop {
  background: rgba(0, 0, 0, .8);
}

.dsm-video-dialog__inner {
  position: relative;
}

.dsm-video-dialog__video,
.dsm-video-dialog__embed {
  display: block;
  width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  background: #000;
}

/*
 * A provider's player has no intrinsic size the way a video file does, so the
 * iframe is given the 16:9 the players use. `[hidden]` has to be restated:
 * the display above would otherwise keep the unused element in the layout.
 */
.dsm-video-dialog__embed {
  aspect-ratio: 16 / 9;
  border: 0;
}

.dsm-video-dialog__video[hidden],
.dsm-video-dialog__embed[hidden] {
  display: none;
}

.dsm-video-dialog__close {
  position: absolute;
  /* Inside the frame rather than overhanging it: the dialog is centred and
     can reach 90vh, so an overhanging button would be clipped by the top of
     the viewport on a tall video. */
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  cursor: pointer;
}

.dsm-video-dialog__close:hover,
.dsm-video-dialog__close:focus-visible {
  background: rgba(0, 0, 0, .85);
}

.dsm-video-dialog__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/*
 * The listing renders wherever the block is embedded, including inside a page
 * header — a taxonomy term page puts the rendered term, and so this block, in
 * the view's <header>. The theme's newsletter styling carries an unscoped
 * `header p` rule with !important colour and size, which would otherwise
 * recolour and truncate the card's meta line ("PDF · 2.8 MB") and leave it
 * unreadable on the dark tile. Restating `.card-content p` here, at a higher
 * specificity, keeps a card identical on every page it appears on.
 */
.digital-safety-media-listing .card-content p {
  max-width: none !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
  line-height: 2 !important;
}

/*
 * The theme draws the breadcrumb separator on the crumb's link
 * (`[id$="-breadcrumbs"] li a::before`), so a crumb rendered as plain text —
 * the Digital Safety section, which has no page of its own — would sit without
 * one. Draw it on the list item instead, and stand down wherever the theme's
 * rule already applies, so linked crumbs keep exactly one separator.
 */
/* The same applies to the crumb's own colour: the theme sets it on the link,
   so a text crumb would fall back to the body's near-black and read darker
   than the crumbs on every other page. */
[id$="-breadcrumbs"] ol li {
  color: var(--lightGray);
}

[id$="-breadcrumbs"] ol li:not(:first-child)::before {
  content: ">";
  margin-inline-end: 1rem;
}

[id$="-breadcrumbs"] ol li:not(:first-child):has(a)::before {
  content: none;
}

/*
 * Empty listing. A category with nothing filed under it yet gets a centred
 * message holding the space a grid of cards would have taken, rather than a
 * stray line of text under the heading.
 */
.digital-safety-media-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2.5rem;
  min-height: 28rem;
  padding: 6rem 2rem;
  text-align: center;
}

/*
 * As with the card meta line, the theme's `header p` rule would recolour and
 * halve the width of this copy when the listing renders inside a page header.
 */
.digital-safety-media-listing .digital-safety-media-empty p {
  max-width: 46rem !important;
  margin: 0;
  color: var(--color-text-body) !important;
  font-size: 18px !important;
}

/*
 * The illustration is decorative — the message beside it carries the meaning —
 * so it is drawn from CSS and stays out of the accessibility tree. Keeping it
 * here rather than in the views empty text also avoids repeating the markup in
 * every language override, and Xss::filterAdmin() (which that text passes
 * through) strips <svg> anyway.
 */
.digital-safety-media-empty::before {
  content: "";
  display: block;
  width: 14rem;
  height: 13rem;
  max-width: 60vw;
  background: url(../images/empty-listing.svg) center / contain no-repeat;
}

/*
 * Card artwork sits centred in the tile. The newsletter styling this listing
 * borrows anchors covers to the top — deliberate there, so a portrait cover
 * keeps its masthead — but these images are ordinary artwork, and anchoring
 * them lopped the bottom off. Overridden here so the newsletter listing keeps
 * its own behaviour.
 */
.digital-safety-media-listing .card-image > img {
  object-position: center;
}