/**
 * Tiger AJAX Grid — Magazine preset.
 *
 * Classic editorial card. Image on top, big legible title, generous padding,
 * subtle shadow that lifts on hover. Mid-weight visual style — works for
 * blogs, recipes, knowledge bases, anywhere a clean content grid fits.
 */

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(15,23,42,0.25), 0 4px 10px rgba(15,23,42,0.05);
    border-color: #d4d4d8;
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__image {
    aspect-ratio: 16/9;
    background: #f1f5f9;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__image img {
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card:hover .tiger-ajax-card__image img {
    transform: scale(1.06);
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__body {
    padding: 24px 24px 20px;
    gap: 10px;
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__eyebrow {
    /* `inline-flex` + `width: fit-content` reliably keeps the eyebrow sized to
       its text inside a column-flex parent (the body's implicit `align-items:
       stretch` was previously stretching the old `inline-block` variant full
       width, dragging its `border-bottom` accent edge-to-edge — which looked
       like an underline gone wrong). */
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;

    padding: 4px 10px;
    margin: 0 0 4px;

    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border-radius: 4px;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.4;
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__title a {
    color: #0f172a;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .25s ease;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__title a:hover {
    background-size: 100% 1.5px;
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__meta {
    font-size: 13px;
    color: #64748b;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__body-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
    /* Limit to 3 lines so card heights stay tidy in a grid. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__btn {
    margin-top: 14px;
    align-self: flex-start;
    color: #4338ca;
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    gap: 6px;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__btn span {
    transition: transform .2s ease;
}
.tiger-ajax-grid-wrap--magazine .tiger-ajax-card__btn:hover span {
    transform: translateX(6px);
}