/*
 * The second group of guides and pages in the new design, all with the customer chat in the hero:
 * the electrician guides (Ojordad kontakt, Byta termostat för golvvärme, DCL-kontakt, Eluttag
 * utomhus, Dimmer, Byta elcentral), ROT-avdrag, Mindre jobb och småfix and Renovering.
 * Loaded after ny_design.css on those pages only; every rule is scoped to .nd_guider_2_page or to
 * this file's own classes.
 */

/* When the guide was published and updated (the old article timestamps), in Space Mono under the
   heading of "Granskning och källor". */
.nd_guider_2_page .nd_rich .nd_guider_2_dates {
    margin-top: 12px;
    color: var(--nd_gray_text);
}

/* A big heading over a row of service tiles (the old "Alla hantverkare du behöver under samma
   tak" and "Vad ska du renovera?"). The tiles keep nd_service_list's own spacing. */
.nd_guider_2_page .nd_guider_2_trades .nd_h2 {
    text-wrap: balance;
}

/* "Vi som kommer att hjälpa dig" on Mindre jobb och småfix: the staff cards of Vi som jobbar på
   Dryft (nd_staff_card.html), four to a row on desktop and two on phones. The same rules as in
   ny_design_om.css, which is scoped to that page. */
.nd_guider_2_page .nd_staff_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 16px;
    margin-top: 32px;
    list-style: none;
}
.nd_guider_2_page .nd_staff_card a {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}
.nd_guider_2_page .nd_staff_card .nd_people_portrait img {
    height: auto;
}
.nd_guider_2_page .nd_staff_card_name {
    margin-top: 16px;
}
.nd_guider_2_page .nd_staff_card_name span {
    padding-right: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M 11.746 0 L 10.335 1.418 L 13.605 4.673 L 0 4.686 L 0.002 6.686 L 13.57 6.673 L 10.355 9.903 L 11.772 11.313 L 17.416 5.643 L 11.746 0 Z' fill='%232c474d' transform='matrix(1 0 0 1 3.292 6.343)'/%3E%3C/svg%3E") no-repeat right 3px center / 16px 16px;
    transition: background-position 200ms var(--nd_ease);
}
.nd_guider_2_page .nd_staff_card a:hover .nd_staff_card_name span {
    background-position: right 0 center;
}
.nd_guider_2_page .nd_staff_card_dash {
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%) 0 0 / 6px 1px repeat-x;
}
.nd_guider_2_page .nd_staff_card_role {
    margin-top: 8px;
    color: var(--nd_gray_text);
}
@media (max-width: 767px) {
    .nd_guider_2_page .nd_staff_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 12px;
    }
}

/* On phones the service tiles are two to a row; minmax(0, 1fr) keeps a long service name inside
   its tile, where it breaks at its soft hyphen ("Ytskikts-renovering"). */
@media (max-width: 767px) {
    .nd_page.nd_guider_2_page .nd_service_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}