/*
 * Tehtud tööd page — project card grid (card-article-link + grid posts)
 */

.tehtud-tood__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--spacing-md);
  margin-block-start: var(--spacing-lg);
}

@media (max-width: 900px) {
  .tehtud-tood__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tehtud-tood__grid {
    grid-template-columns: 1fr;
  }
}

.card-article-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-orange);
  border-radius: var(--border-radius);
  text-align: center;
}

/* ~ image area (11.25rem) + title + padding — keeps no-image cards from collapsing */
.tehtud-tood__grid > .card-article-link,
.tehtud-tood__grid > .card-article {
  min-height: 15.5rem;
  box-sizing: border-box;
}

.tehtud-tood__grid .card-article-link {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
}

.tehtud-tood__grid .card-article-link--no-image {
  grid-template-rows: minmax(0, 1fr) auto;
}

.tehtud-tood__grid .card-article-link__media {
  grid-row: 1;
  width: 100%;
  min-height: 0;
}

.tehtud-tood__grid .card-article-link__title {
  grid-row: 2;
}

.tehtud-tood__grid .card-article-link--no-image .card-article-link__title {
  margin: 0;
}

.tehtud-tood__grid .card-article--no-image {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: start;
}

.tehtud-tood__grid .card-article--no-image .card-article__content {
  grid-row: 2;
  margin: 0;
  flex: none;
}

.card-article-link__image-link {
  display: block;
  width: 100%;
  max-height: 11.25rem;
  margin-inline: auto;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.card-article-link__image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 11.25rem;
  height: auto;
  border-radius: var(--border-radius);
  object-fit: contain;
}

.card-article-link__image--placeholder {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.card-article-link__title {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.card-article-link__link,
.tehtud-tood__grid .card-article__link {
  color: var(--color-green-accent);
  font-weight: 700;
  text-decoration: underline;
}

.card-article-link__link:hover,
.card-article-link__link:focus,
.tehtud-tood__grid .card-article__link:hover,
.tehtud-tood__grid .card-article__link:focus {
  color: var(--color-green-hover);
  text-decoration: underline;
}

/* Match project-card look for WP posts in the same grid */
.tehtud-tood__grid .card-article {
  align-items: center;
  padding: 0.625rem 0.625rem 1.4375rem;
  background: var(--color-white);
  border: 2px solid var(--color-orange);
  border-radius: var(--border-radius);
  box-shadow: none;
  text-align: center;
}

.tehtud-tood__grid .card-article__image {
  width: 100%;
  max-width: 31.25rem;
  max-height: 11.25rem;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
}

.tehtud-tood__grid .card-article__image img {
  width: 100%;
  max-width: 100%;
  max-height: 11.25rem;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.tehtud-tood__grid .card-article__title {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: inherit;
}

.tehtud-tood__grid .card-article__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  width: 100%;
  padding: 0;
  margin-block-start: var(--spacing-sm);
}

.tehtud-tood__grid .card-article__meta,
.tehtud-tood__grid .card-article__badges {
  display: none;
}

html[data-color-theme="dark"] .card-article-link,
html[data-color-theme="dark"] .tehtud-tood__grid .card-article {
  background-color: #0a0a0a;
  border-color: #ff9800;
}

html[data-color-theme="dark"] .card-article-link__link,
html[data-color-theme="dark"] .tehtud-tood__grid .card-article__link,
html[data-color-theme="dark"] .tehtud-tood__grid .card-article__title {
  color: #8cb4ff;
}