/**
 * @file
 * MLT Modern — Flippy (prev/next post pager).
 *
 * Two-card grid at the foot of a blog post linking to the previous and
 * next posts in the series. Cards show an eyebrow label with an arrow,
 * and the destination post title as a clickable link.
 *
 * Markup (rendered by templates/flippy--mt-post.html.twig):
 *
 *   <nav class="mlt-flippy" aria-label="Post navigation">
 *     <div class="mlt-flippy__card mlt-flippy__card--prev">
 *       <div class="mlt-flippy__label">
 *         <span class="mlt-flippy__arrow">←</span> Previous post
 *       </div>
 *       <div class="mlt-flippy__title">
 *         <a href="...">The previous post's title</a>
 *       </div>
 *     </div>
 *     <div class="mlt-flippy__card mlt-flippy__card--next"> ... </div>
 *   </nav>
 *
 * If only one card is rendered (first or last post in the series), the
 * grid collapses to a single column and that card spans the full width.
 */

.mlt-flippy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 40px 0 0 0;
  /* Soft separator from the post body above. */
  padding-top: 30px;
  border-top: 1px solid var(--mlt-border);
}

/* When only one card exists (first/last post), it gets a column-span:
 * the explicit grid template is 2 columns so we use grid-column 1/-1
 * via :only-child. */
.mlt-flippy__card:only-child {
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------
 * Cards — block-style links with a soft hover lift.
 * ----------------------------------------------------------------------- */
.mlt-flippy__card {
  background: #fff;
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-md);
  padding: 20px 24px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  /* Card grows to fill the grid cell so left and right are equal height. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mlt-flippy__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mlt-shadow-elevated);
  border-color: var(--mlt-primary);
}

.mlt-flippy__card--prev {
  text-align: left;
  /* Blue accent strip on the left edge so the "back" direction reads
   * before you even look at the arrow. */
  border-left: 4px solid var(--mlt-primary);
}

.mlt-flippy__card--next {
  text-align: right;
  border-right: 4px solid var(--mlt-primary);
}

/* -----------------------------------------------------------------------
 * Eyebrow label — small uppercase text with the directional arrow.
 * ----------------------------------------------------------------------- */
.mlt-flippy__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mlt-text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Right-aligned label on the next card: push content to the right. */
.mlt-flippy__card--next .mlt-flippy__label {
  justify-content: flex-end;
}

/* Arrow — slightly bolder than the label text. Animates on hover so
 * the direction reads as motion. */
.mlt-flippy__arrow {
  font-size: 16px;
  font-weight: 800;
  color: var(--mlt-primary);
  transition: transform 0.2s ease;
  /* Compensate for the larger glyph not sitting on the same baseline. */
  line-height: 1;
}

.mlt-flippy__card--prev:hover .mlt-flippy__arrow {
  transform: translateX(-3px);
}

.mlt-flippy__card--next:hover .mlt-flippy__arrow {
  transform: translateX(3px);
}

/* -----------------------------------------------------------------------
 * Destination post title — the actual clickable link. Flippy passes us
 * a pre-rendered <a> tag with the post title inside, so we style at the
 * link level.
 * ----------------------------------------------------------------------- */
.mlt-flippy__title a {
  font-size: 17px;
  font-weight: 700;
  color: var(--mlt-primary);
  text-decoration: none;
  line-height: 1.35;
  display: inline-block;
}

.mlt-flippy__title a:hover,
.mlt-flippy__card:hover .mlt-flippy__title a {
  color: var(--mlt-primary-dark);
  text-decoration: none;
}

/* -----------------------------------------------------------------------
 * Mobile: stack to a single column, swap right-aligned next card to
 * left-aligned so both cards read consistently.
 * ----------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mlt-flippy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
  }

  /* On mobile, both cards left-aligned. The arrow position still tells
   * the user the direction. */
  .mlt-flippy__card--next {
    text-align: left;
    border-right: none;
    border-left: 4px solid var(--mlt-primary);
  }

  .mlt-flippy__card--next .mlt-flippy__label {
    justify-content: flex-start;
  }

  .mlt-flippy__card {
    padding: 16px 20px;
  }

  .mlt-flippy__title a {
    font-size: 16px;
  }
}