/*
 * demo46 "Connect · Site Rows" — the Connect page as on dev0.dphub.net/connect (sizes, type,
 * pills, arrows and badges of front/public/css/modules/Publish.css), with a view switch: rows
 * (horizontal rails, PARTNERS in two rows) or grid. In rows, the head + two rows of partner
 * cards always fit between the sticky header and the bottom of the screen (12 px to spare): the
 * card height comes from the viewport height (--card-h).
 *
 * Shared by demo46–48 (each demo's own copy): structure, sizes, the view switch. The demos only
 * change the card look further down.
 */
.cn {
    --hdr: 70px;            /* the sticky site header */
    --head: 44px;           /* section head: title, view switch, View all, position */
    --sec-top: 14px;        /* space above the head */
    --gap: 24px;            /* between cards (the site: 40px — a little tighter so more fits) */
    --row-gap: 18px;        /* between the two partner rows */
    --spare: 14px;          /* room left under the second row (at least 10 px after rounding) */
    --side: max(16px, calc((100vw - 1360px) / 2));
    --card-h: min(
        clamp(120px, calc((100svh - var(--hdr) - var(--sec-top) - var(--head) - var(--row-gap) - var(--spare)) / 2), 440px),
        calc(44vw * 1.2)    /* phones: at least two cards side by side */
    );
    --card-w: calc(var(--card-h) / 1.2);      /* the site's 1 : 1.2 card */
    --radius: 10px;
    --green: #469a58;
    --muted: rgb(255 255 255 / 0.7);
    --pill: rgb(255 255 255 / 0.2);
    display: block;
    padding: 0 0 64px;   /* site.css .main has 24px on top; the banner sits right under the header */
}
.cn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── banner: as the site's .page-banner (edge to edge, 8 : 3, at most 480 px) ─────────────── */
.page-banner { position: relative; width: 100%; aspect-ratio: 8 / 3; max-height: 480px; overflow: hidden; background: #111; }
.page-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.page-banner__slide.is-on { opacity: 1; }
.page-banner__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; }

/* ── sections ──────────────────────────────────────────────────────────────────────────────── */
.cn-sec { padding-top: var(--sec-top); scroll-margin-top: var(--hdr); }
.cn-sec + .cn-sec { margin-top: 26px; }
.cn-head {
    display: flex; align-items: center; gap: 16px; height: var(--head);
    padding-inline: var(--side);
}
.cn-title { margin: 0; color: #fff; font: 600 15px/1.08 "Lato", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); }
.cn-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cn-view { display: flex; gap: 2px; padding: 2px; border-radius: 50px; background: var(--pill); }
.cn-view__btn {
    display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 50px;
    background: transparent; color: var(--muted); cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease;
}
.cn-view__btn:hover { color: #fff; }
.cn-view__btn[aria-pressed="true"] { color: var(--green); background: rgb(0 0 0 / 0.28); }
.cn-view__btn:focus-visible, .cn-all:focus-visible, .cn-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cn-all {
    display: inline-flex; align-items: center; height: 30px; padding: 0 18px; border-radius: 50px; background: var(--pill);
    color: var(--muted); font: 700 15px/1.2 "Lato", sans-serif; text-transform: uppercase; text-decoration: none; transition: color 0.5s ease;
}
.cn-all:hover { color: var(--green); }
.cn-pos { min-width: 5ch; color: #fff; font: 400 15px/1 "Lato", sans-serif; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-step { display: grid; place-items: center; width: 50px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.9; transition: opacity 0.3s ease; }
.cn-step img { width: 50px; height: 20px; }
.cn-step--prev img { transform: scaleX(-1); }
.cn-step:hover { opacity: 1; }
.cn-step:disabled { opacity: 0.22; cursor: default; }

/* ── rails (rows view): js/rail.js, full bleed, first card on the content edge ──────────────── */
.cn-rail { --rail-card: var(--card-w); --rail-gap: var(--gap); --rail-pad: var(--side); --rail-bar-h: 0px; --rail-fade: rgb(24 23 26 / 0.5); --rail-ui-rest: 0.22; }
.cn-rail .rail__track { row-gap: var(--row-gap); padding-block: 2px; }
.cn-sec--people .cn-rail { --rail-card: calc(var(--card-w) * 0.86); }   /* people: the same card, a little smaller */

/* ── cards: the site's Publish_item ────────────────────────────────────────────────────────── */
.cn-card { position: relative; display: block; color: #fff; text-decoration: none; -webkit-user-drag: none; }
.cn-card__frame { position: relative; display: block; aspect-ratio: 1 / 1.2; overflow: hidden; border-radius: var(--radius); background: #222; }
.cn-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cn-card:hover .cn-card__img { transform: scale(1.03); }
.cn-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.75) 100%); pointer-events: none; }
.cn-card__meta {
    position: absolute; left: clamp(10px, 6%, 20px); right: 10px; bottom: clamp(10px, 6%, 20px); z-index: 2;
    display: flex; align-items: center; gap: 8px; min-width: 0; pointer-events: none;
}
.cn-card__name {
    overflow: hidden; color: #fff; font: 600 clamp(10px, calc(var(--card-w) / 19), 16px)/1.08 "Lato", sans-serif;
    text-transform: uppercase; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); white-space: nowrap; text-overflow: ellipsis;
}
.cn-card__badge { flex-shrink: 0; width: auto; height: 15px; max-width: 57px; object-fit: contain; }
.cn-card__more { display: none; }
.cn-card:focus-visible { outline: none; }
.cn-card:focus-visible .cn-card__frame { box-shadow: 0 0 0 2px var(--green); }

/* People: avatar + badge, name, profession, location (the site's people slider) */
.cn-person { position: absolute; left: clamp(10px, 8%, 24px); right: 10px; bottom: clamp(10px, 8%, 24px); z-index: 2; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.cn-person__avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #d9d9d9; }
.cn-person__text { display: grid; gap: 2px; min-width: 0; }
.cn-person__badge { width: auto; height: 13px; max-width: 57px; object-fit: contain; object-position: left; }
.cn-person__name { overflow: hidden; font: 700 14px/1.2 "Lato", sans-serif; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); }
.cn-person__prof, .cn-person__loc { overflow: hidden; color: rgb(255 255 255 / 0.75); font: 400 12px/1.2 "Lato", sans-serif; white-space: nowrap; text-overflow: ellipsis; }


/* ── grid view: the same cards wrapping, scrolled with the page ─────────────────────────────── */
html[data-view="grid"] .cn-rail .rail__track {
    grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 32px 32px; overflow: visible; cursor: auto; scroll-snap-type: none;
}
html[data-view="grid"] .cn-rail .rail__edge, html[data-view="grid"] .cn-step { display: none; }
html[data-view="grid"] .cn-rail { --cols: 4; }
html[data-view="grid"] .cn-sec--people .cn-rail { --cols: 5; }
html[data-view="grid"] .cn-pos::after { content: " cards"; color: var(--muted); }

@media (max-width: 1199.98px) {
    html[data-view="grid"] .cn-rail { --cols: 3; }
    html[data-view="grid"] .cn-sec--people .cn-rail { --cols: 4; }
}
@media (max-width: 991.98px) {
    .cn { --gap: 12px; --row-gap: 12px; --head: 40px; }
    .cn-tools { gap: 8px; }
    .cn-all { height: 26px; padding: 0 12px; font-size: 11px; }
    .cn-step { display: none; }
    .cn-pos { font-size: 12px; min-width: 0; }
    .cn-card__badge { height: 12px; }
    html[data-view="grid"] .cn-rail .rail__track { gap: 14px 12px; }
}
@media (max-width: 767.98px) {
    html[data-view="grid"] .cn-rail, html[data-view="grid"] .cn-sec--people .cn-rail { --cols: 2; }
    .cn-view__btn { width: 30px; height: 26px; }
    .cn-person__avatar { width: 28px; height: 28px; }
    .cn-person__name { font-size: 12px; }
}
@media (max-width: 420px) {
    .cn-pos { display: none; }
}
/* the copied site footer: the 280 px "Contact us" button overflows its column at 992–1365 px
   (the same in front/public/css/site-chrome.css; docs/backlog.md) */
@media (min-width: 992px) and (max-width: 1365.98px) {
    #site-footer .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 3%; }
    #site-footer .site-footer__contact { min-width: 0; width: 100%; padding-inline: 12px; font-size: 16px; }
    #site-footer .site-footer__socials { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .page-banner__slide, .cn-card__img { transition: none; }
}