/* Inspiration guides in the new design (MALLAR.md "Guide"): 5 populära stilar på badrum and
   5 snygga blandare. Loaded after ny_design.css on those pages only; everything is scoped to
   .nd_guider_page or to the guide modules' own classes. */

/* A list of short points inside copy: the small green squares, without the copy's list indent. */
.nd_guider_page .nd_rich .nd_square_list {
    padding-left: 0;
}
.nd_guider_page .nd_rich .nd_square_list li + li {
    margin-top: 0;
}

/* ---------- The hero ----------
   The shared spacing (48 px under the menu, 28 px from the breadcrumb to the H1, 20 px to the
   ingress), then, as in the design's guide tracks, 32 px to the style chips and 48 px (32 on
   phones) to the hero image, so the image does not crowd the text. */
/* 5 snygga blandare: the H1 breaks after "för" (Hanna, 2026-11-05), so it fills its line under the
   shared 880 px cap instead of being balanced. */
.nd_page.nd_guider_blandare_page .nd_hero > .nd_container > .nd_h1 {
    text-wrap: wrap;
}
.nd_page.nd_guider_page .nd_hero > .nd_container > .nd_hero_actions {
    margin-top: 32px;
}
.nd_page.nd_guider_page .nd_hero > .nd_container > .nd_hero_image {
    margin-top: 48px;
}
@media (max-width: 767px) {
    .nd_page.nd_guider_page .nd_hero > .nd_container > .nd_hero_actions,
    .nd_page.nd_guider_page .nd_hero > .nd_container > .nd_hero_image {
        margin-top: 32px;
    }
}

/* ---------- 5 snygga blandare: a faucet beside the text ---------- */

/* The brand and finish on the picture, white Space Mono after a short dashed line, on a light
   gradient from the bottom (Playbook, Text på bild). */
.nd_guider_product {
    position: relative;
    overflow: hidden;
}
.nd_guider_product::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 50%);
    pointer-events: none;
}
.nd_page .nd_guider_product_label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 12px;
    padding-left: 10px;
    background: linear-gradient(to bottom, var(--nd_off_white) 50%, transparent 50%) 0 0 / 1px 6px repeat-y;
    color: var(--nd_off_white);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.nd_guider_product_label dd {
    margin: 0;
}

/* ---------- 5 populära stilar på badrum ---------- */

/* The styles as dashed chips under the ingress, each a link to its chapter. */
.nd_guider_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nd_page .nd_guider_chips a {
    padding: 8px 16px;
    border: 1px solid transparent;
    background-image:
        linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 1px, 6px 1px, 1px 6px, 1px 6px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-origin: border-box;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_green) !important;
    text-decoration: none !important;
}
.nd_page .nd_guider_chips a:hover {
    background-color: var(--nd_sand_light);
}

/* A style: its number and heading, then the pictures with the price under them and the text
   under that. On phones the text comes first, with the price under it and the pictures last. */
.nd_guider_style_section {
    scroll-margin-top: 120px;
}
.nd_page .nd_guider_style_section .nd_chapter_number + .nd_h2 {
    margin-top: 12px;
}
.nd_guider_style {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}
.nd_guider_style_media {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.nd_guider_style_text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 1;
}
/* The big picture on the left as high as the two small ones stacked on the right, all 4:5. */
.nd_guider_trio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
    grid-template-rows: auto auto;
    gap: 12px;
}
.nd_guider_trio img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--nd_placeholder);
}
.nd_guider_trio img:first-child {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
}
/* The price in Space Mono, after a short dashed line (MALLAR.md: under the pictures on desktop
   and tablet, under the list on phones). */
.nd_page .nd_guider_price {
    color: var(--nd_green);
}
.nd_page .nd_guider_price::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    margin-bottom: 8px;
    background: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%) 0 0 / 6px 1px repeat-x;
}
.nd_guider_price_label {
    color: var(--nd_gray_text);
}
/* A sum never breaks over two lines. */
.nd_guider_price_value {
    white-space: nowrap;
}
@media (max-width: 767px) {
    .nd_guider_style_text {
        order: -2;
    }
    .nd_guider_price {
        order: -1;
    }
    .nd_guider_trio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .nd_guider_trio img:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }
}

/* Emma's box (nd_contact_person.html): her link to the tips is a paragraph of the quote. When it
   wraps on a phone, the arrow follows the last word instead of standing alone at the right edge. */
.nd_page.nd_guider_page .nd_person_box .nd_rich a.nd_arrow_link {
    display: inline;
}
.nd_page.nd_guider_page .nd_person_box .nd_rich a.nd_arrow_link svg {
    display: inline;
    margin-left: 6px;
    vertical-align: -3px;
}

/* Emma's tips: the FAQ's accordion with a Space Mono number before each tip. */
.nd_guider_tips {
    scroll-margin-top: 120px;
}
.nd_page .nd_guider_tips .nd_faq_question {
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.nd_page .nd_guider_tips .nd_faq_question .nd_mono {
    flex: none;
    color: var(--nd_gray_text);
}
.nd_page .nd_guider_tips .nd_faq_answer {
    max-width: 720px;
}

/* ---------- SEO guides with the chat in the hero (round 3) ----------
   The painting, carpentry, energy, ventilation, window and plumbing guides: the rating row and
   the chat in the hero, the old copy in text sections with a line before each H2, the FAQ, the
   reviewer, and "Dryfta ditt projekt" at the end (nd_dryfta_cta.html). Scoped to
   .nd_guider_seo_page. */

/* Vad kostar det att måla om ett rum: a price range in the table never breaks over two lines
   (clean_cms_richtext takes away the old table's own nowrap). */
.nd_page.nd_guider_seo_page .nd_rich .kmi_pris {
    white-space: nowrap;
}

/* Energiklass hus has the sticky bar: the chat bubble stands above it, so it does not cover the
   bar's button. */
body:has(.nd_guider_seo_page .nd_sticky_bar) .nd_chat_bubble {
    bottom: 93px;
}
@media (max-width: 767px) {
    body:has(.nd_guider_seo_page .nd_sticky_bar) .nd_chat_bubble {
        bottom: 85px;
    }
}

/* ---------- Smarta lösningar i badrummet: two pictures beside one chapter ----------
   "Nischad hylla" has two pictures of niches; they stand side by side in 4:5 where the other
   chapters have one picture, so the chapter keeps the rhythm of text beside pictures. */
.nd_page .nd_text_image_media.nd_guider_media_pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    aspect-ratio: auto;
    background: none;
}
.nd_page .nd_guider_media_pair img {
    aspect-ratio: 4 / 5;
    background: var(--nd_placeholder);
    width: 100%;
    height: auto;
    object-fit: cover;
}