/* =========================================================
   CPC Base (shared)
   - tokens
   - base wrapper
   - grid + slider system
   - base card + elements
   - meta/icons/badges
   - responsive grid collapse
   - reduced motion
   ========================================================= */

/* ---------------------------------
   0) Tokens / defaults
   --------------------------------- */
:root {
  /* spacing scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;

  /* radii */
  --radius-sm: 8px;
  --radius-md: 14px;

  /* colors */
  --clr-text: #2b2b2b;
  --clr-text-strong: #192948;
  --clr-on-primary-container: #001a4d;
  --clr-primary-container: #d2d9e7;
  --clr-action-container: #f6b6ba;
  --clr-card-bg-tint: rgba(255, 255, 255, 0.2);
  --clr-card-bg: #e8e1d2;

  /* default fallbacks */
  --grid-gap: 30px; /* overridden by column rules */
  --slider-gutter: 12px; /* overridden by column rules */

  /* thumb min-heights (institution/education need these) */
  --thumb-min-h-3col: 222px;
  --thumb-min-h-4col: 170px; /* institution */
  --thumb-min-h-4col-edu: 160px; /* education */

  /* motion / shadow */
  --cp-dur: 220ms;
  --cp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cp-shadow: 0 2px 8px rgba(187, 180, 164, 0.35);
  --cp-shadow-hover: 0 12px 28px rgba(187, 180, 164, 0.55);

  /* read-more hover shift */
  --readmore-shift: 12px;
}

/* ---------------------------------
   1) Base wrapper
   --------------------------------- */
.custom-posts.wrapper {
  position: relative;
  color: var(--clr-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* ---------------------------------
   2) Column-aware spacing (grid + slider)
   (Use .cols-* as canonical; keep .column-* for backwards compat)
   --------------------------------- */

/* GRID gaps */
.custom-posts.wrapper.is-grid.cols-4,
.custom-posts.wrapper.is-grid.column-4 {
  --grid-gap: 30px;
}

.custom-posts.wrapper.is-grid.cols-3,
.custom-posts.wrapper.is-grid.column-3 {
  --grid-gap: 30px;
}

/* fallback for 1/2 columns or unspecified */
.custom-posts.wrapper.is-grid:not(.cols-4):not(.column-4):not(.cols-3):not(
    .column-3
  ) {
  --grid-gap: 30px;
}

/* SLIDER gutters */
.custom-posts.wrapper.is-slider.cols-4,
.custom-posts.wrapper.is-slider.column-4 {
  --slider-gutter: 8px;
}
.custom-posts.wrapper.is-slider.cols-3,
.custom-posts.wrapper.is-slider.column-3 {
  --slider-gutter: 12px;
}

/* fallback */
.custom-posts.wrapper.is-slider:not(.cols-4):not(.column-4):not(.cols-3):not(
    .column-3
  ) {
  --slider-gutter: 12px;
}

/* ---------------------------------
   3) Display modes
   --------------------------------- */

/* Grid mode */
.custom-posts.wrapper.is-grid {
  display: grid;
  gap: var(--grid-gap, 30px);
}

.custom-posts.wrapper.is-grid.cols-1 {
  grid-template-columns: 1fr;
}
.custom-posts.wrapper.is-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.custom-posts.wrapper.is-grid.cols-3,
.custom-posts.wrapper.is-grid.column-3 {
  grid-template-columns: repeat(3, 1fr);
}
.custom-posts.wrapper.is-grid.cols-4,
.custom-posts.wrapper.is-grid.column-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Slider mode */
.custom-posts.wrapper.is-slider {
  margin: 0 calc(var(--slider-gutter) * -1);
}

.custom-posts.wrapper.is-slider .cp-card {
  margin: 0 var(--slider-gutter);
}

/* Optional layout flavor */
.custom-posts.wrapper.layout-location .cp-card {
  border-left: 4px solid #e2e8f0;
}

/* ---------------------------------
   4) Card + elements (base)
   --------------------------------- */
.cp-card {
  transition:
    transform var(--cp-dur) var(--cp-ease),
    box-shadow var(--cp-dur) var(--cp-ease);
  will-change: transform, box-shadow;
  backface-visibility: hidden;

  border-radius: var(--radius-md);
  overflow: hidden;

  display: flex !important;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.cp-card .cp-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
}

.cp-card a {
  position: relative;
  z-index: 2;
}

.cp-thumb {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  contain: paint;
}

.cp-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;

  transition: transform var(--cp-dur) var(--cp-ease);
  will-change: transform;
}

.cp-content {
  padding: var(--space-lg) 0 var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--clr-text);
  flex: 1;
  justify-content: space-between;
}

.cp-title {
  margin: 0;
  color: var(--clr-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.cp-excerpt {
  font-size: 14px;
  line-height: 20px;
}

.cp-read-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--clr-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;

  padding: 4px 12px 4px 0;
  border-radius: 999px;

  background: linear-gradient(90deg, var(--clr-action-container, #f1d0d0) 0 0)
    no-repeat;
  background-size: 0% 100%;

  transform: translateX(0);
  transition:
    background-size var(--cp-dur) var(--cp-ease),
    transform var(--cp-dur) var(--cp-ease),
    color var(--cp-dur) var(--cp-ease);
}

.cp-read-more::after {
  content: url('../images/icon-right-arrow.svg');
  width: 24px;
  height: 24px;
  display: inline-block;
  transition:
    transform var(--cp-dur) var(--cp-ease),
    opacity var(--cp-dur) var(--cp-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cp-card:hover .cp-read-more {
    background-size: 100% 100%;
    padding: 4px 12px;
    max-width: fit-content;
  }

  .cp-card:hover .cp-read-more::after {
    transform: translateX(0);
    opacity: 0.85;
  }
}

.cp-read-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------------------------------
   5) Meta / badges / icons (base)
   --------------------------------- */
.cp-meta {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.cp-meta span.published {
  color: var(--clr-text-strong);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.cp-meta span.published,
.cp-meta span.location {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: 14px;
}

/* icon bullets */
.cp-meta span.published::before,
.cp-meta span.location::before {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.cp-meta span.published::before {
  content: url('../images/icon-calendar.svg');
}

.cp-meta span.location::before {
  content: url('../images/icon-location.svg');
}

/* badges */
.cp-meta.courses span.course-eud,
.cp-meta.courses span.course-eux {
  display: flex;
  padding: 2px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 99999px;

  color: var(--clr-on-primary-container);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.cp-meta.courses span.course-eud {
  background: var(--clr-primary-container);
}
.cp-meta.courses span.course-eux {
  background: var(--clr-action-container);
}

/* ---------------------------------
   6) Responsive grid collapse (shared)
   --------------------------------- */
@media (max-width: 1279px) {
  /* collapse 4 → 3 columns */
  .custom-posts.wrapper.is-grid.cols-4,
  .custom-posts.wrapper.is-grid.column-4 {
    grid-template-columns: repeat(3, 1fr);
    --grid-gap: 24px;
  }
}

@media (max-width: 980px) {
  /* collapse 4/3 → 2 columns */
  .custom-posts.wrapper.is-grid.cols-4,
  .custom-posts.wrapper.is-grid.column-4,
  .custom-posts.wrapper.is-grid.cols-3,
  .custom-posts.wrapper.is-grid.column-3 {
    grid-template-columns: repeat(2, 1fr);
    --grid-gap: 24px;
  }
}

@media (max-width: 768px) {
  /* collapse any → 1 column */
  .custom-posts.wrapper.is-grid.cols-4,
  .custom-posts.wrapper.is-grid.column-4,
  .custom-posts.wrapper.is-grid.cols-3,
  .custom-posts.wrapper.is-grid.column-3,
  .custom-posts.wrapper.is-grid.cols-2,
  .custom-posts.wrapper.is-grid.cols-1 {
    grid-template-columns: 1fr;
    --grid-gap: 20px;
  }

  /* meta icon mobile (switch to bg image for better sizing) */
  .cp-meta span.published,
  .cp-meta span.location {
    font-size: 12px;
    line-height: 16px;
  }

  .cp-meta span.published::before,
  .cp-meta span.location::before {
    content: '';
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cp-meta span.published::before {
    background-image: url('../images/icon-calendar.svg');
  }
  .cp-meta span.location::before {
    background-image: url('../images/icon-location.svg');
  }
}

/* ---------------------------------
   7) Reduced motion
   --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cp-card,
  .cp-thumb img,
  .cp-read-more,
  .cp-read-more::after {
    transition: none !important;
  }
}