/*
  Front-end styles for the Card Link block.
  Markup (from render):
  <figure class="wp-block-ebti-card-link ...">
    <a class="ebti-card-link__anchor" ...>
      <div class="ebti-card-link__media"><img class="ebti-card-link__img" ...></div>
      <div class="ebti-card-link__content">
        <strong class="ebti-card-link__title">...</strong>
        <p class="ebti-card-link__excerpt">...</p>
        <span class="ebti-card-link__site">...</span>
      </div>
    </a>
  </figure>
*/

.wp-block-ebti-card-link .ebti-card-link__anchor {
  display: flex;
  align-items: stretch;
  gap: 0;

  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.wp-block-ebti-card-link .ebti-card-link__anchor:hover,
.wp-block-ebti-card-link .ebti-card-link__anchor:focus {
  text-decoration: none;
}

/* Thumbnail / media column */
.wp-block-ebti-card-link .ebti-card-link__media {
  flex: 0 0 35%;
  max-width: 35%;
  background: #e9ecef;
}

.wp-block-ebti-card-link .ebti-card-link__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text column */
.wp-block-ebti-card-link .ebti-card-link__content {
  flex: 1 1 auto;
  padding: 1rem;
}

.wp-block-ebti-card-link .ebti-card-link__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

.wp-block-ebti-card-link .ebti-card-link__excerpt {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
  opacity: 0.9;
  font-size: 0.95rem;
}

.wp-block-ebti-card-link .ebti-card-link__site {
  display: block;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* If there is no thumbnail, the media column won't exist; flex will naturally be 100% content. */

@media (max-width: 600px) {
  .wp-block-ebti-card-link .ebti-card-link__anchor {
    flex-direction: column;
  }

  .wp-block-ebti-card-link .ebti-card-link__media {
    max-width: 100%;
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 16 / 9;
  }
}