/* ──────────────────────────────────────────────────────────────────────────
   Travio-style article cards for Enova.

   Ported from the Travio theme's homepage card (partials/cards/card-post.hbs)
   onto Enova's tokens. Hand-written rather than Tailwind utilities because
   Enova ships a pre-built css.css — new utility classes wouldn't exist in it.

   Loaded from default.hbs after built/css.css. Used by partials/post-card-travio.hbs.
   Everything here is namespaced .tv-* so it can't collide with the theme.
   ────────────────────────────────────────────────────────────────────────── */

.tv-card {
    --tv-card-bg: #fff;
    --tv-card-aspect: 1;          /* Travio's --aspect-blog-card-img: square crop */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-grey-200);
    border-radius: .75rem;
    background: var(--tv-card-bg);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    /* Travio's .hover-lift-subtle */
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s ease,
                border-color .35s ease;
    /* No will-change here: Travio sets it on .hover-lift-subtle, but a feed of a
       dozen cards would promote a dozen compositing layers, each holding a large
       AVIF. Chrome then rasterises them lazily and cards paint blank. */
}

.dark .tv-card {
    --tv-card-bg: var(--color-grey-800);
    border-color: var(--color-grey-700);
}

.tv-card:hover,
.tv-card:focus-within {
    transform: translate3d(0, -2px, 0);
    border-color: var(--color-grey-300);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .06);
}

.dark .tv-card:hover,
.dark .tv-card:focus-within {
    border-color: var(--color-grey-600);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .5);
}

/* ── media ──────────────────────────────────────────────────────────────── */

.tv-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--tv-card-aspect);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-brand) 8%, var(--tv-card-bg));
}

.tv-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.tv-card:hover .tv-card__media img {
    transform: scale(1.03);
}

/* Travio's .blog-thumbnail-overlay - melts the image into the card body so
   there is no hard edge between the crop and the text block. */
.tv-card__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
                transparent 0%, transparent 55%, var(--tv-card-bg) 100%);
}

/* ── no-feature-image fallback ──────────────────────────────────────────── */

.tv-card__ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
    pointer-events: none;
}

/* The title repeated, rotated and oversized - Travio's
   .blog-card-placeholder-title--repeated. Reads as texture, not as a grey box. */
.tv-card__ghost-title {
    display: block;
    width: 165%;
    margin-left: -8%;
    color: color-mix(in srgb, var(--color-brand) 22%, transparent);
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.05;
    text-align: left;
    word-break: break-all;
    overflow-wrap: anywhere;
    hyphens: none;
    transform: rotate(-12deg) scale(1.12);
    transform-origin: center;
}

/* ── badges ─────────────────────────────────────────────────────────────── */

.tv-card__badge {
    position: absolute;
    top: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9999px;
    background: var(--color-brand);
    color: #fff;
    backdrop-filter: blur(4px);
}

.tv-card__badge--featured { inset-inline-start: 1rem; }
.tv-card__badge--members  { inset-inline-end: 1rem; }
.tv-card__badge svg { width: .95rem; height: .95rem; }

/* ── body ───────────────────────────────────────────────────────────────── */

.tv-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .75rem;
    padding: 0 1.25rem 1.25rem;
}

/* primary-tag chip - Travio's "destination" chip, tag image + name */
.tv-card__chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    width: fit-content;
    padding: .25rem .5rem .25rem .25rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
    color: color-mix(in srgb, var(--color-brand) 80%, var(--color-grey-900));
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .2s ease;
}

.dark .tv-card__chip { color: color-mix(in srgb, var(--color-brand) 80%, #fff); }
.tv-card__chip:hover { background: color-mix(in srgb, var(--color-brand) 20%, transparent); }

.tv-card__chip img,
.tv-card__chip span.tv-card__chip-initial {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

.tv-card__chip span.tv-card__chip-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--color-brand) 18%, transparent),
                color-mix(in srgb, var(--color-brand) 32%, transparent));
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tv-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-grey-900);
    text-wrap: balance;
}

.dark .tv-card__title { color: #fff; }
.tv-card__title a:hover { text-decoration: underline; }

.tv-card__foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
}

/* overlapping author avatars */
.tv-card__authors { display: flex; align-items: center; flex-shrink: 0; }

.tv-card__authors img,
.tv-card__authors .tv-card__avatar-initial {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 3px solid var(--tv-card-bg);
    object-fit: cover;
    object-position: center;
    transition: border-color .2s ease;
}

.tv-card__authors > *:not(:first-child) { margin-inline-start: -1.25rem; }
.tv-card__authors a:hover img { border-color: var(--color-grey-200); }

.tv-card__avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--color-brand) 15%, transparent),
                color-mix(in srgb, var(--color-brand) 30%, transparent));
    color: color-mix(in srgb, var(--color-brand) 85%, var(--color-grey-900));
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tv-card__meta { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

.tv-card__pills { display: flex; flex-wrap: wrap; gap: .25rem; }

.tv-card__pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border: 1px solid var(--color-grey-200);
    border-radius: 9999px;
    color: var(--color-grey-600);
    font-size: .75rem;
    line-height: 1.2;
    transition: border-color .2s ease, color .2s ease;
}

.dark .tv-card__pill { border-color: var(--color-grey-700); color: var(--color-grey-400); }
.tv-card__pill:hover { border-color: var(--color-brand); color: var(--color-brand); }

.tv-card__stats {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-grey-600);
    font-size: .75rem;
}

.dark .tv-card__stats { color: var(--color-grey-400); }
.tv-card__stat { display: inline-flex; align-items: center; gap: .25rem; }
.tv-card__stat svg { width: .875rem; height: .875rem; flex-shrink: 0; }

.tv-card__bookmark { margin-inline-start: auto; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
    .tv-card,
    .tv-card__media img { transition: none; }
    .tv-card:hover { transform: none; }
    .tv-card:hover .tv-card__media img { transform: none; }
}