/**
 * psa-node.css
 * ----------------------------------------------------------
 * Styles specific to the PSA content type (node--type-psa).
 * Covers the PSA node layout, video thumbnail behavior,
 * headings, body text, and the "Take Action" bottom section.
 * ----------------------------------------------------------
 */


/************************************************************
 * PSA PAGES – LIST ARROWS
 ************************************************************/

.node--type-psa .ul-arrows {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.node--type-psa .ul-arrows li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.4em;
}

.node--type-psa .ul-arrows li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.2em;
  line-height: 1;
  color: #0580a3;
  font-weight: 700;
}


/************************************************************
 * PSA MAIN TWO-COLUMN LAYOUT (VIDEO LEFT, TEXT RIGHT)
 ************************************************************/

.node--type-psa
.layout.layout--twocol-section.layout--twocol-section--33-67 {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 32px;
}

/* Left column */
.node--type-psa
.layout.layout--twocol-section.layout--twocol-section--33-67
> .layout__region--first {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  background: #fff;
  border: 1px dotted #999;
  padding: 20px 22px;
  box-sizing: border-box;
}

/* Right column */
.node--type-psa
.layout.layout--twocol-section.layout--twocol-section--33-67
> .layout__region--second {
  flex: 1 1 0;
  max-width: 66.6667%;
  min-width: 0;
}

/* Stack on mobile */
@media (max-width: 900px) {
  .node--type-psa
  .layout.layout--twocol-section.layout--twocol-section--33-67 {
    display: block !important;
  }

  .node--type-psa
  .layout.layout--twocol-section.layout--twocol-section--33-67
  > .layout__region--first,
  .node--type-psa
  .layout.layout--twocol-section.layout--twocol-section--33-67
  > .layout__region--second {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .node--type-psa
  .layout.layout--twocol-section.layout--twocol-section--33-67
  > .layout__region--second {
    margin-top: 24px;
  }
}


/************************************************************
 * PSA VIDEO THUMBNAIL (NODE) – PLAY OVERLAY
 ************************************************************/

.node--type-psa .psa-thumbnail-wrapper {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* Hover overlay */
.node--type-psa .psa-thumbnail-wrapper::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;
}

.node--type-psa .psa-thumb-link:hover .psa-thumbnail-wrapper::before,
.node--type-psa .psa-thumb-link:focus-within .psa-thumbnail-wrapper::before {
  opacity: 1;
}

/* Dotted ring */
.node--type-psa .psa-thumbnail-wrapper::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;
}

/* Triangle using existing span */
.node--type-psa .psa-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0 !important;
  height: 0 !important;
  transform: translate(-38%, -50%) !important;

  font-size: 0 !important;
  line-height: 0 !important;

  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #ffffff;

  z-index: 4;
  pointer-events: none;
}


/************************************************************
 * PSA VIDEO HEADING + FORMATS LINK
 ************************************************************/

.node--type-psa .field--name-field-psa-video-heading.field__item {
  color: #0580a3;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 27.2px;
  margin: 8px 0 4px;
}

.node--type-psa .field--name-field-psa-video-heading em {
  color: #0580a3;
  font-style: italic;
}

.node--type-psa .field--name-field-psa-video-formats-link a {
  color: #0580a3;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.node--type-psa .field--name-field-psa-video-formats-link a::after {
  content: " ›";
}

.node--type-psa .field--name-field-psa-video-formats-link a:hover {
  text-decoration: underline;
}


/************************************************************
 * PSA BODY + FIELD CLEANUP
 ************************************************************/

.node--type-psa .field__label {
  display: none;
}

.node--type-psa .block-field-blocknodepsabody p {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.node--type-psa .block-field-blocknodepsabody em {
  color: inherit !important;
  font-style: italic;
}


/************************************************************
 * PSA "TAKE ACTION" SECTION
 ************************************************************/

.psa-actions {
  /* margin: 40px 0; */
}

.psa-actions__title {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 36px;
  margin-bottom: 56px;
}

/* Drupal output structure note:
  .psa-actions__grid
    > .field
      > .field__items
        > .field__item
          > article.psa-action-card
*/

.psa-actions__grid {
  width: 100%;
}

/************************************************************
 * PSA "TAKE ACTION" – WP LOOK AND FEEL
 * Place at END of file so it overrides earlier rules.
 ************************************************************/

/* Full-width gray bar behind the whole section */
.node--type-psa .psa-actions {
  background: #e6e6e6;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 0;
}

/* Keep your site content width inside the full-bleed background */
.node--type-psa .psa-actions__inner {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Title spacing + font (use your token var if it exists) */
.node--type-psa .psa-actions__title {
  margin-bottom: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}


/************************************************************
 * PSA ACTIONS GRID (COUNT-AWARE VIA :has)
 * Goals:
 *  - 1–3 items: centered group, not stretched apart
 *  - 4 items: ALWAYS one row on desktop (no 3+1 wrap)
 *  - 5+ items: wrap naturally
 *  - Tablet/mobile: responsive
 ************************************************************/

/* Base: 1–3 items behavior */
.node--type-psa .psa-actions__grid .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 288px));
  gap: 28px;
  justify-content: center; /* centers the whole set */
  align-items: start;
  margin: 0;
  padding: 0;
}

/* Each item wrapper should not interfere with layout */
.node--type-psa .psa-actions__grid .field__item {
  margin: 0;
}

/* Card base layout */
.node--type-psa .psa-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 100%;
  max-width: 288px;
  justify-self: center; /* centers the card in its cell for 1–3 mode */
  min-width: 0;
}

/*
  Desktop 4-up mode:
  If there are at least 4 items, force 4 columns across on desktop.
  This prevents "3 items top row + 1 below" when there are exactly 4.
*/
@media (min-width: 993px) {
  .node--type-psa .psa-actions__grid .field__items:has(> .field__item:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  /* In 4-up mode, allow cards to shrink with the column */
  .node--type-psa .psa-actions__grid .field__items:has(> .field__item:nth-child(4)) .psa-action-card {
    max-width: none;
    justify-self: stretch;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .node--type-psa .psa-actions__grid .field__items {
    grid-template-columns: repeat(auto-fit, minmax(220px, 288px));
    gap: 22px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .node--type-psa .psa-actions__grid .field__items {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .node--type-psa .psa-action-card {
    max-width: none;
    justify-self: stretch;
  }
}


/************************************************************
 * PSA ACTION CARD – ICON + TEXT + LINKS
 ************************************************************/

/* White circle behind the icon (WP style) */
.node--type-psa .psa-action-card__icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  margin: 0 auto 14px;
}

/* Icon sizing */
.node--type-psa .psa-action-card__icon img {
  display: block;
  width: 45px;
  height: auto;
  max-width: none;
}

/* Headline styling */
.node--type-psa .psa-action-card__headline {
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #333333;
}

/* Optional description block (if used) */
.node--type-psa .psa-action-card__desc {
  font-size: 14px;
  margin: 0 0 6px;
}

/*
  LINK STACKING FIX:
  Drupal renders link fields as:
    .psa-action-card__links
      > .field
        > .field__items
          > .field__item
            > a
*/
.node--type-psa .psa-action-card__links .field__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.node--type-psa .psa-action-card__links .field__item {
  margin: 0;
  line-height: 14px;
}

.node--type-psa .psa-action-card__links a {
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #333333;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.node--type-psa .psa-action-card__links a::after {
  content: " ›";
}

.node--type-psa .psa-action-card__links a:hover,
.node--type-psa .psa-action-card__links a:focus {
  text-decoration: underline;
}

/* Reduce Drupal field wrapper spacing inside the card (if any leaks through) */
.node--type-psa .psa-action-card .field,
.node--type-psa .psa-action-card .field__items {
  margin: 0;
}


/************************************************************
 * PSA ACTIONS – REMOVE ONECOL SECTION BOTTOM GAP (OLIVERO)
 * Olivero sets: .layout { margin-block-end: var(--sp...); }
 ************************************************************/

/* Best: only the onecol layout that contains the PSA actions section */
.node--type-psa .layout.layout--onecol:has(.psa-actions) {
  margin-block-end: 0 !important;
  padding-block-end: 0 !important;
}

/* Also remove block spacing immediately around the PSA actions field block */
.node--type-psa .layout.layout--onecol:has(.psa-actions) .block {
  margin-block-end: 0 !important;
}