/* Blog module: the public article and post list (.ez-blog-*).
   Every colour and radius is a custom property defaulting to the Bootstrap theme, so the blog fits any
   app built on the platform; an app re-points the properties at its own palette on its public site
   (VCR: vcr-marketing.css). Flat by design - borders, no shadows. */

.ez-blog {
    --ez-blog-ink: var(--bs-emphasis-color);
    --ez-blog-text: var(--bs-body-color);
    --ez-blog-muted: var(--bs-secondary-color);
    --ez-blog-accent: var(--bs-primary);
    --ez-blog-line: var(--bs-border-color);
    --ez-blog-panel: var(--bs-tertiary-bg);
    --ez-blog-radius: var(--bs-border-radius-lg);
    --ez-blog-measure: 46rem;
}

/* ---------- Article ---------- */

.ez-blog-article { max-width: var(--ez-blog-measure); margin-inline: auto; }

.ez-blog-header { text-align: center; margin-bottom: 2.5rem; }

.ez-blog-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ez-blog-accent);
}

.ez-blog-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 1.25rem + 3vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ez-blog-ink);
}

.ez-blog-lede {
    max-width: 38rem;
    margin: 0 auto 1.25rem;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--ez-blog-muted);
}

.ez-blog-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem .875rem;
    font-size: .875rem;
    color: var(--ez-blog-muted);
}

/* The cover is wider than the text column, so the article opens on the picture. */
.ez-blog-cover { max-width: 64rem; margin: 0 auto 3rem; }
.ez-blog-cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ez-blog-line);
    border-radius: var(--ez-blog-radius);
}

/* ---------- Body text ---------- */

.ez-blog-body { font-size: 1.0625rem; line-height: 1.75; color: var(--ez-blog-text); }
.ez-blog-body > div > :first-child { margin-top: 0; }
.ez-blog-body p { margin: 0 0 1.25rem; }
.ez-blog-body h2 {
    margin: 3rem 0 1rem;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ez-blog-ink);
}
.ez-blog-body h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; font-weight: 700; color: var(--ez-blog-ink); }
.ez-blog-body strong { color: var(--ez-blog-ink); }
.ez-blog-body a { color: var(--ez-blog-accent); text-underline-offset: .2em; }
.ez-blog-body ul, .ez-blog-body ol { margin: 0 0 1.5rem; padding-left: 1.375rem; }
.ez-blog-body li { margin-bottom: .5rem; }
.ez-blog-body li::marker { color: var(--ez-blog-accent); }
.ez-blog-body blockquote {
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--ez-blog-accent);
    color: var(--ez-blog-muted);
}
.ez-blog-body img { max-width: 100%; height: auto; border-radius: var(--ez-blog-radius); }

/* ---------- Media: a single figure, or a gallery ---------- */

/* A single portrait photo at full column width towers over the text, so a lone figure is held to a
   phone-shaped width; a {.wide} one (a landscape screenshot) takes the whole column. */
.ez-blog-media { margin: 2.25rem auto; }
.ez-blog-media--single { max-width: 24rem; }
.ez-blog-media--wide { max-width: none; }
.ez-blog-media--gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 1rem;
}

.ez-blog-figure { position: relative; margin: 0; }
.ez-blog-figure img,
.ez-blog-figure video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ez-blog-line);
    border-radius: var(--ez-blog-radius);
    background: var(--ez-blog-panel);
}
/* Gallery tiles share one shape so the row reads as a set. */
.ez-blog-media--gallery img,
.ez-blog-media--gallery video { aspect-ratio: 3 / 4; object-fit: cover; }

.ez-blog-figure figcaption {
    margin-top: .625rem;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ez-blog-muted);
}

/* ---------- Post list ---------- */

.ez-blog-empty {
    margin: 0 auto;
    padding: 3rem 1.5rem;
    max-width: var(--ez-blog-measure);
    text-align: center;
    color: var(--ez-blog-muted);
    border: 1px dashed var(--ez-blog-line);
    border-radius: var(--ez-blog-radius);
}

/* Cards keep one width and the row is centred, so a blog with only one or two posts sits under the
   centred heading instead of leaving an empty column on the right. */
.ez-blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 24rem));
    justify-content: center;
    gap: 1.5rem;
}

.ez-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ez-blog-line);
    border-radius: var(--ez-blog-radius);
    background: var(--ez-blog-panel);
    transition: border-color .15s ease;
}
.ez-blog-card:hover, .ez-blog-card:focus-within { border-color: var(--ez-blog-accent); }
.ez-blog-card-media { aspect-ratio: 2 / 1; border-bottom: 1px solid var(--ez-blog-line); }
.ez-blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ez-blog-card-body { display: flex; flex-direction: column; flex: 1; gap: .625rem; padding: 1.25rem 1.375rem 1.375rem; }
.ez-blog-card-title { margin: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--ez-blog-ink); }
.ez-blog-card-title a { color: inherit; text-decoration: none; }
.ez-blog-card-title a::after { content: ""; position: absolute; inset: 0; }
.ez-blog-card-summary {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ez-blog-muted);
}
.ez-blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    font-size: .8125rem;
    color: var(--ez-blog-muted);
}
.ez-blog-card-more { font-size: .875rem; font-weight: 600; color: var(--ez-blog-accent); white-space: nowrap; }
.ez-blog-card-more i { margin-left: .25rem; transition: transform .15s ease; }
.ez-blog-card:hover .ez-blog-card-more i,
.ez-blog-card:focus-within .ez-blog-card-more i { transform: translateX(.25rem); }

@media (prefers-reduced-motion: reduce) {
    .ez-blog-card, .ez-blog-card-more i { transition: none; }
}