/* ==========================================================================
   /news and /news/{slug} — page styles (News.dc.html, "Article - TwoCans",
   "Article - VMware to Hyper-V"). Loaded via $pageCss = 'news' from
   BlogController. Shared components (hero, chips, buttons, blobs, arrow
   badge, image placeholder) come from site.css.
   ========================================================================== */

@keyframes newsPop {
    0%   { opacity: 0; transform: translateY(24px) scale(.94); }
    100% { opacity: 1; transform: none; }
}
.news-pop { animation: newsPop .5s var(--ease-pop) backwards; }

/* Grid cards pop in one after another, like the prototype's re-render. */
.news-grid > .news-pop:nth-child(2) { animation-delay: .04s; }
.news-grid > .news-pop:nth-child(3) { animation-delay: .08s; }
.news-grid > .news-pop:nth-child(4) { animation-delay: .12s; }
.news-grid > .news-pop:nth-child(5) { animation-delay: .16s; }
.news-grid > .news-pop:nth-child(n+6) { animation-delay: .2s; }

/* ---------- Hero ---------- */
.news-h1 {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(44px, 6.5vw, 88px); line-height: .95; letter-spacing: -.03em;
}

/* ---------- Filter pills + search ---------- */
.news-filters {
    padding: 40px var(--gutter) 0;
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.news-filters__pills { display: flex; gap: 10px; flex-wrap: wrap; }

.news-pill {
    padding: 10px 18px; border-radius: var(--r-pill);
    font-weight: 700; font-size: 15px; line-height: 1.2;
    border: 3px solid var(--c-ink); background: var(--c-white); color: var(--c-ink);
    transition: background .2s, color .2s, transform .2s var(--ease-spring);
}
.news-pill:hover { color: var(--c-ink); transform: translateY(-3px); }
.news-pill[aria-current="page"] { background: var(--c-ink); color: var(--c-cream); }

.news-search {
    flex: 0 1 300px; min-width: min(100%, 220px);
    display: flex; align-items: center; gap: 4px;
    background: var(--c-white); border: 3px solid var(--c-ink); border-radius: var(--r-pill);
    padding: 3px 4px 3px 16px;
    transition: box-shadow .15s, border-color .15s;
}
.news-search:focus-within { border-color: var(--c-pink); box-shadow: 0 4px 0 var(--c-pink); }
.news-search__input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font: 600 15px/1.2 var(--f-body); color: var(--c-ink); padding: 6px 0;
}
.news-search__input::placeholder { color: var(--c-muted); opacity: 1; }
.news-search__input::-webkit-search-cancel-button { display: none; }
.news-search__btn {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-yellow); border: 2px solid var(--c-ink); color: var(--c-ink);
    cursor: pointer; padding: 0;
    transition: background .2s, transform .2s var(--ease-spring);
}
.news-search__btn:hover { background: var(--c-teal); transform: scale(1.06); }
.news-search__clear { flex: none; font-weight: 700; font-size: 14px; text-decoration: underline; padding: 0 8px; }

/* ---------- Results ---------- */
.news-results { padding: 32px var(--gutter) 0; }
.news-results:focus { outline: none; }
.news-results[aria-busy="true"] { opacity: .55; transition: opacity .2s; }

.news-empty { max-width: 640px; }

/* Shared meta row: category chip + date · reading time */
.news-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.news-meta .chip { align-self: flex-start; }
.news-meta__when { font-size: 14px; font-weight: 500; color: var(--c-muted); }
.news-meta__when--strong { font-weight: 600; color: var(--c-ink); }

/* The big "Latest" card */
.news-feature {
    background: var(--tint);
    border-radius: var(--r-panel);
    padding: clamp(24px, 4vw, 48px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 40px; align-items: center;
    transition: background .2s;
}
.news-feature:hover { color: var(--c-ink); background: color-mix(in srgb, var(--tint) 94%, var(--c-pink)); }
.news-feature__text { display: flex; flex-direction: column; gap: 16px; }
.news-feature__title {
    margin: 0;
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.02em;
}
.news-feature__excerpt { font-size: 18px; line-height: 1.55; }
.news-feature__more { font-weight: 700; font-size: 16px; }
.news-feature__img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; display: block;
    border-radius: 32px 32px 32px 8px; border: 3px solid var(--c-ink);
}
.news-feature__img--empty { overflow: hidden; background: var(--c-cream); }

/* Card grid: three across on desktop */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc(33.3% - 22px))), 1fr));
    gap: 48px 32px;
}
.news-feature-wrap + .news-grid { margin-top: 64px; }

.news-card { display: flex; flex-direction: column; gap: 14px; }
.news-card:hover { color: var(--c-pink-text); }
.news-card__media {
    display: block; width: 100%; aspect-ratio: 16 / 10;
    border-radius: 32px 32px 32px 8px; overflow: hidden; background: var(--tint);
}
.news-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.news-card__title { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.news-card__excerpt { font-size: 16px; line-height: 1.5; color: var(--c-ink); }

/* Newer / older */
.news-pager { margin-top: 56px; justify-content: center; }
.news-pager__count { font-weight: 700; font-size: 15px; }

/* ---------- "Got a project in mind?" ---------- */
.news-cta { position: relative; }
.news-cta__panel {
    background: var(--c-yellow);
    border-radius: var(--r-hero) var(--r-hero) var(--r-hero) 0;
    padding: clamp(36px, 6vw, 72px);
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
    position: relative; overflow: hidden;
}
.news-cta__panel > :not(.blob) { position: relative; }
.news-cta__blob { right: -60px; bottom: -80px; width: 220px; height: 220px; }
.news-cta__title {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.025em; max-width: 820px;
}
.news-cta__tail {
    position: absolute; left: var(--gutter); bottom: -30px; width: 60px; height: 32px;
    overflow: hidden; background: var(--c-yellow); clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ==========================================================================
   Article
   ========================================================================== */

.article-hero { padding-bottom: 0; }
.article-crumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.article-crumbs a { text-decoration: underline; }
.article-crumbs a:last-child:not(:first-child) { text-decoration: none; }

.article-title {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(40px, 5.5vw, 76px); line-height: .98; letter-spacing: -.03em; max-width: 980px;
    overflow-wrap: break-word;
}

.byline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.byline__avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--c-cream);
    overflow: hidden; display: block; flex: none;
}
.byline__avatar img { width: 100%; height: 100%; display: block; }
.byline__text { display: flex; flex-direction: column; }
.byline__name { font-weight: 700; font-size: 16px; }
.byline__when { font-size: 14px; font-weight: 500; }

.article-hero__media { margin-top: 20px; }
.article-hero__img {
    width: 100%; display: block; max-height: min(72vh, 720px);
    object-fit: cover; object-position: top center;
    border-radius: 24px 24px 0 0; border: 3px solid var(--c-ink); border-bottom: 0;
}
.article-hero__empty {
    display: block; width: 100%; aspect-ratio: 21 / 9;
    border-radius: 32px 32px 0 0; overflow: hidden; background: var(--c-teal-tint);
}

.article-wrap { padding: 64px var(--gutter) 0; display: flex; justify-content: center; }
.article { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- Article body: the rich-text HTML ---------- */
.article-body { display: flex; flex-direction: column; gap: 18px; font-size: 18px; line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
.article-body > * { margin: 0; }
.article-body p { text-wrap: pretty; }
.article-body p.lead { font-size: 21px; line-height: 1.55; font-weight: 600; }
.article-body h2 {
    margin-top: 24px;
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.02em;
    scroll-margin-top: 24px;
}
.article-body h3 { margin-top: 12px; font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.article-body h4 { font-weight: 700; font-size: 19px; line-height: 1.3; }
.article-body a { text-decoration: underline; font-weight: 600; }
.article-body strong, .article-body b { font-weight: 700; }
.article-body ul, .article-body ol {
    padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 1.6;
}
.article-body li > ul, .article-body li > ol { margin-top: 8px; }
.article-body hr { border: 0; border-top: 2px solid var(--c-ink); margin: 16px 0; }

.article-body img {
    width: 100%; height: auto; display: block;
    border-radius: 32px 32px 32px 8px; border: 3px solid var(--c-ink);
}
.article-body figure { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.article-body figcaption { font-size: 14px; font-weight: 500; color: var(--c-muted); line-height: 1.5; }

/* Images side by side */
.article-body .gallery {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 14px; margin: 8px 0;
}

/* Pull quote */
.article-body blockquote {
    margin: 16px 0;
    background: var(--c-yellow); border-radius: 32px 32px 32px 8px; padding: 28px 32px;
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25;
}
.article-body blockquote p + p { margin-top: .6em; }
.article-body blockquote cite { display: block; margin-top: 12px; font: 600 15px/1.4 var(--f-body); font-style: normal; }

/* Callouts */
.article-body .callout {
    background: var(--c-pink-tint); border-radius: 24px; padding: 22px 24px;
    font-size: 17px; line-height: 1.6;
}
.article-body .callout > * + * { margin-top: .75em; }
.article-body .callout a { font-weight: 700; }
.article-body .callout--teal   { background: var(--c-teal-tint); }
.article-body .callout--yellow { background: var(--c-yellow-tint); }
.article-body .callout--lilac  { background: var(--c-lilac-tint); }

/* Link ending in the yellow arrow badge (the partials/arrow look, drawn in
   CSS because article HTML cannot carry the SVG). */
.article-body .arrow-link { font-weight: 700; white-space: nowrap; }
.article-body .arrow-link::after {
    content: ''; display: inline-block;
    width: 24px; height: 24px; margin-left: 8px; vertical-align: -6px;
    border-radius: 50%; border: 2px solid var(--c-ink);
    background: var(--c-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5h8.5M6.5 1.5 10 5l-3.5 3.5' fill='none' stroke='%233b1758' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
    transition: transform .25s var(--ease-spring), background-color .2s;
}
.article-body .arrow-link:hover::after { transform: translateX(4px); background-color: var(--c-teal); }

/* Code */
.article-body code {
    font-family: var(--f-mono); font-size: .88em;
    background: var(--c-lilac-tint); border-radius: 6px; padding: 1px 6px;
}
.article-body pre {
    background: var(--c-ink); color: var(--c-cream); border-radius: 20px; padding: 18px 20px;
    font-family: var(--f-mono); font-size: 14px; line-height: 1.6;
    overflow-x: auto; white-space: pre; max-width: 100%;
}
.article-body pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* Tables */
.article-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; display: block; overflow-x: auto; }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--c-line); vertical-align: top; }
.article-body th { border-bottom-color: var(--c-ink); font-weight: 700; }
.article-body caption { text-align: left; font-weight: 700; padding-bottom: 8px; }

.article-body .small { font-size: 15px; }
.article-body .note { font-size: 15px; color: var(--c-muted); }
.article-body .text-centre { text-align: center; }

/* ---------- Share ---------- */
.share {
    margin-top: 24px; border-top: 2px solid var(--c-ink); padding-top: 20px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.share__label { font-weight: 700; font-size: 15px; }
.share__btn {
    padding: 8px 16px; border-radius: var(--r-pill); border: 3px solid var(--c-ink);
    background: var(--c-white); color: var(--c-ink);
    font: 700 14px/1.2 var(--f-body); cursor: pointer;
}
.share__btn:hover { background: var(--c-lilac-tint); color: var(--c-ink); }

/* ---------- More from the news ---------- */
.related { display: flex; flex-direction: column; gap: 32px; }
.related__title {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.02em;
}
.related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc(50% - 16px))), 1fr));
    gap: 32px;
}

@media (prefers-reduced-motion: reduce) {
    .news-pop { animation: none; }
    .news-pill, .news-search__btn, .article-body .arrow-link::after { transition: none; }
    .news-pill:hover { transform: none; }
}