/* ============================================================
   ScubaDev Archives -- Insights + Resources index pages.
   Scoped under .sd-archives so rules cannot leak into Salient/
   Nectar chrome. Mirrors design tokens from sd-startup-designed.css
   and sd-insights-design.css for visual continuity.
   ============================================================ */

.sd-archives {
  --sd-deep-navy: #11314a;
  --sd-navy:      #11314a;
  --sd-navy-2:    #235C81;
  --sd-blue:      #5492B6;
  --sd-coral:     #DB635D;
  --sd-coral-2:   #DB635D;
  --sd-salmon:    #F2847D;
  --sd-sand:      #F6C893;
  --sd-cream:     #FFF6E8;
  --sd-cream-2:   #FAF0DC;
  --sd-warm:      #FAF0DC;
  --sd-fg:        #11314a;
  --sd-fg-muted:  rgba(17,49,74,.65);
  --sd-fg-subtle: rgba(17,49,74,.45);
  --sd-on-dark:   #fff6e8;
  --sd-on-dark-muted: rgba(255,246,232,.78);
  --sd-border:    rgba(17,49,74,.12);
  --sd-border-soft: rgba(17,49,74,.06);
  --sd-shadow-card: 0 18px 40px -22px rgba(13,31,46,.18), 0 2px 6px -2px rgba(13,31,46,.06);
  --sd-shadow-cta:  0 14px 30px -10px rgba(219,99,93,.45);
  --sd-ease: cubic-bezier(.2,.8,.2,1);

  --sd-arch-max:  1180px;
  --sd-arch-pad:  24px;
  --sd-arch-radius: 16px;

  --sd-font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sd-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sd-font-mono:    'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sd-font-edit:    'Bodoni Moda', 'Times New Roman', serif;

  background: var(--sd-cream);
  color: var(--sd-fg);
  font-family: var(--sd-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sd-archives, .sd-archives *, .sd-archives *::before, .sd-archives *::after { box-sizing: border-box; }

/* Kill the parent theme's content-wrap padding so our hero rides the nav. */
body.blog #nectar-content-wrap.sd-archives,
body.archive #nectar-content-wrap.sd-archives {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: var(--sd-cream);
}
body.blog .sd-archives + .container-wrap,
body.archive .sd-archives + .container-wrap { display: none; }

.sd-archives__wrap {
  max-width: var(--sd-arch-max);
  margin: 0 auto;
  padding: 0 var(--sd-arch-pad);
  position: relative;
}

/* ============================================================
   HERO BAND -- navy bg with low-opacity gradient bursts.
   Same gradient-burst language as sd-startup-designed hero.
   ============================================================ */
.sd-archives__hero {
  position: relative;
  background: var(--sd-deep-navy);
  color: var(--sd-on-dark);
  padding: clamp(96px, 11vw, 156px) 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
.sd-archives__hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.sd-archives__hero-burst {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: .55;
}
.sd-archives__hero-burst--coral { width: 520px; height: 520px; top: -120px; left: -120px; background: radial-gradient(circle, rgba(219,99,93,.32), transparent 65%); }
.sd-archives__hero-burst--blue  { width: 600px; height: 600px; bottom: -180px; right: -120px; background: radial-gradient(circle, rgba(84,146,182,.30), transparent 65%); }
.sd-archives__hero-burst--sand  { width: 380px; height: 380px; top: 30%; right: 20%; background: radial-gradient(circle, rgba(246,200,147,.18), transparent 65%); }

.sd-archives__hero .sd-archives__wrap { z-index: 2; }

.sd-archives__eyebrow {
  font-family: var(--sd-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 500;
  color: var(--sd-sand);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.sd-archives__title {
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--sd-on-dark);
  margin: 0 0 22px;
  max-width: 18ch;
}
.sd-archives__title-italic {
  font-family: var(--sd-font-edit);
  font-style: italic;
  font-weight: 500;
  color: var(--sd-sand);
}
.sd-archives__sub {
  font-family: var(--sd-font-body);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--sd-on-dark-muted);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================
   FILTER PILLS (Insights only)
   ============================================================ */
.sd-archives__filters {
  position: sticky; top: var(--header-nav-height, 100px); z-index: 5;
  background: rgba(255,246,232,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sd-border-soft);
  padding: 16px 0;
}
.sd-archives__wrap--filters { display: flex; align-items: center; }
.sd-archives__pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sd-archives__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--sd-border);
  background: #FFF6E8;
  color: var(--sd-fg);
  font-family: var(--sd-font-body);
  font-size: 14px; font-weight: 500;
  letter-spacing: .005em;
  cursor: pointer;
  transition: background .25s var(--sd-ease), border-color .25s var(--sd-ease), color .25s var(--sd-ease), transform .25s var(--sd-ease);
}
.sd-archives__pill:hover { transform: translateY(-1px); border-color: rgba(17,49,74,.28); }
.sd-archives__pill.is-active {
  color: var(--pill-fg, var(--sd-navy));
  background: var(--pill-bg, rgba(17,49,74,.08));
  border-color: transparent;
}
.sd-archives__pill-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pill-dot, var(--sd-navy));
}
.sd-archives__pill-dot--all {
  background: linear-gradient(135deg, #DB635D 0%, #F6C893 50%, #5492B6 100%);
}

/* ============================================================
   GRID BAND -- Insights cards
   ============================================================ */
.sd-archives__grid-band {
  padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 120px);
  background: var(--sd-cream);
}

.sd-archives__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .sd-archives__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 640px) {
  .sd-archives__grid { grid-template-columns: 1fr; gap: 20px; }
}
.sd-archives__card-wrap {
  list-style: none;
  transition: opacity .35s var(--sd-ease), transform .35s var(--sd-ease);
}
.sd-archives__card-wrap[hidden] { display: none; }

.sd-archives__card {
  position: relative;
  display: flex; flex-direction: column;
  background: #FFF6E8;
  border: 1px solid var(--sd-border-soft);
  border-radius: var(--sd-arch-radius);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--sd-shadow-card);
  transition: transform .3s var(--sd-ease), box-shadow .3s var(--sd-ease), border-color .3s var(--sd-ease);
}
.sd-archives__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(13,31,46,.30), 0 4px 10px -2px rgba(13,31,46,.08);
  border-color: rgba(17,49,74,.18);
}
.sd-archives__card-link {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
}

.sd-archives__card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #235C81 0%, #5492B6 100%);
}
.sd-archives__card-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  transition: transform .6s var(--sd-ease);
}
.sd-archives__card:hover .sd-archives__card-img { transform: scale(1.04); }
.sd-archives__card-img--empty {
  background: linear-gradient(135deg, #235C81 0%, #5492B6 50%, #F6C893 100%);
  opacity: .85;
}

.sd-archives__card-body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}

.sd-archives__card-pill {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--sd-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--pill-bg, rgba(17,49,74,.08));
  color: var(--pill-fg, var(--sd-navy));
}
.sd-archives__card-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pill-dot, var(--sd-navy));
}

.sd-archives__card-title {
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--sd-navy);
  margin: 0;
  /* clamp to 3 lines */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-archives__card-excerpt {
  font-family: var(--sd-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sd-fg-muted);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-archives__card-meta {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sd-font-mono);
  font-size: 12px;
  color: var(--sd-fg-subtle);
  letter-spacing: .04em;
  padding-top: 6px;
}
.sd-archives__card-meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--sd-fg-subtle);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.sd-archives__pagination {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 56px;
}
.sd-archives__page-link a,
.sd-archives__page-link span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--sd-border);
  background: #FFF6E8;
  color: var(--sd-navy);
  font-family: var(--sd-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s var(--sd-ease), border-color .2s var(--sd-ease), color .2s var(--sd-ease);
}
.sd-archives__page-link a:hover { background: var(--sd-warm); border-color: rgba(17,49,74,.24); }
.sd-archives__page-link span.current {
  background: var(--sd-navy); color: var(--sd-on-dark); border-color: var(--sd-navy);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.sd-archives__empty {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--sd-border);
  border-radius: var(--sd-arch-radius);
  background: #FFF6E8;
}
.sd-archives__empty-title {
  font-family: var(--sd-font-display);
  font-size: 22px; font-weight: 700; color: var(--sd-navy);
  margin: 0 0 8px;
}
.sd-archives__empty-sub {
  font-size: 16px; color: var(--sd-fg-muted); margin: 0;
}
.sd-archives__empty-link {
  color: var(--sd-coral); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(219,99,93,.4);
}
.sd-archives__empty-link:hover { color: var(--sd-coral-2); border-bottom-color: var(--sd-coral-2); }

.sd-archives__empty-filtered {
  text-align: center;
  font-size: 16px;
  color: var(--sd-fg-muted);
  margin: 32px 0 0;
}
.sd-archives__empty-clear {
  background: none; border: 0;
  color: var(--sd-coral); font-weight: 600; cursor: pointer;
  padding: 0; font-size: inherit; font-family: inherit;
  border-bottom: 1px solid rgba(219,99,93,.4);
}
.sd-archives__empty-clear:hover { color: var(--sd-coral-2); }

/* ============================================================
   RESOURCES -- EMAIL GATE
   ============================================================ */
.sd-archives__hero--resources { padding-bottom: clamp(48px, 6vw, 80px); }

.sd-archives__gate {
  background: var(--sd-cream);
  padding: 0 0 clamp(40px, 5vw, 64px);
  margin-top: -32px; /* pull the gate card up to overlap hero seam */
  position: relative;
  z-index: 4;
}
.sd-archives__wrap--gate { max-width: 920px; }

.sd-archives__gate-card {
  background: #FFF6E8;
  border: 1px solid var(--sd-border-soft);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 70px -36px rgba(13,31,46,.40), 0 4px 12px -4px rgba(13,31,46,.08);
  position: relative;
  overflow: hidden;
}
.sd-archives__gate-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(246,200,147,0.22), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(84,146,182,0.16), transparent 60%);
  z-index: 0;
}
.sd-archives__gate-card > * { position: relative; z-index: 1; }

.sd-archives__gate-eyebrow {
  font-family: var(--sd-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 500;
  color: var(--sd-coral);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sd-archives__gate-eyebrow--success { color: #5492B6; }
.sd-archives__gate-title {
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--sd-navy);
  margin: 0 0 10px;
}
.sd-archives__gate-sub {
  font-size: 16px; line-height: 1.55; color: var(--sd-fg-muted);
  margin: 0 0 20px;
  max-width: 60ch;
}

.sd-archives__gate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 720px) {
  .sd-archives__gate-row { grid-template-columns: 1fr; }
}
.sd-archives__gate-field { display: block; min-width: 0; }
.sd-archives__gate-label {
  display: block;
  font-family: var(--sd-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sd-fg-subtle);
  margin: 0 0 6px;
}
.sd-archives__gate-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--sd-border);
  background: var(--sd-cream-2);
  color: var(--sd-navy);
  font-family: var(--sd-font-body);
  font-size: 15px;
  transition: border-color .2s var(--sd-ease), background .2s var(--sd-ease), box-shadow .2s var(--sd-ease);
}
.sd-archives__gate-field input::placeholder { color: rgba(17,49,74,.42); }
.sd-archives__gate-field input:focus {
  outline: 0;
  border-color: var(--sd-navy-2);
  background: #FFF6E8;
  box-shadow: 0 0 0 4px rgba(35,92,129,.14);
}
.sd-archives__gate-field input[aria-invalid="true"] {
  border-color: var(--sd-coral);
  box-shadow: 0 0 0 4px rgba(219,99,93,.14);
}

.sd-archives__gate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, #DB635D 0%, #DB635D 100%);
  color: #FFF6E8;
  font-family: var(--sd-font-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--sd-shadow-cta);
  transition: transform .25s var(--sd-ease), box-shadow .25s var(--sd-ease), opacity .25s var(--sd-ease);
}
.sd-archives__gate-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -10px rgba(219,99,93,.55); }
.sd-archives__gate-btn[disabled] { opacity: .65; cursor: progress; transform: none; }

.sd-archives__gate-status {
  margin: 14px 0 0;
  font-size: 14px;
  min-height: 20px;
  color: var(--sd-fg-muted);
}
.sd-archives__gate-status[data-state="error"] { color: var(--sd-coral); font-weight: 500; }
.sd-archives__gate-status[data-state="success"] { color: #5492B6; font-weight: 500; }

.sd-archives__gate-trust {
  margin: 14px 0 0;
  font-family: var(--sd-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sd-fg-subtle);
}

/* unlocked vs locked: server-side cookie or JS toggle drives container class. */
.sd-archives__gate-unlocked { display: none; }
.sd-archives--unlocked .sd-archives__gate-locked { display: none; }
.sd-archives--unlocked .sd-archives__gate-unlocked { display: block; }

/* ============================================================
   RESOURCE LIST (one card per row, grid inside)
   ============================================================ */
.sd-archives__list-band {
  background: var(--sd-cream);
  padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 140px);
}
.sd-archives__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 22px;
}
.sd-archives__resource {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  background: #FFF6E8;
  border: 1px solid var(--sd-border-soft);
  border-radius: var(--sd-arch-radius);
  padding: 22px;
  box-shadow: var(--sd-shadow-card);
  transition: transform .3s var(--sd-ease), box-shadow .3s var(--sd-ease), border-color .3s var(--sd-ease);
}
.sd-archives__resource:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -28px rgba(13,31,46,.28), 0 4px 10px -2px rgba(13,31,46,.08);
  border-color: rgba(17,49,74,.16);
}
@media (max-width: 700px) {
  .sd-archives__resource { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
}

.sd-archives__resource-cover {
  position: relative;
  aspect-ratio: 8.5 / 11;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #11314a 0%, #235C81 100%);
}
.sd-archives__resource-cover-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.sd-archives__resource-cover-img--empty {
  background: linear-gradient(135deg, #11314a 0%, #235C81 50%, #5492B6 100%);
}
.sd-archives__resource-cover-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(246,200,147,0.22), transparent 60%);
  pointer-events: none;
}

.sd-archives__resource-body {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
  padding: 4px 4px 4px 0;
}
.sd-archives__resource-title {
  font-family: var(--sd-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--sd-navy);
  margin: 0;
}
.sd-archives__resource-title a { color: inherit; text-decoration: none; }
.sd-archives__resource-title a:hover { color: var(--sd-coral); }
.sd-archives__resource-blurb {
  font-size: 16px; line-height: 1.55;
  color: var(--sd-fg-muted);
  margin: 0;
}
.sd-archives__resource-meta {
  font-family: var(--sd-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sd-fg-subtle);
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.sd-archives__resource-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sd-fg-subtle); }

.sd-archives__resource-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.sd-archives__btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: var(--sd-font-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--sd-ease), box-shadow .25s var(--sd-ease), background .25s var(--sd-ease), color .25s var(--sd-ease), border-color .25s var(--sd-ease);
}
.sd-archives__btn--locked {
  background: linear-gradient(135deg, #DB635D 0%, #DB635D 100%);
  color: #FFF6E8;
  box-shadow: var(--sd-shadow-cta);
}
.sd-archives__btn--locked:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(219,99,93,.55); }
.sd-archives__btn--unlocked {
  background: linear-gradient(135deg, #DB635D 0%, #DB635D 100%);
  color: #FFF6E8;
  box-shadow: var(--sd-shadow-cta);
}
.sd-archives__btn--unlocked:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(219,99,93,.55); }
.sd-archives__btn--ghost {
  background: transparent;
  color: var(--sd-navy);
  border: 1px solid var(--sd-border);
}
.sd-archives__btn--ghost:hover { background: var(--sd-warm); border-color: rgba(17,49,74,.24); }

/* Locked vs unlocked button visibility (driven by container class). */
.sd-archives--locked   .sd-archives__btn--unlocked { display: none; }
.sd-archives--unlocked .sd-archives__btn--locked   { display: none; }

/* If a resource has no PDF URL, hide the unlocked button (we never show
   a broken link). Locked button always falls back to the gate anchor. */
.sd-archives__resource[data-pdf-url=""] .sd-archives__btn--unlocked { display: none !important; }

/* Reduced motion: kill transforms + pic scale. */
@media (prefers-reduced-motion: reduce) {
  .sd-archives *,
  .sd-archives *::before,
  .sd-archives *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* Tighten on the smallest screens. */
@media (max-width: 480px) {
  .sd-archives__hero { padding-top: 72px; padding-bottom: 56px; }
  .sd-archives__filters { top: 80px; }
  .sd-archives__pill { padding: 7px 12px; font-size: 13px; }
  .sd-archives__gate-card { padding: 22px; }
  .sd-archives__resource { padding: 16px; }
  .sd-archives__resource-cover { max-width: 200px; }
}

/* ============================================================
   HERO VIDEO + WAVE DIVIDER (added 2026-05-14)
   Extends navy hero background to very top of page, plays
   muted/loop video behind hero content, ends with wave divider.
   ============================================================ */

/* Make sure navy color extends behind the (transparent) Salient
   header so there is no visual gap above the hero. The hero already
   sits flush, but the page background is cream. Push navy up. */
body.blog,
body.archive {
  background-color: #11314a;
}
body.blog #ajax-content-wrap,
body.archive #ajax-content-wrap {
  background-color: #11314a;
}
body.blog #nectar-content-wrap.sd-archives,
body.archive #nectar-content-wrap.sd-archives {
  background: var(--sd-cream);
}
body.blog .sd-archives__hero,
body.archive .sd-archives__hero {
  margin-top: 0;
}

/* Hero with video background -- video sits behind bursts + content. */
.sd-archives__hero--video {
  background: #11314a;
}
.sd-archives__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  border: 0;
  background: #11314a;
}
.sd-archives__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 49, 74, 0.78) 0%,
    rgba(17, 49, 74, 0.72) 55%,
    rgba(17, 49, 74, 0.85) 100%);
  pointer-events: none;
}
.sd-archives__hero--video .sd-archives__hero-bg { z-index: 2; }
.sd-archives__hero--video .sd-archives__wrap { z-index: 3; position: relative; }

/* Bottom wave divider transitioning navy -> cream. */
.sd-archives__hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(60px, 7vw, 110px);
  display: block;
  z-index: 4;
  pointer-events: none;
}

/* Make sure the hero adds enough bottom padding so wave does not
   clip text. */
.sd-archives__hero--video {
  padding-bottom: clamp(110px, 11vw, 170px);
}

@media (prefers-reduced-motion: reduce) {
  .sd-archives__hero-video { display: none; }
}
@media (max-width: 480px) {
  .sd-archives__hero-wave { height: 50px; }
}

/* ============================================================
   HERO VIDEO FLUSH-TO-TOP (added 2026-05-14)
   Mirror of body.sd-insight-post pattern from sd-insights-design.css.
   The Salient nav is fixed/transparent and overlays content. The
   #nectar-nav-spacer reserves header height (100px desktop, 104px
   <=1024px) and has a tinted bg, which leaves a cream/navy gap
   above the hero so the video does not reach the top of the page.

   Fix: make the spacer transparent on blog/archive, and pull the
   hero up by header height with matching padding-top so the
   video element (position:absolute inset:0) fills from y=0 all
   the way through the hero. Hero copy stays put. Wave stays at
   bottom. Navy overlay covers the extended area too (inset:0).
   ============================================================ */
body.blog #nectar-nav-spacer,
body.archive #nectar-nav-spacer {
  background: transparent !important;
}
body.blog .sd-archives__hero--video,
body.archive .sd-archives__hero--video {
  margin-top: calc(-1 * var(--header-nav-height, 100px));
  padding-top: calc(var(--header-nav-height, 100px) + clamp(96px, 11vw, 156px));
}
@media only screen and (max-width: 1024px) {
  body.blog .sd-archives__hero--video,
  body.archive .sd-archives__hero--video {
    margin-top: -104px;
    padding-top: calc(104px + clamp(72px, 9vw, 120px));
  }
}

/* ============================================================
 * Per-resource email capture form (Resources archive + single)
 * Added 2026-05-14 alongside email-gating overhaul.
 * ============================================================ */
.sd-archives__resource-form {
    margin-top: 16px;
    padding: 18px;
    background: #fcf5ea;
    border: 1px solid #e9dcc1;
    border-radius: 12px;
}

.sd-archives__resource-form[hidden] { display: none !important; }

.sd-archives__resource-form-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 10px;
    align-items: end;
}

@media (max-width: 720px) {
    .sd-archives__resource-form-row {
        grid-template-columns: 1fr;
    }
}

.sd-archives__resource-form-field { display: block; min-width: 0; }

.sd-archives__resource-form-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #235C81;
    margin: 0 0 6px;
    font-weight: 600;
}

.sd-archives__resource-form input[type="email"],
.sd-archives__resource-form input[type="text"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d8c89e;
    border-radius: 8px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0d1e2e;
    box-sizing: border-box;
}

.sd-archives__resource-form input:focus {
    outline: 2px solid rgba(35, 92, 129, 0.35);
    outline-offset: 1px;
    border-color: #235C81;
}

.sd-archives__resource-form input[aria-invalid="true"] {
    border-color: #DB635D;
}

.sd-archives__resource-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #DB635D;
    color: #fff;
    padding: 11px 18px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.sd-archives__resource-form-submit:hover { background: #c45049; }
.sd-archives__resource-form-submit:disabled { opacity: 0.6; cursor: default; }

.sd-archives__resource-form-status {
    margin: 10px 0 0;
    min-height: 1.2em;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #334454;
}

.sd-archives__resource-form-status[data-state="success"] { color: #1f6b3a; font-weight: 600; }
.sd-archives__resource-form-status[data-state="error"]   { color: #B94A44; font-weight: 600; }
.sd-archives__resource-form-status[data-state="pending"] { color: #235C81; }

/* Coral "Email me the PDF" trigger button on the card. */
.sd-archives__btn.sd-archives__btn--primary {
    background: #DB635D;
    color: #fff;
    border: 0;
    cursor: pointer;
}
.sd-archives__btn.sd-archives__btn--primary:hover { background: #c45049; }

.sd-archives__load-more-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 4vw, 44px) 0 0;
}
.sd-archives__load-more {
  min-width: 180px;
  border: 0;
}
.sd-archives__load-more[hidden] {
  display: none !important;
}
.sd-archives__load-more.is-loading {
  opacity: .72;
  pointer-events: none;
}
.sd-archives__status {
  margin: 18px 0 0;
  text-align: center;
  color: var(--sd-fg-muted);
  font-size: 14px;
}
.sd-archives__status[hidden] {
  display: none !important;
}

body.single-resource {
  overflow-x: hidden;
}
body.single-resource .sd-resource-single {
  width: 100%;
  box-sizing: border-box;
}
body.single-resource .sd-resource-single__media,
body.single-resource .sd-resource-single__body,
body.single-resource .sd-resource-single__gate {
  min-width: 0;
  max-width: 100%;
}
body.single-resource .sd-resource-single__media figure,
body.single-resource .sd-resource-single__media img {
  max-width: 100%;
}
body.single-resource .sd-resource-single__form input,
body.single-resource .sd-resource-single__form button {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 760px) {
  body.single-resource .container.main-content {
    padding-left: 0;
    padding-right: 0;
  }
  body.single-resource .sd-resource-single {
    max-width: min(100%, 560px) !important;
    padding: 28px 18px 44px !important;
  }
  body.single-resource .sd-resource-single__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  body.single-resource .sd-resource-single__media {
    width: 100%;
  }
  body.single-resource .sd-resource-single__media figure {
    border-radius: 12px !important;
  }
  body.single-resource .sd-resource-single__body h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.12 !important;
  }
  body.single-resource .sd-resource-single__body p,
  body.single-resource .sd-resource-single__content,
  body.single-resource .sd-resource-single__inside ul,
  body.single-resource .sd-resource-single__audience p {
    font-size: 16px !important;
    line-height: 1.58 !important;
  }
  body.single-resource .sd-resource-single__gate {
    padding: 22px !important;
    border-radius: 12px !important;
  }
  body.single-resource .sd-resource-single__form button {
    width: 100%;
  }
  .sd-archives__resource-cta {
    width: 100%;
  }
  .sd-archives__resource-cta .sd-archives__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}