/************************************************************
 * PSA DOWNLOAD CENTER — CSS-ONLY LAYOUT (NO TWIG CHANGES)
 * Assumes:
 * - Multiple .psa-download-grid blocks (each = one PSA "card")
 * - Each .psa-download-grid contains multiple .psa-download-psa__download rows
 * - Header markup lives inside each .psa-download-psa__download row
 ************************************************************/

/* Scope hard to this view so we don't break other pages */
.view-id-psa_download_assets.view-display-id-block_1 .view-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

@media (max-width: 992px) {
  .view-id-psa_download_assets.view-display-id-block_1 .view-content {
    grid-template-columns: 1fr;
  }
}

/* Each PSA "card" wrapper (your .psa-download-grid block) */
.view-id-psa_download_assets.view-display-id-block_1 .psa-download-grid {
  display: block;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  padding: 16px;
}

/* ----------------------------------------------------------
   SHOW HEADER (THUMB + TITLE) ONLY ON FIRST DOWNLOAD ROW
   Your structure: .psa-download-grid > (download rows...)
---------------------------------------------------------- */

/* Hide header on every download row by default */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__download .psa-download-psa__header {
  display: none;
}

/* Show header only for the first download row in each PSA card */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid > .psa-download-psa__download:first-of-type .psa-download-psa__header {
  display: block;
}

/* ----------------------------------------------------------
   STACK DOWNLOAD ROWS (NOT SIDE-BY-SIDE)
---------------------------------------------------------- */

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid > .psa-download-psa__download {
  display: block;
  width: 100%;
}

/* Spacing / separators between download rows */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid > .psa-download-psa__download + .psa-download-psa__download {
  /* margin-top: 14px; */
  /* padding-top: 14px; */
  /* border-top: 1px solid #e6e6e6; */
}

/* ----------------------------------------------------------
   THUMBNAIL: "BIGGER" BY REMOVING EXTRA WRAPPER SPACING
---------------------------------------------------------- */

/* Kill random margins/padding coming from Drupal field wrappers */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .field,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .field__item,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .media,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb picture {
  margin: 0;
  padding: 0;
}

/* Make the image fill the card width */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional cap if the "large" style is too tall */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb img {
  /* max-height: 220px; */      /* adjust 180–260 if needed */
  object-fit: cover;
}

/* Slight spacing between thumb and title */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__header {
  margin: 0 0 12px 0;
  padding: 0;
}

/* Optional: “full bleed” inside the card (image touches card edges) */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid .psa-download-psa__header {
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -16px;
}

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid .psa-download-psa__thumb img {
  border: 0;
}

/* Put title back on normal padding after full-bleed image */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid .psa-download-psa__title {
  padding: 12px 16px 0 16px;
  margin: 0;
}

/* ----------------------------------------------------------
   WP TYPOGRAPHY (TITLE / DOWNLOAD LINK / DESCRIPTION)
---------------------------------------------------------- */

/* PSA Title */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__title a {
  color: rgb(5, 128, 163);
  display: inline;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__title a:hover {
  text-decoration: underline;
}

/* Download link */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__download-link a {
  color: rgb(5, 128, 163);
  cursor: pointer;
  display: inline;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30.6px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__download-link a:hover {
  text-decoration: underline;
}

/* Description under the download link */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__download-desc p {
  color: rgb(51, 51, 51);
  display: block;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 30.6px;
  margin: 27px 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/************************************************************
 * PSA DOWNLOAD CENTER — PLAY OVERLAY (CSS-ONLY, NO TWIG)
 * Draws:
 *  - dark hover overlay
 *  - dotted ring
 *  - centered triangle
 *
 * NOTE:
 * This is purely visual unless your thumb is wrapped in a link.
 ************************************************************/

/* The thumb is the positioning context */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Make sure the rendered media wrappers don't create stacking issues */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .media,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .field,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .field__item {
  position: static;
}

/* Dark overlay (off by default) */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

/* Dotted ring */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px dotted rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.15);
  z-index: 3;
  pointer-events: none;
}

/* Triangle (separate pseudo-element via a real element target)
   We attach it to the thumb's img using a wrapper trick:
   - keep img at z-index:1
   - add triangle using a new pseudo-element on the thumb via box-shadow-free drawing
*/
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb {
  /* allow a third layer using a background on the thumb itself */
}

/* We use an extra pseudo-element by targeting the thumb *image* with a filter-safe approach:
   pseudo-elements don't exist on <img>, so we create the triangle using a CSS mask on a
   positioned element: we can do it with a linear-gradient background on the thumb itself,
   but simplest is an absolutely positioned triangle using clip-path.
*/
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .psa-download-play {
  display: none; /* safety if you ever add markup later */
}

/* Triangle using clip-path on an absolutely positioned box */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .psa-download-play-triangle {
  display: none; /* safety if exists */
}

/* Create the triangle as a real overlay via a pseudo-element on the thumb *using* clip-path */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb {
  /* nothing needed */
}

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb > .psa-download-psa__triangle {
  display: none; /* safety if someone adds it */
}

/* Actual triangle: we’ll use an additional pseudo-element by repurposing the thumb’s background layer.
   This is reliable and stays centered.
*/
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb {
  /* create a stacking context so the triangle can sit above ::after */
  isolation: isolate;
}

/* Triangle drawn with clip-path on a new pseudo-element using the thumb's background layer */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb::marker { content: ""; } /* no-op; keeps some minifiers calm */

/* Triangle as a third overlay using outline trick: use box-shadow + clip-path */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .__noop { display:none; } /* no-op */

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb .__noop2 { display:none; } /* no-op */

/* Third overlay pseudo-element: use a custom property hack by drawing triangle with borders
   on an absolutely positioned element via :has() fallback? No.
   We will do it the straightforward way: use an extra pseudo-element on the TITLE link
   is unreliable. Instead: use clip-path triangle on the thumb using a background + mask.

   Implement triangle with a positioned element using ::before on the ring is taken,
   so we'll move overlay to .psa-download-psa__thumb::before (kept), ring to ::after,
   and triangle will be drawn using a background SVG via data URI (reliable, crisp).
*/

/* Triangle SVG centered */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb::selection { background: transparent; } /* no-op */

/* Add triangle via background-image on a positioned pseudo-element by converting overlay/ring:
   We'll keep overlay as ::before, ring as ::after, and add triangle via box-shadowless trick:
   Use background-image on ::after AND keep ring via border. This works because border+background co-exist.
*/
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb::after {
  /* keep existing ring styles above, and add triangle image centered */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpolygon points='18,14 18,34 34,24' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 52% 50%;
  background-size: 50px 50px;
}

/* Hover/focus behaviors: show overlay on thumb or header hover/focus */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__thumb:hover::before,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__header:hover .psa-download-psa__thumb::before,
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-psa__header:focus-within .psa-download-psa__thumb::before {
  opacity: 1;
}

/* Optional subtle card hover */
.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid {
  transition: box-shadow 0.2s ease-in-out;
}

.view-id-psa_download_assets.view-display-id-block_1
.psa-download-grid:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .view-id-psa_download_assets.view-display-id-block_1
  .psa-download-psa__thumb::before,
  .view-id-psa_download_assets.view-display-id-block_1
  .psa-download-grid {
    transition: none !important;
  }
}