/**
 * Interior pages
 *
 * Every page except the homepage: a full-width dark title band that carries
 * the homepage hero's ground and measuring grid, then content on light paper
 * with white cards, like the homepage's Product families section. Tokens live
 * in brand.css; the catalog's own components are in the h2w-catalog plugin.
 *
 * Page anatomy (see templates/*.html and blocks/page-band):
 *   main.h2w-page
 *     header.h2w-band > .h2w-band__inner   breadcrumb, title, lead, actions
 *     .h2w-page-body                        sections on paper
 */

/* ---------- Page frame ---------- */

body:not(.home) {
    background: var(--h2w-paper);
    color: var(--h2w-ink);
    font-family: var(--h2w-font-body);
}

/* Templates own all vertical spacing; drop the block gap between root blocks */
body:not(.home) .wp-site-blocks > * {
    margin-block-start: 0;
}

/* Short pages: keep the footer at the bottom of the window */
body:not(.home) .wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:not(.home) .wp-site-blocks > .h2w-page {
    flex: 1 0 auto;
}

.h2w-page {
    margin: 0;
}

.h2w-page > * {
    margin-block: 0;
}

.h2w-page-body {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--h2w-max) + 2 * var(--h2w-gutter));
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--h2w-gutter) clamp(4rem, 8vw, 6rem);
}

.h2w-page-body > * + * {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Tools such as the calculators use the full 1240px column */
.h2w-page-body--wide .wp-block-post-content > * {
    max-width: none;
}

.h2w-post-image img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 6px;
}

.h2w-page h1,
.h2w-page h2,
.h2w-page h3,
.h2w-page h4 {
    font-family: var(--h2w-font-display);
    color: var(--h2w-ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

:where(.h2w-page-body) a {
    color: var(--h2w-blue);
    text-underline-offset: 0.18em;
}

:where(.h2w-page-body) a:hover {
    color: var(--h2w-blue-hover);
}

/* ---------- Title band ---------- */

.h2w-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--h2w-ground);
    color: var(--h2w-text);
    border-bottom: 1px solid var(--h2w-line-dark);
}

/* Measuring grid, as in the homepage hero, fading out toward the title */
.h2w-band::before,
.h2w-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.h2w-band::before {
    background-image:
        linear-gradient(to right, rgba(138, 168, 240, 0.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(138, 168, 240, 0.09) 1px, transparent 1px),
        linear-gradient(to right, rgba(138, 168, 240, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(138, 168, 240, 0.035) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

.h2w-band::after {
    background: linear-gradient(100deg, var(--h2w-ground) 25%, rgba(18, 24, 38, 0.8) 60%, rgba(18, 24, 38, 0.35) 100%);
}

.h2w-band__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--h2w-max) + 2 * var(--h2w-gutter));
    margin-inline: auto;
    padding: clamp(2.25rem, 5vw, 3.75rem) var(--h2w-gutter) clamp(2.5rem, 5vw, 4rem);
}

.h2w-band__inner > * {
    margin-block: 0;
}

/* With a product photo: copy left, framed image right */
.h2w-band--media .h2w-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.h2w-band__copy > * {
    margin-block: 0;
}

.h2w-band .h2w-band__title,
.h2w-band h1 {
    margin-top: 0.75rem;
    color: #fff;
    font-family: var(--h2w-font-display);
    font-size: clamp(2.125rem, 4.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

/* Gold rule under the title, from the hero image frame */
.h2w-band .h2w-band__title::after,
.h2w-band h1::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 1.125rem;
    background: var(--h2w-gold-lit);
}

.h2w-band__lead {
    max-width: 62ch;
    margin-top: 1.25rem !important;
    color: var(--h2w-text-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

.h2w-band__lead strong {
    color: var(--h2w-text);
    font-weight: 600;
}

.h2w-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem !important;
}

/* Ghost button on the dark band */
.h2w-btn--ghost {
    background: transparent;
    border-color: rgba(232, 236, 242, 0.45);
    color: var(--h2w-text);
}

.h2w-btn--ghost:hover,
.h2w-btn--ghost:focus-visible {
    border-color: var(--h2w-text);
    color: #fff;
}

/* Key figures, as in the hero image card */
.h2w-band__stats {
    display: flex;
    flex-wrap: wrap;
    margin: 1.75rem 0 0 !important;
    padding: 0;
    border-top: 1px solid var(--h2w-line-dark);
}

.h2w-band__stat {
    padding: 0.875rem 2rem 0 0;
}

.h2w-band__stat + .h2w-band__stat {
    padding-left: 2rem;
    border-left: 1px solid var(--h2w-line-dark);
}

.h2w-band__stat dt {
    color: var(--h2w-text-muted);
    font-size: 0.8125rem;
}

.h2w-band__stat dd {
    margin: 0.125rem 0 0;
    color: #fff;
    font-family: var(--h2w-font-mono);
    font-size: 1.375rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Headline specs in the product band */
.h2w-band__stat dd .spec-v {
    color: #fff;
    font-family: inherit;
}

.h2w-band__stat dd .spec-alt {
    margin-left: 0.5rem;
    color: var(--h2w-text-muted);
    font-size: 0.875rem;
}

/* Framed photo with gold corner ticks; product shots are on white */
.h2w-band__media {
    position: relative;
    margin: 0;
    padding: 0.75rem;
    background: var(--h2w-panel);
    border: 1px solid var(--h2w-line-dark);
    border-radius: 4px;
}

.h2w-band__media::before,
.h2w-band__media::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--h2w-gold-lit);
    border-style: solid;
}

.h2w-band__media::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.h2w-band__media::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 2px 2px 0;
}

.h2w-band__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border-radius: 2px;
}

/* ---------- Breadcrumb ---------- */

.h2w-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--h2w-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.h2w-breadcrumb li {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--h2w-text-muted);
}

.h2w-breadcrumb li + li::before {
    content: "/";
    margin-inline: 0.625rem;
    color: rgba(163, 174, 192, 0.55);
}

.h2w-breadcrumb a {
    color: var(--h2w-blue-lit);
    text-decoration: none;
}

.h2w-breadcrumb a:hover,
.h2w-breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.h2w-breadcrumb [aria-current] {
    color: var(--h2w-text);
}

/* ---------- Sections on paper ---------- */

.h2w-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.h2w-page .h2w-section__title {
    margin: 0;
    font-size: clamp(1.625rem, 2.6vw, 2rem);
    font-weight: 700;
}

.h2w-section__meta {
    margin: 0;
    color: var(--h2w-ink-muted);
    font-family: var(--h2w-font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.h2w-card {
    background: #fff;
    border: 1px solid var(--h2w-line-light);
    border-radius: 6px;
}

/* ---------- Long-form copy ---------- */

.h2w-prose {
    max-width: 75ch;
    color: var(--h2w-ink);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.h2w-prose > * {
    margin-block: 0;
}

.h2w-prose > * + * {
    margin-top: 1.1em;
}

.h2w-prose h2 {
    margin-top: 2.25em;
    font-size: 1.625rem;
    font-weight: 700;
}

.h2w-prose h3 {
    margin-top: 1.9em;
    font-size: 1.25rem;
    font-weight: 600;
}

.h2w-prose h4 {
    margin-top: 1.6em;
    font-size: 1.0625rem;
    font-weight: 600;
}

.h2w-prose h2 + *,
.h2w-prose h3 + *,
.h2w-prose h4 + * {
    margin-top: 0.6em;
}

.h2w-prose > :first-child {
    margin-top: 0;
}

.h2w-prose ul,
.h2w-prose ol {
    padding-left: 1.25em;
}

.h2w-prose li + li {
    margin-top: 0.35em;
}

.h2w-prose li::marker {
    color: var(--h2w-ink-muted);
}

.h2w-prose strong {
    color: var(--h2w-ink);
    font-weight: 600;
}

.h2w-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.h2w-prose blockquote {
    margin-inline: 0;
    padding: 0.25em 0 0.25em 1.25em;
    border-left: 3px solid var(--h2w-gold);
    color: var(--h2w-ink-muted);
}

.h2w-prose hr {
    margin-block: 2.5em;
    border: 0;
    border-top: 1px solid var(--h2w-line-light);
}

.h2w-prose code {
    padding: 0.1em 0.35em;
    background: #e9edf3;
    border-radius: 3px;
    font-family: var(--h2w-font-mono);
    font-size: 0.9em;
}

/* Tables inside copy: comparison and feature tables in catalog overviews */
.h2w-prose table,
.h2w-prose .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--h2w-line-light);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.h2w-prose .wp-block-table {
    margin-inline: 0;
    overflow-x: auto;
}

.h2w-prose th,
.h2w-prose td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--h2w-line-light);
    text-align: left;
    vertical-align: top;
}

.h2w-prose thead th {
    background: #f6f8fb;
    color: var(--h2w-ink-muted);
    font-family: var(--h2w-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.h2w-prose tr:last-child > td {
    border-bottom: 0;
}

/* ---------- Forms on paper ---------- */

.h2w-page-body input[type="text"],
.h2w-page-body input[type="search"],
.h2w-page-body input[type="email"],
.h2w-page-body input[type="number"],
.h2w-page-body input[type="tel"],
.h2w-page-body select,
.h2w-page-body textarea {
    box-sizing: border-box;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #b9c2d0;
    border-radius: 3px;
    color: var(--h2w-ink);
    font: inherit;
    font-size: 0.9375rem;
}

.h2w-page-body input:focus-visible,
.h2w-page-body select:focus-visible,
.h2w-page-body textarea:focus-visible {
    outline: 2px solid var(--h2w-blue);
    outline-offset: 1px;
    border-color: var(--h2w-blue);
}

/* Core buttons inside page content follow the brand button */
.h2w-page-body .wp-block-button__link,
.h2w-page-body .wp-block-search__button {
    min-height: 44px;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 0.75rem 1.375rem;
    background: var(--h2w-blue);
    border: 1px solid var(--h2w-blue);
    border-radius: 3px;
    color: #fff;
    font-family: var(--h2w-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.h2w-page-body .wp-block-button__link:hover,
.h2w-page-body .wp-block-search__button:hover {
    background: var(--h2w-blue-hover);
    color: #fff;
}

/* ---------- Blog lists, search results, 404 ---------- */

.h2w-post-list .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h2w-post-list .wp-block-post {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--h2w-line-light);
    border-radius: 6px;
    transition: border-color 0.15s ease;
}

.h2w-post-list .wp-block-post:hover,
.h2w-post-list .wp-block-post:focus-within {
    border-color: var(--h2w-blue);
}

.h2w-post-list .wp-block-post > * {
    margin: 0;
}

.h2w-post-list .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.h2w-post-list .wp-block-post-title {
    padding: 1.25rem 1.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.h2w-post-list .wp-block-post-title a {
    color: var(--h2w-ink);
    text-decoration: none;
}

.h2w-post-list .wp-block-post-date {
    padding: 0.5rem 1.25rem 0;
    color: var(--h2w-ink-muted);
    font-family: var(--h2w-font-mono);
    font-size: 0.8125rem;
}

.h2w-post-list .wp-block-post-excerpt {
    padding: 0.75rem 1.25rem 1.25rem;
    color: var(--h2w-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.h2w-post-list .wp-block-post-excerpt__excerpt {
    margin: 0;
}

.h2w-post-list .wp-block-query-pagination {
    margin-top: 2.5rem;
    font-family: var(--h2w-font-mono);
    font-size: 0.875rem;
}

.h2w-empty {
    max-width: 60ch;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.h2w-empty > * {
    margin-block: 0;
}

.h2w-empty > * + * {
    margin-top: 1rem;
}

.h2w-empty p {
    color: var(--h2w-ink-muted);
}

.h2w-empty .wp-block-search__inside-wrapper {
    display: flex;
    gap: 0.5rem;
}

.h2w-empty .wp-block-search__input {
    flex: 1;
}

.h2w-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 1rem !important;
    color: var(--h2w-text-muted);
    font-family: var(--h2w-font-mono);
    font-size: 0.8125rem;
}

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
    .h2w-band--media .h2w-band__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .h2w-band__media {
        max-width: 420px;
    }
}

@media (max-width: 600px) {
    /* Phones: data first. The photo repeats in the cards and gallery below. */
    .h2w-band__media {
        display: none;
    }

    .h2w-band__lead {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .h2w-band__stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    .h2w-band__stat,
    .h2w-band__stat + .h2w-band__stat {
        padding: 0.875rem 0 0;
        border-left: 0;
    }

    .h2w-band__actions .h2w-btn {
        flex: 1 1 auto;
    }
}