/* Defeat pxproject's `.cont ul li::before` bullet dot, `.cont ol > li::before`
   counter, and `.cont ul li` padding for any list inside our plugins
   (filter options, pagination, items grid, breadcrumbs in the detail view).
   Also suppress the global external-link icon on news / filter / pagination
   anchors. */
.hph-news-list ul,
.hph-news-list ol,
.hph-news-filter ul,
.hph-news-filter ol,
.hph-pagination ul,
.hph-pagination ol {
    padding: 0;
    margin: 0;
    list-style: none;
}
.hph-news-list ul > li,
.hph-news-list ol > li,
.hph-news-filter ul > li,
.hph-news-filter ol > li,
.hph-pagination ul > li,
.hph-pagination ol > li {
    padding: 0;
    list-style: none;
}
.hph-news-list ul > li::before,
.hph-news-list ol > li::before,
.hph-news-filter ul > li::before,
.hph-news-filter ol > li::before,
.hph-pagination ul > li::before,
.hph-pagination ol > li::before {
    content: none;
}
.hph-news-list a::before,
.hph-news-item a::before,
.hph-news-filter a::before,
.hph-pagination a::before {
    content: none !important;
}

.hph-news-list {
    display: flex;
    flex-direction: column;
    gap: var(--defaultFrameSpace);
}

.hph-news-list.is-loading {
    opacity: .5;
    pointer-events: none;
    transition: var(--baseTransition);
}

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

/* Minimal, flat filter bar — no container chrome. Triggers read as plain
   text controls with a chevron; state (open / selected) shows through color
   and weight, not borders. Panel keeps a soft shadow because it floats. */
.hph-news-filter {
    /* Allow the absolutely-positioned dropdown panel to escape any
       overflow:hidden the host theme applies to ancestor containers. */
    overflow: visible;
}

.hph-news-filter__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xxs) var(--spacing-md);
}

/* `<f:form>` wraps Extbase's hidden referrer + __trustedProperties inputs in
   a bare `<div>`; without `display: contents` that div becomes a flex item
   and the `gap` around it produces a visible empty row above the legends. */
.hph-news-filter__form > div:has(> input[type="hidden"]) {
    display: contents;
}

.hph-news-filter__group {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hph-news-filter__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    padding: 6px 0;
    color: var(--fontColor);
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-weight: 500;
    transition: color var(--baseTransition);
}

.hph-news-filter__summary::-webkit-details-marker { display: none; }
.hph-news-filter__summary::marker { content: ""; }

.hph-news-filter__summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--baseTransition);
    opacity: .6;
}

.hph-news-filter__group[open] > .hph-news-filter__summary::after {
    transform: translateY(1px) rotate(-135deg);
    opacity: 1;
}

.hph-news-filter__group[open] > .hph-news-filter__summary,
.hph-news-filter__summary:hover,
.hph-news-filter__summary:focus-visible {
    color: var(--color-primary-500);
    outline: none;
}

.hph-news-filter__summary-count:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-primary-500);
    color: var(--contrastColorInverted);
    font-weight: 600;
    font-size: .72em;
    line-height: 1;
}

.hph-news-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 240px;
    padding: 6px;
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    background: var(--color-neutral-50);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--contrastColor) 25%, transparent);
    max-height: 320px;
    overflow-y: auto;
}

.hph-news-filter__options {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hph-news-filter__options > li {
    margin: 0;
}

.hph-news-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    color: var(--fontColor);
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    word-break: break-word;
    transition: background var(--baseTransition);
}

.hph-news-filter__option:hover {
    background: var(--color-neutral-100);
}

.hph-news-filter__option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--color-primary-500);
    cursor: pointer;
    flex-shrink: 0;
}

.hph-news-filter__option:has(input[type="checkbox"]:checked) {
    color: var(--color-primary-500);
    font-weight: 500;
}

.hph-news-filter__option:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.hph-news-filter__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xxs);
    align-items: center;
    margin-left: auto;
}

/* Defeat pxproject's `.button:not(:only-child) { margin: 0 1em 1em 0 }`
   which adds spacing around every button when more than one is present.
   `!important` is needed because pxproject's selector is more specific. */
.hph-news-filter__actions > .button,
.hph-news-filter__actions > button {
    margin: 0 !important;
}

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

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

@media (min-width: 768px) {
    .hph-news-list__items--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .hph-news-list__items--cols-4 { grid-template-columns: repeat(3, 1fr); }
    .hph-news-list__items--cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
    .hph-news-list__items--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .hph-news-list__items--cols-5 { grid-template-columns: repeat(5, 1fr); }
}

.hph-news-list__items--cols-1,
.hph-news-list__items--cols-special {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .hph-news-list__items--cols-special {
        grid-template-columns: repeat(4, 1fr);
    }
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(2),
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(3) {
        grid-column: 3 / 5;
    }
    .hph-news-list__items--cols-special .hph-news-list__item,
    .hph-news-list__items--cols-special .hph-news-list__item > .hph-news-item {
        height: 100%;
    }
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(1) .hph-news-item__media {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(2) .hph-news-item__media,
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(3) .hph-news-item__media {
        aspect-ratio: auto;
        align-self: stretch;
    }
}

@media (min-width: 640px) {
    .hph-news-list__items--cols-1 .hph-news-item,
    .hph-news-list__items--cols-2 .hph-news-item,
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(2) .hph-news-item,
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(3) .hph-news-item {
        flex-direction: row;
    }

    .hph-news-list__items--cols-1 .hph-news-item__media,
    .hph-news-list__items--cols-2 .hph-news-item__media,
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(2) .hph-news-item__media,
    .hph-news-list__items--cols-special .hph-news-list__item:nth-child(3) .hph-news-item__media {
        flex: 0 0 40%;
        aspect-ratio: 1 / 1;
    }
}

.hph-news-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-neutral-50);
    transition: var(--baseTransition);
}

.hph-news-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-500);
    box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--contrastColor) 30%, transparent);
}

.hph-news-item--top {
    border-color: var(--color-primary-500);
}

.hph-news-item__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-neutral-100);
}

.hph-news-item__media img,
.hph-news-item__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hph-news-item:hover .hph-news-item__media img,
.hph-news-item:hover .hph-news-item__media picture {
    transform: scale(1.04);
}

.hph-news-item__top-badge {
    position: absolute;
    top: var(--spacing-xxs);
    left: var(--spacing-xxs);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-primary-500);
    color: var(--contrastColorInverted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    z-index: 1;
}

.hph-news-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    padding: var(--spacing-sm);
    flex: 1;
}

.hph-news-item__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}

.hph-news-item__title {
    margin: 0;
    color: var(--headlineColor);
    line-height: 1.3;
}

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

/* Make the entire card clickable via the title link. The overlay's
   containing block is `.hph-news-item` (which is `position: relative`), so
   `inset: 0` fills the whole card. Nothing inside the card competes with it,
   so the title anchor stays unpositioned. */
.hph-news-item__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

.hph-news-item:has(.hph-news-item__title a:focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.hph-news-item__title a:focus-visible {
    outline: none;
}

.hph-news-item__teaser {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hph-news-item__date {
    order: -1;
    color: var(--color-neutral-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hph-news-item__author {
    margin-top: auto;
    color: var(--color-neutral-600);
}

.hph-news-item__author span[itemprop="author"] {
    color: var(--fontColor);
    font-weight: 600;
}

.hph-news-list__empty {
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
    border: var(--border-thin);
    border-radius: var(--border-radius-md);
    background: var(--color-neutral-100);
}

.hph-news-list__cta {
    margin: 0;
    text-align: center;
}

.hph-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hph-pagination__item a,
.hph-pagination__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    color: inherit;
    transition: var(--baseTransition);
}

.hph-pagination__item a:hover,
.hph-pagination__item a:focus-visible {
    background: var(--color-neutral-100);
    color: var(--color-primary-500);
}

.hph-pagination__item [aria-current="page"],
.hph-pagination__item--current span,
.hph-pagination__item.is-active a {
    background: var(--color-primary-500);
    color: var(--contrastColorInverted);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

.hph-pagination__item [aria-current="page"]:hover,
.hph-pagination__item--current span:hover {
    background: var(--color-primary-500);
    color: var(--contrastColorInverted);
}

.hph-pagination__item--ellipsis span {
    cursor: default;
    pointer-events: none;
    color: var(--color-neutral-600);
}

.hph-pagination__item--prev a::before { content: "‹"; margin-right: 4px; font-weight: 700; }
.hph-pagination__item--next a::after { content: "›"; margin-left: 4px; font-weight: 700; }