/**
 * DPI page template (template-dpi.php).
 * Base styles come from style.css. This file adds only the layout that the
 * WordPress core block CSS gave the old block-based page.
 */

/* Space between the header rows (was .wp-block-columns margin-bottom). */
.dpi-page .dpi-row { margin-bottom: 4rem; }
@media only screen and (max-width: 64em) { .dpi-page .dpi-row { margin-bottom: 2rem; } }

/* Space between sections. */
.dpi-page .dpi-section { margin-bottom: 4rem; }
.dpi-page .dpi-section:last-child { margin-bottom: 0; }
@media only screen and (max-width: 47.5em) { .dpi-page .dpi-section { margin-bottom: 3rem; } }

/* Section headings: no negative margin. scroll-margin-top keeps the quick-link target below the window edge. */
.dpi-page .subsection__heading { margin-top: 0; padding-top: 0; scroll-margin-top: 2rem; }
.dpi-page .dpi-section .subsection__heading ~ .subsection__heading { margin-top: 2.5rem; }

/* Images. */
.dpi-page .wp-block-image { margin: 0 0 1em; }
.dpi-page .wp-block-image img { display: block; max-width: 100%; height: auto; }

/* Tables: scroll on small screens. */
.dpi-page .dpi-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* File download (was core File block). */
.dpi-page .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; margin-bottom: 1em; }
.dpi-page .wp-block-file__button { display: inline-block; padding: .5em 1em; border-radius: 2em; background-color: #32373c; font-size: .8em; text-decoration: none; }

/* Merchandise: 2 items in a row (was core Columns block). */
.dpi-page .dpi-merch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em 2em; }
@media only screen and (max-width: 47.5em) { .dpi-page .dpi-merch { grid-template-columns: 1fr; } }

/* Space below the page content. */
main.dpi-page { padding-bottom: 6rem; }
@media only screen and (max-width: 47.5em) { main.dpi-page { padding-bottom: 4rem; } }