/* Style reminder: forged-black cards, electric-cyan actions, steel-blue metadata; an added project strip inside the existing Guides library. */
.real-project-guide-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: rgba(27, 80, 95, 0.46);
  border: 1px solid rgba(18, 222, 245, 0.38);
}

.real-project-guide-cards__intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.7rem 1.8rem;
  color: #ecf7f9;
  background: #07131a;
}

.real-project-guide-cards__kicker,
.real-project-guide-card__eyebrow {
  margin: 0;
  color: #18def5;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.real-project-guide-cards__intro h2 {
  max-width: 32rem;
  margin: 0.45rem 0 0;
  color: #ecf7f9;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.91;
  text-transform: uppercase;
}

.real-project-guide-cards__count {
  margin: 0;
  color: #94aab4;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}

.real-project-guide-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  min-width: 0;
  min-height: 296px;
  color: #eff9fb;
  background: #0a1720;
  text-decoration: none;
  transition: background-color 180ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1);
}

.real-project-guide-card:nth-child(3) { background: #0c1d27; }
.real-project-guide-card:hover { background: #103340; transform: translateY(-2px); }
.real-project-guide-card:focus-visible { outline: 3px solid #18def5; outline-offset: -3px; }

.real-project-guide-card__image { position: relative; min-height: 100%; overflow: hidden; background: #061016; }
.real-project-guide-card__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(3, 13, 19, 0), rgba(3, 13, 19, 0.58)); }
.real-project-guide-card__image img { display: block; width: 100%; height: 100%; min-height: 296px; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.05); transition: transform 260ms cubic-bezier(.23, 1, .32, 1); }
.real-project-guide-card:hover .real-project-guide-card__image img { transform: scale(1.035); }

.real-project-guide-card__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1.55rem; }
.real-project-guide-card__body h3 { margin: 0.58rem 0 0.7rem; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-size: clamp(1.4rem, 2.25vw, 2.25rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.91; text-transform: uppercase; }
.real-project-guide-card__body h3 em { color: #18def5; font-style: normal; }
.real-project-guide-card__body > p:not(.real-project-guide-card__eyebrow) { margin: 0; color: #b8cbd2; font-size: 0.82rem; line-height: 1.48; }
.real-project-guide-card__cta { margin-top: auto; padding-top: 1.45rem; color: #18def5; font-size: 0.68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 740px) {
  .real-project-guide-cards { grid-template-columns: 1fr; }
  .real-project-guide-cards__intro { display: block; padding: 1.35rem; }
  .real-project-guide-cards__count { margin-top: 1rem; text-align: left; }
  .real-project-guide-card { grid-template-columns: 35% 1fr; min-height: 244px; }
  .real-project-guide-card__image img { min-height: 244px; }
  .real-project-guide-card__body { padding: 1.15rem; }
}

@media (max-width: 420px) {
  .real-project-guide-card { grid-template-columns: 1fr; }
  .real-project-guide-card__image { height: 190px; }
  .real-project-guide-card__image img { min-height: 190px; }
}