/************************************************************
 * WHATCANYOUDO — SPANISH PSA RESOURCE SECTIONS (FULL CSS FILE)
 *
 * Covers:
 * - Section headings (e.g., Carteles, Guía de Discusión)
 * - Resource card layout (image left, links right)
 * - Resource links styled like WP with bold + arrow + hover nudge
 * - Spanish back link at bottom (right-aligned, left arrow prefix)
 ************************************************************/

/************************************************************
 * 0) Base container spacing (optional, safe)
 ************************************************************/

.block-field-blocknodepsafield-resource-sections {
  margin-top: 8px;
}

/************************************************************
 * 1) Section headings (Carteles / Guía de Discusión)
 ************************************************************/

.wcyd-resource-section-title {
  box-sizing: border-box;
  color: var(--wcyd-text);
  display: block;               /* you wanted block behavior */
  font-family: var(--wcyd-font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-bold);
  line-height: 27.2px;
  margin: 24px 0 12px;
  text-size-adjust: 100%;
  width: auto;
  height: auto;

  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Defensive: if Drupal is outputting the heading via a field wrapper */
.paragraph--type--resource-section-heading {
  margin: 18px 0 10px;
}

.paragraph--type--resource-section-heading
.field--name-field-heading
.field__item {
  box-sizing: border-box;
  color: var(--wcyd-text);
  display: block;
  font-family: var(--wcyd-font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-bold);
  line-height: 27.2px;
  margin: 24px 0 12px;
  text-size-adjust: 100%;
  width: auto;
  height: auto;

  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/************************************************************
 * 2) Resource card layout: image LEFT, links RIGHT
 ************************************************************/

/* Primary layout class (recommended if your paragraph twig adds wrappers) */
.wcyd-resource-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 0 0 24px;
}

/* Defensive: if you have not added wrappers yet, target the paragraph itself */
.paragraph--type--resource-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 0 0 24px;
}

/* Ensure the image field stays in the left column */
.wcyd-resource-card__media,
.paragraph--type--resource-card .field--name-field-resource-card-image {
  grid-column: 1;
}

/* Ensure the links field stays in the right column */
.wcyd-resource-card__content,
.paragraph--type--resource-card .field--name-field-resource-card-links {
  grid-column: 2;
}

/* Image styling similar to WP "bordered" */
.wcyd-resource-card__media img,
.paragraph--type--resource-card
.field--name-field-resource-card-image img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;

  border: 1px solid var(--wcyd-gray-muted);
  padding: 6px;
  background: var(--wcyd-white);

  box-sizing: border-box;
}

/* Slight alignment polish in case Drupal wraps with picture/media wrappers */
.paragraph--type--resource-card
.field--name-field-resource-card-image .field__item,
.paragraph--type--resource-card
.field--name-field-resource-card-image .media,
.paragraph--type--resource-card
.field--name-field-resource-card-image picture {
  display: block;
  margin: 0;
}

/************************************************************
 * 3) Resource links list styling (no bullets) + arrow links
 ************************************************************/

/* Remove Drupal's default field label spacing if showing */
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__label,
.paragraph--type--resource-card
.field--name-field-resource-card-image .field__label {
  display: none;
}

/* Normalize the link list */
.wcyd-resource-card__content .field__items,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__items {
  margin: 0;
  padding: 0;
  /* margin-bottom: 10px; */
}

/* Each link item */
.wcyd-resource-card__content .field__item,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

/* Base link style: WP-ish arrow list */
.wcyd-resource-card__content .field__item a,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a {
  box-sizing: border-box;
  color: var(--wcyd-link);
  cursor: pointer;
  display: inline;
  font-family: var(--wcyd-font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-bold);
  line-height: 27.2px;
  margin-bottom: 0;
  text-decoration: none;
  text-size-adjust: 100%;
  width: auto;

  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Arrow */
.wcyd-resource-card__content .field__item a::after,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a::after {
  content: var(--wcyd-arrow-after);
  font-size: 16px;
  display: inline-block;
  margin-left: 6px;
  transition: margin var(--wcyd-transition-fast);
}

/* Hover behavior */
.wcyd-resource-card__content .field__item a:hover,
.wcyd-resource-card__content .field__item a:focus,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a:hover,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a:focus {
  text-decoration: underline;
}

.wcyd-resource-card__content .field__item a:hover::after,
.wcyd-resource-card__content .field__item a:focus::after,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a:hover::after,
.paragraph--type--resource-card
.field--name-field-resource-card-links .field__item a:focus::after {
  margin-left: 10px;
}

/************************************************************
 * 4) Spanish Back Link (right aligned) + left arrow prefix
 *
 * NOTE:
 * Your tokens file has --wcyd-arrow-after and --wcyd-list-marker,
 * but not a "left arrow" token. So we keep this literal.
 ************************************************************/

.field--name-field-spanish-back-link {
  text-align: right;
  margin-top: 18px;
}

/* Hide Drupal field label */
.field--name-field-spanish-back-link .field__label {
  display: none;
}

.field--name-field-spanish-back-link a {
  background-color: transparent;
  box-sizing: border-box;
  color: var(--wcyd-link);
  cursor: pointer;
  display: inline;
  font-family: var(--wcyd-font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-regular);
  line-height: normal;
  text-decoration: none;
  text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* LEFT arrow before text */
.field--name-field-spanish-back-link a::before {
  content: "🡸 ";
  display: inline-block;
  margin-right: 6px;
  font-weight: var(--wcyd-font-weight-bold);
  transition: margin var(--wcyd-transition-fast);
}

/* Hover behavior */
.field--name-field-spanish-back-link a:hover,
.field--name-field-spanish-back-link a:focus {
  text-decoration: underline;
}

.field--name-field-spanish-back-link a:hover::before,
.field--name-field-spanish-back-link a:focus::before {
  margin-right: 10px;
}

/************************************************************
 * 5) Spanish PSA — Body text lists (LEFT arrow instead of dot)
 ************************************************************/

/* Remove default bullets */
.block-field-blocknodepsabody
.field--name-body ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* Each list item */
.block-field-blocknodepsabody
.field--name-body li {
  position: relative;
  padding-left: 22px;   /* space for arrow */
  margin-bottom: 6px;
}

/* Arrow marker */
.block-field-blocknodepsabody
.field--name-body li::before {
  content: var(--wcyd-list-marker);
  position: absolute;
  left: 0;
  /* top: 0.5em; */
  color: var(--wcyd-link);
  font-weight: var(--wcyd-font-weight-bold);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.block-field-blocknodepsabody
.field--name-body li a {
  color: var(--wcyd-link);
  font-family: var(--wcyd-font-sans);
  font-size: 16px;
  font-weight: var(--wcyd-font-weight-regular);
  text-decoration: none;
}

.block-field-blocknodepsabody
.field--name-body li a:hover,
.block-field-blocknodepsabody
.field--name-body li a:focus {
  text-decoration: underline;
}

/************************************************************
 * 6) Responsive behavior (optional)
 ************************************************************/

@media (max-width: 768px) {
  .wcyd-resource-card,
  .paragraph--type--resource-card {
    grid-template-columns: 1fr;
  }

  .wcyd-resource-card__media,
  .paragraph--type--resource-card .field--name-field-resource-card-image,
  .wcyd-resource-card__content,
  .paragraph--type--resource-card .field--name-field-resource-card-links {
    grid-column: 1;
  }

  .wcyd-resource-card__media img,
  .paragraph--type--resource-card
  .field--name-field-resource-card-image img {
    max-width: 260px;
  }
}