/* ==========================================================================
   Gleaming — Blog listing page (Figma desktop 1256:12216 / mobile 1256:14039)
   ========================================================================== */

/* Page background: in the blog frame the area outside the hero band is pure
   white while the hero band itself is the #FCFCFC page tone. */
body {
  background: var(--color-white);
}

/* --------------------------------------------------------------------------
   Hero band — full-bleed #FCFCFC card behind the header, bottom radius 40,
   3D stars anchored to the right edge, clipped by the band (1440x432).
   -------------------------------------------------------------------------- */
.blog-hero {
  position: relative;
  height: 432px;
  margin-top: -174px; /* navbar 96 + secondary bar 78 */
  padding-top: 174px;
  background: var(--color-page-bg);
  border-radius: var(--radius-card); /* all four corners rounded in the design */
  overflow: hidden;
}

.blog-hero__stars {
  position: absolute;
  top: 0;
  /* keep the baked navbar wash aligned with the 1440px-max header */
  right: max(0px, calc((100% - 1440px) / 2));
  width: 604px;
  height: auto; /* canvas is 604x500; the band clips at 432 like the design */
}

.blog-hero__content {
  position: relative;
  padding-top: 114px; /* title top at y=288 (288 - 174 header) */
}

.blog-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  color: var(--color-black);
}

.blog-hero__subtitle {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: var(--text-md); /* 18px */
  line-height: var(--leading-body);
  color: #434343;
}

/* --------------------------------------------------------------------------
   Posts grid — featured card (630) + three row cards (614), gap 20/22
   -------------------------------------------------------------------------- */
.blog-posts {
  margin-top: 34px; /* band 432 -> grid 466 */
}

.blog-posts__grid {
  display: grid;
  grid-template-columns: 630fr 614fr;
  gap: 20px;
  padding-right: 16px; /* right column stops 16px short of the container edge */
  align-items: stretch;
}

.blog-posts__list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 22px;
}

/* Viewport-paired elements: .bl-d = desktop-only, .bl-m = mobile-only.
   The mobile frame (1001:7141) shows ONE shared card rendition
   (m-post-card.jpg, node 1001:7166) on all four cards while desktop keeps
   four distinct images, and a recomposed CTA decor (m-cta-decor.png,
   group 1001:7261). */
.bl-m {
  display: none;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 40px rgba(30, 44, 162, 0.06);
}

.post-card--featured .post-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 590 / 372.42;
  object-fit: cover;
  border-radius: 24px;
}

.post-card--featured .post-card__meta { margin-top: 24px; }
.post-card--featured .post-card__title { margin-top: 12px; }
.post-card--featured .post-card__more { margin-top: 24px; }

/* row variant (right column) */
.post-card--row {
  flex-direction: row;
  gap: 24px;
}

.post-card--row .post-card__media {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.post-card--row .post-card__meta { margin-top: 12px; }
.post-card--row .post-card__more { margin-top: auto; }

.post-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-black);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-card__tag {
  display: inline-flex;
  padding: 4px 8px;
  background: var(--color-primary-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm); /* 14px */
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

.post-card__date {
  padding: 4px 8px;
  font-family: var(--font-alt);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-black);
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-alt);
  font-size: var(--text-md); /* 18px */
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

.post-card__more img {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  margin-top: 67px; /* grid 1050 -> pager 1117 */
}

.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
}

/* Figma Tabs (1256:12269): outer 4px padding only — icons sit at x=4 and
   x=199 with the page pills flush against them (28..199). */
.pagination__arrow:first-child { padding-right: 0; }
.pagination__arrow:last-child { padding-left: 0; }

.pagination__arrow img {
  width: 24px;
  height: 24px;
}

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 500; /* digits render at Medium weight in the design */
  font-size: var(--text-base); /* 16px */
  line-height: var(--leading-body);
  color: var(--color-black);
}

.pagination__page.is-active {
  background: #F4F5FA;
  color: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Our services
   -------------------------------------------------------------------------- */
.services {
  margin-top: 232px; /* pager 1165 -> section 1397 */
}

.services__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-black);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 89px; /* title 86 -> cards 175 */
}

.services__grid > li {
  display: flex;
}

/* shared .card overrides for this page (Figma card 305x341, pad 32/24) */
.svc-card {
  flex: 1;
  gap: 0;
  padding: 32px 24px;
  box-shadow: 0 24px 48px -12px rgba(30, 44, 162, 0.10);
}

.svc-card .card__title { margin-top: 16px; }
.svc-card .card__text { margin-top: 16px; }

.svc-card .link-more {
  margin-top: auto;
  padding-top: 24px;
  align-self: flex-start;
}

.services__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 67px;
  margin-top: 23px;
}

.services__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #BCC0E4;
}

.services__dot.is-active {
  background: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Ready-to-book CTA — gradient panel, white 3D broom + sparkles at right
   -------------------------------------------------------------------------- */
.blog-cta {
  margin-top: 200px;    /* services 2003 -> cta 2203 */
  /* padding (not margin) so it can't collapse with the footer's 80px
     margin-top: 72 + 80 = 152px gap, matching Figma (2644 -> 2796) */
  padding-bottom: 72px;
}

.blog-cta__panel {
  position: relative;
  overflow: hidden;
  min-height: 441px;
  border-radius: var(--radius-card);
  background: linear-gradient(112.7deg, var(--color-primary-400) 28%, #A0ABFF 100%);
  padding: 79px 83px;
}

.blog-cta__decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 536px;
  height: 441px;
}

.blog-cta__content {
  position: relative;
  /* Figma box is 602 but Chrome's Inter measures line 1 at 602.9px — one
     extra px stops "offers" wrapping a line early */
  max-width: 606px;
}

.blog-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--color-white);
}

.blog-cta__text {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: var(--text-md); /* 18px */
  line-height: 1.115; /* 20px — matches the tight Figma leading */
  color: var(--color-white);
}

.blog-cta__btn {
  margin-top: 44px;
  width: 343px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Footer wordmark nudge — shared components.css renders the giant wordmark
   19px lower than the Figma footer (1256:12328: "Gleaming" top at y3138,
   footer at y2796 → rel 342). Page-level correction; shared file untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .site-footer__wordmark {
    margin-top: -2px; /* components.css has 17px; design needs 19px higher */
  }
}

/* ==========================================================================
   Tablet 768–1023 — hamburger header (96px), compressed grids
   ========================================================================== */
@media (max-width: 1023px) {
  .blog-hero {
    margin-top: -96px; /* mobile navbar only */
    padding-top: 96px;
  }

  .blog-hero__content {
    padding-top: 140px;
  }

  .blog-hero__stars {
    right: 0;
    width: min(604px, 55vw);
    height: auto;
  }

  .blog-posts__grid {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .services {
    margin-top: 150px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }

  .services__title {
    font-size: 56px;
  }

  .blog-cta {
    margin-top: 120px;
  }

  .blog-cta__panel {
    padding: 64px 40px;
  }

  .blog-cta__title {
    font-size: 44px;
  }

  .blog-cta__content {
    max-width: 60%;
  }

  .blog-cta__decor {
    width: 45%;
    height: auto;
  }
}

/* ==========================================================================
   Mobile < 768 — matches the 402px frame (1256:14039)
   ========================================================================== */
@media (max-width: 767px) {
  /* hero: band 261 tall (Figma 1001:7142 spans -99..261 without the status
     bar), title box 32/34 at y141 (1001:7143 group y240 rel the -99 band) */
  .blog-hero {
    height: 261px;
  }

  .blog-hero__content {
    padding-top: 45px; /* header 96 -> title box top 141 */
  }

  .blog-hero__title {
    font-size: 32px;
    line-height: 34px;
  }

  .blog-hero__subtitle {
    font-size: var(--text-base); /* 16px */
  }

  /* Figma group 300x295 at x169 y36 (scale 0.4133 of the 726px desktop
     composite): the baked asset covers the group from 61px (desktop units)
     down, so it sits at 36 + 61*0.4133 = 61px with its left edge at x169
     (right edge 17px past the 402 frame, clipped by the band). */
  .blog-hero__stars {
    top: 8px; /* truth star ink starts at y21; asset has ~13px baked clear top */
    right: -17px;
    width: 249.6px;
    height: auto;
  }

  /* posts: single column of 382px cards with 10px page margins */
  .blog-posts {
    margin-top: 20px;
  }

  .blog-posts .container {
    padding-inline: 10px;
  }

  .blog-posts__grid,
  .blog-posts__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .post-card,
  .post-card--row {
    flex-direction: column;
    gap: 0;
  }

  /* mobile swaps in the paired mobile-only elements */
  .bl-d {
    display: none;
  }

  .bl-m {
    display: block;
  }

  /* every card becomes: image (342x186), title, tags — no Read more */
  .post-card__media,
  .post-card--featured .post-card__media,
  .post-card--row .post-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 186;
    object-fit: cover;
    border-radius: 16px;
  }

  /* mobile card type (1001:7169/71/73): title CG Regular 20/30 LS -0.6,
     tag + date CG Medium 12 (desktop keeps Inter/Roboto) */
  .post-card__title,
  .post-card--featured .post-card__title {
    order: 1;
    margin-top: 16px;
    font-weight: 400;
    font-size: 20px;
    line-height: var(--leading-body);
    letter-spacing: -0.6px;
  }

  .post-card__meta,
  .post-card--featured .post-card__meta,
  .post-card--row .post-card__meta {
    order: 2;
    margin-top: 8px;
  }

  .post-card__body {
    display: contents;
  }

  .post-card__more {
    display: none;
  }

  .post-card__tag {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 12px;
  }

  .post-card__date {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 12px;
  }

  .pagination {
    margin-top: 24px;
    padding-inline: 10px; /* cards sit on 10px margins, pager back on 20px */
  }

  /* services: left-aligned 32px title, stacked cards */
  .services {
    margin-top: 121px;
  }

  .services__title {
    font-size: 32px; /* stays centered on mobile (ink at x116 in 1001:7211) */
  }

  .services__grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .svc-card {
    padding: 16px 24px;
  }

  /* the frame hand-sizes each card (1001:7213/23/33/43: 245/257/263/261);
     Book is bottom-anchored via margin-top:auto, so drop the desktop 24px
     padding-top that would otherwise overflow the fixed heights */
  .services__grid > li:nth-child(1) .svc-card { height: 245px; }
  .services__grid > li:nth-child(2) .svc-card { height: 257px; }
  .services__grid > li:nth-child(3) .svc-card { height: 263px; }
  .services__grid > li:nth-child(4) .svc-card { height: 261px; }

  .svc-card .link-more {
    padding-top: 0;
  }

  .svc-card .card__title {
    font-size: 24px;
  }

  .svc-card .card__text {
    font-size: var(--text-base);
  }

  .services__dots {
    display: none;
  }

  /* CTA: tall panel, decor at the bottom */
  .blog-cta {
    margin-top: 105px;
    padding-bottom: 74px; /* panel bottom 3728 -> footer 3883 */
  }

  .blog-cta__panel {
    min-height: 718px;
    padding: 79px 31px;
    /* mobile gradient runs nearly horizontal (fit from the 1001:7253 render:
       t=0 plane at panel x≈104 @y100 tilting 45px left per 600px down) */
    background: linear-gradient(94.3deg, var(--color-primary-400) 26.7%, #A0ABFF 99%);
  }

  .blog-cta__content {
    max-width: 288px;
  }

  .blog-cta__title {
    font-size: 32px;
  }

  .blog-cta__text {
    margin-top: 16px;
  }

  .blog-cta__btn {
    margin-top: 44px;
    width: auto;
    min-width: 192px;
  }

  /* Figma mobile decor is a different arrangement than the desktop composite
     (broom/star offsets are non-uniform) — use the exported group render
     (1001:7261, gradient baked in). Blob-matched: canvas maps to panel-rel
     (0, 314), full panel width. */
  .blog-cta__decor.bl-m {
    top: 314px;
    bottom: auto;
    left: 0;
    right: auto;
    width: 100%;
    height: auto;
  }
}

/* Real-post listing: title links render identically to the plain title and
   make cards navigable on mobile, where the design hides .post-card__more */
.post-card__title-link {
  color: inherit;
  text-decoration: none;
}