/**
 * CAMN blog tag InfoCard – right panel of homepage split.
 * Two-column card: 1/3 media (2nd post image) + 2/3 content.
 * Aligns with Requirements/camn-infocard-right-panel.
 */

.camn-infocard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: var(--lighter, #f5f5f5);
  border-radius: calc(var(--border-radius, 3px) * 2);
  overflow: hidden;
}

@media all and (min-width: 56.25em) {
  .camn-infocard {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Two-column wrapper */
.camn-infocard__wrap {
  flex: 1 1 auto;
  background-color: var(--lighter, #f5f5f5);
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}

@media all and (min-width: 56.25em) {
  .camn-infocard__wrap {
    min-height: 0;
    flex-direction: row;
  }
}

/* Media column (left) */
.camn-infocard__media {
  flex: 0 0 auto;
  width: 100%;
  min-height: 9rem;
  background-color: var(--lighter, #f5f5f5);
  position: relative;
  overflow: hidden;
}

@media all and (min-width: 56.25em) {
  .camn-infocard__media {
    width: 33.333%;
    min-height: 0;
  }
}

.camn-infocard__media--fallback {
  /* fallback uses same rendering rules; left for semantic hook */
}

/* Blurred backdrop (gaussian-like) using same image.
   Uses a real child div (not ::before) so inline background-image
   resolves relative to the HTML page, not the CSS file. */
.camn-infocard__media-blur {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px);
  transform: scale(1.1);
  opacity: 0.85;
}

/* Sharp image on top, fit while preserving aspect ratio */
.camn-infocard__media-sharp {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content column (right) */
.camn-infocard__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--baseline, 0.28333rem) * 3) calc(var(--baseline, 0.28333rem) * 3);
  padding-top: calc(var(--baseline, 0.28333rem) * 3);
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--camn-post-color, var(--text-color, #17181E));
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}

.camn-infocard--empty .camn-infocard__content {
  justify-content: center;
}

/* Large title (hero-style) */
.camn-infocard__header {
  margin: 0 0 calc(var(--baseline, 0.28333rem) * 2);
}

.camn-infocard__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw + 1rem, 2rem);
  font-weight: var(--headings-weight, 500);
  line-height: var(--headings-line-height, 1.2);
}

.camn-infocard__title a {
  color: var(--camn-post-color, var(--text-color, #17181E));
  text-decoration: none;
}

.camn-infocard__title a:hover {
  text-decoration: underline;
}

/* Normal body text */
.camn-infocard__supporting-wrap {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.camn-infocard__supporting-wrap .camn-infocard__supporting,
.camn-infocard__supporting-wrap .camn-infocard__supporting p {
  margin: 0 0 0.5em;
  color: var(--camn-post-color, var(--text-color, #17181E)) !important;
}

.camn-infocard__content .camn-infocard__supporting,
.camn-infocard__content .camn-infocard__supporting * {
  color: var(--camn-post-color, var(--text-color, #17181E)) !important;
}

.camn-infocard__supporting-wrap .camn-infocard__supporting {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.camn-infocard__supporting-wrap .camn-infocard__supporting p {
  display: inline;
}

.camn-infocard__supporting-wrap .camn-infocard__supporting p:last-child {
  margin-bottom: 0;
}

.camn-infocard__supporting-wrap .camn-infocard__readmore {
  display: inline-block;
  margin-top: auto;
  font-weight: var(--font-weight-bold, 600);
  color: var(--camn-post-color, var(--text-color, #17181E));
  text-decoration: underline;
}

.camn-infocard__supporting-wrap .camn-infocard__readmore:hover {
  text-decoration: none;
}

/* Prefer container queries so behavior follows panel width, not viewport width */
@supports (container-type: inline-size) {
  .camn-split__info-panel {
    container-type: inline-size;
    container-name: camn-infocard-panel;
  }

  @container camn-infocard-panel (max-width: 42rem) {
    .camn-infocard__supporting-wrap .camn-infocard__supporting {
      -webkit-line-clamp: 3;
    }
  }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media all and (max-width: 56.1875em) {
    .camn-infocard__supporting-wrap .camn-infocard__supporting {
      -webkit-line-clamp: 3;
    }
  }
}

/* Actions */
.camn-infocard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: auto;
}

.camn-infocard__action {
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold, 600);
  color: var(--camn-post-color, var(--text-color, #17181E));
  text-decoration: none;
}

.camn-infocard__action:hover {
  text-decoration: underline;
}

/* Empty state */
.camn-infocard__empty-text {
  margin: 0 0 calc(var(--baseline, 0.28333rem) * 2);
  font-size: 1rem;
  color: var(--color-muted, #666);
}

@media all and (min-width: 56.25em) {
  .camn-infocard__wrap,
  .camn-infocard--empty .camn-infocard__wrap {
    min-height: 0;
  }
}