/* Suppress the global external-link icon (pxproject adds it via
   a[href*="//"]::before) on all anchors inside our news views. */
.hph-news-detail a::before,
.hph-news-detail__breadcrumbs a::before,
.hph-share a::before {
    content: none !important;
}

.hph-news-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--defaultFrameSpace);
    max-width: var(--maxWidth);
    margin: 0 auto;
}

.hph-news-detail__article {
    display: flex;
    flex-direction: column;
    gap: var(--defaultFrameSpace);
    min-width: 0;
}

@media (min-width: 960px) {
    /* Two-column layout only when the sidebar div is actually present.
       The InfoBlock partial drops out when there's nothing meaningful to show,
       so the sidebar wrapper isn't rendered and the article reclaims full width.
       Both the grid-template AND the child grid-area assignments must be scoped
       to :has(), otherwise children reference undefined areas and stack at 1×1. */
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas:
            "hero    hero"
            "article infoblock"
            "related related"
            "back    back";
        align-items: start;
        column-gap: var(--spacing-md);
    }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__hero { grid-area: hero; }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__article { grid-area: article; }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__sidebar {
        grid-area: infoblock;
        align-self: stretch;
    }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__sidebar > .hph-news-infoblock--sidebar {
        position: sticky;
        top: calc(var(--stickyHeaderHeight, 0px) + var(--spacing-sm));
    }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__related { grid-area: related; }
    .hph-news-detail--sidebar:has(> .hph-news-detail__sidebar) > .hph-news-detail__back { grid-area: back; }
}

.hph-news-detail__hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: 0;
}

.hph-news-detail__hero-media {
    margin: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-neutral-100);
    aspect-ratio: 16 / 9;
}

@media (min-width: 960px) {
    .hph-news-detail__hero-media {
        aspect-ratio: 21 / 9;
    }
}

.hph-news-detail__hero-media img,
.hph-news-detail__hero-media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hph-news-detail__hero-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hph-news-detail__hero-eyebrow {
    font-weight: 600;
    color: var(--color-primary-500);
}

.hph-news-detail__title {
    margin: 0;
    color: var(--headlineColor);
}

.hph-news-detail__teaser {
    margin: 0;
    color: var(--fontColor);
}

.hph-news-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
}

.hph-news-detail__breadcrumbs {
    margin: 0;
}

.hph-news-detail__breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--color-neutral-600);
}

.hph-news-detail__breadcrumbs ol > li,
.hph-news-detail__breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    position: static;
    counter-increment: none;
}

/* Suppress pxproject's auto-numbered ol counter and ul bullet pseudos */
.hph-news-detail__breadcrumbs ol > li::before,
.hph-news-detail__breadcrumbs ol > li::after,
.hph-news-detail__breadcrumbs li::before,
.hph-news-detail__breadcrumbs li::after {
    content: none !important;
    display: none !important;
}

.hph-news-detail__breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: var(--baseTransition);
}

.hph-news-detail__breadcrumbs a:hover {
    color: var(--color-primary-500);
}

.hph-news-detail__breadcrumbs span[aria-hidden] {
    opacity: .5;
}

.hph-news-infoblock {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    padding: var(--spacing-sm);
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    background: var(--color-neutral-50);
    box-shadow: 0 4px 16px -10px color-mix(in srgb, var(--contrastColor) 25%, transparent);
}

.hph-news-infoblock--sidebar {
    padding: var(--spacing-sm);
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    background: var(--color-neutral-50);
    box-shadow: 0 4px 16px -10px color-mix(in srgb, var(--contrastColor) 25%, transparent);
}

.hph-news-infoblock__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--spacing-md);
    margin: 0;
    color: var(--color-neutral-600);
    font-size: .9em;
}

.hph-news-infoblock__field {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.hph-news-infoblock__field dt {
    margin: 0;
    color: var(--color-neutral-600);
    font-weight: 500;
}

.hph-news-infoblock__field dt::after {
    content: ":";
}

.hph-news-infoblock__field dd {
    margin: 0;
    color: var(--fontColor);
    min-width: 0;
}

.hph-news-infoblock__tag,
.hph-news-infoblock__category {
    color: inherit;
    text-decoration: none;
    transition: color var(--baseTransition);
}

.hph-news-infoblock__tag:hover,
.hph-news-infoblock__category:hover,
.hph-news-infoblock__tag:focus-visible,
.hph-news-infoblock__category:focus-visible {
    color: var(--color-primary-500);
}

.hph-news-infoblock .hph-share__item {
    width: 36px;
    height: 36px;
}

.hph-news-infoblock .hph-share__icon {
    width: 16px;
    height: 16px;
}

.hph-author-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hph-author-box img {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
}

.hph-author-box a {
    color: inherit;
    text-decoration: none;
    transition: var(--baseTransition);
}

.hph-author-box a:hover {
    color: var(--color-primary-500);
}

.hph-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hph-share__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    background: var(--color-neutral-50);
    color: var(--fontColor);
    text-decoration: none;
    cursor: pointer;
    transition: var(--baseTransition);
}

.hph-share__item:hover,
.hph-share__item:focus-visible {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--contrastColorInverted);
}

.hph-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.hph-share__icon {
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.hph-share__icon--facebook { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1.2C16.6 1.1 15.5 1 14.3 1 11.7 1 10 2.6 10 5.6V10H7v4h3v8h3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1.2C16.6 1.1 15.5 1 14.3 1 11.7 1 10 2.6 10 5.6V10H7v4h3v8h3z'/></svg>"); }
.hph-share__icon--twitter { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.5l-7.4 8.46L23 22h-6.85l-5.36-6.99L4.5 22H1.24l7.92-9.05L1 2h7.02l4.85 6.4L18.24 2zm-1.2 18h1.85L7.06 4H5.1l11.94 16z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.5l-7.4 8.46L23 22h-6.85l-5.36-6.99L4.5 22H1.24l7.92-9.05L1 2h7.02l4.85 6.4L18.24 2zm-1.2 18h1.85L7.06 4H5.1l11.94 16z'/></svg>"); }
.hph-share__icon--linkedin { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.07c.63-1.2 2.18-2.45 4.5-2.45 4.83 0 5.43 3.18 5.43 7.3V24h-5v-7.3c0-1.74-.04-3.97-2.42-3.97-2.43 0-2.8 1.9-2.8 3.85V24h-5V8z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.07c.63-1.2 2.18-2.45 4.5-2.45 4.83 0 5.43 3.18 5.43 7.3V24h-5v-7.3c0-1.74-.04-3.97-2.42-3.97-2.43 0-2.8 1.9-2.8 3.85V24h-5V8z'/></svg>"); }
.hph-share__icon--email { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm17 3.4l-8 5-8-5V18h16V8.4zM4 7l8 5 8-5H4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm17 3.4l-8 5-8-5V18h16V8.4zM4 7l8 5 8-5H4z'/></svg>"); }
.hph-share__icon--copy { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z'/></svg>"); }

.hph-share__copy-feedback {
    display: inline-block;
    margin-left: var(--spacing-xxs);
    align-self: center;
    color: var(--color-neutral-600);
}

.hph-share__copy-feedback[hidden] {
    display: none !important;
}

.hph-news-detail__related {
    margin-top: var(--spacing-md);
}

.hph-news-detail__related h2 {
    margin: 0 0 var(--spacing-sm);
    color: var(--headlineColor);
}

.hph-news-related {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .hph-news-related {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hph-news-related__item {
    margin: 0;
}
/* Items inside .hph-news-related render as .hph-news-item — see list.css */

.hph-news-detail__back {
    margin: var(--spacing-md) 0 0;
}