/* Fold */

.fold {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);;

    padding: var(--space-xxl);
    padding-bottom: 0;

    margin-top: 151px;
}

.fold-left {
    width: calc(50% - (var(--space-xxl) / 2));

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
}

.fold-left-icon {
    height: 43px;
}

.parcel-search-form {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.parcel-search-form > .c-field-container {
    width: 100%;
}

.fold-right {
    width: calc(50% - (var(--space-xxl) / 2));
}

.fold-right > img {
    width: 100%;
}

/* Parcel info */

.parcel-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);;

    padding: var(--space-xxl);
}

.parcel-info-block {
    width: calc((100% / 3) - ((2 * var(--space-xxl)) / 3));

    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-xxl);

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.parcel-info-block:hover {
    box-shadow: var(--box-shadow-01);
}

.parcel-info-block._mobile-only {
    display: none;
}

.parcel-info-block > .c-subheading {
    line-height: 1;
}

/* History */

/* Parcel map */

.parcel-map-section {
    width: 100%;

    padding: 0 var(--space-xxl);
}

.parcel-map {
    width: 100%;
    height: 460px;

    border-radius: var(--radius-l);

    box-shadow: var(--box-shadow-01);

    overflow: hidden;
}

.parcel-map-attribution {
    color: var(--color-06);

    font-size: var(--font-size-s);

    float: right;

    display: block;

    margin-top: var(--space-xs);
}

.parcel-map-attribution > a {
    color: var(--color-07);

    font-size: var(--font-size-s);
}

.parcel-map-marker {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--color-01);
}

/* Pin markers are SVG icons; their tip sits on the coordinate (anchor: "bottom"). */
.parcel-map-marker._start,
.parcel-map-marker._intermediary,
.parcel-map-marker._end,
.parcel-map-marker._end-delivered {
    width: 27px;
    height: 36px;

    border-radius: 0;

    background: transparent center / contain no-repeat;
}

.parcel-map-marker._start {
    background-image: url("../media/icons/location-dot.svg");
}

.parcel-map-marker._intermediary {
    background-image: url("../media/icons/location-dot-outline.svg");
}

.parcel-map-marker._trail {
    width: 10px;
    height: 10px;
}

.parcel-map-marker._current {
    width: 18px;
    height: 18px;

    -webkit-animation: pulse 2s infinite;
    -moz-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.parcel-map-marker._end,
.parcel-map-marker._end-delivered {
    background-image: url("../media/icons/location-dot.svg");
}

/* History */

.history {
    width: 100%;

    display: flex;
    flex-direction: column;

    padding: var(--space-xxl);
}

.history-point {
    display: flex;
    flex-direction: column;
}

.history-point-top {
    display: flex;
    align-items: center;
}

.point-dot {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--color-01);

    position: relative;

    margin-right: var(--space-m);
}

.history-point:first-child > .history-point-top > .point-dot {
    -webkit-animation: pulse 2s infinite;
    -moz-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.history-point-date {
    line-height: 1;
}

.history-point:first-child > .history-point-top > .history-point-date {
    color: var(--color-01);
}

.history-point-bottom {
    display: flex;
}

.point-line {
    width: 4px;
    height: 160px;

    border-radius: var(--radius-l);

    background: var(--color-01);

    margin: -9px calc(7px + var(--space-m)) -9px 7px;
}

.history-point:last-of-type > .history-point-bottom > .point-line {
    margin: -9px calc(7px + var(--space-m)) 0 7px;
}

.history-point-description {
    margin-top: var(--space-xs);
}

.history-point:first-child > .history-point-bottom > .history-point-description {
    color: var(--color-01);
}

/* Contact us */

.contact-us > div {
    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

    background-color: var(--color-01);
    background: var(--gradient-01);

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.contact-us-heading,
.contact-us-heading-line {
    color: var(--color-03);
}

.contact-us-btn {
    border-color: var(--color-03);

    color: var(--color-01);

    background-color: var(--color-03);
}

.contact-us-btn:hover {
    color: var(--color-03);
}

@media only screen and (max-width: 1000px) {
    /* Parcel info */

    .parcel-info-block {
        width: calc(50% - (var(--space-xxl) / 2));
    }
}

@media only screen and (max-width: 800px) {
    /* Fold */

    .fold {
        flex-direction: column;
    }

    .fold-left,
    .fold-right {
        width: 100%
    }
}

@media only screen and (max-width: 600px) {
    /* Parcel map */

    .parcel-map-section {
        padding: 0 var(--space-m);
    }

    .parcel-map {
        height: 320px;
    }

    /* Parcel info */

    .parcel-info {
        gap: var(--space-m);
    }

    .parcel-info-block:not(:first-child) {
        border: none;
        border-radius: 0;
        
        gap: var(--space-xs);
        
        padding: 0;
    }
    
    .parcel-info-block:first-child {
        width: 100%;
        
        padding: var(--space-m);
    }
    
    .parcel-info-block:hover {
        box-shadow: initial;
    }

    .parcel-info-block._mobile-only {
        display: flex;
    }
    
    .parcel-info-block > .c-subheading {
        font-size: var(--font-size-m);
        font-weight: 600;
    }
    
    .parcel-info-block:first-child > .parcel-info-block-value {
        line-height: 1;
    }
    
    .parcel-info-block:last-child > .parcel-info-block-value {
        color: var(--color-01);
    }

    /* Contact us */

    .contact-us > div {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Fullscreen: the control fullscreens the whole section so the attribution
   line stays visible over the tiles (licence condition). The rules are
   duplicated for .maplibregl-pseudo-fullscreen — the library's fallback on
   devices without the Fullscreen API (iOS Safari) — and kept as separate
   blocks so a browser that drops the :fullscreen selector still applies the
   fallback ones. Floats are inert on flex items, so the attribution keeps its
   right alignment via align-self. */
.parcel-map-section:fullscreen {
    display: flex;
    flex-direction: column;

    padding: var(--space-m);

    background-color: var(--color-03);
}

.parcel-map-section:fullscreen > .parcel-map {
    height: auto;

    flex: 1;
}

.parcel-map-section:fullscreen > .parcel-map-attribution {
    float: none;

    align-self: flex-end;
}

.parcel-map-section.maplibregl-pseudo-fullscreen {
    display: flex;
    flex-direction: column;

    padding: var(--space-m);

    background-color: var(--color-03);
}

.parcel-map-section.maplibregl-pseudo-fullscreen > .parcel-map {
    height: auto;

    flex: 1;
}

.parcel-map-section.maplibregl-pseudo-fullscreen > .parcel-map-attribution {
    float: none;

    align-self: flex-end;
}