/* =========================================================
   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: 12px; /* 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: 8px;
} /* 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;
  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; /* 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);
}

/* ---------------------------------
   6) Layout variants
   (Shared base + small per-variant overrides)
   --------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .custom-posts.wrapper.layout-institution .cp-card:hover .cp-thumb img,
  .custom-posts.wrapper.layout-education .cp-card:hover .cp-thumb img,
  .custom-posts.wrapper.layout-news .cp-card:hover .cp-thumb img {
    transform: scale(1.04) !important;
    transform-origin: center center;
  }
  .custom-posts.wrapper.layout-news .cp-card:hover .cp-thumb {
    box-shadow: 0 2px 8px 0 #bbb4a4;
  }

  .custom-posts.wrapper.layout-institution .cp-card:hover,
  .custom-posts.wrapper.layout-education .cp-card:hover {
    transform: none !important;
    box-shadow: var(--cp-shadow) !important; /* keep base shadow */
    background: linear-gradient(
        0deg,
        var(--clr-card-bg-tint) 0%,
        var(--clr-card-bg-tint) 100%
      ),
      var(--clr-card-bg) !important; /* keep base bg */
  }
}

/* Keyboard focus should match hover */
.custom-posts.wrapper.layout-institution .cp-card:focus-within,
.custom-posts.wrapper.layout-education .cp-card:focus-within {
  transform: none !important;
  box-shadow: var(--cp-shadow) !important;
  background: linear-gradient(
      0deg,
      var(--clr-card-bg-tint) 0%,
      var(--clr-card-bg-tint) 100%
    ),
    var(--clr-card-bg) !important;
}

.custom-posts.wrapper.layout-institution .cp-card,
.custom-posts.wrapper.layout-education .cp-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.custom-posts.wrapper.layout-institution .cp-card .cp-thumb,
.custom-posts.wrapper.layout-education .cp-card .cp-thumb,
.custom-posts.wrapper.layout-news .cp-card .cp-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  contain: paint;
}

.custom-posts.wrapper.layout-news .cp-card .cp-thumb {
  border-radius: var(--radius-sm);
}

.custom-posts.wrapper.layout-institution .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-education .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-news .cp-card .cp-thumb img {
  display: block;
  width: 100%;
  object-fit: cover;
  transform-origin: center center;
}

/* common content bg */
.custom-posts.wrapper.layout-institution .cp-card .cp-content,
.custom-posts.wrapper.layout-education .cp-card .cp-content {
  display: flex;
  padding: var(--space-md);
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(
      0deg,
      var(--clr-card-bg-tint) 0%,
      var(--clr-card-bg-tint) 100%
    ),
    var(--clr-card-bg);
}

.custom-posts.wrapper.layout-institution .cp-card .cp-content {
  gap: var(--space-xxs);
}
.custom-posts.wrapper.layout-education .cp-card .cp-content {
  gap: var(--space-xs);
}
/* titles */
.custom-posts.wrapper.layout-institution .cp-card .cp-content .cp-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  padding: 0;
}
.custom-posts.wrapper.layout-education .cp-card .cp-content .cp-title {
  color: var(--clr-text-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  padding: 0;
}

/* excerpts */
.custom-posts.wrapper.layout-institution .cp-card .cp-excerpt,
.custom-posts.wrapper.layout-education .cp-card .cp-excerpt {
  font-size: 14px;
  min-height: 50px;
}
.custom-posts.wrapper.layout-news .cp-card .cp-excerpt {
  font-size: 16px;
}
/* thumb min-heights by column count */
.custom-posts.wrapper.layout-institution.column-3 .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-institution.cols-3 .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-education.column-3 .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-education.cols-3 .cp-card .cp-thumb img {
  min-height: var(--thumb-min-h-3col);
  max-height: var(--thumb-min-h-3col);
}
.custom-posts.wrapper.layout-institution.column-4 .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-institution.cols-4 .cp-card .cp-thumb img {
  min-height: var(--thumb-min-h-4col);
  max-height: var(--thumb-min-h-4col);
}
.custom-posts.wrapper.layout-education.column-4 .cp-card .cp-thumb img,
.custom-posts.wrapper.layout-education.cols-4 .cp-card .cp-thumb img {
  min-height: var(--thumb-min-h-4col-edu);
  max-height: var(--thumb-min-h-4col-edu);
}

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;
  }

  .custom-posts.wrapper.layout-education .cp-card .cp-content {
    min-height: 56px;
    padding: 8px 8px 8px 12px;
    flex-direction: row;
    align-items: center;
  }
  .custom-posts.wrapper.layout-education .cp-card .cp-content .cp-meta.courses {
    flex-direction: column;
  }
  .custom-posts.wrapper.layout-education .cp-card .cp-thumb {
    display: none !important;
  }
  .custom-posts.wrapper.layout-education .cp-card .cp-title {
    min-height: auto !important;
    font-weight: 600;
  }
  .custom-posts.wrapper.layout-news .cp-card .cp-content .cp-title {
    font-size: 16px;
  }
  .custom-posts.wrapper.layout-news.is-slider .slick-list.draggable {
    overflow: hidden;
  }

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

  .mobile-column-2 .custom-posts.wrapper.layout-institution.is-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 8px;
  }
  .mobile-column-2
    .custom-posts.wrapper.layout-institution.is-grid.cols-3
    .cp-card
    .cp-thumb
    img {
    min-height: 99px;
    max-height: 99px;
  }
  .custom-posts.wrapper.layout-institution.column-4 .cp-card .cp-thumb img,
  .custom-posts.wrapper.layout-institution.cols-4 .cp-card .cp-thumb img {
    min-height: 119px;
    max-height: 119px;
  }

  .custom-posts.wrapper.layout-institution .cp-card .cp-content,
  .custom-posts.wrapper.layout-education .cp-card .cp-content {
    padding: 12px;
  }

  .custom-posts.wrapper.layout-institution .cp-card .cp-content .cp-title {
    font-size: 14px;
    line-height: 18px;
  }

  .custom-posts.wrapper.layout-institution .cp-card .cp-excerpt,
  .custom-posts.wrapper.layout-education .cp-card .cp-excerpt,
  .custom-posts.wrapper.layout-news .cp-card .cp-excerpt {
    font-size: 12px;
    line-height: 16px;
    min-height: auto;
  }

  .custom-posts.wrapper.layout-institution .cp-card .cp-read-more,
  .custom-posts.wrapper.layout-education .cp-card .cp-read-more {
    font-size: 12px;
    line-height: 16px;
    margin: 0;
  }

  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;
  }
}