/*
 * demo47 "Connect · Frames" — demo46's Connect page (sizes, type, pills, arrows, badges of
 * dev0.dphub.net/connect, rows / grid view switch, two partner rows fitting the screen) with a
 * frame per kind of card: partners in a gilded frame with a passing sheen, free magazines in a
 * matted silver hairline mount, people in a green ring. Base rules: the same as demo46.css.
 */
.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; }
}

/* ══ demo47: frames ═══════════════════════════════════════════════════════════════════════════ */
@property --gild { syntax: "<angle>"; inherits: false; initial-value: 135deg; }

/* PARTNERS: a gilded frame — a 3 px gold gradient band, a hair of dark between it and the
   picture, a warm glow under the card; on hover the gold turns and a sheen crosses the cover */
.cn-card--paid .cn-card__frame {
    padding: 3px; border-radius: 12px;
    background: linear-gradient(var(--gild), #fbe9b0 0%, #c9993f 22%, #fff6d8 45%, #a87a2a 62%, #e9c56c 82%, #8d6420 100%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.65), 0 14px 32px -16px rgb(233 190 98 / 0.55);
    transition: --gild 1.4s ease, box-shadow 0.5s ease;
}
.cn-card--paid .cn-card__frame::before {          /* the dark hairline inside the gold */
    content: ""; position: absolute; inset: 3px; z-index: 1; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(20 16 8 / 0.85); pointer-events: none;
}
.cn-card--paid .cn-card__frame::after {           /* the sheen */
    content: ""; position: absolute; inset: 3px; z-index: 2; border-radius: 9px; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgb(255 244 210 / 0.28) 48%, transparent 62%) -160% 0 / 250% 100% no-repeat;
    transition: background-position 1.1s ease;
}
.cn-card--paid .cn-card__img, .cn-card--paid .cn-card__shade { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 9px; }
.cn-card--paid:hover .cn-card__frame, .cn-card--paid:focus-visible .cn-card__frame { --gild: 315deg; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.65), 0 18px 40px -14px rgb(240 200 110 / 0.75); }
.cn-card--paid:hover .cn-card__frame::after { background-position: 160% 0; }
.cn-card--paid .cn-card__meta { left: clamp(12px, 7%, 22px); bottom: clamp(12px, 7%, 22px); }
.cn-card--paid .cn-card__name { color: #fff6dc; }

/* FREE: a matted mount — dark passe-partout, a silver hairline round the picture, the photo a
   little muted until you point at it */
.cn-card--free .cn-card__frame {
    padding: 7px; border-radius: 10px; background: #26252a;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 24px -16px rgb(0 0 0 / 0.9);
}
.cn-card--free .cn-card__img, .cn-card--free .cn-card__shade { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 4px; }
.cn-card--free .cn-card__img { filter: saturate(0.7) brightness(0.92); transition: filter 0.5s ease, transform 0.6s ease; }
.cn-card--free .cn-card__frame::after {
    content: ""; position: absolute; inset: 7px; z-index: 1; border-radius: 4px; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(214 220 228 / 0.55);
}
.cn-card--free:hover .cn-card__img { filter: none; }
.cn-card--free .cn-card__meta { left: clamp(14px, 8%, 26px); bottom: clamp(14px, 8%, 26px); }

/* PEOPLE: a green ring (the DEPO greens), the avatar ringed the same; a soft green glow on hover */
.cn-card--person .cn-card__frame {
    padding: 2px; border-radius: 16px;
    background: linear-gradient(160deg, #8dfaa8 0%, #469a58 45%, #18341e 100%);
    transition: box-shadow 0.5s ease;
}
.cn-card--person .cn-card__img, .cn-card--person .cn-card__shade { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 14px; }
.cn-card--person:hover .cn-card__frame { box-shadow: 0 0 0 4px rgb(83 245 126 / 0.14), 0 16px 34px -14px rgb(83 245 126 / 0.5); }
.cn-person__avatar { box-shadow: 0 0 0 2px #53f57e, 0 0 0 4px rgb(0 0 0 / 0.5); }

@media (prefers-reduced-motion: reduce) {
    .cn-card--paid .cn-card__frame, .cn-card--paid .cn-card__frame::after, .cn-card--free .cn-card__img { transition: none; }
}