/* Article card + shared grid/filter pieces (Figma 06_Blog, values ×0.70).
   Loaded on every page: the parent's LoadMorePosts AJAX can inject cards
   anywhere. Card image hover mirrors v5's CaseStudyCard (scale 1.025, .35s). */

/* ---------------------------------------------------------------------- card */

.ckl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ckl-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 148 / 100; /* grid 921×622, small 599.8×405 — same ratio */
}

/* Placeholder fills straight from the Figma cards. */
.ckl-card--grid .ckl-card__thumb {
  background-color: #eaeaea;
}

.ckl-card--small .ckl-card__thumb {
  background-color: var(--ckl-aqua-blue);
}

.ckl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ckl-ease-entrance);
}

.ckl-card:hover .ckl-card__thumb img {
  transform: scale(1.025);
}

.ckl-card__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.ckl-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ckl-card--grid .ckl-card__content {
  padding-top: 2.275rem; /* 52 */
}

.ckl-card--small .ckl-card__content {
  padding-top: 1.48rem; /* 33.9 */
}

.ckl-card__tag {
  line-height: 1.27;
  color: var(--ckl-blue);
  transition: color 0.2s ease-in-out;
}

.ckl-card--grid .ckl-card__tag {
  font-size: 1.225rem; /* 28 */
}

.ckl-card--small .ckl-card__tag {
  font-size: 0.7875rem; /* 18 */
}

.ckl-card__tag:hover,
.ckl-card__tag:focus-visible {
  color: var(--ckl-dark);
}

.ckl-card__link {
  display: block;
}

.ckl-card--grid .ckl-card__link {
  margin-top: 1.1875rem; /* 27.1 */
}

.ckl-card--small .ckl-card__link {
  margin-top: 0.7725rem; /* 17.7 */
}

.ckl-card__title {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  line-height: 85%;
  color: var(--ckl-dark);
  margin: 0;
  transition: color 0.2s ease-in-out;
}

.ckl-card--grid .ckl-card__title {
  font-size: clamp(1.75rem, 2.84vw, 2.625rem); /* 60 */
}

.ckl-card--small .ckl-card__title {
  font-size: clamp(1.5rem, 2.37vw, 2.1875rem); /* 50 */
}

/* Title sweep — port of v5 hover-sweep.ts (textSweep): a solid blue layer
   clipped to the glyphs grows left → right via background-size. Triggered by
   hovering ANYWHERE on the card (parent-triggered, like v5's ResultLink),
   together with the image scale above. The plain `color` change is the
   fallback for touch devices / no background-clip:text support; under
   reduced motion the colour still changes, just instantly. */
.ckl-card:hover .ckl-card__title,
.ckl-card__link:focus-visible .ckl-card__title {
  color: var(--ckl-blue);
}

@media (hover: hover) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ckl-card__title {
      background-color: var(--ckl-dark);
      background-image: linear-gradient(var(--ckl-blue), var(--ckl-blue));
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 0% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background-size 0.5s var(--ckl-ease-entrance);
    }

    .ckl-card:hover .ckl-card__title,
    .ckl-card__link:focus-visible .ckl-card__title {
      background-size: 100% 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ckl-card__title {
    transition: none;
  }
}

.ckl-card__excerpt {
  font-size: 1.05rem; /* 24 */
  line-height: 127.3%;
  letter-spacing: 0.02em;
  color: var(--ckl-dark);
  margin: 1.1875rem 0 0;
  max-width: 32.2rem; /* 735 */
}

.ckl-card__author {
  display: flex;
  flex-direction: column;
  margin-top: 1.1875rem;
}

.ckl-card__author-name {
  font-weight: 700;
  font-size: 1.225rem; /* 28 */
  line-height: 147%;
  letter-spacing: 0.02em;
  color: var(--ckl-dark);
}

.ckl-card__author-role {
  font-size: 0.875rem; /* 20 */
  line-height: 147%;
  color: var(--ckl-dark);
}

/* ---------------------------------------------------------------- card grids */

.ckl-card-grid {
  display: grid;
  gap: 2.275rem 2.5375rem; /* 52 × 58 */
}

.ckl-card-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ckl-card-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.275rem 1.65rem; /* 52 × 37.8 */
}

@media (max-width: 991px) {
  .ckl-card-grid--2col,
  .ckl-card-grid--3col {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 481px) and (max-width: 991px) {
  .ckl-card-grid--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- filter bar */

.ckl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.14rem; /* 49 */
  margin-top: 3.325rem; /* 76 */
}

.ckl-filter-bar__item {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  text-transform: uppercase;
  font-size: clamp(0.875rem, 1.33vw, 1.225rem); /* 28 */
  line-height: 1.29;
  color: var(--ckl-dark);
  transition: color 0.2s ease-in-out;
}

.ckl-filter-bar__item:hover,
.ckl-filter-bar__item:focus-visible {
  color: var(--ckl-blue);
}

.ckl-filter-bar__item.is-active {
  color: var(--ckl-blue);
}

/* ------------------------------------------------------------ curated section */

/* Every curated row / band is self-padded 119px top+bottom (Figma frames are
   adjacent, no margins). */
.ckl-curated {
  padding-block: clamp(4rem, 8.04vw, 7.4375rem); /* 170 */
}

/* Gray band variant — the article "See also" section (Figma 380:7351) and
   odd-numbered curated home sections (fixed rule: odd #f4f4f4, even white). */
.ckl-curated--gray {
  background-color: var(--ckl-gray);
}

.ckl-curated__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.275rem; /* 52 */
}

/* SEE MORE nas seções curadas um passo acima do componente base (12.6px):
   pedido de leitura mais confortável ao lado dos títulos grandes. Os demais
   usos (CTA da sidebar do Article) seguem no tamanho base. */
.ckl-curated__head .ckl-see-more {
  font-size: 0.9375rem; /* 15 */
}

.ckl-curated__title {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: clamp(2rem, 3.784vw, 3.5rem); /* 80 */
  line-height: 85%;
  color: var(--ckl-blue);
  margin: 0;
}

.ckl-curated__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.275rem 1.65rem;
}

@media (max-width: 991px) {
  .ckl-curated__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ckl-curated__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}