/* Nearest points of interest on the customer page (rendered by
   App_Code/CustomerPoiNearby.cs), in the side column above the "Punti di
   interesse" button. Same tiles as the POI page. This file is linked before the
   portal bundles, so every rule is scoped under #page. Only min-width queries
   (and the exact opposite of the page's own max-width ones, for the heading):
   no gap at fractional widths. */
#page .customer-poi-nearby {
    margin: 0 0 20px;
    min-width: 0;
}

/* The heading keeps the page's own section-title style; only the space
   before the description line is reduced. */
#page .customer-poi-nearby > .yi-section-title {
    margin-bottom: 10px;
    /* The portal never breaks a word. A heading made of one very long word
       (Russian, 21 letters) does not fit beside its icon in the narrow column:
       only then it goes on the line below the icon, whole. */
    flex-wrap: wrap;
}

/* The heading is an h2: the page's h1 is the name of the business. The page
   styles its section titles through "h1.yi-section-title" rules, which an h2
   does not receive, so the same values are repeated here with the same two
   steps (customer-page-sections.css: up to 374px and up to 767px). "not all
   and (max-width)" is the exact opposite of the page's own "max-width"
   queries: the two never disagree, not even at a fractional width. */
#page .customer-poi-nearby > h2.yi-section-title {
    gap: 8px;
    margin-top: 0;
    /* the portal's old style sheet indents every h2 by 15px on each side */
    margin-left: 0;
    margin-right: 0;
    color: #173c56;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.45;
    text-transform: none;
}

@media not all and (max-width: 374px) {
    #page .customer-poi-nearby > h2.yi-section-title {
        gap: 10px 12px;
        font-size: 23px;
    }
}

@media not all and (max-width: 767px) {
    #page .customer-poi-nearby > h2.yi-section-title {
        font-size: 25px;
    }
}

/* The portal script whole-words.js keeps hyphenated compounds on one line.
   Inside this section they may wrap, so a long compound cannot push a tile
   or the description wider than its column. Every other word stays whole, as
   everywhere on the portal (typography.css forbids breaking words, with
   !important): no "overflow-wrap" is set on the other elements, it would do
   nothing. */
#page .customer-poi-nearby .portal-whole-word {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#page .customer-poi-nearby-description {
    margin: 0 0 16px;
    padding: 0;
    color: #526b7d;
    font-size: 14px;
    line-height: 1.6;
    text-align: start;
}

#page .customer-poi-nearby-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

#page .customer-poi-nearby-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    gap: 4px 14px;
    min-width: 0;
    /* No min-height here: with one, Safari keeps the entry at its old height when
       the page gets narrower after loading (a phone turned upright) and a name
       that now needs more lines spills over the next entry. */
    padding: 12px 15px;
    border: 1px solid #dce6ed;
    border-radius: 11px;
    /* White like the other boxes of the column: the page behind them is tinted. */
    background: #fff;
    color: #003c70;
    font-size: 15px;
    line-height: 1.5;
    text-align: start;
    text-decoration: none;
    white-space: normal;
}

#page .customer-poi-nearby-name {
    grid-column: 1;
    min-width: 0;
    font-weight: 500;
}

#page .customer-poi-nearby-meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    min-width: 0;
    color: #526b7d;
    font-size: 13px;
    line-height: 1.5;
}

#page .customer-poi-nearby-place {
    min-width: 0;
}

#page .customer-poi-nearby-distance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

#page .customer-poi-nearby-distance > .fa {
    flex: 0 0 auto;
    margin: 0;
}

#page .customer-poi-nearby-link::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

#page .customer-poi-nearby-link:hover {
    border-color: #92b0c4;
    background: #f3f8fb;
    color: #003c70;
    text-decoration: none;
}

#page .customer-poi-nearby-link:focus-visible {
    outline: 3px solid #1479b8;
    outline-offset: 3px;
}

/* Tablets: the side column is as wide as the page. */
@media (min-width: 768px) {
    #page .customer-poi-nearby-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* A single point fills its row. */
    #page .customer-poi-nearby-list[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 992px) {
    #page .customer-poi-nearby-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Keep the rows even: 2 -> 2, 4 -> 2+2. */
    #page .customer-poi-nearby-list[data-count="2"],
    #page .customer-poi-nearby-list[data-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: the side column is narrow again, one point per row. */
@media (min-width: 1200px) {
    #page .customer-poi-nearby-list,
    #page .customer-poi-nearby-list[data-count] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

@media (forced-colors: active) {
    #page .customer-poi-nearby-link {
        border-color: LinkText;
    }
}