/* ═══════════════════════════════════════════════════════════════════════════
   Homepage "Resources" section
   ───────────────────────────────────────────────────────────────────────────
   The section is a SiteOrigin row (#pg-7-3) holding a post-loop widget that
   renders template-parts/content-resource-teaser.php. That template is shared
   with the /resources/ archive, so the markup is left alone and the homepage
   cards are restyled here, scoped to #pg-7-3 so nothing leaks.

   Card anatomy (unchanged markup):
     .resource-wrapper > article.teaser-loop > .entry
        .image | .no-image          cover
        .text.{red|yellow|gray|blue}  title, terms, "Read More" whole-card link

   Design intent: a document archive, so the cards are a calm, scannable shelf.
   White surface, one clear cover, a short colour tab from the editor's colour
   choice, the title in full and a quiet "Read more" cue. Cards without a cover
   image get a designed typographic cover instead of an empty grey square.
   Palette is the CoST members palette; red stays a sliver (tab and hover cue).

   Specificity note: the site's Customizer "Additional CSS" carries global
   !important rules (Arial on .teaser-loop, 2.5rem on .entry-title, ...). The
   few properties below that fight those use !important on purpose, scoped to
   #pg-7-3#pg-7-3#pg-7-3.
   ═══════════════════════════════════════════════════════════════════════════ */

#pg-7-3#pg-7-3#pg-7-3 {
  --res-ink:      #2c4143;
  --res-slate:    #58707b;
  --res-line:     #d8d8cd;
  --res-face:     #ffffff;
  --res-wash:     #f7f7f7;
  --res-red:      #d60000;
  --res-blue:     #61a8bd;
  --res-yellow:   #ffce32;
  --res-gray:     #8a979c;
  --res-gap:      24px;
  --res-radius:   8px;
  --res-ease:     cubic-bezier(.2, .8, .2, 1);
}

/* ── Section frame ──────────────────────────────────────────────────────── */
#pg-7-3#pg-7-3#pg-7-3 > .post-loop {
  background:var(--res-wash) !important;
  padding-top:64px !important;
  padding-bottom:72px !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-1 {
  margin-bottom:40px !important;
}

/* ── The shelf: equal-height cards, even gutters, wraps 4 / 2 / 1 ───────── */
#pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1 {
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 16px !important;
}

#pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1 {
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:var(--res-gap) !important;
  margin:0 auto !important;
}

#pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1::before,
#pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1::after {
  content:none !important;
}

#pg-7-3#pg-7-3#pg-7-3 .resource-wrapper {
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding: 0 !important;
  margin: 0 !important;
  display:flex !important;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop {
  position:relative !important;
  display:flex !important;
  flex:1 1 auto !important;
  width:100% !important;
  margin:0 !important;
  background:var(--res-face) !important;
  border:1px solid var(--res-line) !important;
  border-radius:var(--res-radius) !important;
  overflow:hidden !important;
  box-shadow:0 1px 2px rgba(44, 65, 67, .06) !important;
  transition:transform .25s var(--res-ease), box-shadow .25s var(--res-ease), border-color .25s var(--res-ease) !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  background:none !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:hover,
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:focus-within {
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb, var(--res-ink) 35%, var(--res-line)) !important;
  box-shadow:0 10px 24px rgba(44, 65, 67, .12) !important;
}

/* ── Cover ──────────────────────────────────────────────────────────────── */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .image,
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image {
  position:relative !important;
  flex:none !important;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  aspect-ratio:4 / 3 !important;
  overflow:hidden !important;
  background:color-mix(in srgb, var(--res-ink) 6%, var(--res-face)) !important;
  border-bottom:1px solid var(--res-line) !important;
  border-radius:0 !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .image img {
  border-radius:0 !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:top center !important;
  display:block !important;
  transition:transform .5s var(--res-ease) !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:hover .image img {
  transform:scale(1.03) !important;
}

/* Typographic cover for resources without a thumbnail: a page with ruled
   lines and a mono label, so the card reads as a document, not a hole.      */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image {
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  background:repeating-linear-gradient(to bottom,
      transparent 0 17px,
      color-mix(in srgb, var(--res-ink) 9%, transparent) 17px 18px),
    color-mix(in srgb, var(--res-ink) 5%, var(--res-face)) !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image::before {
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  top:18px !important;
  width:36px !important;
  height:4px !important;
  background:var(--res-red) !important;
  border-radius:2px !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image::after {
  content:"Document" !important;
  position:relative !important;
  margin:0 18px 14px !important;
  padding:3px 8px !important;
  font: 600 11px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--res-slate) !important;
  background:var(--res-face) !important;
  border:1px solid var(--res-line) !important;
  border-radius:3px !important;
}

/* ── Text block (title, terms, cue) ─────────────────────────────────────── */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text {
  position:static !important;
  /* The Customizer CSS blurs .text; backdrop-filter makes it the containing
     block for the absolute card link, which then covers only the text half. */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  height:auto !important;
  padding:18px 20px 20px !important;
  background: none !important;
  color:var(--res-ink) !important;
  border-top:4px solid var(--res-blue) !important;
  margin-top:-1px !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.red    { border-top-color:var(--res-red) !important; }
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.yellow { border-top-color:var(--res-yellow) !important; }
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.gray   { border-top-color:var(--res-gray) !important; }
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.blue   { border-top-color:var(--res-blue) !important; }

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text h2.entry-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  max-height: none !important;
  font-family: "Lato", Helvetica, Arial, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--res-ink) !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text h2.entry-title a {
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:4 !important;
  overflow:hidden !important;
  font: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Terms row: only occupies space when there are terms. */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry-meta-category-tag {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  font: 600 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--res-slate) !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry-meta-category-tag:empty,
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry-meta-category-tag:not(:has(*)) {
  display:none !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry-meta-category-tag a {
  color: inherit !important;
  text-decoration: none !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .resource-docs-badge {
  padding:2px 8px !important;
  border:1px solid var(--res-line) !important;
  border-radius:999px !important;
  background:var(--res-wash) !important;
}

/* ── Whole-card link + visible "Read more" cue ──────────────────────────────
   The anchor keeps its screen-reader text ("Read More") but is now stretched
   over the card from .entry, and a visible cue sits at the foot of the text. */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area {
  /* The Customizer CSS hides every .link-whole-area (display, visibility,
     opacity, position, left, top, width, height, pointer-events, all
     !important, several stacked rules). An ID in the selector plus
     !important on each property wins that fight. */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  text-indent:-9999px !important;
  background: none !important;
  backdrop-filter: none !important;
  border-radius: inherit !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area::before {
  content: none !important;
  display: none !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area::after {
  content: "Read more \2192" !important;
  display: block !important;
  position: absolute !important;
  left: 20px !important;
  bottom: 20px !important;
  top: auto !important;
  margin: 0 !important;
  text-indent:0 !important;
  font: 700 .8125rem/1 "Lato", Helvetica, Arial, sans-serif !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
  width:max-content !important;
  max-width:none !important;
  color:var(--res-ink) !important;
  border-bottom:2px solid var(--res-red) !important;
  padding-bottom:3px !important;
  opacity: 1 !important;
  transform: none !important;
  transition:letter-spacing .25s var(--res-ease) !important;
}

/* Reserve room for the cue so long and short titles line up at the foot. */
#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text {
  padding-bottom:56px !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:hover a.link-whole-area::after {
  letter-spacing:.08em !important;
}

#pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area:focus-visible {
  outline:3px solid var(--res-ink) !important;
  outline-offset:-3px !important;
}

/* ── Heading and "View all" button ──────────────────────────────────────────
   The Customizer CSS gives both a gradient accent, a shimmer pseudo-element
   (the stray line inside the button) and a lift-and-scale hover. Calmed here. */
#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-0 h2 {
  font-family: "Lato", Helvetica, Arial, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--res-ink) !important;
  margin: 0 0 3rem !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-0 h2::after {
  width:48px !important;
  height:4px !important;
  bottom:-1.25rem !important;
  border-radius:0 !important;
  background:var(--res-red) !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-2 {
  margin-top:0 !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-2 .ow-button-base a {
  font-family: "Lato", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: .01em !important;
  padding: .9rem 2.25rem !important;
  border: 2px solid var(--res-ink) !important;
  border-radius: var(--res-radius) !important;
  background: var(--res-face) !important;
  color: var(--res-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-2 .ow-button-base a::before {
  content: none !important;
  display: none !important;
}

#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-2 .ow-button-base a:hover,
#pg-7-3#pg-7-3#pg-7-3 #panel-7-3-0-2 .ow-button-base a:focus-visible {
  background: var(--res-ink) !important;
  color: #fff !important;
  border-color: var(--res-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  #pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1 {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  #pg-7-3#pg-7-3#pg-7-3 {
    --res-gap: 16px;
  }

  #pg-7-3#pg-7-3#pg-7-3 > .post-loop {
    padding-top:44px !important;
    padding-bottom:48px !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 .panel-widget-style-for-7-3-0-1 {
    grid-template-columns:minmax(0, 1fr) !important;
  }

  /* Horizontal card on phones: cover left, text right, so four cards do not
     become four screens of scrolling.                                       */
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .entry {
    flex-direction:row !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .image,
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image {
    flex:0 0 38% !important;
    width:38% !important;
    aspect-ratio:auto !important;
    min-height:150px !important;
    border-bottom:0 !important;
    border-right:1px solid var(--res-line) !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text {
    border-top:0 !important;
    border-left:4px solid var(--res-blue) !important;
    margin:0 0 0 -1px !important;
    padding:16px 16px 52px !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.red    { border-left-color:var(--res-red) !important; }
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.yellow { border-left-color:var(--res-yellow) !important; }
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .text.gray   { border-left-color:var(--res-gray) !important; }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area::after {
    left: calc(38% + 20px) !important;
    bottom: 16px !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .no-image::after {
    margin:0 10px 10px !important;
  }
}

/* ── Motion preference ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop,
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop .image img,
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop a.link-whole-area::after {
    transition:none !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:hover,
  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:focus-within {
    transform:none !important;
  }

  #pg-7-3#pg-7-3#pg-7-3 article.teaser-loop:hover .image img {
    transform:none !important;
  }
}