/* Source: vendor/mage-os/module-blog-hyva/view/frontend/tailwind/components/ (v1.0.0) */
/*
 * Design tokens and base typography — the Hyvä twin of the head of
 * MageOS_Blog::css/blog-cards.css.
 *
 * Values are ported verbatim so the two themes render the same blog. These
 * custom properties are the module's override surface: .mageos-blog-related-posts
 * shrinks the card purely by reassigning --mageos-blog-text and
 * --mageos-blog-h2, and that stops working if the values are inlined.
 *
 * A merchant wanting the blog to follow their Hyvä palette reassigns these to
 * theme tokens (--color-primary and friends) rather than editing the rules.
 */

.mageos-blog {
    --mageos-blog-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    --mageos-blog-font-serif: Charter, "Iowan Old Style", Georgia, serif;
    --mageos-blog-text: 1.125rem;
    --mageos-blog-h1: clamp(2.25rem, 3.4vw + 1rem, 3.25rem);
    --mageos-blog-h2: 1.75rem;
    --mageos-blog-meta-size: 0.9375rem;

    --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: var(--btn-color);
    text-decoration: none;
}
/*
 * The post card — Hyvä twin of the card section of
 * MageOS_Blog::css/blog-cards.css.
 *
 * Rendered by post/card.phtml on the listing, category, tag, author, search and
 * product-detail pages, so it is the one component worth keeping identical
 * across the two themes.
 */

/*
 * Not styled on Luma: the cards simply stack, separated by the card's own
 * bottom rule. Hyvä has no equivalent flow, so the wrapper carries the grid.
 */
.mageos-blog-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.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;
}

/*
 * The excerpt is admin-authored HTML, so it cannot carry classes. A leading
 * margin on the first paragraph would push the clamped text out of view.
 */
.mageos-blog-card__excerpt p {
    margin: 0;
}

.mageos-blog-card__excerpt > * + * {
    margin-top: 0.5rem;
}

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

@media (max-width: 640px) {
    .mageos-blog-card__title {
        font-size: 1.5rem;
    }
}
/*
 * Related posts inside a product information section — Hyvä twin of the
 * related-posts section of MageOS_Blog::css/blog-cards.css.
 *
 * The card was designed for a 1-column blog page. Left alone in a product
 * section it stretches to the full width with blog-sized type, so this shrinks
 * it by reassigning the tokens from base.css and lays the cards out in a grid.
 */

.mageos-blog-related-posts {
    --mageos-blog-text: 1rem;
    --mageos-blog-h2: 1.25rem;

    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 separates stacked cards with a bottom rule. In a grid that rule
 * lands mid-row and reads as a stray line.
 */
.mageos-blog-related-posts .mageos-blog-card {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
/*
 * Blog page chrome — Hyvä twin of the page-layout rules in
 * MageOS_Blog::css/blog.css: the container, the context header shared by the
 * category, tag, author and search pages, pagination and the empty state.
 */

.mageos-blog-container {
    max-width: 760px;
    padding-inline: 1.5rem;
    padding-block: 2rem;

    /*
     * No Luma counterpart. Luma nests this inside the centred page-main
     * wrapper, so the 760px box lands in the middle on its own. Hyvä's main is
     * full-width, and without this the whole blog is pinned to the left edge
     * with an empty gutter beside it.
     */
    margin-inline: auto;
}

/* ---------------- Context headers (category/tag/author/search) ---------------- */

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

.mageos-blog-context__title {
    font-size: var(--mageos-blog-h1);
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.mageos-blog-context__description {
    color: var(--mageos-blog-meta);
    font-size: 1rem;
}

/* Admin-authored HTML — see the note in card.css. */
.mageos-blog-context__description p {
    margin: 0;
}

.mageos-blog-context__description > * + * {
    margin-top: 0.5rem;
}

.mageos-blog-context__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* ---------------- Pagination ---------------- */

.mageos-blog-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    font-size: var(--mageos-blog-meta-size);
}

.mageos-blog-pagination a,
.mageos-blog-pagination span {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    text-decoration: none;
}

.mageos-blog-pagination a:hover {
    background: var(--mageos-blog-chip-bg);
}

.mageos-blog-pagination__current {
    background: var(--mageos-blog-chip-bg);
    font-weight: 600;
}

/* ---------------- Empty state ---------------- */

.mageos-blog-empty {
    color: var(--mageos-blog-meta);
    font-style: italic;
    text-align: center;
    padding: 3rem 0;
}

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

@media (max-width: 640px) {
    .mageos-blog-container {
        padding-inline: 1rem;
        padding-block: 1.5rem;
    }
}
/*
 * Post detail — Hyvä twin of the post rules in MageOS_Blog::css/blog.css.
 *
 * One section is deliberately NOT a straight port. Luma leaves list markers,
 * heading weights, tables and rules to the browser's default stylesheet;
 * Tailwind's preflight zeroes all of it. Since .mageos-blog-post__content
 * renders admin-authored HTML there is nowhere to hang a utility, so those
 * defaults are restored here — marked below — or a post body renders as one
 * undifferentiated block of text.
 */

.mageos-blog-post__hero {
    margin: 0 0 2rem;
}

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

.mageos-blog-post__title {
    font-size: var(--mageos-blog-h1);
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

/* .mageos-blog-post__meta shares its rule with the card — see card.css. */

/* ---------------- Post body ---------------- */

.mageos-blog-post__content {
    font-family: var(--mageos-blog-font-serif);
    font-size: 1.1875rem;
    line-height: 1.8;
}

.mageos-blog-post__content > * + * {
    margin-top: 1.25rem;
}

.mageos-blog-post__content h2 {
    font-family: var(--mageos-blog-font);
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.mageos-blog-post__content h3 {
    font-family: var(--mageos-blog-font);
    font-size: 1.25rem;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.mageos-blog-post__content blockquote {
    border-left: 3px solid var(--mageos-blog-border);
    padding-left: 1.25rem;
    color: var(--mageos-blog-meta);
    margin-inline: 0;
    font-style: italic;
}

.mageos-blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-block: 2rem;
    display: block;
}

.mageos-blog-post__content pre {
    background: var(--mageos-blog-chip-bg);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.9375rem;
}

.mageos-blog-post__content code {
    background: var(--mageos-blog-chip-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.9375rem;
}

.mageos-blog-post__content pre code {
    background: transparent;
    padding: 0;
}

/*
 * Preflight repairs. No Luma counterpart — these only restore what the browser
 * would have done and Tailwind removed. Keep them minimal: anything beyond a
 * default is a design change the Luma theme will not have.
 */
.mageos-blog-post__content h2,
.mageos-blog-post__content h3,
.mageos-blog-post__content h4 {
    font-weight: 600;
}

.mageos-blog-post__content h4 {
    font-family: var(--mageos-blog-font);
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.mageos-blog-post__content ul,
.mageos-blog-post__content ol {
    padding-left: 1.5rem;
}

.mageos-blog-post__content ul {
    list-style: disc;
}

.mageos-blog-post__content ol {
    list-style: decimal;
}

.mageos-blog-post__content li + li {
    margin-top: 0.25rem;
}

.mageos-blog-post__content table {
    width: 100%;
    font-size: 0.9375rem;
    border-collapse: collapse;
}

.mageos-blog-post__content th,
.mageos-blog-post__content td {
    border: 1px solid var(--mageos-blog-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.mageos-blog-post__content th {
    font-weight: 600;
}

.mageos-blog-post__content hr {
    border-top: 1px solid var(--mageos-blog-border);
    margin-block: 2rem;
}

/* ---------------- Post footer: tags + share + related ---------------- */

.mageos-blog-post__footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mageos-blog-border);
    font-family: var(--mageos-blog-font);
}

.mageos-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.mageos-blog-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--mageos-blog-chip-bg);
    border-radius: 1rem;
    font-size: var(--mageos-blog-meta-size);
    text-decoration: none;
}

.mageos-blog-chip:hover {
    background: rgba(0, 0, 0, 0.08);
}

.mageos-blog-share {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
    font-size: var(--mageos-blog-meta-size);
    margin: 0 0 2rem;
}

.mageos-blog-share__label {
    color: var(--mageos-blog-meta);
}

.mageos-blog-related {
    margin-top: 2rem;
}

.mageos-blog-related__title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.mageos-blog-related__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .mageos-blog-related__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

.mageos-blog-related__item-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.mageos-blog-related__item-title {
    font-size: 1rem;
    margin: 0;
}

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

@media (max-width: 640px) {
    .mageos-blog-post__content {
        font-size: 1.0625rem;
    }
}
/*
 * The six storefront widgets.
 *
 * MageOS_Blog emits these class names but styles none of them — a widget
 * inherits whatever the CMS block it sits in provides. Hyvä has no equivalent
 * inherited flow, so this restores the minimum a list of links needs to be
 * readable. Kept deliberately plain: a widget that looked designed here and
 * undesigned on Luma would be the wrong kind of difference.
 */

.mageos-blog-widget__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.mageos-blog-widget__items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mageos-blog-widget__item + .mageos-blog-widget__item {
    margin-top: 0.5rem;
}

.mageos-blog-widget__empty {
    color: var(--mageos-blog-meta, #666);
    font-style: italic;
}

.mageos-blog-widget__featured h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.mageos-blog-widget__excerpt {
    font-size: 0.9375rem;
}

/* Admin-authored HTML — see the note in card.css. */
.mageos-blog-widget__excerpt p {
    margin: 0;
}

.mageos-blog-widget__excerpt > * + * {
    margin-top: 0.5rem;
}