/* =========================================================
   Custom Posts / Cards
   Structure:
   0) Tokens / defaults
   1) Base wrapper
   2) Column-aware spacing (grid + slider)
   3) Display modes (grid / slider)
   4) Card + elements
   5) Meta / badges / icons
   6) Layout variants (institution / education)
   7) Responsive
   ========================================================= */

/* ---------------------------------
   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: 16px;

  /* colors */
  --clr-text: #0c2a65;
  --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: 24px; /* overridden by column rules */
  --slider-gutter: 6px; /* overridden by column rules */

  /* thumb min-heights */
  --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: 16px;
}

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

/* 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: 24px;
}

/* SLIDER gutters */
.custom-posts.wrapper.is-slider.cols-4,
.custom-posts.wrapper.is-slider.column-4 {
  --slider-gutter: 6px;
} /* tighter for 4-up */
.custom-posts.wrapper.is-slider.cols-3,
.custom-posts.wrapper.is-slider.column-3 {
  --slider-gutter: 12px;
} /* roomier for 3-up */

/* 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, 24px);
}
.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
   --------------------------------- */
.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;
  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; /* right padding 12, left padding 0 */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clr-action-container, #f1d0d0) 0 0)
    no-repeat;
  background-size: 0% 100%;
  transform: translateX(0); /* visually flush-left */
  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);
}

/* Read-more hover (only institution + education) */
@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;
  }
}

/* Keyboard focus for CTA */
.cp-read-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------------------------------
   5) Meta / badges / icons
   --------------------------------- */
.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);
}

article.cp-card.project {
  flex-direction: row;
  gap: 56px;
  padding-bottom: 56px;
  border-radius: 0;
}

article.cp-card.project:last-child {
  padding-bottom: 0;
}

article.cp-card.project > .cp-thumb {
  width: 50%;
}
/* ---------------------------------
   7) Responsive
   --------------------------------- */
@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; /* when visually 3-col, behave like 3-col */
  }
}

@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: 767px) {
  /* 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: 24px;
  }

  .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');
  }

  article.cp-card.project {
    flex-direction: column;
    gap: 0;
    padding-bottom: 16px;
  }

  article.cp-card.project > .cp-thumb {
    width: 100%;
  }
}

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