/* the top of a cluster or airport page, under the hero (linked from both page.php files, after
   the page's own stylesheet). The facts band: deposit, excess, zero excess and minimum age
   (php-functions/location-facts.php); the row of breadcrumbs and byline
   (php-functions/location-written.php) */


/* facts band: on the page background, with a line under it across the whole width; the facts
   in the page column */

.facts-band {
    border-bottom: 1px solid var(--ws-grey-light);
}
.page-block.facts-band__inner {
    margin-top: 0;
    margin-bottom: 0;
}

/* up to 599px one fact a row: label and figure on the left, its comparison on the right (a
   fact without one takes the whole row). The page's .page-block > ul rule would narrow the
   list to the text column and add bullets */
.page-block .facts-band__list {
    display: grid;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
.facts-band__item {
    display: grid;
    grid-template-areas:
        "label verdicts"
        "figure verdicts";
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    align-items: center;
    gap: 1px 12px;
    min-width: 0;
    padding: 9px 0;
}
.facts-band__item + .facts-band__item {
    border-top: 1px solid var(--ws-grey-lighter);
}
.facts-band__item:not(:has(.facts-band__verdicts)) {
    grid-template-areas:
        "label"
        "figure";
    grid-template-columns: minmax(0, 1fr);
}
.facts-band__label {
    grid-area: label;
    align-self: end;
    font-size: .7rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ws-grey-dark);
}
.facts-band__figure {
    display: flex;
    flex-wrap: wrap;
    grid-area: figure;
    align-items: baseline;
    align-self: start;
    gap: 0 5px;
}
.facts-band__value {
    font-size: 1.1rem;
    line-height: 1.4rem;
    font-weight: 700;
    color: var(--ws-main-color-1-dark);
}
.facts-band__unit {
    font-size: .8rem;
    line-height: 1.4rem;
    color: var(--ws-grey-dark);
}

/* the excess where cars without one are offered: a large green "€ 0" with the share of cars
   beside it, the excess of the other cars in a line under it. Up to 599px its parts stack, as
   the figure and that line need the whole row */
.page-block .facts-band__item--zero-excess {
    grid-template-areas:
        "label"
        "figure"
        "note"
        "verdicts";
    grid-template-columns: minmax(0, 1fr);
}
.facts-band__item--zero-excess .facts-band__figure {
    gap: 0 8px;
}
.facts-band__item--zero-excess .facts-band__value {
    font-size: 1.5rem;
    line-height: 1.8rem;
    color: #15724d;
}
.facts-band__item--zero-excess .facts-band__unit {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ws-main-color-1-dark);
}
.facts-band__note {
    grid-area: note;
    font-size: .78rem;
    line-height: 1.15rem;
    color: var(--ws-grey-dark);
}
/* an amount is never split over two lines */
.facts-band__note strong {
    color: var(--ws-main-color-1-dark);
    white-space: nowrap;
}
.facts-band__item--zero-excess .facts-band__verdicts {
    margin-top: 6px;
}

/* the comparisons under a figure: green where the figure is better than the average, orange
   where it is worse, with an arrow for the direction (a check for more zero-excess cars) */
.facts-band__verdicts {
    display: flex;
    flex-direction: column;
    grid-area: verdicts;
    align-items: flex-start;
    gap: 4px;
}
.facts-verdict {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    padding: 4px 7px 4px 5px;
    border-radius: 7px;
    font-size: .72rem;
    line-height: 1rem;
}
.facts-verdict--better {
    background: var(--ws-main-color-3-extra-lighter);
    color: #15724d;
}
.facts-verdict--worse {
    background: var(--ws-main-color-2-extra-light);
    color: var(--ws-main-color-2-dark);
}
.facts-verdict__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: var(--ws-main-color-3-dark);
    border-radius: 4px;
}
.facts-verdict--worse .facts-verdict__icon {
    background: var(--ws-main-color-2);
}
.facts-verdict__icon svg {
    width: 8px;
    height: 8px;
    fill: #fff;
}
.facts-verdict--down .facts-verdict__icon svg {
    transform: rotate(90deg);
}
.facts-verdict--up .facts-verdict__icon svg {
    transform: rotate(270deg);
}

@media only screen and (min-width: 600px) {
    .facts-band__verdicts {
        margin-top: 2px;
    }
    .facts-verdict {
        gap: 6px;
        padding: 4px 9px 4px 6px;
        font-size: .76rem;
        line-height: 1.05rem;
    }
}

/* 600 to 899px: two facts a row, the comparison under the figure. A fact left alone on the
   last row takes the whole width */
@media only screen and (min-width: 600px) and (max-width: 899px) {
    .page-block .facts-band__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .facts-band__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 12px 16px 12px 0;
    }
    .facts-band__item + .facts-band__item {
        border-top: 0;
    }
    .facts-band__item:nth-child(even) {
        padding-left: 16px;
        border-left: 1px solid var(--ws-grey-lighter);
    }
    .facts-band__item:nth-child(n+3) {
        border-top: 1px solid var(--ws-grey-lighter);
    }
    .facts-band__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .facts-band__label,
    .facts-band__figure {
        align-self: auto;
    }
    /* the zero-excess fact, always the first, takes the whole first row and the others pair
       up under it */
    .facts-band__item--zero-excess {
        grid-column: 1 / -1;
    }
    .facts-band__item--zero-excess ~ .facts-band__item {
        border-top: 1px solid var(--ws-grey-lighter);
    }
    .facts-band__item--zero-excess ~ .facts-band__item:nth-child(even) {
        padding-left: 0;
        border-left: 0;
    }
    .facts-band__item--zero-excess ~ .facts-band__item:nth-child(odd) {
        padding-left: 16px;
        border-left: 1px solid var(--ws-grey-lighter);
    }
    .facts-band__item--zero-excess ~ .facts-band__item:last-child:nth-child(odd) {
        grid-column: auto;
    }
    .facts-band__item--zero-excess ~ .facts-band__item:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }
}

/* from 900px all facts on one row, each column as wide as its content needs */
@media only screen and (min-width: 900px) {
    .page-block .facts-band__list {
        grid-auto-columns: auto;
        grid-auto-flow: column;
    }
    .facts-band__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 20px;
    }
    .facts-band__item + .facts-band__item {
        border-top: 0;
        border-left: 1px solid var(--ws-grey-lighter);
    }
    .facts-band__item:first-child {
        padding-left: 0;
    }
    .facts-band__label {
        align-self: auto;
        font-size: .75rem;
    }
    .facts-band__figure {
        align-self: auto;
    }
    .facts-band__value {
        font-size: 1.3rem;
        line-height: 1.6rem;
    }
    .facts-band__unit {
        font-size: .85rem;
        line-height: 1.6rem;
    }
    .facts-band__item--zero-excess .facts-band__value {
        font-size: 1.8rem;
        line-height: 2rem;
    }
    .facts-band__item--zero-excess .facts-band__unit {
        font-size: 1.05rem;
    }
}
@media only screen and (min-width: 1280px) {
    .facts-band__item {
        padding: 18px 24px;
    }
    .facts-band__value {
        font-size: 1.5rem;
        line-height: 1.8rem;
        white-space: nowrap;
    }
    .facts-band__item--zero-excess .facts-band__value {
        font-size: 2.1rem;
        line-height: 2.3rem;
    }
}


/* the breadcrumbs, with the byline on their right: a small photo beside one line of author,
   updated date and reading time and, on the airport page, the link to its cluster under it.
   Where both don't fit side by side the byline goes under the breadcrumbs */

.page-block.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: 22px;
}
/* the page's .page-block > p rule would make the breadcrumbs the whole row */
.page-meta .bread-nav {
    width: auto;
}
.page-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.page-author__photo {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
}
/* the content team is pictured by the logo's globe, whole, on a white disc */
.page-author__photo--logo {
    padding: 4px;
    border: 1px solid var(--ws-grey-lighter);
    box-sizing: border-box;
    background: var(--ws-white);
    object-fit: contain;
}
/* with the link the photo stands beside two lines: a size up */
.page-author:has(.page-author__link) .page-author__photo {
    width: 36px;
    height: 36px;
}
.page-author__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.2rem;
    color: var(--ws-grey-dark);
}
.page-author__name {
    font-weight: 700;
    color: var(--ws-main-color-1-dark);
    text-decoration: none;
}
a.page-author__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-author__link {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ws-main-color-2-vivid-dark);
    text-decoration: none;
}
.page-author__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* the medium date shows only on narrow screens */
.page-author__date--short {
    display: none;
}

/* phones: the breadcrumbs a size down, so a path of five fits one line more often */
@media only screen and (max-width: 599px) {
    .page-meta .bread-nav a {
        font-size: .82rem;
    }
    .page-block.page-meta {
        margin-bottom: 16px;
    }
}

/* narrow phones: the words around the date are left to screen readers and the date takes its
   medium format, so the byline stays one line */
@media only screen and (max-width: 479px) {
    .page-author__updated {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .page-author__date {
        display: none;
    }
    .page-author__date--short {
        display: inline;
    }
}