/* Blog article card — the component behind blog/_partials/card.html.

   Split out of blog/css/listing.css (#529) when the home started rendering the
   same card as the blog index and the category pages. The home has no hero, no
   search field and no category filters, and loading 900 lines of them to get a
   card is how a page ends up with rules it cannot account for.

   The grid stays with each caller: the listing wants three fixed columns, the
   home wants its own. Per-category colour rules (.cat-*) stay in listing.css —
   they target a label this partial does not render. */

.blog-card:hover {
    transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
            border-color: rgba(255, 107, 53, 0.2);
}

.blog-card-image {
    position: relative;
            width: 100%;
            height: 240px;
            overflow: hidden;
            background: var(--gray-light);
            /* It is an <a>, so inline by default — and an inline box ignores
               height. The 240px above was being dropped, the frame collapsed to
               a line box, and each card grew to whatever its image happened to
               be: 373x210 for one, 373x373 for the next, so no two cards in a
               row lined up. */
            display: block;
}

/* Same chain, one level down: <picture> is inline too, so `height: 100%` on the
   image below resolved against nothing and it fell back to its intrinsic size.
   Both links have to be blocks for the frame to mean anything. */
.blog-card-image picture {
    display: block;
    height: 100%;
}

.blog-card-image img {
    width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-image .blog-card-category-badge {
    position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--white);
            background: var(--orange);
}

.blog-card-image-placeholder {
    width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            background: var(--gray-light);
}

.blog-card-image-placeholder i {
    font-size: 2rem;
            opacity: 0.25;
            color: var(--text-dark);
}

.blog-card-header {
    display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px 0;
}

.blog-card-icon {
    width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            flex-shrink: 0;
}

.blog-card-category-label {
    font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
}

.blog-card-body {
    padding: 10px 20px 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
}

.blog-card-title {
    font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.4;
            margin-bottom: 16px;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
}

.blog-card-title a {
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--orange);
}

.blog-card-footer {
    display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 12px;
            border-top: 1px solid var(--gray-light);
}

.blog-card-author {
    /* 0.78rem in the mockup: legible in a wide three-column grid, too small on
       a phone where this line is the card's only meta. */
    font-size: 0.9rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 4px;
}

/* .vd-icon, not the mockup's `i`: the front's icons are inline SVG, so the
   rule as extracted matched nothing that is ever rendered. */
.blog-card-author .vd-icon {
    color: var(--orange);
    flex-shrink: 0;
}

.blog-card-read {
    display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--orange);
            /* Matches .blog-card-author, so the two ends of the footer read as
               one line rather than two sizes. */
            font-size: 0.9rem;
            font-weight: 600;
            transition: gap 0.2s ease;
            /* 22x20 before, under the 24x24 floor for a tap target — on the one
               link a card offers. The padding grows the hit area without moving
               the text: the negative left margin pulls the box back so the label
               still starts flush with the card's edge. */
            min-height: 24px;
            padding: 2px 8px;
            margin-left: -8px;
}

.blog-card-read:hover {
    gap: 9px;
}