/* ==========================================================================
   Catalogue — the opening band, the lifted filter bar, the card, the pager.

   Written on the role tokens of site.css §10 and on its components: the card is
   `.card` (§10) e `.property-card` (§27.5.7), i campi dei filtri sono `.sbox__f`,
   `.sbox__l` e `.sbox__i` (§27.5.1), le pastiglie sono `.chips`, l'impaginazione
   è `.pager`. What is here is the composition — the band rhythm, the grid, quanti
   campi stanno in una riga — plus the handful of rules that the shapes the tests
   pin need in order to look like the components they are.

   SI LEGGE DAL FONDO. Il foglio è append-only: ogni sezione nuova vince su quelle
   prima per ordine di sorgente, e le vecchie restano scritte con le loro misure e
   le loro ragioni. La §10 è l'ultima parola — è il mockup del committente — e le
   §1–§9 raccontano da dove si veniva.

   Two markup facts the tests pin, and this file must not tempt anyone to change
   them: the class attribute of the card link is exactly `property-card__link`,
   and the current page is a <span> whose class ends `pagination__link--current`.
   The class attributes of the form and of its <details> are pinned too, which is
   why the lifted bar of docs/DESIGN.md §4 is styled here under those names
   instead of carrying `.fbar` — same recipe, same tokens, and it must not drift
   from site.css §12.

   THE PROPERTY CARD IS SHARED. templates/partials/property-card.html.twig is
   included by the catalogue and by the experience page: §3 of this file is its
   stylesheet. A page that includes the partial loads this file.
   ========================================================================== */

/* How far the filter bar climbs into the band above it. Declared on both bands
   because they are siblings: the dark one reserves the room in its padding, the
   white one spends it in a negative margin. */
.catalog__open,
.catalog__list { --catalog-overlap: clamp(1.75rem, 4vw, 2.75rem); }

/* -------------------------------------------------- 1. the opening, dark */

/* Not the 96/130px rhythm of a mid-page band: this one sits under the header and
   the breadcrumbs, and the bar that overlaps it is what gives it its floor. */
.catalog__open {
    padding-top: clamp(2.25rem, 5.5vw, 4rem);
    padding-bottom: calc(clamp(2.75rem, 6vw, 4.25rem) + var(--catalog-overlap));
}

.catalog__open-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
}

/* The figure moves beside the title only when there is room for both: under
   52rem it stays where it reads, under the description. */
@media (min-width: 52rem) {
    .catalog__open-in {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 3rem;
    }
}

.catalog__open-text { min-width: 0; }

.catalog__open h1 {
    font-size: clamp(2.4rem, 6.2vw, 4.6rem);
    max-width: 20ch;
    margin-top: 0;
    font-variation-settings: 'opsz' 144;
}

.catalog__intro {
    margin-bottom: 0;
    max-width: 44ch;
}

/* The result count, as the figure of docs/DESIGN.md §5: the markup carries the
   final number and site.js counts up to it. `.rescount` owns the type; the padding
   belongs to the band, not to the figure. */
.catalog__figure {
    padding: 0;
    margin: 0;
}

.catalog__figure b { color: var(--heading); }

.catalog__figure span { max-width: 12ch; }

/* --------------------------------------------------- 2. the filter bar */

/* The white band starts at the bar, and the bar is pulled up out of it: the
   section keeps no top padding of its own.

   `display: flow-root` is what makes that true, and it is a bug fix.

   The overlap is a negative top margin on `.catalog__tools`, which is the first
   in-flow descendant of a section with no top padding and no border — so the
   margin COLLAPSED THROUGH the section and moved the white band itself up by the
   28px instead of lifting the bar out of it. Measured at 390 before the fix:
   `.catalog__list` began at y=469.7, exactly the top edge of the bar, and the
   dark band's painted ground ended there too. The bar sat flush on the seam at
   every width instead of straddling it, and the one element that belongs to both
   bands belonged to neither. flow-root gives the section its own formatting
   context, so the margin has nothing to collapse with: the white band starts at
   497.7 where the dark band ends, and 28px of the bar are over the dark ground —
   which is the whole point of the composition (docs/DESIGN.md §4). */
.catalog__list {
    display: flow-root;
    padding-top: 0;
    padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

/* With no grid under it the band has nothing left to hold up: the empty state
   below is the one that gets the room. */
.catalog__list--empty { padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.catalog__tools {
    position: relative;
    z-index: 5;
    margin-top: calc(-1 * var(--catalog-overlap));
}

.filters {
    display: block;
    position: relative;
}

/* The lifted card. Same recipe as `.fbar` in site.css §12 — card ground, the
   deep shadow, the large radius — under the name tests/Functional/CatalogTest
   pins on the <details>. */
.filters__details {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    box-shadow: var(--sh-2);
    padding: 0.5rem;
}

/* On a phone the whole panel folds and the summary says how many filters are on:
   with the panel shut, that number is the only thing that remembers the list is
   filtered. */
.filters__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* The chevron disc is 30px and it sets the height of the row, so the padding
       comes down to keep the shut bar at the 62px it measured before the disc
       existed: 30 + 8 + 8 = 46px of summary, still over the 44px floor, inside a
       card whose own padding is the remaining 8. */
    padding: 0.5rem 0.9375rem;
    border-radius: var(--radius);
    font-family: var(--m);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: background 0.2s;
}

.filters__summary::-webkit-details-marker { display: none; }
.filters__summary::marker { content: ''; }
.filters__summary:hover { background: var(--ground-2); }
.filters__summary:focus-visible { outline-offset: -3px; }

/*
    WHAT THE CLOSED BAR HAS TO DO, and it was not doing it.

    Shut, on the white band, the bar was a white card with 11px of grey mono at
    one end and a 8px hairline chevron at the other: measured 350x62 at 390 with
    ink on 6% of it. On a phone that is the only way into the filters and it read
    as a card that had failed to load rather than as a control.

    Three things, and no new markup except the icon: the sliders glyph in blue,
    because blue is what this site uses to say "you can act on this"
    (docs/DESIGN.md §2); the chevron inside a filled disc, so the right end of the
    strip has a visible target; and a hairline under the summary once it is open,
    so the panel below reads as the contents of the fold and not as more bar.
*/
.filters__summary svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: 0 0 auto;
    stroke: var(--accent);
    stroke-width: 1.6;
    fill: none;
}

.filters__details[open] .filters__summary {
    border-bottom: 1px solid var(--hair);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.filters__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 99px;
    background: var(--fill);
    color: var(--fill-text);
    font-size: 10.5px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* The disc is the box and the arrow is drawn on ::after, so the rotation turns
   the arrow and not the disc. */
.filters__chevron {
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 50%;
    background: var(--ground-2);
    display: grid;
    place-items: center;
    transition: background 0.2s;
}

.filters__chevron::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(45deg) translate(-25%, -25%);
    transition: transform 0.24s var(--e);
}

/* The summary's own hover fill IS `--ground-2`, so the disc has to change too or
   it vanishes into it: it takes the card ground and the two swap places. */
.filters__summary:hover .filters__chevron { background: var(--card); }

.filters__details[open] .filters__chevron::after { transform: rotate(-135deg); }

/*
    One column on a phone — except for the two prices, which are ONE filter and
    are laid out as one.

    Six full-width rows made the open panel 555px tall at 390, on a 844px screen,
    with «Applica i filtri» 120px below the fold; and «Prezzo minimo €» over
    «Prezzo massimo €» read as two unrelated questions rather than as a band. The
    grid is therefore two tracks from the start and everything that is not a price
    spans both: the pair costs one row instead of two, the panel loses 69px, and
    the range looks like a range. From 32rem the rule below takes over unchanged.
*/
.filters__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
}

.filters__field--search,
.filters__field--choice,
.filters__apply { grid-column: 1 / -1; }

.filters__field { min-width: 0; }

/*
    THE VALUES OF THE BAR SIT ON ONE LINE, whatever the label above them does.

    «Riferimento o parola chiave» wraps to two lines in the search cell of the
    1400px row — «Objektnummer oder Suchbegriff» wraps in German too — and because
    the cells are stretched to equal height but their content is top-aligned, that
    one wrapped label pushed «Cerca» 16px below «Tutte», «€», «€» and «Più
    recenti». The row lost its line.

    The control takes the auto margin instead: in a stretched cell the bottom edges
    already agree, so bottom-aligning the control aligns every value in the row.
    In the single-column layout the cell is content-sized and this does nothing at
    all, which is why it is declared once here and not inside a media query.
*/
.filters__panel > .fc {
    display: flex;
    flex-direction: column;
}

.filters__panel > .fc input,
.filters__panel > .fc select { margin-top: auto; }

/* The separators belong to the single row and nowhere else: in a two or four
   column grid they would take a cell of their own. site.css turns them on at
   62.5rem, so they are turned off again here until the row exists. */
.filters__panel > .fdiv { display: none; }

.filters__panel input,
.filters__panel select { text-overflow: ellipsis; }

/* type=search brings a rounded field and a cancel button of its own in Safari. */
.filters__panel input[type='search'] { appearance: none; }
.filters__panel input[type='search']::-webkit-search-decoration,
.filters__panel input[type='search']::-webkit-search-cancel-button { appearance: none; }

.filters__field--band input { font-family: var(--m); font-variant-numeric: tabular-nums; }

/* An empty field with no border of its own is invisible: the placeholder is the
   only thing that says the two price cells are fields. */
.filters__panel input::placeholder { color: var(--text-3); opacity: 1; }

/* From 32rem the two choices pair off as well, and the panel is the two-column
   grid it has always been from here up. */
@media (min-width: 32rem) {
    .filters__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters__field--choice { grid-column: auto; }
    .filters__field--search,
    .filters__apply { grid-column: 1 / -1; }
}

@media (min-width: 62.5rem) {
    .filters__panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filters__field--search { grid-column: span 2; }
    .filters__apply { grid-column: auto; }
}

/* The bar of the mockup: one row, the fields divided by hairlines, the button
   full height at the end. Flex and not a track list, because the type and the
   zone fields are only there when those values occur — a fixed set of tracks
   would put a field into a 1px column the day a category has no zones. */
@media (min-width: 78rem) {
    .filters__panel {
        display: flex;
        align-items: stretch;
        gap: 0.25rem;
    }

    .filters__panel > .fc { flex: 1 1 0; }
    .filters__panel > .fdiv { display: block; flex: 0 0 1px; }
    .filters__field--search { flex-grow: 2.1; }

    /*
        THE PRICE FIELDS NEED A FLOOR, and this is the other half of the same
        report: "se scrivo sul campo mi fa inserire solo 3 cifre".

        Nothing limited the input — it is `type="text" maxlength="12"` and it always
        accepted a whole price. What limited it was this row. With `flex: 1 1 0` the
        basis is zero, so every cell's width is pure proportion, and 0.8 of a row
        that also carries search at 2.1 plus type, zone, sort and the button left
        the two price cells about three mono digits wide. You could type 1250000;
        you could only ever SEE 125.

        `min-width` is the fix and the number is not arbitrary: «1.250.000» is nine
        characters of tabular mono plus the 30px of cell padding, which is what a
        Tuscan villa costs and therefore the width the field has to hold. flex-basis
        stays auto so the cell starts from its content rather than from nothing.
    */
    /* `.filters__panel > .fc` in site.css sets `flex: 1 1 0` and beats a single
       class, so the child selector is repeated here or the basis stays at zero. */
    .filters__panel > .filters__field--band {
        flex: 0 1 auto;
        min-width: 9.5rem;
    }

    .filters__apply { flex: 0 0 auto; }

    /*
        A TOURIST-LET BAR CARRIES SEVEN CELLS, not five, and the two extra ones do
        not want the same width.

        The 9.5rem floor above is the price of a Tuscan villa — «1.250.000» in
        tabular mono — and it is right for a price and wrong for both of these. A
        party size is one digit and looked absurd in a cell sized for nine; two
        date fields at the price floor plus everything else overflowed the row at
        1280 and pushed «Applica i filtri» over the sort cell.

        So: a floor each, measured on what the field actually holds, and the row is
        allowed to wrap. The wrap is a safety net rather than a layout — at every
        width where this bar is a row the seven cells fit — but a German label or a
        narrow laptop must produce a second line, never a button on top of a field.
    */
    .filters__panel { flex-wrap: wrap; }

    /* One or two digits and a spinner. */
    .filters__panel > .filters__field--guests { min-width: 6rem; }

    /* `gg/mm/aaaa` plus the browser's own calendar button, which Chrome and Safari
       both draw inside the field and neither lets you measure. */
    .filters__panel > .filters__field--date { min-width: 10.5rem; }

    /* A date input ignores the row's bottom alignment on its own — it has an
       intrinsic height the other controls do not — so it takes it explicitly. */
    .filters__panel input[type='date'] { min-height: 1.5rem; }
}

/* From 62.5rem the fold is gone and the panel is simply open, and there is no
   JavaScript in it. ::details-content is the only way for CSS to reveal the
   content of a closed <details>, so the summary is hidden ONLY inside the
   @supports that guarantees the reveal: an engine without it keeps the fold,
   which is what the phone does anyway, and never an unreachable filter.

   62.5rem AND NOT 48rem, and the number is the panel's own layout. Under 62.5rem
   the panel is at most two columns: at 768 that is five stacked rows, and the
   forced-open bar measured 365px tall — a third of an iPad's screen — which put
   the first photograph at y=899 on a 1024px-tall screen. A visitor on a tablet
   met a form where the houses should be. At 62.5rem the panel becomes the compact
   four-column card and is worth showing open; under it, the fold is the better
   shape at every width, and a shut «Filtri» bar is 62px instead of 365. */
@supports selector(details::details-content) {
    @media (min-width: 62.5rem) {
        .filters__summary { display: none; }

        .filters__details::details-content {
            content-visibility: visible;
            block-size: auto;
        }
    }
}

/* The filters in force. Each × is a link to the same list without that one
   filter, so it works with the script off. */
.filters__chips { margin-top: 1.125rem; }

.filters__chips .chip {
    max-width: 100%;
    overflow: hidden;
}

/*
    THE × IS A CONTROL AND IT WAS 18x18. Measured over CDP at 390 with touch
    emulation: `.chip__x` came out 18x18 CSS px, under the 24px floor of WCAG 2.5.8
    and less than half of what a thumb is aimed at — on the one link that undoes a
    filter. site.css §14 fixed the site's small targets but this one lives here, in
    the catalogue's own stylesheet, and was missed.

    30px round, and the disc is drawn rather than implied: it is the second visible
    control inside a dark pill, so it has to look like one. On touch the pill itself
    goes to 44 and the × with it, which buys the height without inflating the chip
    for a mouse.
*/
.filters__chips .chip__x {
    flex: 0 0 auto;
    width: 1.875rem;
    height: 1.875rem;
    margin-inline-end: -0.375rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    background: rgba(255, 255, 255, .1);
    transition: background 0.2s, color 0.2s;
}

.filters__chips .chip__x:hover { background: rgba(255, 255, 255, .2); }

.filters__chips .chip__x:focus-visible { outline-offset: 1px; }

/* 30 + 7 + 7 = 44 exactly: the pill grows to the guideline and not past it, and
   the × keeps the 30px disc it has everywhere else. */
@media (hover: none) {
    .filters__chips .chip,
    .filters__chips .chip--off {
        min-height: 44px;
        padding-block: 0.4375rem;
    }
}

/* ------------------------------------------------------- 3. the card

   Shared: the experience page includes the same partial. The classes of site.css
   §10 do the work — surface, hover lift, eyebrow, price, chips — and these rules
   are what the <span> elements of a card that is one single <a> need on top:
   a block box where the system assumed a <div>, and the frame that crops. */

.property-card {
    min-width: 0;
    height: 100%;
}

.property-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
    color: inherit;
}

/* Inset, not offset: the card clips its content, and a ring drawn outside the
   link would be cut off by the card's own overflow. */
.property-card__link:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.property-card__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ph-a);
}

/* A portrait photograph is cropped, never squashed, and the placeholder occupies
   exactly the same box. */
.property-card__frame > img,
.property-card__frame > .image--missing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A long property type must not run the width of the photograph. */
.property-card__frame .badge {
    max-width: calc(100% - 1.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* The title is an <h2> on the catalogue — the only heading above it is the page
   h1 — and an <h3> in the experience page's grid. Its size therefore cannot come
   from the tag: `.card h3` in site.css would style one of the two and leave the
   other at the document's h2 size, which is twice the price and turns the card
   upside down. It is the card's title on both, and the price stays the largest
   thing in the cell.

   Two lines and then an ellipsis. The whole title stays in the DOM for whoever
   listens to the page: it is clipped, not cut. */
.card .property-card__title {
    margin: 9px 0 0;
    font-size: 1.2rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* `.card__p` is a <p> in the system and a <span> here, and that is the whole rule:
   without a box of its own an inline element simply drops the margins `.card__p`
   gives it. The size and the spacing belong to §6, and the floor of the card is
   the chips row there — one auto margin in a flex column, never two, or the free
   space is split between them and the cell spreads out for no reason. */
.property-card__price { display: block; }

.property-card__reference { color: var(--text-3); }

/* ------------------------------------------------------ 4. the results */

.catalog__state {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.25rem, 3vw, 1.75rem);
    font-family: var(--m);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.catalog__state-count {
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.catalog__state-page::before {
    content: '·';
    margin-right: 0.75rem;
}

.catalog__cell { min-width: 0; }

/* --------------------------------------------------------- 5. the pager */

.pagination { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* `.pager` in site.css styles the links; these three rules are the shapes it
   does not know about — the current page is a <span> and not a link, and the
   gap is an <li>. */
.pagination__list { padding-top: 0; }

.pager .pagination__link--current {
    background: var(--fill);
    border-color: var(--fill);
    border-style: solid;
    color: var(--fill-text);
    font-weight: 500;
}

.pager .pagination__link--step {
    grid-auto-flow: column;
    align-items: center;
    gap: 0.4375rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
}

.pagination__link--step svg {
    width: 0.875rem;
    height: 0.875rem;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.pagination__gap {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 2.75rem;
    color: var(--text-3);
    font-family: var(--m);
}

/*
    The border `.pager` inherits is `--line` (#dde5e9, 1.28:1 on white). On a
    hairline under a heading that is right; on a button it is not a visible edge,
    and docs/DESIGN.md §9.3 declares `--line-2` for exactly this — "borders you
    must be able to see: form fields, ghost buttons, outline chips". A page number
    is an outline button, and at 1.28:1 seven of them read as a row of ghosts
    beside the one solid blue current page.
*/
.pager .pagination__link { border-color: var(--line-2); }

/*
    ONE ROW OF NUMBERS, THEN THE TWO STEPS — because the wrap was scattering them.

    Measured at 390 with five pages: the strip is 350px wide and the seven cells
    come to 468px, so it wrapped wherever it happened to run out — «Precedente 1
    [2] 3 4» on the first line and «5 Successiva» on the second. The two controls a
    thumb actually goes for ended up on different rows, one of them orphaned beside
    a number. With three pages, which is where this agency will be by the spring,
    «Successiva» wraps on its own.

    Under 40rem the numbers keep the first row, in reading order, and the two steps
    take a row of their own and share it half and half. The line break is a flex
    item of zero height ordered between them: a wrapping flex line is the only way
    to break a single <ul> in two without a second list in the markup, and 100% of
    the main axis is what makes a line break. It costs one row gap.
*/
@media (max-width: 39.99rem) {
    .pagination__list::before {
        content: '';
        order: 1;
        flex: 0 0 100%;
        height: 0;
    }

    .pagination__step {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
    }

    .pagination__step .pagination__link--step { padding: 0 0.875rem; }
    .pagination__step .pagination__link--step[rel='prev'] { justify-content: flex-start; }
    .pagination__step .pagination__link--step[rel='next'] { justify-content: flex-end; }
}

/* --------------------------------------------- 6. nothing to show, on paper */

/* The empty state is the band, and it says so plainly: what happened, what to do
   about it, and one way out that is a real address. */
.catalog__nothing h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    max-width: 26ch;
}

.catalog__nothing .lead { max-width: 52ch; }

.catalog__ways {
    display: grid;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.catalog__ways .arrow { font-size: 12.5px; }

/* ==========================================================================
   6. Typographic scale of the card, corrected.

   The card inherited the system's sizes — title 1.2rem, price 1.6rem — which are
   right for a two-up band on the home and too loud in a three-column grid where
   twelve of them are on screen at once. The owner said so looking at the sale and
   rental pages, and he is right: at that size the type competes with the
   photographs instead of captioning them, and a catalogue is photographs.

   Everything here is a step down, not a redesign: the hierarchy is unchanged and
   the price is still the largest thing in the cell.
   ========================================================================== */

.card .property-card__title {
    font-size: 1.0625rem;
    line-height: 1.34;
    letter-spacing: -0.015em;
}

/*
    TWO LINES ARE RESERVED ONLY WHERE THERE IS A ROW TO KEEP LEVEL.

    `min-height: 2.68em` exists so that the prices of the cards beside each other
    line up when one title runs to two lines and its neighbour does not. Under
    40rem the grid is a single column and there is no neighbour — the reservation
    buys nothing and costs a hole: measured at 390, a one-line title left 24.5px of
    empty space under the last word and 38.5px between that word and the price,
    against 15.7px for a two-line title. Six of the seven listings on /it/vendita/
    have a one-line title on a phone, so the fault was on six cards out of seven —
    and it reads as a card that has lost a line rather than as spacing.
*/
@media (min-width: 40rem) {
    .card .property-card__title { min-height: 2.68em; }
}

.property-card__price {
    font-size: 1.3125rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.8125rem;
}

.property-card__price.card__p--request {
    font-size: 0.9375rem;
    letter-spacing: 0;
}

.property-card__place,
.property-card .card__loc {
    font-size: 0.625rem;
    letter-spacing: 0.13em;
}

.property-card__body { padding: 1rem 1.0625rem 1.0625rem; }

.property-card__body > .card__d {
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.8125rem;
}

.property-card__body > .card__d .dc {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

/*
    THE STEP DOWN IS FOR THE THREE-COLUMN GRID, WHICH IS WHERE THE COMPLAINT WAS
    MADE — and it was being applied to the phone as well, where it is backwards.

    Measured cell widths: 280px at 320, 350px at 390, 352px at 768, 421px at 1400.
    The phone's card is the same size as the two-up tablet card and BIGGER than
    nothing else on the page — yet it was getting the small step meant for twelve
    cards on a desktop screen, while the 352px tablet cell got the large one. The
    widest cell had the smallest type and the narrowest cell had it too.

    So the large step now covers everything under three columns, phone included:
    title 18px, price 23px, and the mono eyebrow and the chips back at the sizes
    site.css §10 gives them (10px was half a step under the system's own 10.5 and
    11, on the eyebrow that names the locality — the second thing a buyer reads).
    The three-column grid keeps the stepped-down scale exactly as approved.
*/
@media (max-width: 66.24rem) {
    .card .property-card__title { font-size: 1.125rem; }
    .property-card__price { font-size: 1.4375rem; }
    .property-card__price.card__p--request { font-size: 1.0625rem; }

    .property-card__place,
    .property-card .card__loc { font-size: 0.6875rem; }

    .property-card__body > .card__d .dc { font-size: 0.6875rem; }
}

/* ==========================================================================
   §7. THE REFINEMENT PASS — the catalogue, brought up to site.css §24

   The catalogue prints the shared card, so most of §24 arrives here for free.
   What does not is the photograph's frame — the ring is declared on
   `.property-card__frame` in `parts/property.css`, which this page does not load
   — and the filter panel, which is this file's own component and is the first
   thing on the page.
   ========================================================================== */

/* The same ring every other photograph on the site now carries. Declared here
   as well as in property.css because the two pages load different files and the
   card is shared between them: a photograph must not have an edge on the
   property page and none on the catalogue. */
.property-card__frame {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
}

/* ---- the filter panel ---------------------------------------------------

   Under 1000px the bar collapses into a `<details>` with a summary that reads
   «Filtri · 2 attivi». It is the control that decides what the page shows and it
   was a bordered rectangle. */

.filters__details {
    border-radius: var(--radius-l);
    box-shadow: var(--sh), inset 0 0 0 1px var(--edge);
}

.filters__chevron {
    box-shadow: inset 0 0 0 1px var(--edge-2);
    transition: background-color .2s, box-shadow .2s;
}

.filters__count {
    background-image: linear-gradient(180deg, var(--fill-top), var(--fill));
    box-shadow: var(--fill-sheen);
}

/* The chips that say which filters are on. `.chip` got its sheen in §24.8; these
   are the catalogue's own overrides of it and they have to carry it too or the
   page prints two different pills. */
.filters__chips .chip {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(8, 22, 29, .16);
}

/* The count line above the grid. */
.catalog__state { letter-spacing: 0.18em; }

.catalog__figure b {
    font-variation-settings: 'opsz' 96;
    letter-spacing: -0.035em;
}

.catalog__open h1 {
    letter-spacing: -0.038em;
    font-variation-settings: 'opsz' 144;
}

/* --------------------------------- the unit under a nightly price

   «€ 140 a notte»: the amount stays the price — the largest, darkest text on the
   card — and the unit rides beside it at the weight of a chip. Making them the
   same size would have turned a price into a sentence; dropping the unit would
   have turned a week into a night by a factor of seven. */
.property-card__unit {
    font-family: var(--m);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-3);
    /* Never on a line of its own: a wrapped unit reads as a second figure. */
    white-space: nowrap;
}

/* ==========================================================================
   8. LA BARRA DEI FILTRI NELLA LINGUA DEL PANNELLO

   Misurato prima di toccarlo, perché a occhio sembrava un difetto e non lo era:
   a 1440 la card sta a 64…1376, la riga interna a 73…1367, il bottone a
   1228…1363. Il bottone è DENTRO. Quello che si vede non è un traboccamento: è
   un controllo alto quanto tutta la card, con il suo angolo a 12px, che finisce
   a tredici pixel dall'angolo a 20px della card che lo contiene. Due raggi
   diversi a tredici pixel di distanza si leggono come un pezzo che non entra.

   Nel pannello un controllo dentro una barra è alto quanto i campi accanto a
   lui, non quanto la barra: la riga ha UNA altezza e tutti la rispettano. È
   quello che si porta qui.
   ========================================================================== */

@media (min-width: 78rem) {
    /*
        IL BOTTONE SMETTE DI ESSERE ALTO QUANTO LA CARD.

        `.filters__panel` è `align-items: stretch`, quindi ogni cella prende
        tutta l'altezza della riga; per un campo va bene — la §7 allinea i
        controlli in basso con `margin-top: auto` — e per un bottone no, perché
        il bottone non ha un'etichetta sopra da cui staccarsi: è il controllo e
        basta. Allineato in basso, il suo bordo inferiore cade sulla stessa riga
        di quello dei campi, che è l'unica cosa che la barra doveva promettere.
    */
    .filters__apply {
        align-self: end;
        border-radius: var(--radius-s);
    }
}

/* La card guadagna il respiro che il raggio le chiedeva. Dodici pixel fra un
   controllo e l'angolo di una card da 20 sono pochi: a 16 l'angolo torna a
   essere un angolo invece che il posto dove finisce il bottone. */
.filters__details { padding: 0.75rem; }
.filters__panel { padding: 0; }

/* Le pastiglie dei filtri accesi hanno preso il pieno azzurro in site.css §26.2.
   Questi sono gli scavalchi del catalogo sulla stessa classe e devono portare la
   stessa luce, o la pagina stampa due pastiglie diverse. */
.filters__chips .chip:not(.chip--off) {
    background-image: linear-gradient(180deg, var(--fill-top), var(--fill));
    box-shadow: var(--fill-sheen), var(--fill-glow);
}

.filters__chips .chip__x { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   9. IL RIDISEGNO DEL CATALOGO — testata chiara, card del pannello

   Tre cose cambiate nel template, e questo blocco è la loro metà visiva:

   · L'APERTURA HA PERSO LA BANDA NOTTE. Nessuna fotografia sotto, quindi era
     colore per il colore, e si prendeva la prima schermata — quella in cui uno
     vuole già vedere le case. La gerarchia adesso la fanno due fondi chiari:
     bianco sulla testata, carta sulla lista, con le card bianche sopra.
   · LA CARD HA LA FOTOGRAFIA DENTRO, non attaccata al bordo.
   · LA TIPOLOGIA È SCESA DALLA FOTOGRAFIA, e la riga dei dati ha i pittogrammi.

   Le sezioni 1–8 restano dove sono: queste regole vincono per ordine di sorgente,
   che è la convenzione del foglio.
   ========================================================================== */

/* ------------------------------------------------- 9.1 la testata chiara */

.catalog__open {
    background: var(--ground);
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    /* Il fondo sotto la barra dei filtri è quello della lista: la barra non
       cavalca più due bande, quindi non le serve né lo spazio per farlo né
       l'ombra profonda che la teneva staccata dal nero. */
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.catalog__open-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: end;
}

@media (min-width: 55rem) {
    .catalog__open-in {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2.5rem;
    }
}

.catalog__open h1 {
    margin: 0.5rem 0 0;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--heading);
}

.catalog__intro {
    margin: 0.875rem 0 0;
    max-width: 46ch;
    color: var(--text-2);
}

/* Il conteggio: era bianco su nero e teneva l'angolo in alto a destra della
   banda. Su fondo chiaro diventa un riquadro, come ogni cifra del cruscotto. */
.catalog__figure {
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1.125rem;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
}

.catalog__figure b { color: var(--heading); }

.catalog__figure span {
    max-width: 8rem;
    font-family: var(--m);
    font-size: 0.625rem;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ------------------------------------------------- 9.2 la lista su fondo carta */

.catalog__list {
    background: var(--paper);
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/*
    LA BARRA DEI FILTRI NON CAVALCA PIÙ DUE BANDE.

    Stava a metà fra il nero e il bianco, tirata su con un margine negativo, e
    quello era il motivo della sua ombra profonda: serviva a staccarla dal nero.
    Con due fondi chiari il filetto basta, e la barra torna un oggetto appoggiato
    su una superficie sola invece che un elemento che appartiene a due.
*/
.catalog__tools {
    margin-top: 0;
    transform: none;
    /* Il negativo che la tirava sulla banda scura era dichiarato sopra: va
       azzerato, o la barra resta a mezz'aria sopra un fondo che non c'è più. */
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.filters__details {
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh);
}

.catalog__state {
    margin: 0 0 1.125rem;
    color: var(--text-3);
}

/* ------------------------------------------------- 9.3 la card ridisegnata */

/*
    LA FOTOGRAFIA STA DENTRO LA CARD.

    Il riquadro prende il margine della card e un angolo suo, e la card gli fa da
    cornice. La differenza fra questo e una fotografia attaccata ai tre bordi è
    quella fra una scheda che contiene un'immagine e un'immagine con del testo
    sotto — ed è la ragione per cui, nei mockup, ogni superficie ha il suo bordo.
*/
.property-card {
    padding: 0.5rem;
    border-radius: 18px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--edge), var(--sh-0);
    transition: transform .4s var(--e), box-shadow .4s var(--e);
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--edge-2), var(--sh-2);
}

.property-card__frame {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ph-a);
    /* Il velo che la §24.4 di site.css metteva sul giunto fra la fotografia e la
       didascalia non serve più: adesso fra le due c'è un margine vero. */
    box-shadow: none;
}

.property-card__frame::after { content: none; }

.property-card__frame > .image,
.property-card__frame > .ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* L'anello sulla fotografia, lo stesso di ogni immagine del progetto. Disegnato
   qui perché il velo di §24.4 che lo portava è stato tolto sopra. */
.property-card__frame > .image + .card__go::before { content: none; }

.property-card__link:focus-visible { outline-offset: 4px; }

/* Il testo comincia dove comincia la fotografia: il rientro è quello della card,
   non un secondo rientro suo. Due margini diversi a otto pixel l'uno dall'altro
   si vedono, e si vedono come uno sbaglio. */
.property-card__body {
    display: block;
    padding: 1rem 0.5rem 0.5rem;
}

/* ---- la riga di testa: che cos'è e dov'è ------------------------------- */

.property-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
}

/*
    LA TIPOLOGIA COME PASTIGLIA CHIARA.

    Sulla fotografia era `--night` al 72% sotto un velo, e il contrasto andava
    misurato contro il pixel peggiore che una fotografia può metterci sotto — un
    cielo bruciato. Qui sta su un fondo che il progetto sceglie, quindi il
    contrasto è un numero e non una scommessa: `--blue-3` sull'azzurro tenue
    misura 6.18:1. E soprattutto non copre più la fotografia, che è la ragione
    per cui la card esiste.
*/
.property-card__kind {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 6px;
    background: var(--icon-box);
    box-shadow: inset 0 0 0 1px var(--edge);
    font-family: var(--m);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-3);
}

/*
    `.card__loc` è dichiarata `display: flex` in site.css, quindi dentro una riga
    di flex diventa un blocco largo tutta la riga e manda la località a capo. Il
    tipo e il luogo sono la stessa domanda — che cos'è e dov'è — e su due righe
    smettono di esserlo.
*/
.property-card__top .card__loc {
    display: inline-flex;
    margin: 0;
}

.property-card__title {
    margin: 0.625rem 0 0;
    font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
    line-height: 1.24;
    letter-spacing: -0.018em;
    color: var(--heading);
}

.property-card__price {
    display: block;
    margin: 0.6875rem 0 0;
    font-size: clamp(1.35rem, 1.2vw + 1rem, 1.55rem);
    letter-spacing: -0.03em;
    font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
}

/* ---- la riga dei dati -------------------------------------------------- */

/*
    TRE PASTIGLIE DI TESTO DIVENTANO DUE FATTI E UN CODICE.

    «6 Vani», «150 m²» e «RIF-112» erano tre rettangoli con il bordo, tutti dello
    stesso peso: tre etichette da leggere. I primi due sono numeri e prendono il
    loro pittogramma — un occhio li conta senza leggerli — il terzo è un codice e
    resta in mono, smorzato, all'altro capo della riga: serve quando si telefona,
    non quando si sceglie.
*/
.property-card__data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 0;
    background-image: linear-gradient(to right, var(--hair), color-mix(in srgb, var(--hair) 0%, transparent));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 0;
}

.property-card__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.property-card__fact svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Il riferimento va all'altro capo della riga: è l'unica cosa lì dentro che non
   serve a scegliere. */
.property-card__reference {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: var(--m);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

/* La freccia nell'angolo della fotografia arriva all'hover, come prima, ma il
   riquadro adesso ha un margine: va rientrata di quello o tocca il bordo. */
.property-card .card__go {
    bottom: 10px;
    right: 10px;
}

/* ==========================================================================
   10. IL MOCKUP DEL COMMITTENTE — il catalogo in navy su bianco

   Il committente ha consegnato due schermate disegnate — una parte della home e
   una parte della scheda di un appartamento — e site.css §27 ci ha portato il
   colore, la tipografia, la forma e i sei blocchi nuovi. Il catalogo nel mockup
   NON C'È: quello che segue estende la sua lingua alle tre cose di questa pagina
   che il disegno non mostra, invece di inventarne una seconda.

   Le tre cose, e il perché di ognuna:

   · LA BARRA DEI FILTRI PRENDE LA FORMA DELLA SCHEDA DI RICERCA (§27.5.1). Sono
     la stessa domanda fatta due volte — «che casa cerchi» — una sull'hero e una
     in cima alla lista; farle con due grammatiche diverse è la cosa che fa
     sembrare un sito assemblato. Il markup porta adesso `.sbox__f/__l/__i`, e
     quello che resta qui è la RIGA: quanti campi ci stanno e quanto sono larghi,
     che la scheda dell'hero non sa perché lei ne ha sempre quattro.
   · LA CARD PRENDE LA FORMA DI 4.5. Bordo sottile, fotografia attaccata ai tre
     lati, e in fondo il bottone pieno. §27.5.7 disegna il bottone e il bordo; qui
     si spegne il giro precedente — il rientro di otto pixel intorno alla
     fotografia e l'ombra che sollevava la card — che era la lingua del pannello
     di amministrazione e non quella del mockup.
   · L'IMPAGINAZIONE DIVENTA SOBRIA. Numeri con il bordo sottile, la corrente
     piena navy, e il salto di due pixel al passaggio del mouse se ne va: in un
     disegno senza ombre un numero che si solleva è l'unica cosa che si muove.

   PERCHÉ IN CODA E NON RISCRIVENDO LE §1–§9. È la convenzione di questo foglio
   (vedi la testata della §9) e qui serve due volte: le sezioni precedenti
   contengono misure prese sul vero — il pavimento di 9,5rem del campo prezzo, la
   riga di numeri che si spezzava a 390 — e quelle misure restano vere anche se il
   colore intorno è cambiato. Cancellarle butterebbe via il perché insieme al
   cosa.
   ========================================================================== */

/* ---------------------------- 10.1 la barra dei filtri come scheda di ricerca */

/*
    LA CARD DELLA BARRA PERDE L'OMBRA E PRENDE UN BORDO.

    L'ombra profonda serviva quando la barra stava a metà fra la banda nera e
    quella bianca (§2) e poi è rimasta per inerzia. Nel mockup l'unica ombra vera
    di tutto il disegno è quella della scheda sospesa sulla fotografia dell'hero:
    questa barra non è sospesa su niente, quindi le basta il filetto.
*/
.filters__details {
    padding: 1rem;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: none;
}

/*
    La striscia chiusa diventa la testata della card invece di un rettangolo
    dentro un rettangolo: il margine negativo le fa mangiare il padding della
    card, così il filetto che la chiude quando è aperta va da un bordo all'altro.
    Con la piega chiusa la card è alta esattamente quanto la striscia.
*/
.filters__summary {
    margin: -1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    /* Un controllo, non un'etichetta: nel mockup il maiuscoletto spaziato è
       riservato agli occhielli e ai nomi dei campi, e «Filtri» è un bottone. */
    font-family: var(--t);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}

.filters__details[open] .filters__summary {
    margin-bottom: 0.875rem;
    border-bottom: 1px solid var(--hair);
}

.filters__chevron { box-shadow: none; }

.filters__count {
    background-image: none;
    box-shadow: none;
    font-family: var(--t);
    font-size: 0.6875rem;
    font-weight: 600;
}

/*
    LA RIGA DEI CAMPI È UNA RIGA CHE VA A CAPO, non una griglia a colonne fisse.

    La §2 la costruiva a due, quattro e poi sette celle con tre punti di rottura,
    perché lì ogni cella era un rettangolo senza bordo e la larghezza doveva
    essere decisa a mano o le celle non si distinguevano. Adesso ogni campo HA il
    suo bordo: si può dire quanto vuole essere largo — `flex-basis` — e lasciare
    che sia il posto disponibile a decidere quante ne stanno per riga. Una
    categoria senza zone, un catalogo di affitti brevi con sette campi e una
    traduzione tedesca lunga ricadono tutti sulla stessa regola invece che su tre.

    `align-items: flex-end` e non `stretch`: quando un'etichetta va a capo —
    «Riferimento o parola chiave» a 1400, «Objektnummer oder Suchbegriff» in
    tedesco — è il fondo dei campi che deve restare in riga, non la loro cima.
    È lo stesso problema che la §2 risolveva con `margin-top: auto` dentro le
    celle; qui lo risolve l'allineamento della riga, e non serve più.
*/
.filters__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0;
}

/*
    IL TETTO ESISTE PER LA RIGA SPEZZATA, non per la riga piena.

    Misurato sul catalogo degli affitti brevi a 1440: i campi sono sette, il
    settimo va a capo, e da solo su una riga larga 1248 pixel «Ordina» si
    allargava a tutti e 1248 — una tendina con tre voci larga quanto la pagina.
    Con il tetto la riga spezzata tiene la larghezza di un campo e il bottone le
    si mette in fondo; sulla riga piena il tetto non entra mai in gioco, perché
    sei celle da 22rem non ci starebbero comunque.
*/
.filters__panel > .filters__field { flex: 1 1 9.5rem; min-width: 0; max-width: 22rem; }

/* Cerca la parola chiave: è il campo in cui si scrive una frase, non si sceglie
   una voce, e sotto le dodici lettere visibili non serve a niente. */
.filters__panel > .filters__field--search { flex: 2 1 12rem; }

/* Una o due cifre: una cella larga come un prezzo sarebbe assurda. */
.filters__panel > .filters__field--guests { flex: 0 1 6.5rem; }

/* «gg/mm/aaaa» più il calendario che il browser disegna dentro il campo e che
   nessuno dei due lascia misurare. */
.filters__panel > .filters__field--date { flex: 1 1 10rem; }

/*
    LE BASI SONO IL PUNTO IN CUI LA RIGA VA A CAPO, e 9,5rem è una misura presa
    sul vero due volte. La prima è della §2 e vale ancora: «1.250.000» in cifre
    tabulari più il rientro del campo, che è quanto costa una villa toscana e
    quindi quanto deve tenere quel campo. La seconda l'ho misurata qui provando a
    stringere: a 8,5rem la barra della vendita sta su una riga sola anche a 1280 —
    ma «Appartamento» nella tendina della tipologia diventa «Appartame…», e quella
    tendina è dove si legge QUALE filtro è acceso. Un'etichetta tagliata sul filtro
    in vigore costa più di un bottone che va a capo, quindi il bottone va a capo.

    Sopra i 1440 la barra della vendita sta comunque su una riga sola. Il catalogo
    degli affitti brevi ha sette campi e si spezza quasi ovunque: è il caso per cui
    esiste il margine automatico qui sotto. Un bottone solo su una riga, appoggiato
    a sinistra, sembra dimenticato; appoggiato a destra è dove finisce il modulo.
*/
.filters__apply { flex: 0 0 auto; margin-left: auto; }

/*
    I PAVIMENTI DELLA §2 ERANO MISURATI SU UNA RIGA SENZA BORDI, dove ogni cella
    partiva da `flex-basis: 0` e la larghezza era pura proporzione: senza un
    minimo, il campo del prezzo finiva largo tre cifre. Adesso ogni campo parte
    dalla sua base, quindi il minimo non serve più — e se restasse, quattro celle
    da 9,5rem su un catalogo di affitti brevi manderebbero la riga a capo dove non
    deve.
*/
@media (min-width: 78rem) {
    .filters__panel > .filters__field--band,
    .filters__panel > .filters__field--guests,
    .filters__panel > .filters__field--date { min-width: 0; }

    /* La §2 abbassava il campo data a 1.5rem perché in quella riga l'altezza la
       dava la cella; qui l'altezza è del campo, e deve essere quella di tutti. */
    .filters__panel input[type='date'] { min-height: 2.75rem; }
}

/*
    SEDICI PIXEL, E IL NUMERO È SCRITTO PERCHÉ È LA QUARTA VOLTA CHE TORNA.

    `.sbox__i` compone a 14px. Sotto i 16px iOS INGRANDISCE LA PAGINA quando il
    campo prende il fuoco, e su un catalogo quello porta via la griglia da sotto
    il pollice di chi sta leggendo. Le vecchie celle `.fc` avevano questa stessa
    riga in site.css §14; passando a `.sbox__i` se n'erano andate insieme alla
    cella, quindi rientra qui — e vale per tutti, non solo per il telefono,
    perché la mezza misura non si vede e lo zoom sì.
*/
.filters__panel .sbox__i { font-size: 16px; }

/*
    LA FRECCIA DELLE TENDINE LA DISEGNIAMO NOI.

    `appearance: none` toglie il bezel che macOS mette intorno a un <select> — un
    secondo bordo dentro quello del campo, a due pixel di distanza, che è
    esattamente il difetto che la §8 aveva descritto per il bottone. Tolto il
    bezel se ne va anche la freccia di sistema, e la sostituiamo con la stessa
    che la piega dei filtri usa già: due lati di un quadrato ruotati di 45°,
    nessun file da caricare, nessun `data:` che la CSP debba consentire.

    Ancorata in basso e non centrata: il campo è l'ultimo figlio della cella e la
    sua altezza è nota (2.75rem), mentre la cima si muove se l'etichetta va a capo.
*/
.filters__field--choice,
.filters__field--stay { position: relative; }

.filters__field--choice > .sbox__i,
.filters__field--stay > .sbox__i {
    appearance: none;
    padding-right: 2rem;
    cursor: pointer;
}

.filters__field--choice::after,
.filters__field--stay::after {
    content: '';
    position: absolute;
    right: 0.875rem;
    bottom: 1.125rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Le pastiglie dei filtri accesi: il navy pieno del mockup, senza la luce e il
   gradiente che le §7 e §8 ci avevano messo sopra. Il mockup non ha superfici
   lucide da nessuna parte. */
.filters__chips .chip,
.filters__chips .chip:not(.chip--off) {
    background-image: none;
    box-shadow: none;
}

.filters__chips .chip--off { background-image: none; box-shadow: none; }

/* ------------------------------------------ 10.2 la scheda di un immobile */

/*
    UNA CORNICE SOLA.

    Il giro precedente (§9.3) dava alla card otto pixel di padding e un angolo da
    18, e alla fotografia dentro un secondo angolo da 12: due riquadri
    concentrici, che è la lingua del pannello di amministrazione dove ogni
    superficie sta sopra un'altra superficie. Il mockup ha un bordo e basta, e la
    fotografia lo tocca.

    Via anche il sollevamento: `.card:hover` alzava la scheda di sei pixel dentro
    un'ombra larga. In un disegno in cui l'unica ombra è quella della scheda di
    ricerca sull'hero, una griglia di dodici schede che si sollevano è l'unica
    cosa che si muove sulla pagina. Resta il bordo che si scurisce — si vede, non
    sposta niente, e non costa un ridisegno a ogni passaggio del mouse.
*/
.property-card {
    padding: 0;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.25s var(--e);
}

.property-card:hover {
    transform: none;
    border-color: var(--line-2);
    box-shadow: none;
}

/* La fotografia riempie la cima della cornice. Il filetto sotto è quello che le
   dà un bordo inferiore: senza, la didascalia sembra scivolata via da sotto. */
.property-card__frame {
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--hair);
}

.property-card__frame > .image,
.property-card__frame > .ph { border-radius: 0; }

/* Il fuoco torna dentro: la cornice ritaglia, quindi un anello disegnato fuori
   dal collegamento verrebbe tagliato dal suo stesso `overflow`. */
.property-card__link:focus-visible { outline-offset: -3px; }

/*
    IL CORPO TORNA UNA COLONNA FLESSIBILE, perché adesso ha qualcosa da spingere
    in fondo. La §9.3 l'aveva reso un blocco quando l'ultima riga era quella dei
    dati e non c'era niente da allineare.

    E la riga dei dati PERDE il suo `margin-top: auto` (§6): due margini automatici
    nella stessa colonna si dividono lo spazio libero a metà, e la scheda si
    sfilaccia invece di tenere il bottone attaccato al fondo. Uno solo, ed è
    quello del bottone.
*/
.property-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.125rem 1.125rem;
}

.property-card__body > .property-card__data {
    margin-top: 0.875rem;
    margin-bottom: 1rem;
}

/*
    IL BOTTONE DEVE VINCERE SU `.card__b > span { display: block }`.

    Quella regola di site.css §10 esiste perché la card è un'ancora sola e ogni
    riga dentro di lei è uno <span> che senza un box proprio butterebbe via i
    margini. Ma vale anche per il bottone, ed è più specifica di `.property-card__go`
    (§27.5.7) di un elemento: misurato, il bottone usciva come un blocco con il
    testo a sinistra invece che al centro. Il figlio diretto rimette le cose a
    posto senza toccare né l'una né l'altra.
*/
.property-card__body > .property-card__go {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La pastiglia della tipologia, piatta: l'anello interno era la luce del giro
   precedente. Il contrasto resta quello misurato allora — `--blue-3`
   sull'azzurro pallido, 6.18:1 — perché i due token non sono cambiati di ruolo. */
.property-card__kind {
    box-shadow: none;
    border: 0;
    background: var(--blue-l);
}

/*
    IL PREZZO SCENDE DI UN GRADINO.

    Restava la cosa più grande della cella quando la cella finiva con lui.
    Adesso in fondo c'è un bottone pieno, che pesa quanto un blocco di colore: un
    prezzo a 1.55rem e un rettangolo navy nella stessa scheda si contendono
    l'occhio e la scheda non ha più un centro. Il prezzo resta il testo più grande
    — il bottone non è testo grande, è una superficie.
*/
.property-card__price {
    font-size: clamp(1.15rem, 0.8vw + 1rem, 1.35rem);
    margin-top: 0.5rem;
}

/*
    FRAUNCES TORNA AL TAGLIO DEL MOCKUP.

    site.css §27.2 porta i titoli a `opsz 40` — contrasto medio, niente WONK — ma
    lo fa sui selettori dei titoli, e questo foglio aveva alzato l'asse a 144 sul
    titolo del catalogo, a 96 sulla cifra e a 72 sul prezzo per avere il taglio da
    display del disegno precedente. A 144 Fraunces ha le aste sottili e i grassi
    pieni del serif ad alto contrasto, che nel mockup non c'è: le tre eccezioni
    rientrano nella regola.
*/
.catalog__open h1,
.catalog__figure b,
.property-card__price { font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0; }

/* --------------------------------------------- 10.3 l'impaginazione sobria */

.pagination { padding-top: clamp(2rem, 4.5vw, 3.25rem); }

/*
    I numeri restano alti 44 pixel — è il minimo che un pollice colpisce, ed è la
    ragione per cui `.pager` li ha fatti così (site.css §12 e §14): qui cambia
    solo come sono disegnati, mai quanto sono grandi.

    Il bordo resta `--line-2` e non `--line`: sul filetto sotto una testata il
    grigio chiarissimo è giusto, su un bottone con il contorno non è un bordo che
    si vede — 1.28:1 sul bianco — e sette numeri sfumati accanto a uno pieno navy
    si leggono come una riga di fantasmi.
*/
.pager .pagination__link {
    border-radius: var(--radius-s);
    font-family: var(--t);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.pager .pagination__link:hover { transform: none; }

.pager .pagination__link--current {
    background: var(--fill);
    border-color: var(--fill);
    color: var(--fill-text);
}

/* «Precedente» e «Successiva» erano maiuscoletto spaziato in mono: nel mockup
   quel trattamento è degli occhielli, e questi due sono controlli. */
.pager .pagination__link--step {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
}

.pagination__gap { font-family: var(--t); }

/* ------------------------------------------------ 10.4 quello che resta */

/* La cifra in cima: bordo invece di anello e ombra, come ogni altra superficie
   di questa pagina. */
.catalog__figure {
    border: 1px solid var(--hair);
    box-shadow: none;
}

.catalog__figure span,
.catalog__state {
    font-family: var(--t);
    letter-spacing: 0.1em;
}

/* ==========================================================================
   11. GLI SCOSTAMENTI DAL MOCKUP, CHIUSI

   La §10 ha portato il catalogo nella lingua del disegno consegnato; quello che
   segue sono i punti in cui non ci era arrivato fino in fondo, misurati uno per
   uno sul server di prova prima di toccarli.

   In coda e non riscrivendo le §1–§10, che e' la convenzione di questo foglio
   (vedi la testata della §9): le misure delle sezioni precedenti sono state prese
   sul vero e restano vere: cancellarle butterebbe via il perche' insieme al cosa.
   ========================================================================== */

/* --------------------------- 11.1 la riga spezzata tiene la misura dei campi

   Misurato a 1440 sul catalogo degli affitti brevi, che e' l'unico con sette
   campi: i primi sei stanno in riga — le due tendine larghe 171 — il settimo va a
   capo, e da solo su una riga larga 1248 «Ordina» si allargava a 352, cioe' al
   tetto di 22rem della §10. Due tendine identiche, una larga 2,3 volte l'altra,
   a ottanta pixel di distanza.

   Il tetto di 22rem era stato messo per impedire il caso peggiore (una tendina
   larga quanto la pagina) e non per dare una misura: 22rem non e' la larghezza di
   niente. Questa lo e'. La voce piu' lunga della tendina che ne ha una lunga —
   «Prezzo decrescente» — misura 151px a 16px di Inter; piu' i 12 del rientro
   sinistro, i 32 tenuti a destra per la freccia che disegniamo noi (§10.1) e i 2
   del bordo fa 197. 13rem e' la prima misura tonda che li contiene.

   Vale per le tendine e per le date, cioe' per i campi in cui si sceglie: il loro
   contenuto ha una larghezza NOTA, quindi il tetto puo' essere quella. Non vale
   per la ricerca, che e' il campo in cui si scrive una frase e che su una riga
   tutta sua fa bene a prendersela. Sulla riga piena nessuno dei due tetti entra
   mai in gioco — a 1440 quei campi stanno a 171 e 179 — quindi questa regola si
   vede solo dove il difetto era. */
/*
   E IL TETTO VALE SOLO DOVE LA RIGA SI SPEZZA.

   Scritto senza condizione valeva a OGNI larghezza, e sul telefono i campi vanno
   in colonna dentro un pannello largo 316: misurato, «Soggiorno» e la seconda data
   si fermavano a 208, cioe' cento pixel di vuoto alla loro destra, con l'etichetta
   sopra che arrivava al bordo. Un tetto pensato per una riga che si spezza non ha
   senso in una colonna, dove ogni campo ha gia' la sua larghezza: quella della
   colonna.
*/
@media (min-width: 48rem) {
    .filters__panel > .filters__field--choice,
    .filters__panel > .filters__field--stay,
    .filters__panel > .filters__field--date { max-width: 13rem; }
}

/* --------------------------- 11.2 il filetto della riga dati non sfuma

   La §9.3 lo disegnava con un gradiente che svaniva verso destra: era la firma
   del disegno precedente, dove i filetti si spegnevano per non chiudere le forme.
   Nel mockup un filetto o c'e' o non c'e', e quando c'e' e' pieno da un capo
   all'altro — lo stesso `1px solid` di ogni altro bordo (§3 della specifica), su
   `--hair`, che nel tema pubblico E' `--line`. E un bordo vero, invece di uno
   sfondo alto un pixel, e' anche quello che tiene il rientro senza che nessuno
   debba ricordarselo. */
.property-card__data {
    border-top: 1px solid var(--hair);
    background-image: none;
}

/* --------------------------- 11.3 un raggio solo, davvero

   site.css §27.9 ha portato schede, campi e bottoni a 6px. Su questa pagina ne
   restavano due a 4 (`--radius-s`), e sono i due che questo foglio si era scritto
   da solo: il bottone della barra (§8) e i numeri dell'impaginazione (§10.3).

   Sono un bottone e sette bottoni di contorno, cioe' esattamente le due cose che
   la §3 della specifica nomina. Un bottone a 4 dentro una scheda a 6, con i campi
   accanto a 6, e' la differenza che si vede senza saper dire che cosa si sta
   vedendo — che e' la frase con cui la §27.9 l'ha chiusa altrove. */
.filters__apply,
.pager .pagination__link { border-radius: var(--radius); }

/* --------------------------- 11.4 le eccezioni tipografiche rientrano

   site.css §27.2 da' ai titoli `letter-spacing: -0.011em`: e' la crenatura del
   serif del mockup, che ha contrasto medio e sta dritto. Questo foglio aveva
   stretto a mano il titolo del catalogo e la cifra a -0.035em (§7, §9.1) e il
   prezzo a -0.03em (§9.3), perche' il disegno di prima era un display ad alto
   contrasto e a quelle dimensioni chiedeva di essere chiuso.

   La §10.2 aveva gia' riportato l'asse ottico di quei tre dentro la regola
   comune; la crenatura era rimasta indietro. Adesso rientra anche lei: i titoli
   sul valore della §27.2, il prezzo su quello che `.card__p` gli da' in §27.9
   (-0.015em), perche' il prezzo non e' un titolo — e' la sans, in grassetto. */
.catalog__open h1,
.catalog__figure b,
.card .property-card__title { letter-spacing: -0.011em; }

.property-card__price { letter-spacing: -0.015em; }

/* --------------------------- 11.5 il pavimento del maiuscoletto e' 11px

   «occhiello, etichette: 11–12px maiuscoletto spaziato» — §2 della specifica, ed
   e' la misura che `.snum` porta in site.css §27.9 per tutto il sito.

   Tre etichette di questa pagina componevano a 10: la didascalia della cifra in
   cima, la pastiglia della tipologia e la localita' sulla scheda. Dieci pixel
   maiuscoli e spaziati di 0.1em non sono un carattere piccolo, sono un carattere
   che si smette di leggere e si comincia a decifrare — e due di quelle tre etichette
   dicono che cos'e' e dov'e' l'immobile, cioe' la seconda cosa che uno guarda.

   Undici e non dodici: e' la misura che l'occhiello ha gia' altrove, e questi
   sono occhielli. (La localita' era gia' a 11 sotto i 66rem per la §6: adesso la
   misura e' una sola a ogni larghezza.) */
.catalog__figure span,
.property-card__kind,
.property-card .card__loc { font-size: 0.6875rem; }

/* --------------------------- 11.6 «3 immobili» e' una frase, non un occhiello

   `.catalog__state` e' la riga che dice quanti risultati ci sono e su che pagina
   si e': e' il riscontro che un filtro ha avuto effetto, cioe' una cosa che si
   legge. La §4 gliela aveva data in maiuscoletto spaziato di 0.16em a 11px perche'
   li' era un'etichetta di sezione; ma un'etichetta nomina, una frase informa, e
   una frase in maiuscoletto si legge lettera per lettera.

   Passa alla misura che la §2 della specifica riserva alle meta e alle didascalie
   — 13px — in minuscolo e senza spaziatura. Il conteggio resta piu' scuro e piu'
   pesante: e' il numero che si stava cercando. */
.catalog__state {
    font-size: 0.8125rem;
    letter-spacing: normal;
    text-transform: none;
}

/* --------------------------- 11.7 il bordo dei numeri torna su --line

   La §5 li aveva messi su `--line-2` con una ragione scritta: `--line` sul bianco
   misura 1.28:1 e su un bottone di contorno non e' un bordo che si vede.

   Ma «bordi: 1px solid var(--line)» e' la §3 della specifica, senza eccezioni per
   i controlli, e il mockup e' pieno di superfici tenute da quel filetto li'. E la
   ragione della §5 e' nata contro una fila di numeri accanto a uno pieno TEAL:
   adesso il pieno e' navy, il contrasto fra la pagina corrente e le altre e'
   maggiore, e la fila non ha bisogno di essere scura per non sembrare spenta.

   Il bersaglio resta alto 44px: qui cambia come sono disegnati, mai quanto sono
   grandi.

   La pagina corrente e' esclusa a mano e non con `:not()`: e' un pieno navy, e il
   suo bordo e' lo stesso navy (§10.3) perche' un bottone pieno con un contorno
   chiaro si porta dietro un alone di un pixel. Questa regola viene dopo quella,
   quindi senza la riga qui sotto gliel'avrebbe schiarito. */
.pager .pagination__link { border-color: var(--line); }

.pager .pagination__link--current { border-color: var(--fill); }

/* --------------------------- 11.8 il corpo di `.sbox__i`, che qui non si chiude

   NON C'E' UNA REGOLA QUI SOTTO: questa e' la nota di un debito, e va letta
   insieme alla riga della §10.1 che dice `.filters__panel .sbox__i { font-size:
   16px }`.

   `.sbox__i` e' UN componente — la §27.5.1 di site.css — e compone a due misure:
   14px sulla scheda di ricerca dell'hero, 16 nei campi dei filtri, perche' qui
   sotto i 16 iOS ingrandisce la pagina quando il campo prende il fuoco e a chi
   sta scorrendo il catalogo sparisce la griglia da sotto il pollice. La ragione
   e' giusta e vale per TUTTI e due i posti: la scheda dell'hero ingrandisce
   esattamente allo stesso modo.

   La misura giusta e' dunque una sola, 16px, e va scritta dove vive il
   componente — in site.css §27.5.1, su `.sbox__i`, al posto di `font-size:
   .875rem`. Da qui non ci si arriva: questo foglio lo carica solo il catalogo, e
   la scheda dell'hero sta sulla home. Finche' quella riga non si sposta, la
   correzione del catalogo resta provvisoria e sta sopra, alla §10.1. */

/* ==========================================================================
   12. LA LIMATURA — cinque misure prese a 1440, 1024 e 390 e rimesse a posto

   Il committente ha guardato il catalogo finito e ha chiesto di limare i
   dettagli. Non c'e' niente di nuovo qui sotto: ci sono i punti in cui una
   misura non tornava, ognuno con il numero che l'ha motivata, misurato sul
   server di prova alle tre larghezze prima di toccare qualsiasi cosa.

   In coda e non riscrivendo le §1–§11: e' la convenzione di questo foglio (vedi
   la testata della §9), e le misure delle sezioni precedenti restano vere.
   ========================================================================== */

/* --------------------------- 12.1 il titolo della categoria rientra nella scala

   Misurato: 54,4px a 1440 e 51,2 a 1024 — per una parola sola («Vendita») su una
   banda bianca, senza una fotografia sotto che li giustifichi.

   «Titoli: 30–34px» e' la §2 della specifica, e tutto il resto del sito ci sta
   dentro: 34 sul titolo di una pagina istituzionale, 32–34 sui titoli di sezione,
   34 sulla cifra del conteggio qui accanto. I 60px della home sono l'unica
   eccezione del sito e li paga stando sopra una fotografia a tutto schermo; qui
   sotto c'e' il bianco, cioe' esattamente l'argomento con cui la §9.1 aveva
   tolto la banda notte da questa stessa testata.

   La banda scende da 244 a 223 a 1440 e da 227 a 207 a 1024: ventun pixel di
   catalogo in piu' sopra la piega, che e' quello che il titolo si stava
   prendendo per dire una parola. */
.catalog__open h1 { font-size: clamp(2rem, 2.4vw, 2.125rem); }

/* E la cifra scende con lui, o la gerarchia si capovolge: misurata a 34,56px,
   era gia' grande quanto il titolo appena rimesso a 34 — «3» non e' il titolo di
   questa pagina. A 28 resta sotto il titolo (34) e sopra il sommario (19,76). */
.catalog__figure b { font-size: 1.75rem; }

/* --------------------------- 12.2 il titolo del vuoto e' un titolo di sezione

   Misurato a 1440 sul catalogo senza risultati (`?q=zzzzz`): 38,4px, cioe' piu'
   grande di qualunque `h2` del sito — 32 su una pagina istituzionale, 34 sulla
   home — e su una pagina il cui h1 ne misura 34. Un secondo livello non puo'
   essere piu' grande del primo.

   «Titoli di sezione: 28–32» e' la §2 della specifica: il tetto va a 32 e il
   pavimento resta dov'era, perche' a 390 quel titolo compone gia' a 25,6 e va a
   capo due volte. Il blocco passa da 81,4 a 67,8 pixel di altezza. */
.catalog__nothing h2 { font-size: clamp(1.6rem, 3.4vw, 2rem); }

/* --------------------------- 12.3 le due pastiglie sono alte uguali

   Misurato a 1440 con un filtro acceso: la pastiglia del filtro e' alta 46px —
   glieli da' il disco da 30 del suo × piu' i due pavimenti da 8 — e «Azzera»,
   che di × non ne ha, 39,4. Due pastiglie identiche, appoggiate sulla stessa
   riga, a 6,6 pixel di differenza: e' il tipo di scarto che non si sa nominare e
   si vede lo stesso.

   Il pavimento e' 46 e non 44: 44 e' la soglia del dito, che la regola sotto
   `(hover: none)` gia' garantisce, mentre qui si tratta di pareggiare due forme
   che stanno una accanto all'altra. La piu' alta delle due detta la misura. */
.filters__chips .chip { min-height: 2.875rem; }

/* --------------------------- 12.4 la riga spezzata finisce a destra TUTTA

   La §10.1 tiene il bottone a destra con `margin-left: auto`, e la ragione
   scritta li' e' giusta: un bottone solo su una riga, appoggiato a sinistra,
   sembra dimenticato. Ma quella riga e' stata misurata quando ad andare a capo
   era il bottone DA SOLO. Da quando la barra degli affitti brevi ha otto campi,
   a capo ci va anche un campo, e il margine automatico apre un buco fra i due:
   misurato, 934,6px fra «Ordina» e «Filtra» a 1440 sugli affitti brevi, e 558,6
   a 1024 sulla vendita. Due comandi abbandonati ai due capi di una riga vuota.

   `justify-content: flex-end` e' la forma generale della stessa regola: quando
   la riga non si spezza non cambia niente (i campi crescono e il posto libero e'
   zero, misurato a 1440 sulla vendita: il bottone sta dov'era), quando si spezza
   il bottone resta a destra — che e' quello che il margine automatico voleva — e
   quello che va a capo con lui gli si mette accanto invece che di fronte. Dopo:
   12px fra «Ordina» e «Filtra», cioe' il gap della riga.

   Il margine automatico va azzerato o si mangia il posto libero prima che
   `justify-content` lo veda.

   ── CORREZIONE, dopo la misura ──

   `flex-end` spinge a destra TUTTA la riga spezzata, non il bottone: il difetto
   si sposta invece di chiudersi. Misurato con il pannello aperto: le righe
   cominciavano a 1004 e 1224 mentre il pannello comincia a 81 (1440), e a 168
   contro 61 (1024). Un pannello i cui campi non partono dal suo stesso bordo
   sinistro e' peggio di un bottone con del posto libero accanto: il bordo
   sinistro e' la linea su cui l'occhio scorre un modulo.

   Le righe tornano ad allinearsi a sinistra e il bottone segue l'ultimo campo.
   Senza il margine automatico non si apre nessun buco — era quello a
   «dimenticarlo», non la sua posizione — e quello che va a capo con lui gli sta
   comunque accanto. */
.filters__panel { justify-content: flex-start; }
.filters__apply { margin-left: 0; }

/* --------------------------- 12.5 sul telefono il conteggio si dice una volta

   La cifra in testata e la riga di stato sotto la barra dicono LO STESSO NUMERO:
   verificato con un filtro acceso (`?guests=6`), «3 Immobili disponibili» in
   cima e «3 immobili» sotto — il conteggio del catalogo e' gia' quello filtrato,
   quindi le due non si separano mai.

   Sopra i 55rem la cifra non costa niente: sta nella seconda colonna della
   testata, accanto al titolo, e l'altezza della banda la decide la colonna del
   testo. Sotto, la griglia va a una colonna e il riquadro diventa una fascia sua
   larga 350 e alta 59,6, che con il suo spazio fa 80 pixel dei 844 di un
   telefono — il 9,5% dello schermo per ripetere un numero che si rilegge 125
   pixel piu' giu'.

   Misurato a 390: la testata passa da 292 a 212 pixel (dal 34,6% al 25,1% dello
   schermo), la prima scheda sale da 539 a 460 e il suo titolo da 823 a 744 —
   cioe' sopra la piega, che e' dove il titolo di un annuncio deve stare. */
@media (max-width: 54.99rem) {
    .catalog__figure { display: none; }
}