/* ======================================== */
/* CASE HISTORIES ARCHIVE */
/* ======================================== */

section.case-histories-archive .hero .container {
    display: flex;
    flex-direction: column;
    gap: 2.8125rem;
    padding-block: 9.375rem 4.6875rem;
}

section.case-histories-archive .hero .title {
    font-size: 7.96875rem;
    font-weight: 900;
    line-height: 0.823529;
    text-align: center;
    text-transform: uppercase;
}

section.case-histories-archive .hero .search {
    border-block-end: 1px solid #4e4e4e;
    display: flex;
    align-items: center;
    padding-block-end: 0.515625rem;
    max-inline-size: 46.5rem;
    margin-inline: auto;
}

/* Sized like the case description rather than like a form field: this is the one
   input on the page that reads as body copy. */
section.case-histories-archive .hero .search input {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    text-box: none;
    font-family: var(--ff-tertiary);
    font-size: 1.03125rem;
    line-height: 1.272727273;
    font-weight: 400;
}

section.case-histories-archive .hero .search input::placeholder {
    font-size: inherit;
    font-weight: inherit;
}

section.case-histories-archive .hero .search input:focus {
    border: none;
}

section.case-histories-archive .hero .search svg {
    flex-shrink: 0;
}

section.case-histories-archive .hero .search-submit {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    cursor: pointer;
    color: inherit;
}

section.case-histories-archive .pagination {
    font-size: 2.109375rem;
    line-height: 1.211111;
    letter-spacing: 0.05em;
    font-weight: 400;
    text-align: center;
    padding-block: 2.90625rem 3.234375rem;
}

/* Continuous line under the numbers: a border on the ul, which is sized to its
   content (fit-content + auto margins) so it spans only the pagination, not the
   full row. A per-.page underline would be broken up by the flex gaps. */
section.case-histories-archive .pagination .eg-pagination ul {
    inline-size: fit-content;
    margin-inline: auto;
    gap: 0;
    border-block-end: 2px solid currentColor;
    padding-block-end: 0;
}

/* The numbers are spaced by padding on the items, not by a gap on the row: a gap
   would break the continuous line the border above draws under them. */
section.case-histories-archive .pagination .eg-pagination li {
    padding-inline: 0.5rem;
}

section.case-histories-archive .pagination .eg-pagination button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

/* Previous/Next render as arrows; their labels live in a .sr-only span. */
section.case-histories-archive .pagination .eg-pagination .page-btn-prev::after {
    content: "<";
}

section.case-histories-archive .pagination .eg-pagination .page-btn-next::after {
    content: ">";
}

section.case-histories-archive .filters-bar {
    --_constants-height: 1.75rem;
    z-index: 999;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 6.25rem;
    block-size: 2.8125rem;
    background-color: rgb(98 98 98 / 0.8);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--ff-tertiary);
    padding-inline: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: safe center;
    border-radius: 99999px;
    inline-size: fit-content;
    max-inline-size: min(81.25rem, 100vw - var(--container-gap) * 2);
    margin-inline: auto;
    backdrop-filter: blur(10px);
}

section.case-histories-archive .filters-bar-constant {
    display: flex;
    align-items: end;
    gap: 0.3125rem;
    flex-shrink: 0;
    block-size: var(--_constants-height);
}

section.case-histories-archive .filters-bar-label {
    min-inline-size: 3.625rem;
    block-size: var(--_constants-height);
    text-align: center;
    display: grid;
    place-items: center;
}

section.case-histories-archive .filters-bar-children-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 0fr;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
    text-wrap: nowrap;
}

section.case-histories-archive .filters-bar-children-scroll {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0.3125rem;
    margin-block: auto;
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    appearance: none;
    border: none;
    color: black;
    cursor: pointer;
    background-color: rgb(252 252 252 / 0.8);
}

section.case-histories-archive .filters-bar-children-scroll[hidden] {
    display: none;
}

section.case-histories-archive .filters-bar-children-wrapper > div {
    min-inline-size: 0;
}

section.case-histories-archive .filters-bar-value {
    background-color: rgb(252 252 252 / 0.8);
    border-radius: 0.9375rem;
    color: black;
    text-transform: uppercase;
    display: flex;
    flex-direction: column-reverse;
    padding-inline: 0.75rem;
}

section.case-histories-archive .filters-bar-selected-value {
    font-size: 0.875rem;
    line-height: 1.428571;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: var(--_constants-height);
}

/* The panel collapses on both axes, not just vertically: while closed it must not
   lend its widest voice to the pill, which otherwise stays as wide as "Mostra tutti"
   even when it only reads "Filtro". Same 0fr/1fr mechanic as the children row. */
section.case-histories-archive .filters-bar-options {
    display: grid;
    grid-template-rows: 0fr;
    grid-template-columns: 0fr;
    overflow: hidden;
    text-wrap: nowrap;
    transition:
        grid-template-rows 0.3s ease,
        grid-template-columns 0.3s ease;
}

section.case-histories-archive .filters-bar-options > div {
    min-block-size: 0;
    min-inline-size: 0;
}

/* Flush left, ragged right: the voices line up on one edge instead of each one
   being centred on its own. */
section.case-histories-archive .filters-bar-options-content {
    padding-block: 0.8125rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.625rem;
    text-align: start;
}

section.case-histories-archive .filters-bar-selected-value,
section.case-histories-archive .filters-bar-option,
section.case-histories-archive .filters-bar-children-content button {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: start;
    padding: 0;
    cursor: pointer;
}

section.case-histories-archive .filters-bar-selected-value {
    font-weight: 800;
    text-transform: uppercase;
}

section.case-histories-archive .filters-bar-option {
    text-align: start;
    text-transform: uppercase;
}

section.case-histories-archive .filters-bar-selected-value svg {
    transition: rotate 0.3s ease;
}

section.case-histories-archive .filters-bar-selected-value[aria-expanded="true"] svg {
    rotate: 180deg;
}

section.case-histories-archive .filters-bar-options.is-open {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

section.case-histories-archive .filters-bar-children-wrapper.is-open {
    grid-template-columns: 1fr;
}

section.case-histories-archive .filters-bar-children-content {
    display: flex;
    align-items: center;
    gap: 1.0625rem;
    padding-inline: 0.75rem;
    block-size: var(--_constants-height);
    overflow: auto;
    scrollbar-width: none;
}

section.case-histories-archive .filters-bar-children-content[hidden] {
    display: none;
}

section.case-histories-archive .filters-bar-children-content::-webkit-scrollbar {
    display: none;
}

section.case-histories-archive .filters-bar-children-content button {
    text-transform: uppercase;
    white-space: nowrap;
}

/* Weight, not an underline, is the state on both rows of the bar: hovering a
   voice — or being the applied filter — takes it to the same weight the selected
   value carries. */
section.case-histories-archive .filters-bar-children-content button:where(:hover, :focus-visible),
section.case-histories-archive .filters-bar-children-content button.is-active,
section.case-histories-archive .filters-bar-option:where(:hover, :focus-visible) {
    font-weight: 800;
}

/* These sit in a scrolling row and a stacked list, where a voice growing on hover
   would shove its neighbours along, so they carry .eg-weight-lock (see UTILS in
   style.css) and reserve the bold width up front. The lock defaults to 900; here
   the hover weight is 800. */
section.case-histories-archive .filters-bar .eg-weight-lock {
    --eg-weight-lock: 800;
}

section.case-histories-archive .posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
}

section.case-histories-archive .posts .card-size-large,
section.case-histories-archive .posts .card-case-history:only-child {
    grid-column: 1 / -1;
}

section.case-histories-archive .eg-archive-no-results {
    grid-column: 1 / -1;
    text-align: center;
}

@media (max-width: 768px) {
    section.case-histories-archive .hero .container {
        padding-block: 7.8125rem 3.125rem;
        gap: 1.6875rem;
    }

    /* Match the single case "Approfondisci" pill's distance from the bottom. */
    section.case-histories-archive .filters-bar {
        inset-block-end: 2.375rem;
        transition: translate 0.4s ease, opacity 0.4s ease;
    }

    /* Tuck below the viewport once the footer scrolls in (JS toggles .is-tucked). */
    section.case-histories-archive .filters-bar.is-tucked {
        translate: 0 calc(100% + 2.375rem);
        opacity: 0;
        pointer-events: none;
    }

    section.case-histories-archive .hero .title {
        font-size: 2.8125rem;
        line-height: 0.777777778;
    }

    section.case-histories-archive .hero .search {
        border-block-end-width: 1px;
        max-inline-size: 17.0625rem;
    }

    /* Matches the case description at this width, as on desktop. */
    section.case-histories-archive .hero .search input {
        font-size: 1rem;
        line-height: 1.125;
    }

    section.case-histories-archive .pagination .eg-pagination li {
        padding-inline: 0.375rem;
    }

    section.case-histories-archive .posts {
        display: block;
    }

    section.case-histories-archive .pagination {
        padding-block: 0 1.875rem;
        font-size: 1.546875rem;
        line-height: 1.212121;
        letter-spacing: 0.2em;
    }
}

/* ======================================== */
/* MOBILE PRESERVATION */
/* ======================================== */

/*
 * The hero search padding is the one base value the mobile layout inherits from
 * the (now 1440-scaled) desktop rules without an override of its own; restore
 * the original size so the mobile rendering is unchanged.
 */
@media (max-width: 768px) {
    section.case-histories-archive .hero .search {
        padding-block-end: 0.6875rem;
    }
}