/* ------------------------------------------------------------
   PIH shared page components: bands, headings, buttons, division cards,
   program teaser grid, text + image sections.
   Tokens come from GeneratePress (--accent, --pnw, --ivory, ...) with
   fallbacks from 26PIH005-Website-DevBrandGuide-v1.
   ------------------------------------------------------------ */

:root {
  --pih-legacy:  var(--accent, #007777);
  --pih-pnw:     var(--pnw, #003f3f);
  --pih-forest:  var(--forest, #002517);
  --pih-tobacco: var(--tobacco, #2a150d);
  --pih-coastal: var(--coastal, #acc9c9);
  --pih-desert:  var(--desert, #f9bf3b);
  --pih-desert-hover: #e59438;
  --pih-ivory:   var(--ivory, #f3f0e0);
  --pih-ink:     var(--contrast, #222222);
  --pih-muted:   var(--contrast-2, #575760);
}

/* ---------- Headings (brand guide: light weight display) ---------- */
.pih-h-light {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: var(--pih-pnw);
  margin-block: 0 1rem;
}
.pih-band-pnw .pih-h-light,
.pih-band-forest .pih-h-light,
.pih-band-legacy .pih-h-light { color: #fff; }

/* ---------- Full-width bands ---------- */
.pih-band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  font-family: Lato, sans-serif;
}
.pih-band-pnw    { background: var(--pih-pnw);    color: #fff; }
.pih-band-forest { background: var(--pih-forest); color: #fff; }
.pih-band-legacy { background: var(--pih-legacy); color: #fff; }
.pih-band-ivory  { background: var(--pih-ivory);  color: var(--pih-ink); }
.pih-band-white  { background: #fff;              color: var(--pih-ink); }

:is(.pih-band-pnw, .pih-band-forest, .pih-band-legacy) a:not(.wp-block-button__link) { color: #fff; }

/* ---------- Buttons (brand guide states) ---------- */
.wp-block-button.pih-btn > a.wp-block-button__link,
a.pih-btn {
  display: inline-block;
  padding: 10px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 14px/1.2 Lato, sans-serif;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.pih-btn-legacy > a.wp-block-button__link, a.pih-btn-legacy { background: var(--pih-legacy); color: #fff; }
.wp-block-button.pih-btn-legacy > a.wp-block-button__link:hover, a.pih-btn-legacy:hover { background: var(--pih-pnw); color: #fff; }
@media (width >= 768px) {
  .wp-block-button.pih-btn-legacy > a.wp-block-button__link { position: relative; left: 3.5rem; }
}

@media (width < 768px) {
  .wp-block-buttons.is-content-justification-left:has(.wp-block-button.pih-btn-legacy) { width: 100%; display: flex; justify-content: center; flex: 0; }
}
.wp-block-button.pih-btn-pnw > a.wp-block-button__link, a.pih-btn-pnw { background: var(--pih-pnw); color: #fff; }
.wp-block-button.pih-btn-pnw > a.wp-block-button__link:hover, a.pih-btn-pnw:hover { background: var(--pih-tobacco); color: #fff; }

.wp-block-button.pih-btn-white > a.wp-block-button__link, a.pih-btn-white { background: #fff; color: var(--pih-legacy); }
.wp-block-button.pih-btn-white > a.wp-block-button__link:hover, a.pih-btn-white:hover { background: var(--pih-coastal); color: var(--pih-pnw); }

.wp-block-button.pih-btn-desert > a.wp-block-button__link, a.pih-btn-desert { background: var(--pih-desert); color: var(--pih-pnw); }
.wp-block-button.pih-btn-desert > a.wp-block-button__link:hover, a.pih-btn-desert:hover { background: var(--pih-desert-hover); color: var(--pih-pnw); }

.wp-block-button.pih-btn > a.wp-block-button__link:focus-visible, a.pih-btn:focus-visible {
  outline: 3px solid var(--pih-desert);
  outline-offset: 2px;
}
.wp-block-button.pih-btn-desert > a.wp-block-button__link:focus-visible, a.pih-btn-desert:focus-visible { outline-color: var(--pih-pnw); }

/* ---------- How We Work: division cards ---------- */
.pih-division-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-inline-size: 56rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

@media screen and (max-width: 475px) { 
  .pih-division-grid { 
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); 
  } 
}

.pih-division-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  background: #fff;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.06);
}

.pih-division-icon {
  flex: 0 0 6rem;
}
.pih-division-icon img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 7rem;
  object-fit: contain;
}

.pih-division-body { flex: 1 1 0; min-inline-size: 0; }

.pih-division-title {
  margin: 0 0 0.5rem;
  font: 400 22px/1.25 Lato, sans-serif;
  color: var(--pih-ink);
}

.pih-division-body p {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pih-ink);
}

@media (width <= 560px) {
  .pih-division-card { flex-direction: column; }
  .pih-division-icon { flex-basis: auto; inline-size: 5rem; }
}

/* ---------- Program teaser grid (dark band) ---------- */
.pih-program-band-title {
  text-align: center;
  font: 300 clamp(2rem, 4vw, 2.75rem)/1.15 Lato, sans-serif;
  margin: 0 0 1.5rem;
}

.pih-program-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-inline-size: 56rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2rem 1.5rem;
}



.pih-program-teaser {
  color: #fff;
  font-family: Lato, sans-serif;
	/*display: grid;
	grid-template-columns: 60px 1fr;
	gap: .75rem;*/
}

.pih-program-icon {
  display: block;
  width: 5rem;
    height: 5rem;
  object-fit: contain;
  box-sizing: border-box;
  padding: 0.6rem;
  background: #fff;
  border-radius: 0.75rem;
	margin-bottom: .75rem;
}

/* No program icon set: use the PIH logo as the placeholder */
.pih-program-teaser:not(:has(.pih-program-icon))::before {
  content: "";
  display: block;
  width: 5rem;
    height: 5rem;
  box-sizing: border-box;
  padding: 0.6rem;
  background:
  #fff
  url("/wp-content/uploads/2026/09/logo-only.svg")
  center / 3.8rem 3.8rem no-repeat;
  border-radius: 0.75rem;
	margin-bottom: .75rem;
}

.pih-program-title {
  margin: 0 0 0.35rem;
  font: 700 22px/1.2 Lato, sans-serif;
}
.pih-program-title a {
  color: inherit;
  text-decoration: none;
}
.pih-program-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pih-program-teaser p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* Programs band (division page): Siletz strip along the bottom, per the design */
.pih-band-forest:has(.pih-program-band) {
  position: relative;
  padding-block-end: calc(clamp(2.5rem, 6vw, 4.5rem) + 20px + 1.5rem);
}
.pih-band-forest:has(.pih-program-band)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.5rem;
  block-size: 20px;
  background: url("/wp-content/uploads/2026/09/26PIH005-SiletzTribes-Pattern-Rev.svg") center / auto 20px repeat-x;
  opacity: 0.75;
  pointer-events: none;
}


/* Featured Resources band (program page): Siletz strip along the bottom */
.pih-featured-wrap:not(.pih-news-wrap) {
  padding-block-end: calc(clamp(2rem, 5vw, 3.5rem) + 20px + 1.5rem);
}
.pih-featured-wrap:not(.pih-news-wrap)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.5rem;
  block-size: 20px;
  background: url("/wp-content/uploads/2026/09/26PIH005-SiletzTribes-Pattern-Rev.svg") center / auto 20px repeat-x;
  opacity: 0.75;
  pointer-events: none;
}
.pih-featured-wrap { position: relative; }

/* Program intro (white): ivory pillar graphic at the far right, per the design */
.pih-program-intro { position: relative; padding-block-end: 2rem; }
.pih-program-intro::after {
  content: "";
  position: absolute;
  inset-block-end: -1rem;
  inset-inline-end: calc(50% - 50vw);
  inline-size: min(20vw, 15rem);
  aspect-ratio: 2089 / 1597;
  background: var(--pih-ivory);
  -webkit-mask: url("/wp-content/uploads/2026/09/26PIH005-KlamathTribes-Graphic-Rev.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/26PIH005-KlamathTribes-Graphic-Rev.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
@media (width <= 768px) { .pih-program-intro::after { display: none; } }
/* ---------- How We Work: ivory top, Legacy green behind the lower cards,
   Siletz strip along the bottom (same treatment as the news band) ---------- */
.pih-how-we-work {
  position: relative;
  background:
    linear-gradient(var(--pih-legacy), var(--pih-legacy)) center bottom / 100% clamp(12rem, 22vw, 19rem) no-repeat,
    var(--pih-ivory);
  padding-block-end: calc(clamp(2rem, 5vw, 3.5rem) + 20px + 1.5rem);
}
.pih-how-we-work::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.5rem;
  block-size: 20px;
  background: url("/wp-content/uploads/2026/09/26PIH005-SiletzTribes-Pattern-Rev.svg") center / auto 20px repeat-x;
  opacity: 0.75;
  pointer-events: none;
}

/* ---------- Info section: white, Klamath graphic in ivory at the bottom right ---------- */
.pih-info-section { position: relative; overflow: hidden; padding-block: 0 2rem; }
.pih-info-section::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: min(22vw, 17rem);
  aspect-ratio: 2089 / 1597;
  background: var(--pih-ivory);
  -webkit-mask: url("/wp-content/uploads/2026/09/26PIH005-KlamathTribes-Graphic-Rev.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/26PIH005-KlamathTribes-Graphic-Rev.svg") center / contain no-repeat;
  pointer-events: none;
}
.pih-info-section > .wp-block-group__inner-container { position: relative; z-index: 1; }
@media (width <= 768px) { .pih-info-section::after { inline-size: 9rem; } }

/* ---------- Text + image sections sit on ivory ---------- */
.pih-text-image-band { padding-block: 1rem; }

/* ---------- Info band (coastal, inset) ---------- */
.pih-info-band {
  background: var(--pih-coastal);
  padding: clamp(2rem, 5vw, 3rem) 1.5rem;
  margin-block: 3rem;
  position: relative;
  overflow: hidden;
}
.pih-info-band .pih-h-light { color: var(--pih-ink); text-align: center; }
/* Decorative corner triangles */
.pih-info-band::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 3.5rem;
  background:
    linear-gradient(to bottom right, var(--pih-legacy) 50%, transparent 50%) top / 100% 50% no-repeat,
    linear-gradient(to top right, var(--pih-legacy) 50%, transparent 50%) bottom / 100% 50% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Text block ---------- */
.pih-text-block {
  max-inline-size: 56rem;
  margin: 2rem auto 3rem;
  padding-inline: 0;

  .wp-block-group__inner-container {
    padding-inline: 0 !important;
  }
}
.pih-text-block .pih-h-light { max-inline-size: 30ch; }
.pih-text-block :is(p, li) { font-size: 16px; line-height: 1.6; }
.pih-text-block ul { margin: 0 0 1rem 1.25rem; }

/* ---------- Text + image sections ---------- */
.pih-text-image {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-block: 2rem;
  gap: 2rem;
}
/* .pih-text-image p { font-size: 16px; }
.pih-band p { font-size: 16px; } */

.pih-placeholder {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  background: #d9d9d9;
}
/* Image column with an empty Image block: show the gray box until a photo is picked */
.pih-text-image > .wp-block-column:not(:has(img, h2, p))::after,
.pih-image-links > .wp-block-column:not(:has(img, h2, p, ul))::after {
  content: "";
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  background: #d9d9d9;
}

.pih-contact-email a {
  color: var(--pih-legacy);
  font-weight: 600;
}

.pih-contact-email a::before {
  content: "";
  display: inline-block;
  inline-size: 1.125em;
  block-size: 1.125em;
  margin-inline-end: 0.2em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button.pih-btn > a.wp-block-button__link, a.pih-btn { transition: none; }
}

/* ---------- Search All Programs ---------- */
.pih-search {
  max-inline-size: 42rem;
  margin-inline: auto;
  font-family: Lato, sans-serif;
  color: var(--pih-ink);
}

.pih-search-label {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.pih-search-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Category dropdown: native <details> */
.pih-search-topics {
  position: relative;
  flex: 0 0 12rem;
  font-size: 16px;
}
.pih-search-topics summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 44px;
  padding: 0 12px;
  border: 1px solid var(--pih-coastal);
  border-radius: 3px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.pih-search-topics[open] summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.pih-search-topics summary::-webkit-details-marker { display: none; }
.pih-search-count { color: var(--pih-legacy); font-weight: 700; }
.pih-search-caret {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-block-start: -4px;
}
.pih-search-topics[open] .pih-search-caret { transform: rotate(-135deg); margin-block-start: 4px; }

.pih-search-topics-panel {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  z-index: 20;
  min-inline-size: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
  border: 1px solid var(--pih-coastal);
  border-block-start: 0;
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
}
.pih-search-topics-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 32px;
  white-space: nowrap;
  cursor: pointer;
}
.pih-search-topics-panel input { accent-color: var(--pih-legacy); inline-size: 16px; block-size: 16px; margin: 0; }
.pih-search-clear {
  justify-self: end;
  font-size: 14px;
  color: var(--pih-legacy);
  text-decoration: underline;
}

.pih-search-row input[type="search"] {
  flex: 1 1 14rem;
  min-block-size: 44px;
  padding: 0 14px;
  border: 1px solid var(--pih-coastal);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 16px;
}

.pih-search-submit {
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pih-legacy);
  color: #fff;
  cursor: pointer;
}
.pih-search-submit:is(:hover, :focus) { background: var(--pih-pnw); color: #fff; }
.pih-search-submit svg { inline-size: 20px; block-size: 20px; }

.pih-search-status {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--pih-muted);
}

/* Results */
.pih-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.pih-search-item {
  display: flex;
  gap: 14px;
  padding: 22px 0;
  border-block-end: 1px solid var(--pih-coastal);
}
.pih-search-thumb {
  flex: 0 0 6rem;
  display: block;
  inline-size: 6rem;
  block-size: 6rem;
  box-sizing: border-box;
  padding: 0.6rem;
  background: #fff;
  border-radius: 0.75rem;
}

.pih-search-thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pih-search-body { flex: 1 1 0; min-inline-size: 0; }
.pih-search-title {
  margin: 0 0 6px;
  font: 700 17px/1.3 Lato, sans-serif;
}
.pih-search-title a { color: var(--pih-ink); text-decoration: none; }
.pih-search-title a:hover { color: var(--pih-legacy); text-decoration: underline; }
.pih-search-body p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.pih-search-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--pih-legacy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pih-search-more:hover { color: var(--pih-pnw); }

/* Pagination */
.pih-search-pages { margin: 28px 0 0; }
.pih-search-pages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.pih-search-pages li .page-numbers {
  display: grid;
  place-items: center;
  min-inline-size: 28px;
  min-block-size: 32px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--pih-ink);
  text-decoration: none;
}
.pih-search-pages li a.page-numbers:hover { background: var(--pih-coastal); }
.pih-search-pages li .page-numbers.current { font-weight: 700; color: var(--pih-legacy); }
.pih-search-pages li .page-numbers.dots { min-inline-size: 16px; }

@media (width <= 560px) {
  .pih-search-topics { flex-basis: 100%; }
  .pih-search-item { flex-direction: column; }
}

/* ---------- Eyebrow heading (Featured Resources, Latest News) ---------- */
.pih-eyebrow {
  margin: 0 0 1.25rem;
  padding-block-end: 6px;
  font: 700 14px/1.2 Lato, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  display: block;
}
.pih-eyebrow::after {
  content: "";
  display: block;
  inline-size: 30px;
  block-size: 3px;
  margin-block-start: 8px;
  background: var(--pih-desert);
}

/* ---------- Image + link list (Primary Resources, Helpful Links) ---------- */
.pih-image-links {
  max-inline-size: 56rem;
  margin-inline: auto;
  gap: 2.5rem;
}
.pih-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pih-link-list li { margin: 0 0 10px; font-size: 15px; }
.pih-link-list a {
  color: var(--pih-legacy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pih-link-list a:hover { color: var(--pih-pnw); }

/* ---------- Featured band: dark inset panel on Legacy ---------- */
.pih-featured-wrap { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Latest News on Home: the dark panel starts inside the section above it */
@media (width >= 768px) {
  div:has( + .pih-news-wrap.pih-featured-wrap) { padding-bottom: 8.5rem;}
.pih-news-wrap.pih-featured-wrap { padding-block: 4.5rem clamp(2rem, 5vw, 3rem); }
.pih-news-wrap .pih-featured { margin-top: -8.5rem; }
}
/* Siletz pattern strip along the bottom of the band, same treatment as the
   Call to Action band (repeat-x, 20px tall, lifted 1.5rem off the bottom).
   A background image cannot take opacity, so it lives on ::after at 75%. */
.pih-news-wrap.pih-featured-wrap {
  position: relative;
  padding-block-end: calc(clamp(2rem, 5vw, 3rem) + 20px + 1.5rem);
}
.pih-news-wrap.pih-featured-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.5rem;
  block-size: 20px;
  background: url("/wp-content/uploads/2026/09/26PIH005-SiletzTribes-Pattern-Rev.svg") center / auto 20px repeat-x;
  opacity: 0.75;
  pointer-events: none;
}

/* dots row: dots centered, "All News" link on the right */
.pih-news-wrap .pih-news-all {
  position: absolute;
  inset-inline-end: clamp(1rem, 4vw, 3rem);
  inset-block-end: calc(clamp(1.25rem, 3vw, 2rem) - 5px);
  margin: 0;
  line-height: 1;
}
@media (width <= 560px) {
  .pih-news-wrap { padding: 0;}
  .pih-news-wrap .pih-news-all { position: static; margin-block-start: 12px; text-align: end; }
  .site-main .wp-block-group__inner-container:has(.pih-featured) { padding: 0; }
}
.pih-featured {
  max-inline-size: 60rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) 70px clamp(1.25rem, 3vw, 2rem);
  background: var(--pih-pnw);
  color: #fff;
}
.site-main .pih-featured > .wp-block-group__inner-container { padding: 0; }

/* ---------- Carousel ----------
   The track is a plain scroll-snap row: swipe, trackpad and keyboard work
   with no script. Arrows and dots come from CSS ::scroll-button() and
   ::scroll-marker where supported (Chrome/Edge); pih-carousel.js only runs
   in browsers without them and builds the same controls. */
.pih-carousel-wrap { position: relative; }
.pih-featured { position: relative; }

.pih-carousel {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-block-end: 8px;
  scrollbar-width: none;
  anchor-name: --pih-carousel;
  scroll-marker-group: after;
}
.pih-carousel > * {
  flex: 0 0 calc((100% - 3rem) / 4);
}
.pih-carousel::-webkit-scrollbar { display: none; }
/* Snap one page at a time: only the first card of each page is a snap point
   (4 per page desktop, 2 tablet, 1 phone), matching the dots. */
.pih-carousel > :nth-child(4n + 1) { scroll-snap-align: start; }
@media (width <= 900px) {
  .pih-carousel > * { flex-basis: calc((100% - 1rem) / 2); scroll-snap-align: none; }
  .pih-carousel > :nth-child(2n + 1) { scroll-snap-align: start; }
}
@media (width <= 560px) { .pih-carousel > * { flex-basis: 100%; scroll-snap-align: start; } }

/* Shared look for arrows (CSS-generated and JS-generated) */
.pih-carousel::scroll-button(*),
.pih-carousel-btn {
  position: absolute;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 2px solid var(--pih-desert);
  border-radius: 50%;
  background: transparent;
  color: var(--pih-desert);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
/* No :hover on the CSS buttons: Chrome applies it to both arrows when the
   track is hovered. Pressed and keyboard-focus states only.
   background-color (not the background shorthand) so the chevron's size,
   position and no-repeat survive the state change. JS buttons use
   :focus-visible so a mouse click doesn't leave them filled (and GP's
   button:focus colours can't take over). */
.pih-carousel::scroll-button(*):is(:active, :focus-visible),
.pih-carousel-btn:is(:hover, :active, :focus-visible) { background-color: var(--pih-desert); color: var(--pih-pnw); }
.pih-carousel-btn:focus:not(:focus-visible):not(:hover) { background-color: transparent; color: var(--pih-desert); }
.pih-carousel::scroll-button(*):disabled,
.pih-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.pih-carousel-btn:disabled:is(:hover, :active, :focus) { background-color: transparent; color: var(--pih-desert); }
.pih-carousel::scroll-button(*):focus-visible,
.pih-carousel-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* CSS-generated arrows: anchored to the track, chevrons drawn as background */
.pih-carousel::scroll-button(*) {
  position-anchor: --pih-carousel;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.pih-carousel::scroll-button(inline-start) {
  content: "" / "Previous";
  position-area: inline-start center;
  margin-inline-end: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8 1 3 6l5 5' fill='none' stroke='%23f9bf3b' stroke-width='2'/%3E%3C/svg%3E");
}
.pih-carousel::scroll-button(inline-end) {
  content: "" / "Next";
  position-area: inline-end center;
  margin-inline-start: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4 1 5 5-5 5' fill='none' stroke='%23f9bf3b' stroke-width='2'/%3E%3C/svg%3E");
}
.pih-carousel::scroll-button(inline-start):is(:active, :focus-visible) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8 1 3 6l5 5' fill='none' stroke='%23003f3f' stroke-width='2'/%3E%3C/svg%3E");
}
.pih-carousel::scroll-button(inline-end):is(:active, :focus-visible) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4 1 5 5-5 5' fill='none' stroke='%23003f3f' stroke-width='2'/%3E%3C/svg%3E");
}

/* CSS-generated dots: one per page (4 cards desktop, 2 tablet, 1 phone) */
.pih-carousel > :not(:nth-child(4n + 1))::scroll-marker { content: none; }
@media (width <= 900px) {
  .pih-carousel > *::scroll-marker { content: ""; }
  .pih-carousel > :not(:nth-child(2n + 1))::scroll-marker { content: none; }
}
@media (width <= 560px) { .pih-carousel > *::scroll-marker { content: ""; } }
.pih-carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-block-start: 8px;
}
.pih-carousel > *::scroll-marker {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: transparent;
  cursor: pointer;
}
.pih-carousel > *::scroll-marker:target-current { background: var(--pih-coastal); border-color: var(--pih-coastal); }
.pih-carousel > *::scroll-marker:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* JS fallback controls (only built where ::scroll-button is unsupported) */
.pih-carousel-btn { inset-block-start: 40%; }
.pih-carousel-prev { inset-inline-start: -56px; }
.pih-carousel-next { inset-inline-end: -56px; }
.pih-carousel-btn span {
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-end: 3px;
}
.pih-carousel-prev span { transform: rotate(-135deg); margin: 0 0 0 3px; }
@media (width <= 1100px) {
  .pih-carousel-prev { inset-inline-start: -8px; }
  .pih-carousel-next { inset-inline-end: -8px; }
}
.pih-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-block-start: 8px; }
.pih-carousel-dot {
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pih-carousel-dot::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.pih-carousel-dot[aria-current="true"]::before { background: var(--pih-coastal); border-color: var(--pih-coastal); }
.pih-carousel-dot:is(:hover, :focus) { background: transparent; }
.pih-carousel-dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.is-single-page :is(.pih-carousel-btn, .pih-carousel-dots) { display: none; }

.pih-card {
  background: #fff;
  color: var(--pih-ink);
  padding: 0 0 1rem;
}
/* Cards sit inside dark bands: keep their text dark and undo any constrained inner layout */
.pih-band .pih-card :is(a, h3, p) { color: var(--pih-ink); }
.pih-band .pih-carousel .pih-card > .wp-block-group__inner-container { padding: 0; }
.pih-band .pih-carousel .pih-card .wp-block-group__inner-container > * { max-inline-size: none; margin-inline: 0; }
.pih-card .pih-card-title, .pih-card .pih-card-text { padding-inline: 12px; }
/* The media link is an <a> (inline by default), so it needs display: block for
   aspect-ratio to apply. The image is pinned to all four edges so it always
   covers the grey fallback; the grey only shows when a card has no image. */
.pih-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d9d9d9;
  margin: 0 0 12px;
}
.pih-card-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.pih-card-title {
  margin: 0 0 6px;
  font: 700 15px/1.3 Lato, sans-serif;
}
.pih-card-title a { text-decoration: none; }
.pih-band .pih-card .pih-card-title a:hover { color: var(--pih-legacy); text-decoration: underline; }
.pih-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}