/*
 * Content pages: every editable page (functions/info/index.html, all five
 * layouts) - Sale, News, Information, Contact - and the dedicated content
 * pages (Cookiebeleid, the withdrawal confirmation). Decisions 18 and 19.
 *
 * One column of reading - header, image, text - held to the reading measure
 * and aligned with the breadcrumb and title; then what the page has beside
 * the text from 1024px (its products, or its CMS side column), below it on
 * smaller screens. No Foundation grid, no grey .panel: spacing and type set
 * the page.
 *
 *   top      a heading step below the navigation, not a section's gap: the
 *            breadcrumb belongs to the page it starts
 *   inside   header, image and text a subsection apart
 *   products a section's gap after the text: their own section, not the
 *            article running on (their heading is visually hidden); beside
 *            the text from 1024px, below
 *   bottom   a section's gap to the footer, as on the homepage
 */

.content-page {
    display: flex;
    flex-direction: column;
    gap: var(--shop-rhythm-section);
    padding-block: var(--shop-rhythm-heading) var(--shop-rhythm-section);
}

.content-page__main {
    display: flex;
    flex-direction: column;
    gap: var(--shop-rhythm-subsection);
}

.content-page__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--shop-radius-lg);
}

/* The link in the page header jumps here: clear of the top edge. It takes
   focus (tabindex="-1") without a ring round the whole section; the next Tab
   lands on the first card, which has its own. */
.content-page__products {
    scroll-margin-block-start: var(--shop-space-4);
}

.content-page__products:focus {
    outline: none;
}

/* The accessories' method guide (Decision 29): the grid's container width, with
   running text held to a reading measure; the table may use the full width. */
.accessories-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shop-rhythm-heading);
    padding-block-start: var(--shop-rhythm-section);
    border-block-start: 1px solid var(--shop-divider);
    scroll-margin-block-start: var(--shop-space-4);
}

.accessories-guide:focus {
    outline: none;
}

/* combined.css sets h2's size and weight. */
.accessories-guide__title {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-xl);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.accessories-guide .cms-prose > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
    max-width: 72ch;
}

/* A long document (the legal texts, the cookie declaration) is read start to
   finish, tens of thousands of characters: its column is held to the width
   of the text column beside a side column (about 75 characters a line), not
   the 40rem measure, where it ran to 85-95. Its tables keep their own width
   (consent-declaration.css). */
.content-page--document .shop-measure,
.content-page--document .consent-declaration > :not(table) {
    max-width: 36rem;
}

/* An image an editor put straight in the text or the side column
   (Leginstructies' banner, Legservice's photo, the FAQ's promotion link) gets
   the rounded edge of the figures and the header image. */
.content-page__main > .cms-prose > img,
.content-page__aside > img,
.content-page__aside > a > img {
    display: block;
    border-radius: var(--shop-radius-lg);
}

/* Desktop: text and products side by side ---------------------------------
   From 1024px a page that renders products, or has a CMS side column (the
   template adds --split; a page with neither stays one column), puts them
   beside the reading column, 60/40, in the container's own width - the space
   the measure leaves on the right. No background, divider or sticky column:
   the grid is the only device.

   The document order does not change: the main column's children (header,
   image, text) are placed in column 1 and the products in column 2, beside
   the image and text rather than the title. Two cards per row there come to
   about 182px - the homepage's card width, stock on one line. A second group
   (accessories) runs across both columns below, in the full-width grid,
   rather than stretching the narrow column past the text; a page with only
   accessories has them beside the text like any first group. Below 1024px it all
   stacks, in document order, as above. */
@media (min-width: 1024px) {
    .content-page--split {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
        gap: var(--shop-rhythm-subsection) var(--shop-space-12);
    }

    .content-page--split .content-page__main {
        display: contents;
    }

    .content-page--split .content-page__main > * {
        grid-column: 1;
    }

    .content-page--split .page-header {
        grid-row: 1;
    }

    .content-page--split .content-page__products {
        grid-column: 2;
        grid-row: 2;
    }

    .content-page--split .content-page__aside {
        grid-column: 2;
        grid-row: 2;
    }

    /* Where the main column has two blocks under the header - an image and
       the text, or the text and the FAQ's questions (the template says so with
       a class) - the second column sits beside both. The last row is flexible
       so that a second column taller than both grows it, not the first row:
       that would open a gap under a short article's image. */
    .content-page--split.content-page--split-rows-2 {
        grid-template-rows: auto auto 1fr;
    }

    .content-page--split.content-page--split-rows-2 :is(.content-page__products, .content-page__aside) {
        grid-row: 2 / span 2;
    }

    /* Two cards per row beside the text. */
    .content-page--split .content-page__products:first-of-type .product-grid--fill {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* A second group (accessories) is placed automatically below whatever
       column ends last, in the full-width grid. */
    .content-page--split .content-page__products + .content-page__products {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* The products are on screen beside the text: nothing to jump to. */
    .content-page--split .page-header .shop-section__action {
        display: none;
    }
}