/*
 * One canonical media shape for marketplace catalogue artwork.
 * Gig, course and challenge artwork is generated at 3:2 landscape. Every public
 * and dashboard presentation keeps that ratio and contains legacy artwork rather
 * than cropping titles, faces or deliverable details.
 */
:root{--gigafrika-catalogue-ratio:3 / 2;--gigafrika-media-matte:#eef3f1}

.gigafrika-source .media-job-card.has-cover{
  grid-template-columns:minmax(220px,32%) minmax(0,1fr);
  align-items:start;
}
.gigafrika-source .media-job-visual{
  display:block;
  align-self:start;
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  overflow:hidden;
  border-radius:10px;
  background:var(--gigafrika-media-matte);
}
.gigafrika-source .media-job-visual img{
  display:block;
  width:100%;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  object-fit:contain!important;
  object-position:center;
  background:var(--gigafrika-media-matte);
}

/* Full gig/project artwork uses the same composition as its listing card. */
.gigafrika-source .media-job-hero{
  display:block;
  width:100%;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  object-fit:contain!important;
  object-position:center;
  border-radius:12px;
  background:var(--gigafrika-media-matte);
}

/* Course and challenge catalogue/detail artwork. */
.gigafrika-source .course-cover,
.gigafrika-source .course-detail-cover,
.gigafrika-source .competition-cover{
  display:block;
  width:100%;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  object-fit:contain!important;
  object-position:center;
  background:var(--gigafrika-media-matte);
}
.gigafrika-source .course-art,
.gigafrika-source .competition-art{
  width:100%;
  height:auto!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
}

/* Compact learning rows retain the artwork ratio without becoming oversized. */
.gigafrika-source .discovery-learning img{
  width:120px;
  height:auto!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  object-fit:contain!important;
  object-position:center;
  background:var(--gigafrika-media-matte);
  flex:0 0 120px;
}

@media(max-width:767px){
  .gigafrika-source .media-job-card.has-cover{
    grid-template-columns:minmax(0,1fr);
  }
  .gigafrika-source .discovery-learning img{
    width:105px;
    flex-basis:105px;
  }
}


/* Public opportunity listings need a larger preview so the service outcome
   remains legible before the buyer opens the full brief. */
@media(min-width:992px){
  .gigafrika-source .jobs-directory-results .media-job-card.has-cover{
    grid-template-columns:minmax(280px,38%) minmax(0,1fr);
    column-gap:24px;
  }
}
@media(min-width:768px) and (max-width:991px){
  .gigafrika-source .jobs-directory-results .media-job-card.has-cover{
    grid-template-columns:minmax(240px,36%) minmax(0,1fr);
    column-gap:20px;
  }
}


/* Extend the public listing media column to the card height. Its matte is
   replaced at runtime with the dominant edge colour sampled from the artwork. */
.gigafrika-source .jobs-directory-results .media-job-visual{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%!important;
  min-height:100%;
  aspect-ratio:auto;
  background:var(--gigafrika-media-edge,var(--gigafrika-media-matte));
  transition:background-color .18s ease;
}
.gigafrika-source .jobs-directory-results .media-job-visual img{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--gigafrika-catalogue-ratio);
  flex:none;
  background:transparent;
}
@media(max-width:767px){
  .gigafrika-source .jobs-directory-results .media-job-visual{
    height:auto!important;
    min-height:0;
    aspect-ratio:var(--gigafrika-catalogue-ratio);
  }
}