/* The SEO pages for a service in a city, rebuilt in the new design (MALLAR.md, "Hantverk" and
   "Ortssida"): Badrum Stockholm, Kök Stockholm and Badrum Nacka. Only what ny_design.css does not
   already have; every rule is scoped to a class on these pages. */

/* "Kom igång med ditt badrum": the three steps and the orange button, as "Så Dryftar du" on the
   start page but without the phone (design file, track Badrum Stockholm). */
.nd_page .nd_seo_steps .nd_dryfta_steps {
    margin-top: 24px;
}
.nd_page .nd_seo_steps .nd_btn_dryfta {
    margin-top: 32px;
}

/* The project cards under "Badrum vi har renoverat": the start page's carousel, with the
   heading as a big heading. */
.nd_page .nd_seo_projects .nd_project_cards {
    margin-top: 24px;
}

/* "Vad kostar just ditt badrum?" under the price table: a light sand box with the orange button. */
.nd_page .nd_seo_price_cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_seo_price_cta .nd_btn_dryfta {
    margin-top: 12px;
}
@media (max-width: 767px) {
    .nd_page .nd_seo_price_cta {
        padding: 24px 16px;
    }
}

/* "Vi som hjälper dig med ditt badrum": four portraits on portrait sand, the name under each as
   an underlined link to the person's page (design file, track Badrum Stockholm). */
.nd_page .nd_seo_people {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 16px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_seo_people a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.nd_page .nd_seo_people a:hover {
    text-decoration-thickness: 2px;
}
.nd_page .nd_seo_people .nd_people_portrait img {
    width: var(--nd_seo_portrait_width, 90%);
    top: var(--nd_seo_portrait_top, 3%);
}
@media (max-width: 767px) {
    .nd_page .nd_seo_people {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* "Vi är stolta sponsorer av idrottsföreningar i Nacka": the clubs' logos in a row, on a dark
   green block, as two of the three logos are white. */
.nd_page .nd_seo_sponsor_block {
    padding: 40px 48px;
    background: var(--nd_green);
    color: var(--nd_off_white);
}
.nd_page .nd_seo_sponsor_block .nd_eyebrow {
    color: #e1f3f0;
}
@media (max-width: 767px) {
    .nd_page .nd_seo_sponsor_block {
        padding: 32px 20px;
    }
}
.nd_page .nd_seo_sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 48px;
    margin-top: 24px;
    list-style: none;
}
.nd_page .nd_seo_sponsors img {
    width: auto;
    height: 72px;
}
@media (max-width: 767px) {
    .nd_page .nd_seo_sponsors {
        gap: 24px 32px;
    }
    .nd_page .nd_seo_sponsors img {
        height: 56px;
    }
}

/* A closing call to action with copy: a heading, the copy, a framed button and a short note
   right under it ("Vi återkommer inom 24 timmar"). */
.nd_page .nd_seo_cta .nd_rich {
    margin-top: 16px;
}
.nd_page .nd_seo_cta .nd_actions {
    margin-top: 32px;
}
.nd_page .nd_seo_cta_note {
    margin-top: 8px;
    color: var(--nd_gray_text);
    font-size: 14px;
    line-height: 20px;
}

/* "Så funkar det att renovera köket": five steps with a result each, as nd_steps.html has three. */
.nd_page .nd_seo_flow .nd_steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 860px;
    margin-top: 24px;
}