/**
 * Link Preview Card – stylesheet
 * Design: "Modern" – warm white, OG image hero, Geist + JetBrains Mono
 * Version: 1.2.0
 */

/* ── Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────── */
.lpc-card {
  --lpc-bg:        #ffffff;
  --lpc-fg:        oklch(0.18 0.01 80);
  --lpc-muted:     oklch(0.46 0.005 80);
  --lpc-meta:      oklch(0.30 0.01 80);
  --lpc-meta-soft: oklch(0.55 0.005 80);
  --lpc-rule:      oklch(0.93 0.003 80);
  --lpc-accent:    oklch(0.55 0.12 150);
  --lpc-radius:    18px;
}

/* ── Card wrapper ─────────────────────────────────────────────────────── */
.lpc-card {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 1.5em 0;
  text-decoration: none !important;
  color: inherit;
  background: var(--lpc-bg);
  border-radius: var(--lpc-radius);
  overflow: hidden;
  box-shadow:
    0 12px 30px -15px rgba(30, 40, 30, .18),
    0  2px  6px  -2px rgba(0,  0,  0,  .04);
  transform: translateY(0);
  transition:
    transform  .35s cubic-bezier(.2, .7, .2, 1),
    box-shadow .35s cubic-bezier(.2, .7, .2, 1);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Force no underline on all child elements – overrides WordPress theme styles */
.lpc-card,
.lpc-card *,
.lpc-card:hover,
.lpc-card:hover *,
.lpc-card:focus-visible,
.lpc-card:focus-visible * {
  text-decoration: none !important;
}

.lpc-card:hover,
.lpc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px -20px rgba(30, 40, 30, .25),
    0  8px 16px  -8px rgba(30, 40, 30, .10);
  outline: none;
}

/* WordPress injects img.emoji into post content – render it neutral inside cards */
.lpc-card img.emoji {
  filter: grayscale(1) opacity(0.45);
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
  display: inline;
  border: none;
  box-shadow: none;
  background: none;
}

/* The ↗ arrow character can render as a colored emoji on some systems */
.lpc-card__arrow {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
}

/* ── Media / image section ────────────────────────────────────────────── */
.lpc-card__media {
  overflow: hidden;
}

.lpc-card__media-inner {
  aspect-ratio: 1200 / 630;      /* standard OG image ratio */
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  /* Striped placeholder – replaced by the image when one is available. */
  background:
    repeating-linear-gradient(
      135deg,
      #e8e3d8 0 14px,
      #ddd6c5 14px 28px
    );
  display: flex;
  align-items: flex-end;
  position: relative;
}

.lpc-card:hover .lpc-card__media-inner,
.lpc-card:focus-visible .lpc-card__media-inner {
  transform: scale(1.04);
}

/* Real OG image */
.lpc-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Reset aspect-ratio on the wrapper when we have a real image */
}

/* Caption label shown when there is no image */
.lpc-card__caption {
  font-family: "JetBrains Mono", ui-monospace, Menlo, "Cascadia Code", monospace;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(40, 35, 25, .55);
  background: rgba(255, 253, 247, .85);
  padding: 4px 8px;
  margin: 10px;
  border-radius: 4px;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.lpc-card__body {
  padding: 20px 22px 22px;
}

.lpc-card__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lpc-fg);
  text-wrap: pretty;
  text-decoration: none !important;
}

.lpc-card__desc {
  margin: 10px 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lpc-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none !important;
}

/* ── Meta bar ─────────────────────────────────────────────────────────── */
.lpc-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--lpc-rule);
}

.lpc-card__site {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lpc-card__site-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--lpc-meta);
  white-space: nowrap;
}

.lpc-card__sep {
  color: oklch(0.78 0.003 80);
  flex: 0 0 auto;
}

.lpc-card__domain {
  font-size: 13px;
  color: var(--lpc-meta-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpc-card__arrow {
  font-size: 16px;
  color: var(--lpc-meta-soft);
  transform: translateX(0);
  transition: transform .25s, color .25s;
  flex: 0 0 auto;
}

.lpc-card:hover .lpc-card__arrow,
.lpc-card:focus-visible .lpc-card__arrow {
  transform: translateX(2px);
  color: var(--lpc-accent);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lpc-card {
    max-width: 100%;
    --lpc-radius: 12px;
  }
  .lpc-card__title {
    font-size: 18px;
  }
}