/* One length resolved at the site root, inherited by every nested layout.
   Registration prevents cqw from changing meaning inside plugin containers. */
@property --cosma-unit {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}
@property --cosma-origin {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}
html { container-type: inline-size; }
body.cosma-v2,
.editor-styles-wrapper {
    --cosma-editorial-inset: max(1.5rem, 5cqw);
    --cosma-editorial-width: calc(100cqw - 2 * var(--cosma-editorial-inset));
    --cosma-copy-padding: clamp(1rem, 1.667vw, 2rem);
    --cosma-unit: round(nearest, calc(100cqw / 17), 1px);
    --cosma-grid-step: var(--cosma-unit);
    --cosma-tracks: 14;
    --cosma-origin: calc((100cqw - var(--cosma-unit) * 16) / 2);
    --cosma-inset: calc(var(--cosma-origin) + var(--cosma-unit));
    --cosma-content-width: calc(var(--cosma-unit) * 14);
    --cosma-wide-width: calc(var(--cosma-unit) * 16);
    --cosma-gutter: var(--cosma-inset);
    --cosma-section-space: var(--cosma-unit);
    --cosma-line: #5fbfed;
    --cosma-stroke: 1px;
}
.cosma-container {
    inline-size: var(--cosma-content-width);
    max-inline-size: none;
    margin-inline: auto;
}
/* The surface and layout consume exactly the same unit and origin. */
.cosma-grid-surface {
    background-image:
        linear-gradient(to right, var(--cosma-line) var(--cosma-stroke), transparent var(--cosma-stroke)),
        linear-gradient(to bottom, var(--cosma-line) var(--cosma-stroke), transparent var(--cosma-stroke));
    background-size: var(--cosma-grid-step) var(--cosma-grid-step);
    background-position: var(--cosma-origin) 0;
}
.cosma-grid-surface--large {
    --cosma-grid-step: calc(var(--cosma-unit) * 2);
    --cosma-tracks: 6;
    --cosma-content-width: calc(var(--cosma-grid-step) * 6);
    --cosma-inset: calc(var(--cosma-origin) + var(--cosma-grid-step));
    --cosma-section-space: var(--cosma-grid-step);
}
.cosma-grid-surface .cosma-content { background-color: #fff; }
/* Opaque panels cover the surface's line at their starting edge. Paint that
   boundary above the panel, without moving it or drawing through its content. */
.cosma-grid-surface .cosma-content,
.cosma-project-grid .project-item {
    position: relative;
    isolation: isolate;
}
.cosma-project-grid .project-item::after {
    content: "";
    position: absolute;
    /* A grid stroke starts on its coordinate and extends right/down. Match
       that paint extent, so the right/bottom strokes do not become doubled. */
    inset: 0 calc(-1 * var(--cosma-stroke)) calc(-1 * var(--cosma-stroke)) 0;
    border-inline: var(--cosma-stroke) solid var(--cosma-line);
    pointer-events: none;
    z-index: 1;
}
.cosma-project-grid .project-item::after {
    border-block: var(--cosma-stroke) solid var(--cosma-line);
}
.cosma-grid {
    display: grid;
    grid-template-columns: repeat(var(--cosma-tracks), minmax(0, 1fr));
    gap: 0;
}
.cosma-grid > * {
    min-inline-size: 0;
    grid-column: var(--cosma-start, auto) / span var(--cosma-span, var(--cosma-tracks));
}
.cosma-grid > .cosma-grid { grid-template-columns: subgrid; }
.cosma-archive-heading { padding-block: var(--cosma-unit); margin-block-end: 0; }
.cosma-archive-heading h1 { margin: 0; }
/* Empty tracks form real, visible gutters. Rows and the background share a unit.
   Each card spans whole rows; no DOM measurements, clipping or line clamping. */
.cosma-project-grid {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-auto-rows: var(--cosma-unit);
    column-gap: 0;
    row-gap: 0;
    padding-block: 0 var(--cosma-unit);
}
.cosma-project-grid .project-item {
    grid-column: span 6;
    grid-row: span 10;
    margin-block-end: calc(var(--cosma-unit) * 2);
    min-inline-size: 0;
    min-block-size: 0;
    background: #fff;
}
.cosma-project-grid .project-item:nth-child(2n) { grid-column: 9 / 15; }
@media (min-width: 1100px) {
    .cosma-project-grid .project-item {
        --cosma-card-span: 10;
        grid-row: calc(var(--cosma-card-pair, 0) * var(--cosma-card-span) + 1 + var(--cosma-card-offset, 0)) / span var(--cosma-card-span);
    }
    .cosma-project-grid .project-item:nth-child(2n) { --cosma-card-offset: 2; }
}
.cosma-card-link {
    display: grid;
    grid-template-rows: calc(var(--cosma-unit) * 4) minmax(0, 1fr);
    block-size: 100%;
    color: inherit;
    text-decoration: none;
}
.cosma-card-link:focus-visible { outline-offset: 4px; }
.cosma-card-media { position: relative; min-block-size: 0; background: var(--wp--preset--color--cosma-pale-blue); }
.cosma-card-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cosma-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--cosma-line) var(--cosma-stroke), transparent var(--cosma-stroke)),
        linear-gradient(to bottom, var(--cosma-line) var(--cosma-stroke), transparent var(--cosma-stroke));
    background-size: var(--cosma-grid-step) var(--cosma-grid-step);
    pointer-events: none;
    transition: opacity 180ms ease;
}
@media (hover: hover) {
    .cosma-card-link:hover .cosma-card-media::after { opacity: 0; }
}
.cosma-card-link:focus-visible .cosma-card-media::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .cosma-card-media::after { transition: none; }
}
.cosma-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--cosma-copy-padding);
    gap: clamp(0.75rem, calc(var(--cosma-unit) * 0.25), 1.25rem);
    min-block-size: 0;
}
.cosma-card-copy :is(h2, h3) {
    margin: 0;
    font-size: max(25px, 1.9vw);
    line-height: 1.028;
    overflow-wrap: anywhere;
}
.cosma-card-copy p {
    margin: 0;
    font-size: max(20px, 1.5625vw);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.cosma-card-logo { margin-block-start: auto; align-self: flex-end; }
.cosma-card-logo img {
    display: block;
    max-inline-size: min(100%, 180px);
    max-block-size: 40px;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}
.cosma-content > .alignwide {
    inline-size: var(--cosma-wide-width);
    max-inline-size: none;
    margin-inline: calc((var(--cosma-content-width) - var(--cosma-wide-width)) / 2);
}
.cosma-content > .alignfull {
    inline-size: calc(var(--cosma-content-width) + 2 * var(--cosma-inset));
    max-inline-size: none;
    margin-inline: calc(-1 * var(--cosma-inset));
}
.cosma-project-header {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0;
}
.cosma-project-header > :first-child { grid-column: 1 / 12; }
.cosma-project-header > .cosma-project-logo { grid-column: 13 / 15; }
.cosma-footer-grid {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0;
}
.cosma-footer-grid > :nth-child(1) { grid-column: 1 / 5; }
.cosma-footer-grid > :nth-child(2) { grid-column: 6 / 10; }
.cosma-footer-grid > :nth-child(3) { grid-column: 11 / 15; }
@media (782px <= width < 1100px) {
    .cosma-project-grid .project-item:nth-child(n) { grid-column: 1 / -1; grid-row: span 10; }
    .cosma-card-link { grid-template-rows: calc(var(--cosma-unit) * 3) minmax(0, 1fr); }
}
@media (1100px <= width < 1200px) {
    .cosma-project-grid .project-item { --cosma-card-span: 11; }
}
@media (width < 400px) {
    .cosma-project-grid .project-item:nth-child(n) { grid-row: span 11; }
}
@media (480px <= width < 600px) {
    .cosma-project-grid .project-item:nth-child(n) { grid-row: span 9; }
}
@media (600px <= width < 782px) {
    .cosma-project-grid .project-item:nth-child(n) { grid-row: span 8; }
}
@media (width < 782px) {
    body.cosma-v2,
    .editor-styles-wrapper {
        --cosma-unit: round(nearest, calc((100cqw - 2rem) / 4), 1px);
        --cosma-tracks: 4;
        --cosma-origin: calc((100cqw - var(--cosma-unit) * 4) / 2);
        --cosma-inset: var(--cosma-origin);
        --cosma-content-width: calc(var(--cosma-unit) * 4);
        --cosma-wide-width: var(--cosma-content-width);
    }
    .cosma-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cosma-grid-surface--large {
        --cosma-tracks: 2;
        --cosma-content-width: calc(var(--cosma-unit) * 4);
        --cosma-inset: var(--cosma-origin);
    }
    .cosma-grid-surface--large .cosma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cosma-grid > * { grid-column: 1 / -1; }
    .cosma-grid > .cosma-grid { grid-template-columns: subgrid; }
    .cosma-project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cosma-project-grid .project-item:nth-child(n) {
        grid-column: 1 / -1;
    }
    .cosma-card-link { grid-template-rows: calc(var(--cosma-unit) * 3) minmax(0, 1fr); }
    .cosma-project-header,
    .cosma-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cosma-gap); }
    .cosma-project-header > *,
    .cosma-footer-grid > :nth-child(n) { grid-column: 1 / -1; }
    .cosma-content > .alignwide { margin-inline: 0; }
    .cosma-content > .alignfull {
        inline-size: calc(var(--cosma-content-width) + 2 * var(--cosma-inset));
    }
}

/* Single-column cards size to their actual text, then round to complete cells.
   Their two-cell bottom margin remains part of the same grid geometry. */
@supports (block-size: calc-size(auto, round(up, size, 1px))) {
@media (width < 1100px) {
    .cosma-project-grid { grid-auto-rows: auto; }
    .cosma-project-grid .project-item:nth-child(n) {
        grid-row: auto;
        block-size: calc-size(auto, round(up, size, var(--cosma-unit)));
    }
    .cosma-card-link { block-size: auto; min-block-size: 100%; grid-template-rows: calc(var(--cosma-unit) * 3) auto; }
    .cosma-card-copy { min-block-size: max-content; }
    .cosma-card-copy :is(h2, h3) { line-height: 1.125; }
}
}

/* Editorial content follows interior margins; media retains the grid geometry. */
.cosma-entry.cosma-container {
    --cosma-content-width: var(--cosma-editorial-width);
    --cosma-inset: var(--cosma-editorial-inset);
    inline-size: var(--cosma-editorial-width);
}
.cosma-entry:not(.cosma-project) .cosma-content > .wp-block-image {
    inline-size: var(--cosma-wide-width);
    max-inline-size: none;
    margin-inline: calc((var(--cosma-content-width) - var(--cosma-wide-width)) / 2);
}
.cosma-entry:not(.cosma-project) .cosma-content > .wp-block-image img { inline-size: 100%; }
.cosma-entry:not(.cosma-project) .cosma-content > .wp-block-image figcaption {
    margin-inline: calc((var(--cosma-wide-width) - var(--cosma-content-width)) / 2);
}