/* =========================================================
   650 KGL BLOG V3 POLISH
   Loaded after V2. Blog landing + single story experience.
   ========================================================= */

:root {
  --kgl3-navy: #294a7b;
  --kgl3-deep: #203d68;
  --kgl3-orange: #c86e34;
  --kgl3-orange-soft: #d58b45;
  --kgl3-aqua: #48a9b8;
  --kgl3-ink: #1f2b38;
  --kgl3-muted: #657381;
  --kgl3-paper: #fbfaf7;
  --kgl3-soft: #f4f6f6;
  --kgl3-line: #dde4e7;
}

/* =========================================================
   LANDING PAGE — editorial hero position
   ========================================================= */

@media (min-width: 1100px) {
  .kgl-v2-hero-stage {
    overflow: visible !important;
  }

  /* Give the photograph its own right-hand territory. */
  .kgl-v2-feature-query {
    width: calc(100% - 340px) !important;
    margin-left: 340px !important;
    margin-right: 0 !important;
  }

  /*
   * Same intro-card dimensions, but pull the entire card toward the
   * actual left page margin. Only a small edge may overlap the image.
   */
  .kgl-v2-intro-panel {
    left: clamp(-105px, -6vw, -72px) !important;
    width: min(455px, 39%) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  .kgl-v2-feature-query {
    width: calc(100% - 300px) !important;
    margin-left: 300px !important;
  }

  .kgl-v2-intro-panel {
    left: -36px !important;
  }
}

/* Make the category strip feel intentional rather than like WP output. */
.kgl-v3-category-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.kgl-v3-category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid var(--kgl3-line);
  border-radius: 999px;
  background: #fff;
  color: var(--kgl3-deep);
  font: 600 12px/1 Helvetica, "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.kgl-v3-category-nav a:hover {
  transform: translateY(-1px);
  border-color: var(--kgl3-deep);
  background: var(--kgl3-deep);
  color: #fff;
}

/* =========================================================
   SINGLE ARTICLE — whole reading experience
   ========================================================= */

body.single-post {
  --kgl-reading-width: 780px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: var(--kgl3-ink);
}

/* progress line */
.kgl-reading-progress {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kgl3-orange), var(--kgl3-aqua));
  box-shadow: 0 1px 5px rgba(32, 61, 104, .16);
  pointer-events: none;
  transition: width .08s linear;
}

.admin-bar .kgl-reading-progress {
  top: 32px;
}

.single-post main {
  overflow: clip;
}

.single-post .kgl-article-back {
  display: table;
  width: fit-content;
  max-width: calc(100% - 36px);
  margin: clamp(52px, 7vw, 92px) auto 23px;
  color: var(--kgl3-orange);
  font: 700 11px/1.2 Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, color .2s ease;
}

.single-post .kgl-article-back:hover {
  color: var(--kgl3-deep);
  transform: translateX(-4px);
}

/* Wordpress templates vary, so cover the common post-title containers. */
.single-post .wp-block-post-title,
.single-post main h1.wp-block-post-title {
  width: min(920px, calc(100% - 36px)) !important;
  max-width: 920px !important;
  margin: 0 auto 20px !important;
  color: var(--kgl3-deep) !important;
  font-size: clamp(42px, 5.5vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  font-weight: 500 !important;
  text-wrap: balance;
}

.single-post .wp-block-post-date {
  width: min(920px, calc(100% - 36px)) !important;
  max-width: 920px !important;
  margin: 0 auto 30px !important;
  color: #7b8792 !important;
  font: 700 11px/1.3 Helvetica, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Large editorial lead image */
.single-post .wp-block-post-featured-image {
  width: min(1120px, calc(100% - 36px)) !important;
  max-width: 1120px !important;
  margin: 34px auto clamp(48px, 6vw, 74px) !important;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(30, 51, 75, .10);
}

.single-post .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  max-height: 650px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.single-post .wp-block-post-featured-image:hover img {
  transform: scale(1.018);
}

/* Reading column */
.single-post .wp-block-post-content {
  width: min(var(--kgl-reading-width), calc(100% - 36px)) !important;
  max-width: var(--kgl-reading-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: clamp(72px, 9vw, 120px);
  color: var(--kgl3-ink);
  font-size: 18px;
  line-height: 1.82;
}

.single-post .wp-block-post-content > * {
  max-width: 100%;
}

.single-post .wp-block-post-content p {
  margin-top: 0;
  margin-bottom: 1.55em;
  color: #354352;
  font-size: inherit;
  line-height: inherit;
}

/* Intro/dek */
.single-post .wp-block-post-content > p:first-child {
  margin-bottom: 2.1em;
  color: var(--kgl3-deep);
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.55;
  letter-spacing: -.012em;
}

/* Accent divider before major chapters */
.single-post .wp-block-post-content h2 {
  position: relative;
  margin: clamp(62px, 8vw, 88px) 0 25px;
  padding-top: 22px;
  color: var(--kgl3-deep);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 500;
  text-wrap: balance;
}

.single-post .wp-block-post-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: var(--kgl3-orange);
}

.single-post .wp-block-post-content h3 {
  margin: 40px 0 16px;
  color: var(--kgl3-deep);
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 600;
}

.single-post .wp-block-post-content h4 {
  margin: 30px 0 12px;
  color: var(--kgl3-deep);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}

.single-post .wp-block-post-content strong {
  color: var(--kgl3-deep);
  font-weight: 700;
}

.single-post .wp-block-post-content a {
  color: var(--kgl3-deep);
  text-decoration-color: rgba(200,110,52,.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.single-post .wp-block-post-content a:hover {
  color: var(--kgl3-orange);
  text-decoration-color: var(--kgl3-orange);
}

.single-post .wp-block-post-content ul,
.single-post .wp-block-post-content ol {
  margin: 1.6em 0 2em;
  padding-left: 1.35em;
  color: #354352;
}

.single-post .wp-block-post-content li {
  margin: .65em 0;
  padding-left: .25em;
}

.single-post .wp-block-post-content blockquote {
  position: relative;
  margin: 48px 0;
  padding: 30px 32px 30px 38px;
  border: 0;
  border-left: 4px solid var(--kgl3-orange);
  border-radius: 0 12px 12px 0;
  background: var(--kgl3-paper);
  color: var(--kgl3-deep);
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -.015em;
}

.single-post .wp-block-post-content hr {
  width: 100%;
  margin: 56px 0;
  border: 0;
  border-top: 1px solid var(--kgl3-line);
}

.single-post .wp-block-post-content figure {
  margin: 48px calc((min(980px, 100vw - 36px) - 100%) / -2);
}

.single-post .wp-block-post-content figure img {
  width: 100%;
  border-radius: 14px;
}

.single-post .wp-block-post-content figcaption {
  margin-top: 10px;
  color: #7a8792;
  font-size: 12px;
  line-height: 1.45;
}

/* Stylish inline notes/callouts if we add them to future articles */
.single-post .wp-block-post-content .kgl-story-note {
  margin: 42px 0;
  padding: 24px 26px;
  border: 1px solid var(--kgl3-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(72,169,184,.09), transparent 35%),
    var(--kgl3-paper);
}

.single-post .wp-block-post-content .kgl-story-note > :last-child {
  margin-bottom: 0;
}

/* Remove generic WordPress comments experience from editorial posts. */
.single-post .wp-block-comments,
.single-post .comments-area,
.single-post #comments {
  display: none !important;
}

/* Related/latest posts area at the bottom — make it look deliberate. */
.single-post main + *,
.single-post .wp-block-query.alignwide {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   REVEALS / READING MOTION
   ========================================================= */

.single-post .kgl-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.single-post .kgl-reveal.kgl-visible {
  opacity: 1;
  transform: translateY(0);
}

.single-post .wp-block-post-featured-image.kgl-hero-ready {
  animation: kglArticleHero 1s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes kglArticleHero {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-post .kgl-reveal,
  .single-post .kgl-reveal.kgl-visible,
  .single-post .wp-block-post-featured-image,
  .single-post .wp-block-post-featured-image img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   MOBILE ARTICLE
   ========================================================= */

@media (max-width: 782px) {
  .admin-bar .kgl-reading-progress {
    top: 46px;
  }

  .single-post .kgl-article-back {
    margin-top: 38px;
  }

  .single-post .wp-block-post-title,
  .single-post main h1.wp-block-post-title {
    font-size: clamp(38px, 11vw, 54px) !important;
    line-height: 1.01 !important;
  }

  .single-post .wp-block-post-featured-image {
    width: calc(100% - 24px) !important;
    border-radius: 12px;
    margin-top: 26px !important;
    margin-bottom: 42px !important;
  }

  .single-post .wp-block-post-content {
    width: calc(100% - 36px) !important;
    font-size: 17px;
    line-height: 1.76;
  }

  .single-post .wp-block-post-content > p:first-child {
    font-size: 20px;
  }

  .single-post .wp-block-post-content h2 {
    margin-top: 56px;
  }

  .single-post .wp-block-post-content figure {
    margin-left: 0;
    margin-right: 0;
  }
}