/**
 * Initiatives & Priorities — page-scoped redesign
 * -----------------------------------------------
 * Target: /initiatives-and-priorities  (body.is-path--support-initiatives)
 *
 * Replaces the small-thumbnail + long-paragraph layout with a horizontal
 * "feature card" pattern: large image on the left, title + GIVE NOW button,
 * and body copy on the right. One card per row.
 *
 * Scoped to `body.is-path--support-initiatives` so widerblocks3 markup on
 * other pages is unaffected.
 *
 * TO REVERT: comment out (or remove) the `css/initiatives-page.css: {}`
 * line in gmu_libraries.libraries.yml under `components`, then run
 * `vendor/bin/drush cr`.
 */

/* Reset the generic widerblocks-cards grid for this page only */
body.is-path--support-initiatives .widerblocks3 > ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.is-path--support-initiatives .widerblocks3 > ul > li {
  position: relative;
  display: block;
  flex-direction: initial;
  background: var(--gmu-white, #fff);
  border-top: 4px solid var(--gmu-primary-green, #005239);
  border-left: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 1.75rem 1.75rem 1.75rem 290px;
  margin: 0 0 1.75rem;
  min-height: 260px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

body.is-path--support-initiatives .widerblocks3 > ul > li:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

/* Promote the tiny inline image to a real feature image, pinned to the
   left edge of the card. Overrides the inline width/height/float styles
   that the editor put on each <img>. */
body.is-path--support-initiatives .widerblocks3 > ul > li h3 img {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  width: 240px !important;
  height: 240px !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  object-fit: cover;
  border-radius: 6px;
  background: var(--gmu-light-gray, #eee);
}

/* Heading row: title + GIVE NOW button */
body.is-path--support-initiatives .widerblocks3 > ul > li h3 {
  display: block;
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, 'Open Sans', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gmu-primary-green, #005239);
}

body.is-path--support-initiatives .widerblocks3 > ul > li h3 a {
  color: var(--gmu-primary-green, #005239);
  text-decoration: none;
}

body.is-path--support-initiatives .widerblocks3 > ul > li h3 a:hover {
  text-decoration: underline;
}

/* "GIVE NOW" link — render as a button. Detected by ending with the
   advancement giving subdomains used in the source markup. */
body.is-path--support-initiatives .widerblocks3 > ul > li h3 a[href*="advancement.gmu.edu"],
body.is-path--support-initiatives .widerblocks3 > ul > li h3 a[href*="securemason.gmu.edu"] {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.4rem 0.95rem;
  background: var(--gmu-accent-yellow, #ffc733);
  color: var(--gmu-primary-green, #005239) !important;
  font-family: var(--font-heading, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  border-radius: 4px;
  vertical-align: middle;
  transition: background 0.18s ease, transform 0.18s ease;
}

body.is-path--support-initiatives .widerblocks3 > ul > li h3 a[href*="advancement.gmu.edu"]:hover,
body.is-path--support-initiatives .widerblocks3 > ul > li h3 a[href*="securemason.gmu.edu"]:hover {
  background: #ffd866;
  text-decoration: none !important;
}

/* Strip the editor's inline `margin-left: 100px` indents from each
   paragraph — the new layout already provides the offset via padding. */
body.is-path--support-initiatives .widerblocks3 > ul > li p,
body.is-path--support-initiatives .widerblocks3 > ul > li p[style*="margin-left"] {
  margin: 0.75rem 0 0 0 !important;
  line-height: 1.6;
  color: var(--gmu-dark-gray, #333);
  font-size: var(--font-size-15, 0.9375rem);
}

body.is-path--support-initiatives .widerblocks3 > ul > li p:first-of-type {
  margin-top: 0 !important;
}

/* Last item is a flex row of two videos — let it keep its inline flex
   layout and just give it the card chrome with no left-pad reservation. */
body.is-path--support-initiatives .widerblocks3 > ul > li[style*="display: flex"] {
  padding: 1.5rem;
  min-height: 0;
}

body.is-path--support-initiatives .widerblocks3 > ul > li[style*="display: flex"] iframe {
  max-width: 100%;
}

/* Mobile: stack image on top, full width */
@media (max-width: 768px) {
  body.is-path--support-initiatives .widerblocks3 > ul > li {
    padding: 1.25rem;
    min-height: 0;
  }
  body.is-path--support-initiatives .widerblocks3 > ul > li h3 img {
    position: static;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 1rem !important;
  }
  body.is-path--support-initiatives .widerblocks3 > ul > li h3 {
    font-size: 1.25rem;
  }
}