/**
 * Widerblocks Card Grid (override)
 * ---------------------------------
 * Converts `.widerblocks2` / `.widerblocks3` lists from stacked horizontal
 * bars into a responsive card grid. Used on /catalogs, /research, /ask,
 * and ~60 other pages that embed <div class="widerblocks2"><ul><li>...</li></ul>.
 *
 * Scope note: all card styling is restricted to direct children (>) of the
 * widerblocks ul so nested sub-lists inside a card stay as plain bullets.
 *
 * TO REVERT: comment out (or remove) the `css/widerblocks-cards.css: {}`
 * line in gmu_libraries.libraries.yml under the `components` library, then
 * run `vendor/bin/drush cr`. No other file changes required.
 */

.widerblocks2 > ul,
.widerblocks3 > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.widerblocks2 > ul > li,
.widerblocks3 > ul > li {
  display: flex;
  flex-direction: column;
  background: var(--gmu-white, #fff);
  border-left: none;
  border-top: 4px solid var(--gmu-primary-green, #005239);
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 1.1rem 1.25rem;
  margin: 0;
  overflow: visible;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.widerblocks2 > ul > li:hover,
.widerblocks3 > ul > li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}

/* Heading: icon + title on one row, no float */
.widerblocks2 > ul > li > h2,
.widerblocks2 > ul > li > h3,
.widerblocks3 > ul > li > h2,
.widerblocks3 > ul > li > h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.widerblocks2 > ul > li > h2 img,
.widerblocks2 > ul > li > h3 img,
.widerblocks3 > ul > li > h2 img,
.widerblocks3 > ul > li > h3 img {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Card-level paragraphs: full width, not indented past icon */
.widerblocks2 > ul > li > p,
.widerblocks3 > ul > li > p {
  margin: 0;
}

.widerblocks2 > ul > li > p + p,
.widerblocks3 > ul > li > p + p {
  margin-top: 0.5rem;
}

/* Nested sub-lists inside a card: plain bullets, no card chrome, no hover */
.widerblocks2 > ul > li ul,
.widerblocks3 > ul > li ul {
  list-style: disc;
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.widerblocks2 > ul > li ul li,
.widerblocks3 > ul > li ul li {
  display: list-item;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0.25rem 0;
  transform: none;
  transition: none;
  overflow: visible;
}

.widerblocks2 > ul > li ul li:hover,
.widerblocks3 > ul > li ul li:hover {
  box-shadow: none;
  transform: none;
  background: none;
}

/* When multiple `.widerblocks2` divs are siblings in the same parent
   (e.g. /ask splits each section into its own widerblocks2), flow them
   side-by-side so cards don't stack vertically. */
.widerblocks2:has(~ .widerblocks2),
.widerblocks2:has(+ .widerblocks2),
.widerblocks2 ~ .widerblocks2 {
  display: inline-block;
  vertical-align: top;
  width: 320px;
  max-width: 100%;
  margin: 0 1.25rem 1.25rem 0;
}

.widerblocks2:has(~ .widerblocks2) > ul,
.widerblocks2:has(+ .widerblocks2) > ul,
.widerblocks2 ~ .widerblocks2 > ul {
  display: block;
}

@media (max-width: 600px) {
  .widerblocks2 > ul,
  .widerblocks3 > ul {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .widerblocks2:has(~ .widerblocks2),
  .widerblocks2:has(+ .widerblocks2),
  .widerblocks2 ~ .widerblocks2 {
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* /computers-and-technology: each section is its own full-width grid,
   not a side-by-side column — override the sibling-detection block rule. */
.is-path--use-computers-and-technology .widerblocks2 {
  display: block;
  width: 100%;
  margin: 0 0 2rem 0;
}
.is-path--use-computers-and-technology .widerblocks2 > ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* === Fix: inconsistent icon placement in widerblocks card headings ===
 * Source markup varies — some cards wrap the icon inside the <a>
 * (<h3><a><img>Title</a></h3>), others place it as a sibling
 * (<h3><img><a>Title</a></h3>). The h3-level flex only aligns direct
 * children, so when the img lives inside the <a> it falls under the
 * <a>'s default block/inline flow and ends up above the label on some
 * cards. Make the <a> itself an inline-flex row so icon-left/text-right
 * holds regardless of which side of the <a> the img is on.
 * ================================================================ */
.widerblocks2 > ul > li > h3 a,
.widerblocks2 > ul > li > h2 a,
.widerblocks3 > ul > li > h3 a,
.widerblocks3 > ul > li > h2 a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.widerblocks2 > ul > li > h3 a img,
.widerblocks2 > ul > li > h2 a img,
.widerblocks3 > ul > li > h3 a img,
.widerblocks3 > ul > li > h2 a img {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* === Fix: stray <br clear:both> forces text below icon ============
 * Some source markup (e.g. /search) inserts a <br style="clear:both">
 * between the icon <img> and the label text inside the heading <a>.
 * The inline-flex row above places img and text on one line, but the
 * <br> still introduces a line break that pushes the text down/under.
 * Hide line breaks inside card headings; the flex row handles wrap.
 * ================================================================ */
.widerblocks2 > ul > li > h2 br,
.widerblocks2 > ul > li > h3 br,
.widerblocks3 > ul > li > h2 br,
.widerblocks3 > ul > li > h3 br {
  display: none;
}

/* === Card heading color + long-URL wrap ==========================
 * 1. Card titles (h2/h3) had no color set; they fell through to near-
 *    black. Make them GMU primary green so plain-text titles (e.g. on
 *    /use-libraries: "library.gmu.edu", "Borrowing Items") match the
 *    rest of the card design language. Linked titles already pick up
 *    the link color via the broader rule.
 * 2. Long URL strings displayed as link text (no natural break points)
 *    were overflowing past the card edge on narrow columns. Allow
 *    them to wrap anywhere as a last resort.
 * ================================================================ */
.widerblocks2 > ul > li > h2,
.widerblocks2 > ul > li > h3,
.widerblocks3 > ul > li > h2,
.widerblocks3 > ul > li > h3 {
  color: var(--gmu-primary-green, #005239);
}

.widerblocks2 > ul > li,
.widerblocks3 > ul > li {
  overflow-wrap: anywhere;
  word-break: break-word;
}