/* ─── NewsPageHero ─────────────────────────────────────────────────────────
 *
 * Standalone CSS for the awesome_news NewsPageHero plugin.
 *
 * Design tokens intentionally mirror Parliament's colour palette so that the
 * component looks at home on the Parliament site.  When Parliament's own
 * output.css (Tailwind build) is loaded on the same page the Tailwind utility
 * classes in the Fluid template further refine the appearance; when the plugin
 * is used on any other TYPO3 site these styles are fully self-contained.
 *
 * BEM block: .anph  (Awesome News Page Hero)
 * ──────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ── */
.anph {
    --anph-bg: #101F2F; /* parliament-primary-dark  */
    --anph-accent: #5BB581; /* parliament-primary       */
    --anph-accent-light: #A3E6BF; /* parliament-primary-light */
    --anph-white: #ffffff;
    --anph-pill-border: rgba(255, 255, 255, .55);
    --anph-search-bg: rgba(0, 0, 0, .22);
    --anph-input-placeholder: rgba(255, 255, 255, .50);
    --anph-radius-pill: 999px;
    --anph-transition: .18s ease;

    /* Layout */
    background-color: var(--anph-bg);
    color: var(--anph-white);
    width: 100%;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    box-sizing: border-box;
}

/* ── Back / parent link ── */
.anph__back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--anph-accent-light);
    text-decoration: none;
    transition: opacity var(--anph-transition);
}

.anph__back:hover {
    opacity: .75;
}

.anph__back-icon {
    font-style: normal;
    line-height: 1;
}

/* ── Headline ── */
.anph__title {
    font-size: clamp(1.6rem, 5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .04em;
    line-height: 1.15;
    margin: 0;
    color: var(--anph-white);
}

/* ── Search form ── */
.anph__search-wrap {
    width: min(70%, 640px);
    min-width: 260px;
}

.anph__search-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--anph-search-bg);
    border-radius: var(--anph-radius-pill);
    padding: .45rem .45rem .45rem 1.25rem;
    /* subtle border so it reads on very light backgrounds */
    border: 1px solid rgba(255, 255, 255, .12);
}

.anph__search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--anph-white);
    font-size: .9rem;
    font-family: inherit;
    padding: .55rem 0;
    /* override browser search-input styling */
    -webkit-appearance: none;
}

.anph__search-input::placeholder {
    color: var(--anph-input-placeholder);
}

/* remove the browser's clear ("×") button inside <input type="search"> */
.anph__search-input::-webkit-search-decoration,
.anph__search-input::-webkit-search-cancel-button,
.anph__search-input::-webkit-search-results-button,
.anph__search-input::-webkit-search-results-decoration {
    display: none;
}

.anph__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--anph-accent);
    cursor: pointer;
    padding: .4rem .55rem;
    border-radius: var(--anph-radius-pill);
    transition: opacity var(--anph-transition);
    line-height: 1;
}

.anph__search-btn:hover,
.anph__search-btn:focus-visible {
    opacity: .7;
}

.anph__search-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

/* ── Category filter pills ── */
.anph__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 860px;
}

.anph__pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--anph-white);
    border: 1.5px solid var(--anph-pill-border);
    border-radius: var(--anph-radius-pill);
    padding: .38rem .85rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--anph-transition),
    color var(--anph-transition),
    border-color var(--anph-transition);
}

.anph__pill:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--anph-white);
}

.anph__pill--active {
    background: var(--anph-white);
    color: var(--anph-bg);
    border-color: var(--anph-white);
}

.anph__pill--active:hover {
    background: rgba(255, 255, 255, .88);
}

/* ── Responsive ── */
@media (min-width: 768px) {
    .anph {
        padding: 4rem 2.5rem;
        gap: 1.75rem;
    }
}

@media (max-width: 600px) {
    .anph {
        padding: 2rem 1rem;
        gap: 1.25rem;
    }

    .anph__search-wrap {
        width: 100%;
    }

    .anph__title {
        font-size: 1.5rem;
    }

    .anph__filters {
        gap: .4rem;
    }
}