/* Wrapper + rows */
.cgr-rec-wrap { display: grid; gap: 2rem; }
.cgr-rec-row { display: grid; gap: 1rem; margin-top:3rem; }
.cgr-rec-hero-row { margin-top:0; }

/* Row headings */
.cgr-rec-row-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cgr-rec-row-heading .cgr-h3-heading { margin: 0; }

/* HERO 50/50 */
.cgr-rec-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cgr-rec-hero-meta {
  display: flex;
  gap: 0.5rem;
}

.cgr-rec-hero-left { 
	padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 800px){
.cgr-rec-hero-grid { grid-template-columns: 1fr; }
}

.cgr-rec-hero-left .cgr-h2-heading { margin: .25rem 0; }

/* Cards grid for skills/interests/behaviour */
.cgr-rec-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1000px){ .cgr-rec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .cgr-rec-grid { grid-template-columns: 1fr; } }

/* Card */
.cgr-rec-card { display: block; border: 1px solid var(--canguro-mid-grey); border-radius: 20px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important; overflow: hidden; }
.cgr-rec-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.cgr-rec-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlays */
.cgr-rec-card-body { display: grid; gap: .5rem; padding: 1rem; }

/* Heading pills */
.cgr-rec-heading-pills { display: flex; gap: 0.2rem; }
.cgr-rec-heading-pill { background:#fff; border: 1px solid var(--canguro-mid-grey); color:#000; font-size: 1rem; }

/* Card pills */
.cgr-rec-card-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content: space-between;}

/* Remind me button */
.cgr-rec-card-body .cgr-button-remind { margin-left: .5rem; }
.cgr-rec-hero-meta .cgr-rem-button-white, .cgr-rec-card-meta .cgr-rem-button-white { border:none; padding:0.5rem 1rem; color:var(--canguro-black-grey); background:var(--canguro-mid-grey); font-size:0.8rem; }
.cgr-rec-hero-meta .cgr-rem-button-yellow, .cgr-rec-card-meta .cgr-rem-button-yellow { border:none; padding:0.5rem 1rem; color:#000; background:var(--canguro-yellow); font-size:0.8rem; }
.cgr-rec-hero-meta .cgr-rem-button-green, .cgr-rec-card-meta .cgr-rem-button-green { border:none; padding:0.5rem 1rem; color:#fff; background:var(--canguro-canguro-dark-green); font-size:0.8rem; }
.cgr-rec-hero-meta .cgr-rem-button-grey, .cgr-rec-card-meta .cgr-rem-button-grey { border:none; padding:0.5rem 1rem; color:var(--canguro-dark-grey); background:var(--canguro-mid-grey); font-size:0.8rem; }

.cgr-rec-hero-meta .cgr-rem-button-white:hover, .cgr-rec-card-meta .cgr-rem-button-white:hover { color:#000; background:var(--canguro-yellow); }
.cgr-rec-hero-meta .cgr-rem-button-yellow:hover, .cgr-rec-card-meta .cgr-rem-button-yellow:hover { background: var(--canguro-light-yellow); }
.cgr-rec-hero-meta .cgr-rem-button-green:hover, .cgr-rec-card-meta .cgr-rem-button-green:hover { background: var(--canguro-light-green); }
.cgr-rec-hero-meta .cgr-rem-button-grey:hover, .cgr-rec-card-meta .cgr-rem-button-grey:hover {  }