/*
 * MageOS Blog — post cards.
 *
 * Split out of blog.css so product pages can style the related-posts tab
 * without pulling in the blog page layout, which is built for a 1-column
 * template and fights a product page.
 *
 * This file owns the design tokens because it is the half that can be loaded
 * on its own. blog.css consumes the same tokens and therefore REQUIRES this
 * file to be loaded first — blog_default.xml loads them in that order.
 */

/*
 * The type scale is in `em`, not `rem`, and deliberately so.
 *
 * Luma sets `html { font-size: 62.5% }`, making 1rem = 10px, where Hyvä and
 * most themes leave it at 16px. A rem-based scale therefore rendered the whole
 * blog at 62.5% on Luma — body copy at 11px, smaller than any other text on
 * the page, which is what made it look like a foreign object in the theme.
 *
 * Sizing against the INHERITED body copy instead makes the blog adapt to
 * whatever theme hosts it: the base is the theme's own body size plus an eighth
 * for reading comfort, and the rest of the scale is relative to that base.
 *
 * `--mageos-blog-font` is `inherit` for the same reason — the blog should read
 * as part of the storefront, not as a system-font island. The serif face is
 * kept for post bodies only, which is a deliberate editorial choice.
 */
.mageos-blog {
    --mageos-blog-font: inherit;
    --mageos-blog-font-serif: Charter, "Iowan Old Style", Georgia, serif;
    --mageos-blog-text: 1.125em;
    --mageos-blog-h1: clamp(2em, 3.4vw + 1em, 2.9em);
    --mageos-blog-h2: 1.556em;
    --mageos-blog-meta-size: 0.833em;

    --mageos-blog-ink: #1a1a1a;
    --mageos-blog-meta: #666;
    --mageos-blog-border: rgba(0, 0, 0, 0.08);
    --mageos-blog-chip-bg: rgba(0, 0, 0, 0.04);

    color: var(--mageos-blog-ink);
    font-family: var(--mageos-blog-font);
    font-size: var(--mageos-blog-text);
    line-height: 1.7;
}

.mageos-blog a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mageos-blog a:hover {
    text-decoration-thickness: 2px;
}

/* ---------------- Post card ---------------- */

.mageos-blog-card {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--mageos-blog-border);
}

.mageos-blog-card:last-child {
    border-bottom: 0;
}

.mageos-blog-card__hero {
    display: block;
    margin-bottom: 1rem;
}

.mageos-blog-card__hero img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
}

.mageos-blog-card__title {
    font-size: var(--mageos-blog-h2);
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.mageos-blog-card__title a {
    text-decoration: none;
}

.mageos-blog-card__title a:hover {
    text-decoration: underline;
}

.mageos-blog-card__meta,
.mageos-blog-post__meta {
    color: var(--mageos-blog-meta);
    font-size: var(--mageos-blog-meta-size);
    margin: 0 0 1rem;
}

.mageos-blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 1rem;
}

.mageos-blog-card__cta {
    font-size: var(--mageos-blog-meta-size);
    font-weight: 600;
    margin: 0 0 1.5rem;
}

/* ---------------- Related posts on a product page ---------------- */

/*
 * The card was designed for a 1-column blog page. Inside a product
 * information tab it would otherwise stretch to the full tab width with
 * blog-sized type. Constrain it: smaller headings, and a grid so several
 * cards sit side by side instead of forming a long vertical scroll.
 */
.mageos-blog-related-posts {
    --mageos-blog-text: 1em;
    --mageos-blog-h2: 1.25em;

    padding: 0.5rem 0 1rem;
}

.mageos-blog-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
    align-items: start;
}

/*
 * The blog page uses a bottom rule to separate stacked cards. In a grid that
 * rule lands mid-row and reads as a stray line, so drop it here.
 */
.mageos-blog-related-posts .mageos-blog-card {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ---------------- List layout (related_posts/pdp_template = list) ---------------- */

.mageos-blog-related-posts--list {
    padding: 0.5rem 0 1rem;
}

.mageos-blog-related-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mageos-blog-related-posts__item {
    padding: 1.25rem 0;
}

.mageos-blog-related-posts__item + .mageos-blog-related-posts__item {
    border-top: 1px solid var(--mageos-blog-border, #cbd5e1);
}

.mageos-blog-related-posts__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mageos-blog-related-posts__link:hover {
    opacity: 0.9;
}

.mageos-blog-related-posts__item-title {
    display: block;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mageos-blog-ink, #111827);
}

.mageos-blog-related-posts__item-media {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0.25rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------------- Narrow viewports ---------------- */

/*
 * Lives here rather than in blog.css so the card stays self-contained: a
 * product page loads only this file and must still get the responsive size.
 */
@media (max-width: 640px) {
    .mageos-blog-card__title { font-size: 1.333em; }
}