/* project-cards.css
   Loaded after styles.css and founder.css.
   1) Fixes the desktop layout of the "My Initiatives" section
      (GoBroadcastingLive.com wordmark overflowing its card, heading wrapping
      to three lines, sticky header covering the section label after clicking "My Work").
   2) Styles the logo panel added to each project card. */

/* Sticky header no longer hides the top of a section when jumping to an anchor */
html { scroll-padding-top: 110px; }
section[id] { scroll-margin-top: 110px; }

/* ---------- Section heading ---------- */
.work .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.work .section-heading h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
  max-width: none;
}
.work .section-heading > p {
  max-width: 36ch;
  margin: 0;
  justify-self: end;
}

/* ---------- Card grid ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,…) stops long content stretching a column */
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: stretch;
}
.project-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;                                    /* nothing can spill outside a card again */
}
.project-body { flex: 1; min-width: 0; }
.project-card .project-type {
  font-size: 0.72rem;
  line-height: 1.5;
  min-height: 3em;                                     /* keeps headings aligned across the 3 cards */
  margin: 0 0 0.6rem;
}
.project-card h3 {
  font-size: clamp(1.45rem, 1.9vw, 1.85rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}
.project-card > a {
  margin-top: auto;
  overflow-wrap: anywhere;
}

/* ---------- Logo panel ---------- */
.project-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 140px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid rgba(16, 33, 66, 0.12);
  border-radius: 10px;
}
.project-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.project-logo--oil img  { height: 100%; width: auto; max-width: 42%; }
.project-logo--akhar img { height: 100%; width: auto; }
.project-logo--live img  { width: 100%; height: auto; max-height: 100%; }

.project-logo-name {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #102142;
  white-space: nowrap;
}
.project-logo-name i { font-style: normal; color: #e08a1a; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1000px) {
  .work .section-heading { grid-template-columns: 1fr; }
  .work .section-heading > p { justify-self: start; max-width: 52ch; }
  .project-grid { grid-template-columns: 1fr; max-width: 640px; }
  .project-card .project-type { min-height: 0; }
}