/*
 * The list pages and project pages of the new design: Tidigare projekt (/referenser/), Tips och
 * guider (/guider/), Omdömen (/omdomen/) and the project pages Christina and Nicole. Loaded after
 * ny_design.css on those pages only, and scoped like it under .nd_page.
 *
 * Type stays on the Playbook scale (regler 2026-11-05, 1 Typografi): body 16/26 Regular, ingress
 * Light 18/28, buttons and links Bold 14/20, small headings Bold 16/1.3, eyebrows 11/16, Space Mono
 * 11/16.
 */

/* ---------- The filter on a list page: dashed buttons that choose on the same page ---------- */

/* Dashed means a choice not yet made (PLAYBOOK 10); the chosen one is filled. The dashes are drawn as
   a pattern, never with border-style: dashed. */
.nd_page .nd_list_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nd_page .nd_section_head + .nd_list_filters {
    margin-top: 32px;
}
.nd_page .nd_hero + .nd_list_section .nd_list_filters:first-child {
    margin-top: 0;
}
.nd_page .nd_list_filter {
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image:
        linear-gradient(to right, var(--nd_green) 50%, transparent 50%),
        linear-gradient(to right, var(--nd_green) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_green) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_green) 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;
    color: var(--nd_green);
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 120ms var(--nd_ease);
}
.nd_page .nd_list_filter:hover {
    background-color: rgba(0, 0, 0, .05);
}
.nd_page .nd_list_filter[aria-pressed="true"] {
    background-color: var(--nd_green);
    background-image: none;
    color: var(--nd_off_white);
}

/* ---------- The grid of a list page (PLAYBOOK 13 "Rutnät för listsidor") ---------- */

/* Three columns on desktop, one on phones. The featured card and the big cards cover two columns and
   two rows, the big ones alternating sides; the ordinary cards fill the space beside them. Every
   picture is 4:3, also where the cover picture is standing (PLAYBOOK 13). */
.nd_page .nd_list_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    /* Every row as tall as the tallest, so a tip is as tall as the cards beside it. */
    grid-auto-rows: 1fr;
    gap: 40px 24px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_list_card {
    display: flex;
    min-width: 0;
}
.nd_page .nd_list_card[hidden] {
    display: none;
}
.nd_page .nd_list_card_featured {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}
.nd_page .nd_list_card_big_left {
    grid-column: 1 / span 2;
    grid-row: span 2;
}
.nd_page .nd_list_card_big_right {
    grid-column: 2 / span 2;
    grid-row: span 2;
}
.nd_page .nd_list_card_link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--nd_green) !important;
    text-decoration: none !important;
}
.nd_page .nd_list_card_image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--nd_placeholder);
}
/* A card over two rows is as tall as the ordinary cards beside it: its picture takes the height its
   text leaves, as in the design file, so no empty space opens between the text and the Typ line. */
.nd_page :is(.nd_list_card_featured, .nd_list_card_big_left, .nd_list_card_big_right) .nd_list_card_image {
    flex: 1 1 0;
    min-height: 240px;
    aspect-ratio: auto;
}
.nd_page :is(.nd_list_card_featured, .nd_list_card_big_left, .nd_list_card_big_right) .nd_list_card_body {
    flex: 0 0 auto;
}
.nd_page .nd_list_card_body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
}
.nd_page .nd_list_card_text {
    display: block;
    letter-spacing: .01em;
}
/* The Space Mono line with the short dashed line above it (PLAYBOOK 10, "som en måttlinje"), and
   "Läs mer" at the bottom of every card, so the links line up in a row (PLAYBOOK 13). */
.nd_page .nd_list_card_meta {
    margin-top: auto;
    padding-top: 6px;
    color: var(--nd_gray_text);
}
.nd_page .nd_list_card_meta::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-bottom: 8px;
    background-image: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 100%;
}
.nd_page .nd_list_card_body > :not(.nd_list_card_meta) + .nd_arrow_link {
    margin-top: auto;
}
.nd_page .nd_list_card_link:hover .nd_arrow_link svg {
    transform: translateX(3px);
}
/* The featured card: one light sand box, the picture edge to edge at the top and the text under it. */
.nd_page .nd_list_card_featured .nd_list_card_link,
.nd_page .nd_list_card_insert .nd_list_card_link {
    background: var(--nd_sand_light);
}
.nd_page .nd_list_card_featured .nd_list_card_body,
.nd_page .nd_list_card_insert .nd_list_card_body {
    padding: 24px;
}
.nd_page .nd_list_card_featured .nd_eyebrow {
    color: var(--nd_green);
}
/* A tip or guide among the cards: light sand, the size of one card, the eyebrow at the top and the
   short text at the bottom. Short standalone texts work as a heading and have no full stop. */
.nd_page .nd_list_card_tip_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 100%;
    padding: 28px;
    background: var(--nd_sand_light);
}
.nd_page .nd_list_card_tip_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.nd_page .nd_list_card_tip_text {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* A Dryfta card (kind "chat"): the questions are dashed, as chat suggestions are (PLAYBOOK 10: a
   choice made on this page), Regular 14/20 on off-white, and each opens the chat and asks itself. */
.nd_page .nd_list_card_questions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.nd_page .nd_list_card_question {
    padding: 8px 14px;
    background-color: var(--nd_off_white);
    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;
    color: var(--nd_green) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none !important;
    transition: background-color 120ms var(--nd_ease);
}
.nd_page .nd_list_card_question:hover {
    background-color: #f0f0f0;
}
/* The arrow link in a tip or guide card is the same as every other arrow link: Bold 14/20, the 16 px
   arrow 6 px after the text. */
.nd_page .nd_list_card_tip_body .nd_arrow_link {
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: normal;
}
/* A filter shows the chosen kind only, as ordinary cards in reading order, without tips. Each row is
   as tall as its own cards, so a row with the featured card's text does not make every other row as
   tall, with white space under the titles (Hanna, 2026-11-06). */
.nd_page .nd_list_grid_filtered {
    grid-auto-rows: auto;
}
/* An ordinary card's text shows only in a filtered view, where it stands in the same row as the
   featured card: the cards beside it then have text too, instead of white space. Elsewhere the
   ordinary cards have the title only. */
.nd_page .nd_list_grid:not(.nd_list_grid_filtered) .nd_list_card:not(.nd_list_card_featured, .nd_list_card_big_left, .nd_list_card_big_right) .nd_list_card_text {
    display: none;
}
/* The cards in the featured card's row end as far up as the text in its sand box, so the Typ lines
   and "Läs mer" line up (ny_design_listor.js, markCardsBesideFeaturedCard). */
.nd_page .nd_list_card_beside_featured .nd_list_card_body {
    padding-bottom: 24px;
}
.nd_page .nd_list_grid_filtered .nd_list_card {
    grid-column: auto;
    grid-row: auto;
}
.nd_page .nd_list_grid_filtered .nd_list_card .nd_list_card_image {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
}
.nd_page .nd_list_grid_filtered .nd_list_card_more {
    display: none;
}
@media (max-width: 1023px) {
    .nd_page .nd_list_card_tip_box {
        padding: 24px 20px;
    }
}
@media (max-width: 767px) {
    .nd_page .nd_list_grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 32px;
    }
    .nd_page .nd_list_card_featured,
    .nd_page .nd_list_card_big_left,
    .nd_page .nd_list_card_big_right {
        grid-column: auto;
        grid-row: auto;
    }
    .nd_page :is(.nd_list_card_featured, .nd_list_card_big_left, .nd_list_card_big_right) .nd_list_card_image {
        flex: none;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    /* Phones show the first paragraph of a big card only (PLAYBOOK 13), and no text on an ordinary
       card: with one card per row there is no row to fill. */
    .nd_page .nd_list_card_more,
    .nd_page .nd_list_card:not(.nd_list_card_featured, .nd_list_card_big_left, .nd_list_card_big_right) .nd_list_card_text {
        display: none;
    }
    .nd_page .nd_list_card_featured .nd_list_card_body,
    .nd_page .nd_list_card_insert .nd_list_card_body {
        padding: 16px 16px 28px;
    }
    .nd_page .nd_list_card_tip_box {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* ---------- Omdömen (/omdomen/) ---------- */

.nd_page .nd_reviews_page_sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
.nd_page .nd_reviews_page_source {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nd_green);
    text-decoration: none !important;
}
.nd_page .nd_reviews_page_source img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.nd_page .nd_reviews_page_sources .nd_mono {
    color: var(--nd_gray_text);
    white-space: nowrap;
}
/* The customer films: three in a row on desktop, two on phones, each 16:9 with the play square. */
.nd_page .nd_reviews_page_films {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
    list-style: none;
}
.nd_page .nd_reviews_page_films a {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nd_green);
}
.nd_page .nd_reviews_page_films img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* All the review cards in a grid, on light sand (design track "Omdömen"). */
.nd_page .nd_reviews_page_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}
/* The cards have the rating carousel's size (ny_design.css, .nd_review_card): 24 px padding, at
   least 280 px high, the text in a box that scrolls inside the card when the review is long. Only
   the width comes from the grid, and the background is light sand, as the grid is on off-white. */
.nd_page .nd_reviews_page_grid .nd_review_card {
    background: var(--nd_sand_light);
}
.nd_page .nd_reviews_page_grid + .nd_actions {
    margin-top: 32px;
}
@media (max-width: 1023px) {
    .nd_page .nd_reviews_page_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .nd_page .nd_reviews_page_films {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .nd_page .nd_reviews_page_films li:nth-child(3) {
        display: none;
    }
    .nd_page .nd_reviews_page_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Se alla projekt" under the grid on Tips och guider, where the old page had it under its projects. */
.nd_page .nd_list_after_grid {
    margin-top: 32px;
}

/* ---------- Project pages: a landscape picture in the tregrid (nd_project_gallery.html) ---------- */

/* Nicole's room in Cumulus is a landscape photo; it keeps 4:3, as in the design file, and is never
   cropped to the gallery's 4:5 (PLAYBOOK 11). On phones it takes the full width. */
.nd_page.nd_project_page .nd_project_gallery .nd_gallery_landscape img {
    aspect-ratio: 4 / 3;
}
@media (max-width: 767px) {
    .nd_page.nd_project_page .nd_project_gallery .nd_gallery_landscape {
        grid-column: span 2;
    }
}

/* Referenser: the chat comes right under the rating module (Kasper, 2026-11-06). Both are on light
   sand, so they run on as one band instead of leaving a thin off-white strip between them. */
.nd_page .nd_reviews + .nd_dryfta_block {
    margin-top: 0;
}