/* ============================================================
   Blog: the hub, the article pages and the homepage section.
   Generated markup lives in service-pages-src/build_blog.py.
   The homepage carries an inline copy of this file (between the
   BLOG-CSS markers), so the Webflow build picks it up.
   ============================================================ */

.blog-hero {
  min-height: 0;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.blog-hero .cp-hero-layout {
  grid-template-columns: minmax(0, 1fr);
}

.blog-hero .svp-hero-lead {
  max-width: 34rem;
}

.blog-list {
  padding: clamp(1rem, 3vw, 2rem) 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  padding: 0.8rem 0.8rem 1.5rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(46, 46, 46, 0.07);
  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 400ms ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(46, 46, 46, 0.11);
}

.blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #eeecf0;
}

.blog-card-media {
  position: relative;
}

.blog-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.blog-article-figure {
  position: relative;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

.blog-card-body {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.7rem;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  color: rgba(46, 46, 46, 0.6);
  font-size: 0.85rem;
}

.blog-card-cat {
  color: var(--pink);
  font-weight: 600;
}

.blog-card-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.blog-card-title a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.blog-card-summary {
  color: rgba(46, 46, 46, 0.68);
  font-size: 1rem;
  line-height: 1.5;
}

.blog-card-link {
  margin-top: auto;
  padding: 0 0.7rem;
  color: #2e2e2e;
  font-size: 0.95rem;
  font-weight: 600;
}

.blog-card-link span {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--pink);
  transition: transform 300ms ease;
}

.blog-card:hover .blog-card-link span {
  transform: translateX(4px);
}

/* ---- Homepage section ------------------------------------------- */

/* The closing collage has empty space above its artwork; pull it up under
   the blog section so the two read as neighbours. */
.blog-section + .cta-section {
  padding-top: 0;
}

.blog-section + .cta-section .cta-art {
  margin-top: clamp(-8rem, -8vw, -4.5rem);
}

.blog-section {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 5vw, 4.5rem);
}

.blog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2rem;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

.blog-section-title {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.blog-heading {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* A global span rule would shrink the dot to 16px; keep it the heading's size. */
.blog-heading .blog-dot {
  color: var(--pink);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.blog-section-lead {
  max-width: 28rem;
  color: rgba(46, 46, 46, 0.68);
  font-size: var(--body-copy-size, 1.0625rem);
  font-weight: var(--body-copy-weight, 400);
  letter-spacing: var(--body-copy-letter-spacing, 0);
  line-height: var(--body-copy-line-height, 1.5);
}

/* The homepage button. The base .cta-hero-button is a fixed-width,
   centred button; here it sizes to its label and sits at the row's end. */
.blog-section-head .blog-all-button {
  width: auto;
  min-width: 13.5rem;
  margin: 0;
  padding: 0 1.9rem;
}

@media (max-width: 720px) {
  .blog-section-head .blog-all-button {
    min-width: 0;
  }
}

/* ---- Article page ------------------------------------------------ */

.blog-article-head {
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
}

.blog-article-shell {
  width: 100%;
}

.blog-article-body {
  max-width: 46rem;
  margin: 0 auto;
}

.blog-article-head .blog-article-shell {
  text-align: center;
}

.blog-article-title,
.blog-article-lead {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-back:hover,
.blog-back:focus-visible {
  color: #2e2e2e;
}

.blog-article-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 1rem;
  color: rgba(46, 46, 46, 0.62);
  font-size: 0.9rem;
}

.blog-article-meta span + span::before {
  content: "\00b7";
  margin-right: 1rem;
}

.blog-article-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.blog-article-lead {
  margin-top: 1.1rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

.blog-article {
  padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}

.blog-article-figure {
  margin: 0 0 clamp(2.2rem, 5vw, 3.8rem);
  overflow: hidden;
  border-radius: 24px;
  background: #eeecf0;
}

.blog-article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.blog-article-body {
  color: rgba(46, 46, 46, 0.86);
  font-size: clamp(1.06rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

.blog-article-body > * + * {
  margin-top: 1.35rem;
}

.blog-article-body h2 {
  margin-top: 2.8rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.blog-article-body h3 {
  margin-top: 2.2rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.blog-article-body h2 + *,
.blog-article-body h3 + * {
  margin-top: 0.9rem;
}

.blog-article-body ul {
  padding-left: 1.3rem;
  list-style: disc;
}

.blog-article-body li + li {
  margin-top: 0.5rem;
}

.blog-article-body li::marker {
  color: #ff0099;
}

.blog-article-body blockquote {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid #ff0099;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.blog-article-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 24px;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-article-cta h2 {
  color: #f4f4f4;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.blog-article-cta p {
  margin: 0.6rem 0 1.4rem;
  color: rgba(244, 244, 244, 0.78);
  line-height: 1.55;
}

.blog-more {
  padding: 0 0 var(--svp-section-y, clamp(4rem, 8vw, 7rem));
}

.blog-more-title {
  margin-bottom: 1.4rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.blog-more .blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-more .blog-card-title {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

@media (max-width: 1024px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 721px) and (max-width: 1024px) {
  .blog-more .blog-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 720px) {
  .blog-grid,
  .blog-more .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-heading {
    letter-spacing: -0.035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-media-video {
    display: none;
  }

  .blog-card,
  .blog-card-media img,
  .blog-card-link span {
    transition: none;
  }
}

/* ---- Hub: search and filter ------------------------------------- */

.blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.blog-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}

.blog-search-icon {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  color: rgba(46, 46, 46, 0.5);
  pointer-events: none;
}

.blog-search input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0 1.2rem 0 2.9rem;
  border: 1px solid rgba(46, 46, 46, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  appearance: none;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.blog-search input::placeholder {
  color: rgba(46, 46, 46, 0.42);
}

.blog-search input:focus {
  border-color: rgba(255, 0, 153, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.09);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-chip {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.16);
  border-radius: 999px;
  background: transparent;
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.blog-chip:hover {
  border-color: rgba(46, 46, 46, 0.5);
}

.blog-chip.is-active {
  border-color: #2e2e2e;
  background: #2e2e2e;
  color: #f4f4f4;
}

.blog-chip:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.blog-card[hidden] {
  display: none;
}

.blog-empty {
  padding: 2rem 0;
  color: rgba(46, 46, 46, 0.68);
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  .blog-search {
    max-width: none;
  }

  .blog-filters {
    flex-wrap: nowrap;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-filters::-webkit-scrollbar {
    display: none;
  }

  .blog-chip {
    flex: 0 0 auto;
  }
}

/* Homepage preview: a touch smaller than the hub so it sits as a quiet
   closing section rather than a feature. */
.blog-section .blog-grid {
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

.blog-section .blog-card-title {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

/* ---- Hero ------------------------------------------------------- */

/* The hub sits on the plain page colour; no pink glow behind the title. */
.blog-hero-hub .svp-hero-glow {
  display: none;
}

.blog-hero .svp-hero-lead {
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
}

/* ---- Width: follow the nav bar's grid ----------------------------- */

/* The nav bar, and every other section on the page, sit on the boxed guide
   width (1180px). The default shell is wider (1240px), so pin the blog's
   shells to the same guide. */
.blog-section .section-shell,
.blog-list .section-shell,
.blog-more .section-shell,
.blog-hero .section-shell {
  width: var(--boxed-guide-width, min(1180px, calc(100vw - 2.5rem)));
}

/* ---- Hub hero: the animated keys, floating right of the title ------ */

.blog-hero-hub .cp-hero-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

/* Transparent video, shown whole (never cropped), drifting gently. It is
   free of the page guides: it sits past the right edge of the grid and
   hangs down over the search and filters when it needs to. */
.blog-hero-art {
  position: absolute;
  z-index: 1;
  top: -4.5rem;
  right: clamp(-7rem, -5vw, -1rem);
  width: clamp(15rem, 25vw, 23rem);
  pointer-events: none;
  animation: blog-art-float 6s ease-in-out infinite;
}

.blog-hero-video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

@keyframes blog-art-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-18px) rotate(1.5deg);
  }
}

@media (max-width: 1024px) {
  .blog-hero-hub .cp-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-hero-art {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(17rem, 62vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero-art {
    animation: none;
  }
}

/* ---- Homepage: FAQ boxes and blog cards reveal on scroll ----------- */

/* --rv runs 0 to 1 as the box scrolls into view (set by the script at the
   end of index.html); --rd is its side: -1 or 1, or a fan across a row.
   Individual transform properties, so hover transforms and the existing
   [data-settle] scale are untouched. Without the script --rv is 1 and
   nothing moves. */
[data-card-reveal] {
  translate:
    calc(var(--rd, 0) * (1 - var(--rv, 1)) * 2.6rem)
    calc((1 - var(--rv, 1)) * 5.5rem);
  rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 5deg);
  opacity: min(1, calc(var(--rv, 1) * 1.8));
  will-change: translate, rotate, opacity;
}

@media (max-width: 768px) {
  [data-card-reveal] {
    translate:
      calc(var(--rd, 0) * (1 - var(--rv, 1)) * 1.4rem)
      calc((1 - var(--rv, 1)) * 3.5rem);
    rotate: calc(var(--rd, 0) * (1 - var(--rv, 1)) * 3deg);
  }
}

/* Card date: a step smaller than the category beside it. */
.blog-card-meta > span:not(.blog-card-cat) {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* Room under the title for the floating keys, so they hang in the hero
   instead of covering the search and filters. */
.blog-hero-hub {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

@media (max-width: 1024px) {
  .blog-hero-hub {
    padding-bottom: clamp(1rem, 3vw, 2rem);
  }
}

/* Hub title: larger than the article titles. */
.blog-hero-hub .svp-hero-title {
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

@media (max-width: 768px) {
  .blog-hero-hub .svp-hero-title {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
  }
}

/* ---- Article call-to-action: centred copy, a person on the Enter key
   to its right ------------------------------------------------------ */

.blog-cta {
  position: relative;
  overflow: hidden;
}

.blog-cta .svp-cta-inner {
  min-height: clamp(18rem, 30vw, 26rem);
  align-content: center;
}

/* Not bound to the page guide: it sits towards the right edge of the
   section, past the nav bar's edge on wide screens. */
.blog-cta .blog-cta-figure {
  position: absolute;
  right: clamp(-2rem, 1vw, 3rem);
  bottom: 0;
  width: clamp(11rem, 22vw, 19rem);
  pointer-events: none;
}

.blog-cta .blog-cta-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .blog-cta .blog-cta-figure {
    position: relative;
    right: auto;
    margin: 1.5rem auto 0;
    width: min(55vw, 13rem);
  }
}

/* Trim the empty space around the call-to-action: the clip has a lot of
   room above Michael, and the article and CTA both pad their edges. */
.blog-article {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-cta {
  padding-top: 0;
}


/* ---- Article hero: photo with the title laid over it ----------------- */

.blog-article {
  padding-top: clamp(7.5rem, 11vw, 9rem);
}

.blog-article-hero {
  position: relative;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  border-radius: 28px;
  overflow: hidden;
  background: #2e2e2e;
}

.blog-article-hero .blog-article-figure {
  margin: 0;
  border-radius: 0;
}

.blog-article-hero .blog-article-figure img {
  aspect-ratio: 21 / 10;
  min-height: 26rem;
}

.blog-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.45) 42%, rgba(30, 30, 30, 0) 72%);
  pointer-events: none;
}

.blog-article-hero-copy {
  position: absolute;
  z-index: 1;
  left: clamp(1.4rem, 4vw, 3.4rem);
  right: clamp(1.4rem, 4vw, 3.4rem);
  bottom: clamp(1.4rem, 4vw, 3.2rem);
  color: #f4f4f4;
  text-align: left;
}

.blog-article-hero .blog-article-meta {
  justify-content: flex-start;
  margin: 0 0 1rem;
  color: rgba(244, 244, 244, 0.8);
}

.blog-article-hero .blog-card-cat {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #ff0099;
  color: #fff;
  font-weight: 600;
}

.blog-article-hero .blog-article-meta span + span::before {
  color: rgba(244, 244, 244, 0.5);
}

.blog-article-hero .blog-article-title {
  max-width: 44rem;
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
}

.blog-article-hero .blog-article-lead {
  max-width: 38rem;
  margin: 0.9rem 0 0;
  color: rgba(244, 244, 244, 0.86);
}

@media (max-width: 720px) {
  .blog-article-hero .blog-article-figure img {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}