/* ===========================================================================
   Travio homepage mosaic — 3 large cards over 3 stacked columns of compact ones.
   Ported from Travio's section-home-latest-articles.hbs + card-post-small.hbs.

   Hand-written, loaded after built/css.css: Enova ships a prebuilt vite bundle,
   so Tailwind utilities that are not already in it simply do not exist. Only
   Enova's own custom properties are referenced, so this tracks the accent
   colour and dark mode. Companion to travio-cards.css, whose .tv-card__chip,
   .tv-card__badge and .tv-card__stats tokens are reused here.

   Column count is driven by CONTAINER queries rather than viewport breakpoints:
   the feed column's width depends on which sidebars are open, and Enova toggles
   that with .nav-top-bar / .sidebars-closed at runtime. Sizing against the
   container gets it right in every combination without duplicating that logic.
   =========================================================================== */

.tv-mosaic {
    container-type: inline-size;
    container-name: tv-mosaic;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── top row: the 3 newest posts as full Travio cards ────────────────────── */

.tv-mosaic__big {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ── stacked columns of compact cards ────────────────────────────────────── */

/* grid-auto-flow: column with a fixed row count fills DOWN each column before
   starting the next, which is what produces Travio's three vertical stacks from
   one flat list. Row count is set per container width below. */
.tv-mosaic__stacks {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

/* 3 or fewer posts on the page — no compact cards, so drop the row gap too. */
.tv-mosaic__stacks:empty { display: none; }

@container tv-mosaic (min-width: 40rem) {
    .tv-mosaic__big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tv-mosaic__stacks {
        grid-auto-flow: column;
        grid-template-rows: repeat(5, auto);
    }
}

@container tv-mosaic (min-width: 62rem) {
    .tv-mosaic__big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 9 compact cards over 3 rows = Travio's three columns. */
    .tv-mosaic__stacks { grid-template-rows: repeat(3, auto); }
}

.tv-mosaic__empty {
    padding: 4rem 0;
    color: var(--color-grey-600);
    text-align: center;
}

.dark .tv-mosaic__empty { color: var(--color-grey-400); }

/* ===========================================================================
   Compact card — Travio's .sm-blog-card
   =========================================================================== */

.tv-sm {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-width: 0;
}

.tv-sm__media {
    position: relative;
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border-radius: .625rem;
    background: var(--color-grey-100);
}

.dark .tv-sm__media { background: var(--color-grey-800); }

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

.tv-sm:hover .tv-sm__media img { transform: scale(1.05); }

/* Same repeated-title texture as the large card, scaled down. */
.tv-sm__ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .5rem;
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    pointer-events: none;
}

.tv-sm__ghost-title {
    display: block;
    width: 165%;
    margin-left: -8%;
    color: color-mix(in srgb, var(--color-brand) 26%, transparent);
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.05;
    text-align: left;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.tv-sm__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .375rem;
}

.tv-sm__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-grey-900);
    /* Travio clamps the compact title to 2 lines so stacks stay on their grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .tv-sm__title { color: #fff; }
.tv-sm__title a { color: inherit; text-decoration: none; }
.tv-sm:hover .tv-sm__title a { text-decoration: underline; }

/* ── shared-token overrides for the compact scale ────────────────────────── */

.tv-card__chip--sm {
    padding: .125rem .4375rem .125rem .125rem;
    font-size: .75rem;
}

.tv-card__chip--sm img,
.tv-card__chip--sm span.tv-card__chip-initial {
    width: 1.25rem;
    height: 1.25rem;
}

.tv-card__badge--sm {
    top: .5rem;
    width: 1.25rem;
    height: 1.25rem;
}

.tv-card__badge--sm.tv-card__badge--featured { inset-inline-start: .5rem; }
.tv-card__badge--sm.tv-card__badge--members  { inset-inline-end: .5rem; }
.tv-card__badge--sm svg { width: .7rem; height: .7rem; }

.tv-card__stats--sm { gap: .625rem; }

/* Travio's compact thumb steps 6rem -> 8rem here (its h-24 -> xs:h-32).
   ⚠ This block MUST stay below the base `.tv-sm__media` rule above. A container
   query adds no specificity, so an override placed up with the other @container
   blocks near the top of the file loses the cascade to the later base rule and
   silently never applies. */
@container tv-mosaic (min-width: 40rem) {
    .tv-sm__media { width: 8rem; height: 8rem; }
}

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