/* Sarvestan strategic-project cards: equal heights and aligned action buttons.
   Scoped to the four-column project grid inside the RTL projects section. */

section[dir="rtl"].relative.overflow-hidden
  .grid[class~="md:grid-cols-2"][class~="lg:grid-cols-4"][class~="gap-8"] {
  align-items: stretch;
}

/* Each grid cell must stretch and provide a flex column for the card. */
section[dir="rtl"].relative.overflow-hidden
  .grid[class~="md:grid-cols-2"][class~="lg:grid-cols-4"][class~="gap-8"] > div {
  display: flex;
  min-width: 0;
  align-self: stretch;
}

/* This class combination uniquely identifies the React project card component (Tx). */
section[dir="rtl"].relative.overflow-hidden
  .grid[class~="md:grid-cols-2"][class~="lg:grid-cols-4"][class~="gap-8"]
  > div > .group.relative.bg-white.rounded-3xl.shadow-2xl {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* Keep the image at its existing fixed height; let the information area fill the rest. */
section[dir="rtl"].relative.overflow-hidden
  .grid[class~="md:grid-cols-2"][class~="lg:grid-cols-4"][class~="gap-8"]
  > div > .group.relative.bg-white.rounded-3xl.shadow-2xl > .p-6 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* The final action button sits at the same bottom baseline in every card. */
section[dir="rtl"].relative.overflow-hidden
  .grid[class~="md:grid-cols-2"][class~="lg:grid-cols-4"][class~="gap-8"]
  > div > .group.relative.bg-white.rounded-3xl.shadow-2xl > .p-6 > button {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}