/* ============================================================
   BLOG.CSS  — "Ideas, Insights & Engineering"

   FIGMA MEASUREMENTS  (inner container = 894px wide)
   ┌─────────────────────────────────────────────────────────┐
   │  Header (flex-col):                                     │
   │    Heading block: w=658px h=129px                       │
   │      Label  y=0    Manrope Med 12px lh=21px             │
   │      Title  y=22.5 Sora Reg 45px lh=52.5 ls=-2.25px    │
   │      Desc   y=78   Manrope Reg 15px lh=22.5px          │
   │    Gap: 15px                                            │
   │    Button row: full width, items-end (button right)     │
   │      Button: w=115.92 h=37.485 gradient pill            │
   │                                                         │
   │  Cards row (gap=30px):                                  │
   │    Card 1  w=487.5  h=430.838  (inner card)            │
   │      Photo h=232.103px (top-rounded)                    │
   │      Body top offset = 266.6 − 232.103 = 34.5px        │
   │      Body gap: 30px between text block & tags           │
   │    Card 2  w=375.75  h=447.75  margin-top=24.75px      │
   │      Photo h=235.5px (top-rounded)                      │
   │      Meta  top = 248.41 − 235.5 = 12.91px below photo  │
   │      Body  top = 272.76 − 235.5 = 37.26px below photo  │
   │      Body gap before tags: 29.25px                      │
   └─────────────────────────────────────────────────────────┘
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.blog {
  padding: 75px 0;
  width: 100%;
  margin-top: var(--sp-4);
}

.blog__inner {
  width: 894px;              /* Figma: w-[894px] */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}


/* ------------------------------------------------------------
   2. HEADER BLOCK  (flex-col: heading above, button below-right)
   Figma: flex-col gap-[15px] items-start justify-end w-[894px]
   ------------------------------------------------------------ */
.blog__header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* Heading text block — 658px wide */
.blog__heading {
  width: 658px;
  flex-shrink: 0;
}

/* "/ blog /" label — Manrope Med 12px, y=0 */
.blog__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #111111;
  display: block;
}

/* Title — Sora Reg 45px, y=22.5 (1.5px gap after label) */
.blog__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -2.25px;
  color: #111111;
  margin-top: 1.5px;
  display: block;
}

/* Desc — Manrope Reg 15px, y=78 (right after title) */
.blog__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 22.5px;
  color: #111111;
  max-width: 618px;
  display: block;
  margin-top: 0;
}

/* Button row — full width, button floated to the right */
.blog__btn-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* "More articles" gradient pill button
   Figma: w=115.92px h=37.485px, gradient 262deg #ff4664→#386bb7 */
.blog__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 115.92px;
  height: 37.485px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(262deg, #ff4664 14.51%, #386bb7 95.96%);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--ease-default);
}

.blog__btn:hover {
  opacity: 0.88;
}

.blog__btn-icon {
  width: 6.5px;
  height: 9.75px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------
   3. CARDS ROW
   Figma: flex gap-[30px] items-center (both outer divs same height)
   Card 2 is staggered down 24.75px via margin-top.
   ------------------------------------------------------------ */
.blog__cards {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}


/* ------------------------------------------------------------
   4. BLOG CARD — shared base
   Figma: bg-white border 0.75px #e0e0e0 rounded-[18.75px]
   ------------------------------------------------------------ */
.blog-card {
  background: #ffffff;
  border-radius: 18.75px;
  border: 0.75px solid #e0e0e0;
  overflow: hidden;
  flex-shrink: 0;
}

/* Card 1 — large (487.5px, inner h=430.838px) */
.blog-card--large {
  width: 487.5px;
}

/* Card 2 — smaller (375.75px, inner h=447.75px, staggered 24.75px) */
.blog-card--offset {
  width: 375.75px;
  margin-top: 24.75px;
}


/* ------------------------------------------------------------
   5. PHOTO AREA
   Top corners rounded to match card, bottom straight.
   ------------------------------------------------------------ */
.blog-card__photo {
  width: 100%;
  overflow: hidden;
  border-radius: 18.75px 18.75px 0 0;
  flex-shrink: 0;
  display: block;
}

/* Figma: Card 1 photo h=232.103px */
.blog-card--large .blog-card__photo {
  height: 232.103px;
}

/* Figma: Card 2 photo h=235.5px */
.blog-card--offset .blog-card__photo {
  height: 235.5px;
}

.blog-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ------------------------------------------------------------
   6. CARD BODY (content area below the photo)
   ------------------------------------------------------------ */
.blog-card__body {
  padding: 0 30px 30px;
  display: flex;
  flex-direction: column;
}

/* Card 1: content starts at 266.6px from card top
   photo ends at 232.103px → gap = 34.497px              */
.blog-card--large .blog-card__body {
  padding-top: 34.5px;
  gap: 30px;                  /* Figma: gap-[30px] between text block & tags */
}

/* Card 2: meta starts at 248.41px from card top
   photo ends at 235.5px → padding = 12.91px             */
.blog-card--offset .blog-card__body {
  padding-top: 12.91px;
  gap: 10px;                  /* meta → content gap */
}


/* ------------------------------------------------------------
   7. META LINE  (Card 2 only — "19 Feb 2024 / Rahul Agarwal")
   Figma: Manrope Med 10.5px, #9b9b9b, top=248.41px
   ------------------------------------------------------------ */
.blog-card__meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 22.5px;
  color: #9b9b9b;
}


/* ------------------------------------------------------------
   8. CONTENT BLOCK  (title + excerpt + tags)
   ------------------------------------------------------------ */
.blog-card__content {
  display: flex;
  flex-direction: column;
  gap: 29.25px;               /* Figma: gap-[29.25px] between text & tags */
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  gap: 0;                     /* title and excerpt are flush in Card 2 */
}

/* Card 1 has a 7.5px gap between title and excerpt */
.blog-card--large .blog-card__text {
  gap: 7.5px;
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 18.75px;
  line-height: 26.25px;
  letter-spacing: -0.5625px;
  color: #111111;
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 22.5px;
  color: #333333;
}


/* ------------------------------------------------------------
   9. TAGS  "/ DevOps / Culture /"
   Figma: Manrope Med 10.5px, #9b9b9b, gap-[0.75px] between tokens
   ------------------------------------------------------------ */
.blog-card__tags {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 22.5px;
  color: #9b9b9b;
}


/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */

/* Constrain inner to viewport on narrower screens */
@media (max-width: 950px) {
  .blog__inner {
    width: auto;
    padding: 0 24px;
  }

  .blog__heading {
    width: 100%;
    max-width: 658px;
  }

  .blog-card--large {
    flex: 1.3;
    width: auto;
  }

  .blog-card--offset {
    flex: 1;
    width: auto;
  }
}

/* Tablet — scale title, stack cards */
@media (max-width: 860px) {
  .blog__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1.5px;
  }

  .blog__cards {
    flex-direction: column;
    gap: 20px;
  }

  .blog-card--large,
  .blog-card--offset {
    width: 100%;
    flex: none;
    margin-top: 0;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .blog {
    padding: 48px 0;
  }

  .blog__inner {
    padding: 0 16px;
    gap: 20px;
  }

  .blog__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1px;
  }
}