/* Project cards: shared by the Product Design landing page (index.html) and
   AI Projects. Each card sets --pc to its project colour, which outlines its
   tags. Title, industry line, description, then outlined keyword tags. */

.pc-body {
  width: 100%;
  padding-top: 28px;
  padding-bottom: 20px;
  font-family: var(--font-family);
  color: var(--midnight-blue);
}

.pc-title {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--midnight-blue);
}

/* Explicit colour: Webflow's global `p` rule uses var(--dark), which is
   transparent in this stylesheet. */
.pc-industry,
.pc-desc {
  color: var(--midnight-blue);
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
}

.pc-industry { margin-bottom: 12px; }
.pc-desc { margin-bottom: 18px; }
.pc-industry strong,
.pc-desc strong { font-weight: 700; }

.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
}

/* Flex-centred with a fixed height so the label sits in the middle of the
   pill in every browser (Safari and Chrome place Albert Sans differently
   when centring relies on line-height alone). */
.pc-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 30px;
  border: 1.5px solid var(--pc, var(--midnight-blue));
  border-radius: 999px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
  color: #3a3a4a;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .pc-body { padding-top: 20px; padding-bottom: 10px; }
  .pc-title { font-size: 30px; }
  .pc-industry, .pc-desc { font-size: 17px; }
  .pc-tags { gap: 7px 6px; }
  /* Whole-pixel border: 1.5px rounds unevenly on 3x phone screens, so some
     sides of a pill looked thicker than others. Slightly heavier weight so
     small text doesn't look spindly. */
  .pc-tag { height: 26px; padding: 0 11px; border-width: 1px; font-size: 13px; font-weight: 400; }
}

/* Full-width banner linking the landing page to AI Projects. Sits where the
   large featured case study card used to be. */
.ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 30px;
  padding: 40px 48px;
  border-radius: 20px;
  background-image: linear-gradient(110deg, #f6f3ff 0%, #fdeaf6 45%, #fff6e8 100%);
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}

.ai-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(20, 20, 60, .14);
}

/* Sparkle instead of a "NEW" label. */
.ai-banner-eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--deep-pink);
  line-height: 0;
}

.ai-banner-eyebrow svg { display: block; }

.ai-banner-title {
  margin: 0 0 8px;
  font-family: var(--font-family);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--midnight-blue);
}

.ai-banner-sub {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-family);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--midnight-blue);
}

.ai-banner-cta {
  flex: none;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: var(--deep-pink);
  font-family: Albert Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .ai-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 24px;
    border-radius: 14px;
  }
  .ai-banner-title { font-size: 30px; }
  .ai-banner-sub { font-size: 17px; }
  .ai-banner-cta { padding: 12px 22px; font-size: 15px; }
}

/* Cards kept in the page but revealed only by the "See all" button. */
.pc-extra { display: none; }

.pc-more-wrap { display: flex; justify-content: center; width: 100%; margin: 10px 0 0; }

.pc-more {
  border: 1.5px solid var(--midnight-blue);
  border-radius: 999px;
  background: none;
  padding: 13px 30px;
  font-family: Albert Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--midnight-blue);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.pc-more:hover { color: var(--deep-pink); border-color: var(--deep-pink); }

@media screen and (max-width: 767px) {
  .pc-more { padding: 11px 24px; font-size: 15px; border-width: 1px; }
}

/* Card media: 16:9 for the AI cards, so the hero videos are shown uncropped
   and every row keeps the same height. The box is reserved before the video
   or poster loads, so nothing jumps. */
.pc-media {
  display: block;
  width: 100%;
  aspect-ratio: 1174 / 660;
  object-fit: cover;
  border-radius: 20px;
  background-color: #eceaf5;
}

@media screen and (max-width: 767px) {
  .pc-media { border-radius: 10px; }
}

/* Card call to action. The whole card is the link; this is the visible cue. */
.pc-cta {
  margin-top: 14px;
  font-family: Albert Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--deep-pink);
}

@media screen and (max-width: 767px) {
  .pc-cta { font-size: 15px; }
}