/**
 * @file
 * MLT Modern — Teaser Tile.
 *
 * Card-style teaser used for blog posts and other content rendered in
 * the `mt_teaser_tile` view mode. Image on top, optional meta line in
 * the middle, blue centred title at the bottom. Whole card hoverable.
 *
 * Markup (rendered by templates/node--<bundle>--mt-teaser-tile.html.twig):
 *
 *   <article class="mlt-teaser-tile">
 *     <a class="mlt-teaser-tile__image-link">
 *       <div class="mlt-teaser-tile__image">...</div>
 *     </a>
 *     <div class="mlt-teaser-tile__body">
 *       <span class="mlt-teaser-tile__meta">...</span>   {# optional #}
 *       <h3 class="mlt-teaser-tile__title"><a>...</a></h3>
 *     </div>
 *   </article>
 *
 * The meta line is OPTIONAL — bundles that don't need one (e.g. mt_showcase)
 * simply omit the element entirely and the title sits directly under the
 * image, with the flex `gap` handling spacing automatically.
 *
 * `__date` is kept as a backwards-compatible alias of `__meta` so the
 * existing mt_post template (which uses <time class="...__date">) still
 * styles correctly without needing a change.
 *
 * Views wrap each tile in a `.views-row` div with Bootstrap grid classes
 * (e.g. `.col-lg-4`). We don't fight that — the .mlt-teaser-tile sits
 * inside .views-row and just fills the column.
 */

.mlt-teaser-tile {
  background: #fff;
  border-radius: var(--mlt-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover lifts the whole card. */
.mlt-teaser-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* -------- Image -------- */
.mlt-teaser-tile__image-link {
  display: block;
  text-decoration: none;
  /* Block-level link should not show underlines or text colour from
   * inherited link styles. */
  color: inherit;
}

.mlt-teaser-tile__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mlt-bg-soft);
}

.mlt-teaser-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Subtle zoom on hover for added "this is clickable" feedback. */
.mlt-teaser-tile:hover .mlt-teaser-tile__image img {
  transform: scale(1.04);
}

/* -------- Body -------- */
.mlt-teaser-tile__body {
  padding: 20px 16px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

/* -------- Meta line --------
 * Small grey line above the title. Used for dates (mt_post), locations,
 * roles, prices, photo counts, etc. depending on bundle. Optional — when
 * a tile has no meta content, just omit the element entirely.
 *
 * `__date` is a backwards-compatible alias kept so the original mt_post
 * template renders without modification. New bundles should use `__meta`. */
.mlt-teaser-tile__meta,
.mlt-teaser-tile__date {
  font-size: 13px;
  color: var(--mlt-text-light);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* -------- Title -------- */
.mlt-teaser-tile__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--mlt-primary);
}

.mlt-teaser-tile__title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.mlt-teaser-tile__title a:hover,
.mlt-teaser-tile__title a:focus {
  color: var(--mlt-primary-dark);
  text-decoration: none;
}

/* When the card itself is hovered, also colour-shift the title. */
.mlt-teaser-tile:hover .mlt-teaser-tile__title {
  color: var(--mlt-primary-dark);
}

/* -------- Responsive -------- */
@media (max-width: 540px) {
  .mlt-teaser-tile__body {
    padding: 16px 14px 20px;
  }
  .mlt-teaser-tile__title {
    font-size: 19px;
  }
}