/* ============================================================================
   refresh-details.css: shared family for the eight dynamic detail pages
   (Blog, Case Study, Event, Webinar, Download, Team Member, Job Opportunity,
   Campaign) and the three error pages (spec 007). The reference build has no
   detail designs; this family is inferred from the shipped rf- language:
   compact dark hero (refresh-resources.css values), paper prose body
   (the .rf-prose treatment), red CTA band, editorial numerals (offerings
   zigzag) for the error pages. Loaded per page via @section Styles.
   ========================================================================== */

/* ---- Hero (compact, dark — rs-hero constants, detail-scale headline) ------ */
.rf-dt-hero {
  position: relative;
  background: var(--rf-dark);
  color: #fff;
  padding: 148px 24px 56px;
  overflow: hidden;
}
.rf-dt-hero__glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  background: rgba(167, 37, 44, 0.16);
  filter: blur(140px);
  pointer-events: none;
}
.rf-dt-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
}
/* Two-column variant when the hero carries a media plate (cover, thumbnail). */
@media (min-width: 1024px) {
  .rf-dt-hero__inner.has-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
    align-items: center;
  }
}
.rf-dt-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 28px;
  transition: color 0.3s var(--rf-ease);
}
.rf-dt-hero__back:hover { color: #fff; }
.rf-dt-hero__back .rf-icon { transition: transform 0.3s var(--rf-ease); }
.rf-dt-hero__back:hover .rf-icon { transform: translateX(-4px); }
.rf-dt-hero__h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 900px;
}
.rf-dt-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 18px;
  font-family: var(--rf-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.rf-dt-hero__sub {
  margin-top: 18px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 17px;
  line-height: 1.65;
}
.rf-dt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}
/* Quiet secondary action on the dark hero (one-pager/PDF treatment). */
.rf-dt-hero__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s var(--rf-ease);
}
.rf-dt-hero__ghost:hover { color: #fff; }
.rf-dt-hero__ghost:focus-visible,
.rf-dt-hero__back:focus-visible {
  outline: 2px solid var(--rf-red-light);
  outline-offset: 3px;
}
/* Media plate: cover image / thumbnail in the hero. */
.rf-dt-hero__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .rf-dt-hero__media { margin-top: 0; }
}
.rf-dt-hero__media img {
  width: 100%;
  height: auto;
  display: block;
}
/* Logo-on-plate variant (case-study client marks are mostly light-bg logos). */
.rf-dt-hero__media.is-plate {
  background: #fff;
  padding: 28px;
}
.rf-dt-hero__media.is-plate img {
  max-height: 220px;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* ---- Body (paper band, centered article column) --------------------------- */
.rf-dt-body {
  background: var(--rf-paper);
  padding: 64px 24px 88px;
}
.rf-dt-body__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* Article prose: the .rf-prose scale applied to CMS-rendered HTML, plus the
   embedded-media rules Strapi output needs (images, tables, code, quotes). */
.rf-dt-article {
  max-width: 760px;
  margin-inline: auto;
}
.rf-dt-article h1,
.rf-dt-article h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--rf-ink);
  margin: 48px 0 14px;
}
.rf-dt-article h3,
.rf-dt-article h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rf-ink);
  margin: 32px 0 10px;
}
.rf-dt-article > h1:first-child,
.rf-dt-article > h2:first-child,
.rf-dt-article > h3:first-child { margin-top: 0; }
.rf-dt-article p,
.rf-dt-article li {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(26, 26, 26, 0.8);
}
.rf-dt-article p { margin: 0 0 16px; }
.rf-dt-article ul,
.rf-dt-article ol {
  padding-left: 22px;
  margin: 0 0 16px;
}
.rf-dt-article li { margin-bottom: 8px; }
.rf-dt-article a {
  color: var(--rf-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-dt-article a:hover { color: var(--rf-red-deep); }
.rf-dt-article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px auto;
  display: block;
}
.rf-dt-article figure { margin: 24px 0; }
.rf-dt-article figcaption {
  font-size: 13px;
  color: var(--rf-gray-4);
  text-align: center;
  margin-top: 8px;
}
.rf-dt-article blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rf-red);
  color: var(--rf-gray-3);
  font-style: italic;
}
.rf-dt-article pre {
  background: var(--rf-terminal);
  color: #e8e8e6;
  font-family: var(--rf-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
  margin: 24px 0;
}
.rf-dt-article code {
  font-family: var(--rf-font-mono);
  font-size: 0.92em;
}
.rf-dt-article :not(pre) > code {
  background: rgba(20, 20, 20, 0.06);
  border-radius: 4px;
  padding: 2px 6px;
}
.rf-dt-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.rf-dt-article th,
.rf-dt-article td {
  border: 1px solid var(--rf-border-2);
  padding: 10px 14px;
  text-align: left;
  color: rgba(26, 26, 26, 0.8);
}
.rf-dt-article th {
  background: #fff;
  font-weight: 700;
  color: var(--rf-ink);
}
.rf-dt-article iframe {
  max-width: 100%;
  border: 0;
  border-radius: 12px;
}
.rf-dt-article hr {
  border: 0;
  border-top: 1px solid var(--rf-border-2);
  margin: 40px 0;
}

/* Empty/not-found state inside a listing body (missing CMS record). */
.rf-dt-empty {
  max-width: 760px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--rf-gray-3);
}
.rf-dt-empty a {
  color: var(--rf-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Video embed (webinars): 16:9 plate ----------------------------------- */
.rf-dt-video {
  max-width: 900px;
  margin: 0 auto 48px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  background: var(--rf-dark);
}
.rf-dt-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Resource/file link rows (event recordings, related files) ------------ */
.rf-dt-files {
  max-width: 760px;
  margin: 0 auto 48px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.rf-dt-files__head {
  padding: 18px 24px 0;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--rf-ink);
}
.rf-dt-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  transition: background 0.3s var(--rf-ease);
}
.rf-dt-file + .rf-dt-file { border-top: 1px solid var(--rf-border); }
.rf-dt-file:hover { background: var(--rf-red-tint-2); }
.rf-dt-file .rf-icon { color: var(--rf-red); }
.rf-dt-file__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--rf-ink);
}
.rf-dt-file__tag {
  margin-left: auto;
  font-family: var(--rf-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rf-gray-4);
  white-space: nowrap;
}

/* ---- Team member profile --------------------------------------------------- */
.rf-dt-profile {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .rf-dt-profile {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}
.rf-dt-card {
  background: #fff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
}
@media (min-width: 900px) {
  .rf-dt-card { position: sticky; top: 100px; }
}
.rf-dt-card__photo {
  width: 180px;
  height: 180px;
  border-radius: 999px;
  object-fit: cover;
  margin: 0 auto 20px;
  border: 3px solid var(--rf-red-wash);
}
.rf-dt-card__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rf-ink);
}
.rf-dt-card__role {
  margin-top: 4px;
  font-size: 14px;
  color: var(--rf-gray-4);
}
.rf-dt-card__contact {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.rf-dt-card__contact a {
  color: var(--rf-red);
  font-weight: 600;
  transition: color 0.3s var(--rf-ease);
}
.rf-dt-card__contact a:hover { color: var(--rf-red-deep); }
.rf-dt-card__phone { color: var(--rf-gray-3); }
.rf-dt-card__social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}
.rf-dt-card__social a {
  color: var(--rf-gray-5);
  transition: color 0.3s var(--rf-ease);
}
.rf-dt-card__social a:hover { color: var(--rf-red); }
.rf-dt-card__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
.rf-dt-bio__h2 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rf-ink);
  margin-bottom: 18px;
}
.rf-dt-bio__text {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(26, 26, 26, 0.8);
  white-space: pre-line;
}

/* ---- CTA band (rs-cta constants) ------------------------------------------ */
.rf-dt-cta {
  position: relative;
  background: var(--rf-red);
  padding: 88px 24px 72px;
  text-align: center;
  overflow: hidden;
}
.rf-dt-cta__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255, 255, 255, 0.12), transparent 70%);
}
.rf-dt-cta__dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, var(--rf-red-deep));
}
.rf-dt-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
}
.rf-dt-cta__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 12px;
}
.rf-dt-cta__sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.rf-dt-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--rf-red);
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.3s var(--rf-ease), box-shadow 0.3s var(--rf-ease);
}
.rf-dt-cta__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}
.rf-dt-cta__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- Error pages (404 / 500 / session expired) ----------------------------
   Full dark band; the giant editorial numeral is the offerings-zigzag
   treatment recast as the status code. */
.rf-err {
  position: relative;
  background: var(--rf-dark);
  color: #fff;
  min-height: calc(100vh - 320px);
  display: flex;
  align-items: center;
  padding: 168px 24px 96px;
  overflow: hidden;
}
.rf-err__glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  background: rgba(167, 37, 44, 0.16);
  filter: blur(140px);
  pointer-events: none;
}
.rf-err__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.rf-err__code {
  font-weight: 800;
  font-size: clamp(88px, 18vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.08);
  user-select: none;
}
.rf-err__h1 {
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: -0.5em;
}
.rf-err__sub {
  margin: 18px auto 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1.65;
}
.rf-err__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}
.rf-err__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 0;
  padding: 0;
  transition: color 0.3s var(--rf-ease);
}
.rf-err__ghost:hover { color: #fff; }
.rf-err__ghost:focus-visible {
  outline: 2px solid var(--rf-red-light);
  outline-offset: 3px;
}
.rf-err__help {
  margin-top: 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}
.rf-err__help a {
  color: var(--rf-red-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}