/************************************************************
 * WHATCANYOUDO — DOWNLOAD GRID (download-grid.css)
 * Purpose:
 *  - Match WPBakery 3-up poster grid
 *  - Centered image w/ light border frame
 *  - “Bold link + arrow” treatment without FontAwesome
 *
 * Assumptions:
 *  - The wrapper around the field has class: .wcyd-download-grid
 *  - Each item uses your paragraph template: .wcyd-download-item
 ************************************************************/

/* ============================================================
   GRID LAYOUT (3-up like vc_col-sm-4)
   ============================================================ */

.wcyd-download-grid .field__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  row-gap: 60px;
}

/* Drupal sometimes adds margins on .field__item; neutralize for clean grid */
.wcyd-download-grid .field__items > .field__item {
  margin: 0;
}

/* Responsive: 2-up then 1-up */
@media (max-width: 992px) {
  .wcyd-download-grid .field__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .wcyd-download-grid .field__items {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CARD / ITEM
   ============================================================ */

.wcyd-download-item {
  text-align: center;
}

/* Space between image and link (similar to WP’s stacked blocks) */
.wcyd-download-item__figure {
  margin: 0 0 10px;
  background: none;
}

/* Image frame similar to vc_box_border_grey */
.wcyd-download-item__imgframe {
  border: 1px dotted #d0d0d0;
  /* padding: 10px; */
  display: inline-block;
  background: #fff;
}

/* Ensure images size nicely (WP had ~250px wide) */
.wcyd-download-item__imgframe img {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
}

/* ============================================================
   LINK + ARROW (WP “f-semibold icon-arrow” feel)
   ============================================================ */

/* Remove default paragraph spacing if Drupal adds it */
.wcyd-download-item__link {
  margin: 0;
  text-align: start;
}

/* Link styling */
.wcyd-download-link {
  font-weight: 600;
  text-decoration: none;
}

/* Arrow character + subtle motion (matches your PSA pattern) */
.wcyd-download-link::after {
  content: " ➔";
  font-size: 16px;
  display: inline-block;
  margin-left: 6px;
  transition: margin 0.2s ease-out;
}

.wcyd-download-link:hover {
  text-decoration: underline;
}

.wcyd-download-link:hover::after {
  margin-left: 10px;
}

/* ============================================================
   OPTIONAL: Keep layout stable if titles wrap long
   (comment out if you don’t want it)
   ============================================================ */

/*
.wcyd-download-link {
  display: inline;
  word-break: normal;
  overflow-wrap: anywhere;
}
*/