/* ============================================================
   Lemariku — Homepage (index.html)   · loads after base.css
   Unique: "About Lemariku" banner variant + ecosystem cards
   ============================================================ */

/* ---- About banner: pill pinned top-left, title at the bottom ---- */
.banner--about .banner__inner { justify-content: space-between; align-items: flex-start; }
.banner__pill {
  align-self: flex-start; background: var(--teal); color: #fff; font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.banner__pill:hover { background: var(--teal-800); transform: translateY(-1px); }

/* ---- Ecosystem: two option cards (App / Programs) ---- */
.ecards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 30px); margin-top: clamp(38px, 5vw, 56px); }
.ecard { background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.ecard__body { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ecard__pill { border: 1px solid var(--line); color: var(--slate); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.ecard__h { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; text-align: center; width: 20ch; margin: auto; }
.ecard__desc { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; text-align: left; width: 40ch;  font-size: 12px; font-weight: 400; color: var(--slate); }
.ecard__media { aspect-ratio: 16 / 10; overflow: hidden; background: #E7E1DA; }
.ecard__media img { width: 100%; height: 100%; object-fit: cover; }
.ecard--app .ecard__media { background: linear-gradient(150deg, #F7C9B2, #E7652F); }

@media (max-width: 900px) {
  .ecards { grid-template-columns: 1fr; }
}