/* ==== Feature Trio (1 big + 2 small) ==== */
.bbw-posts.feature-trio {
  display: grid;
  grid-template-columns: 1.35fr 1fr; /* big left by default */
  grid-template-rows: auto auto;
  gap: 83px 80px;
  align-items: start;
}

/* flip: put big on right */
.bbw-posts.feature-trio.is-reverse {
  grid-template-columns: 1fr 1.35fr;
}

/* place cards by order — rely on order + rows */
.bbw-posts.feature-trio .ft-card { position: relative; }

/* Big card spans two rows on its side */
.bbw-posts.feature-trio .ft-big {
  grid-column: 1; 
  grid-row: 1 / span 2;
}

.bbw-posts.feature-trio.is-reverse .ft-big {
  text-align: right;
}

.bbw-posts.feature-trio.is-reverse .ft-big {
  grid-column: 2;
}

/* Small cards stack on the other side */
.bbw-posts.feature-trio .ft-small:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.bbw-posts.feature-trio .ft-small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(2),
.bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(3) { grid-column: 1; }

/* Shared card internals */
.bbw-posts.feature-trio .bbw-thumb {
  display:block; position:relative; overflow:hidden;
}

.bbw-posts.feature-trio .bbw-thumb-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform .35s ease;
}
.bbw-posts.feature-trio .bbw-thumb:hover .bbw-thumb-bg { transform: scale(1.04); }

/* Badge (clickable) */
.bbw-posts.feature-trio .bbw-pill {
  display:inline-block;
  padding: 8px 14px;
  font-size:20px;
  line-height:1;
  color:#fff;
  background:#C65FA9; /* default; customize via nth-child or global tokens */
  height: max-content;
  margin-top: 20px;
}

/* Typography */
.bbw-posts.feature-trio .ft-meta { margin-top:10px; }
.bbw-posts.feature-trio .ft-title { font-size: clamp(18px, 2vw, 28px); line-height:1.25; margin: 6px 0; }
.bbw-posts.feature-trio .ft-title a { color: inherit; text-decoration:none; }
.bbw-posts.feature-trio .ft-title a:hover { text-decoration: underline; }

.bbw-posts.feature-trio .ft-excerpt { color:#666; font-size:24px; line-height:1.55; margin-top:8px; }
.bbw-posts.feature-trio .ft-readmore {
  display:inline-block;
  margin-top:30px;
  font-size:12px;
  color:#2F2F2F;
  text-decoration: underline;
  font-weight: 600;
  font-size: 16px;
  transition: .2s;
}

.bbw-posts.feature-trio .ft-card.ft-big .ft-title a {
  font-size: 48px;
  font-weight: 500;
}

.bbw-posts.feature-trio .bbw-thumb img {
  height: auto;
}

.bbw-posts.feature-trio .ft-title a {
  font-size: 24px;
  font-weight: 500;
}

.bbw-posts.feature-trio .ft-readmore:hover {
  text-decoration: underline;
  background: #00000000 !important;
}

.bbw-posts.feature-trio .ft-readmore:hover { background:#e6e6e6; }

/* Responsive */
@media (max-width: 991px) {
  .bbw-posts.feature-trio, .bbw-posts.feature-trio.is-reverse {
    grid-template-columns: 1fr 1fr;   /* two equal columns */
    grid-template-rows: auto auto;    /* two rows */
    gap: 60px 60px;                   /* tighten spacing for tablet */
  }

  .bbw-block-title {
    font-size: 48px;
  }

  .bbw-posts.feature-trio .ft-card.ft-big .ft-title a {
    font-size: 24px;
  }

  .bbw-posts.feature-trio .ft-excerpt {
    font-size: 18px;
    line-height: 1.2;
  }

  .bbw-posts.feature-trio .ft-title a {
    font-size: 18px;
  }

  .bbw-posts.feature-trio .bbw-pill {
    font-size: 14px;
    padding: 5px 12px;
  }

  .bbw-posts.feature-trio .ft-readmore {
    margin-top: 20px;
  }

  /* Big card spans both columns on the first row */
  .bbw-posts.feature-trio .ft-big {
    grid-column: 1 / -1;              /* span 2 cols */
    grid-row: 1;                      /* first row */
    text-align: initial;              /* undo .is-reverse right-align for this layout */
  }

  /* Place the two small cards side by side on the second row */
  .bbw-posts.feature-trio .ft-small:nth-of-type(2) {
    grid-column: 1;                   /* left */
    grid-row: 2;
  }
  .bbw-posts.feature-trio .ft-small:nth-of-type(3) {
    grid-column: 2;                   /* right */
    grid-row: 2;
  }

  /* Reversed version — still big on top, smalls flipped */
  .bbw-posts.feature-trio.is-reverse .ft-big {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: initial;
  }
  .bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(2) {
    grid-column: 2;  /* right side */
    grid-row: 2;
  }
  .bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(3) {
    grid-column: 1;  /* left side */
    grid-row: 2;
  }

  /* If .is-reverse is applied, use the same tablet layout (big on top) */
  .bbw-posts.feature-trio.is-reverse .ft-big { grid-column: 1 / -1; grid-row: 1; }
  .bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .bbw-posts.feature-trio.is-reverse .ft-small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
}

/* ===== Mobile (<768px): one per row (big, then small, small) ===== */
@media (max-width: 768px) {
  .bbw-posts.feature-trio, .bbw-posts.feature-trio.is-reverse {
    gap: 20px;
  }

  .bbw-posts.feature-trio .ft-card.ft-big .ft-title a {
    font-size: 18px;
  }

  .bbw-posts.feature-trio .ft-excerpt {
    font-size: 16x;
    line-height: 1.2;
  }

  .bbw-posts.feature-trio .ft-title a {
    font-size: 14px;
  }

  .bbw-posts.feature-trio .bbw-pill {
    font-size: 14px;
    padding: 5px 12px;
  }

  .bbw-posts.feature-trio .ft-readmore {
    margin-top: 20px;
  }


}