/************************************************************
 * FULL-BLEED PSA GALLERY BAND ON HOMEPAGE
 ************************************************************/

.block-views-blockpsa-gallery-block-1 {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #3b87bd 0%, #04538c 100%);
}

.block-views-blockpsa-gallery-block-1 > .block__content > div {
  max-width: 1315px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Remove Bootstrap gutter padding on columns (you are using margins on cards) */
.block-views-blockpsa-gallery-block-1 .view-psa-gallery .col-lg-4,
.block-views-blockpsa-gallery-block-1 .view-psa-gallery .col-md-6,
.block-views-blockpsa-gallery-block-1 .view-psa-gallery .col-12 {
  padding-left: 0;
  padding-right: 0;
}

/************************************************************
 * PSA CARD WHITE BOX WITH NO INTERNAL PADDING
 ************************************************************/

.view-psa-gallery .psa-card {
  background-color: #ffffff;
  border: 0.8px dotted #999;
  box-sizing: border-box;

  /* spacing between cards */
  margin: 25px;

  /* you explicitly DO NOT want padding here */
  padding: 0 !important;

  height: 100%;
  display: flex;
  flex-direction: column;
}

/************************************************************
 * IMAGE AREA completely flush, no padding
 ************************************************************/

.view-psa-gallery .psa-card .psa-thumbnail-wrapper {
  padding: 0 !important;
  margin: 0;
}

.view-psa-gallery .psa-card .psa-thumbnail-wrapper img {
  display: block;
  width: 100%;
  margin: 0;
}

/************************************************************
 * CAPTION AREA — ONLY THIS GETS PADDING
 ************************************************************/

.view-psa-gallery .psa-card .psa-caption {
  padding: 12.5px;     /* this is the ONLY padded area */
  padding-top: 16px;
  flex: 1 1 auto;
}

/************************************************************
 * TITLE (h5 > a)
 ************************************************************/

.psa-card .psa-caption h5 {
  margin: 0 0 0.5rem;
}

.psa-card .psa-caption h5 {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 27.2px;
  text-decoration: none;
}

/************************************************************
 * BODY TEXT
 ************************************************************/

.psa-card .psa-caption p {
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/************************************************************
 * LEARN MORE LINK (direct child anchor inside .psa-caption)
 * This targets the CTA link, not the title link inside <h5>.
 ************************************************************/

.psa-card .psa-caption > a {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;

  /* REQUIRED for the CSS-drawn arrow */
  position: relative;      /* make ::before/::after anchor-relative */
  display: inline-block;   /* allow padding/positioning cleanly */
  padding-right: 22px;     /* reserve space for arrow (slightly more for chunky arrow) */
}

.psa-card .psa-caption > a:hover {
  text-decoration: underline;
}

/* Smooth hover animation for arrow pieces */
.psa-card .psa-caption > a::before,
.psa-card .psa-caption > a::after {
  transition: transform 0.15s ease;
  pointer-events: none;
}

/*
  Arrow construction notes:
  - ::after is the SHAFT
  - ::before is the HEAD
  - We intentionally overlap them so there is NO visible gap.
*/

/* Arrow shaft (chunkier + rounded) */
.psa-card .psa-caption > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;              /* extend shaft all the way to the right edge */
  width: 14px;           /* longer shaft looks more intentional with chunky head */
  height: 3px;
  background-color: currentColor;
  border-radius: 3px;    /* rounder shaft ends */

  transform: translateY(-50%);
  z-index: 0;            /* put shaft behind head so overlap looks clean */
}

/* Arrow head (rounder + heavier) */
.psa-card .psa-caption > a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;

  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  border-radius: 2px;    /* slightly rounder corners */

  /* Slight positive x-translate so head sits over the shaft end (no gap) */
  transform: translate(1px, -50%) rotate(45deg);
  z-index: 1;
}

/* Hover: nudge arrow to the right (WP-ish) */
.psa-card .psa-caption > a:hover::after {
  transform: translate(2px, -50%);
}

.psa-card .psa-caption > a:hover::before {
  transform: translate(3px, -50%) rotate(45deg);
}

/************************************************************
 * PLAY ICON
 ************************************************************/

.psa-thumbnail-wrapper .psa-play-icon {
  font-size: 2.5rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/************************************************************
 * DESKTOP HEIGHT
 ************************************************************/

@media (min-width: 992px) {
  .view-psa-gallery .psa-card {
    /* min-height: 500px; */
  }
}

/************************************************************
 * PSA GALLERY HEADER TITLE (View and Share our PSAs)
 ************************************************************/

.block-views-blockpsa-gallery-block-1 .view-header {
  text-align: center;
  margin: 0;
  padding: 0;
}

.block-views-blockpsa-gallery-block-1 .psa-gallery-title {
  box-sizing: border-box;
  display: block;

  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 46.8px;
  letter-spacing: normal;

  color: #fff;
  text-align: center;

  margin: 0;
  padding: 0;
}


/************************************************************
 * HOMEPAGE "WHAT'S NEW" — tokenized arrow (glyph)
 ************************************************************/
.block-views-blockhomepage-what-s-new-block-1 .views-row a {
  font-family: var(--wcyd-font-sans);
  font-size: var(--wcyd-type-title-size);      /* 20px */
  font-weight: var(--wcyd-font-weight-regular);
  line-height: var(--wcyd-type-title-lh);      /* 34px */
  color: var(--wcyd-brand-blue-alt);           /* close to your rgb(6,85,142) */
  text-decoration: none;

  display: inline-block;
  position: relative;
}

/* Arrow glyph after link */
.block-views-blockhomepage-what-s-new-block-1 .views-row a::after {
  content: var(--wcyd-arrow-after); /* " ➔" */
  display: inline-block;
  margin-left: var(--wcyd-arrow-gap); /* 6px */
  transition: transform var(--wcyd-transition-fast);
}

/* Hover */
.block-views-blockhomepage-what-s-new-block-1 .views-row a:hover {
  color: var(--wcyd-link-hover);
  text-decoration: underline;
}

.block-views-blockhomepage-what-s-new-block-1 .views-row a:hover::after {
  transform: translateX(var(--wcyd-arrow-shift)); /* 4px */
}

.block-views-blockhomepage-what-s-new-block-1 .view-header h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif; /* or Open Sans if WP used sans here */
  font-size: 36px; /* adjust to match */
  font-weight: 500;
  line-height: 46.8px;
}

/* Header */
.block-views-blockhomepage-what-s-new-block-1 .view-header {
  margin: 0 0 0.75rem;
  padding: 0;
  text-align: center; /* change to left if WP was left-aligned */
}

/* Subscribe CTA headline (serif) — matches your current markup */
.layout--twocol-section--50-50
  .layout__region--first
  .prefooter-subscribe-block
  h2.text-center {
  font-family: var(--wcyd-font-serif);
  font-weight: var(--wcyd-font-weight-medium);
}

/************************************************************
 * HOMEPAGE PREFOOTER 50/50 — force horizontal alignment
 ************************************************************/

/* Ensure the 50/50 section regions act like equal columns */
.layout--twocol-section--50-50 {
  column-gap: 2.5rem; /* tweak to taste */
}

/* On desktop, align both columns to the top and keep equal height behavior */
@media (min-width: 992px) {
  .layout--twocol-section--50-50 .layout__region {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Make each placed block fill its column nicely */
  .layout--twocol-section--50-50 .layout__region > .block {
    height: 100%;
  }
}

/************************************************************
 * LEFT: Subscribe CTA block — remove WP/VC wrapper spacing and align left
 ************************************************************/

/* Kill extra top spacing coming from VC wrappers if present */
.layout--twocol-section--50-50 .layout__region--first .prefooter-subscribe-block,
.layout--twocol-section--50-50 .layout__region--first .vc_row,
.layout--twocol-section--50-50 .layout__region--first .wpb_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make the left block not center-everything (so it lines up visually with right) */
.layout--twocol-section--50-50 .layout__region--first .prefooter-subscribe-block {
  text-align: left;
  padding-top: 20px !important;
}

/* Your H2: serif + consistent margin */
.layout--twocol-section--50-50 .layout__region--first .prefooter-subscribe-block h2.text-center {
  text-align: center !important; /* overrides Bootstrap .text-center */
  margin: 0 0 0.75rem;
  font-family: var(--wcyd-font-serif);
  font-weight: var(--wcyd-font-weight-medium);
  line-height: 1.1;
}

/* Match paragraph spacing */
.layout--twocol-section--50-50 .layout__region--first .prefooter-subscribe-block p {
  margin: 0 0 0.75rem;
}

/************************************************************
 * RIGHT: What’s New block — remove header centering + normalize margins
 ************************************************************/

.block-views-blockhomepage-what-s-new-block-1 .view-header {
  margin: 0 0 0.75rem;
  padding: 0;
  text-align: center; /* important for "in line with" look */
  padding-top: 20px !important;
}

.block-views-blockhomepage-what-s-new-block-1 .view-header h2 {
  margin: 0; /* remove default h2 top margin that pushes it down/up */
  font-family: var(--wcyd-font-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1; /* helps match your left H2 baseline */
}

/* Remove default row spacing so list starts right under header */
.block-views-blockhomepage-what-s-new-block-1 .view-content {
  margin: 0;
  padding: 0;
  gap: 14px;
}

.block-views-blockhomepage-what-s-new-block-1 .views-row {
  margin: 0;
  padding: 0;
}

/* Optional: if the Views field wrapper adds padding/margins */
.block-views-blockhomepage-what-s-new-block-1 .views-field,
.block-views-blockhomepage-what-s-new-block-1 .views-field-title,
.block-views-blockhomepage-what-s-new-block-1 .field-content {
  margin: 0;
  padding: 0;
}




/************************************************************
 * NODE 217 ONLY — kill Olivero layout bottom spacing
 ************************************************************/

article[data-history-node-id="217"] .layout.layout--twocol-section.layout--twocol-section--50-50 {
  margin-block-end: 0 !important;
  margin-bottom: 0 !important; /* fallback */
  /* margin-block-start: 10px; */
  /* padding-top: 10px; */
}

.block-views-blockhomepage-what-s-new-block-1 .view-header h2 {
  position: relative;
  z-index: 1;
  will-change: transform;
}

/* Tighten spacing under "What's New" and between rows */
.view-homepage-what-s-new {
  gap: 0.5rem;               /* was var(--sp2)/var(--sp3) */
}

.view-homepage-what-s-new .view-content {
  gap: 0.25rem;              /* row-to-row spacing */
}