/*
 * Demo demo41 "Connect · One Rail" — the product version of the Connect page: every section is
 * one horizontal rail (js/rail.js + css/rail.css), restyled here through the --rail-* properties.
 * Type: Poppins (headings, names) and Lato (text) from the site. Dark site ground (#18171a), the
 * shared background shows through; glass edge zones with chevrons inside each row; the progress
 * line "03–06 / 08" under every row. Rails bleed to the window edge, cards start on the content
 * column.
 */
:root {
    --or-max: 1320px;
    --or-gut: clamp(16px, 4vw, 48px);
    --or-ink: #fff;
    --or-soft: rgb(255 255 255 / 0.66);
    --or-faint: rgb(255 255 255 / 0.44);
    --or-line: rgb(255 255 255 / 0.1);
    --or-card-bg: rgb(255 255 255 / 0.05);
    --or-yellow: #ffb500;
    --or-green: #469a58;
    --or-green-hi: #53b167;
    --or-radius: 14px;
    --or-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main { padding: 0 0 clamp(56px, 7vw, 104px); }
.main img { height: auto; }
.or-wrap { width: 100%; max-width: var(--or-max); margin: 0 auto; padding-inline: var(--or-gut); }
.main a:focus-visible { outline: 2px solid var(--or-green-hi); outline-offset: 3px; border-radius: 6px; }

/* ── banner ─────────────────────────────────────────────────────────────────────────────── */
.or-banner { padding-top: clamp(20px, 3vw, 36px); }
.or-banner__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    min-height: clamp(360px, 34vw, 470px);
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    border: 1px solid var(--or-line);
    border-radius: 24px;
    background: linear-gradient(120deg, rgb(24 23 26 / 0.86) 0%, rgb(24 23 26 / 0.55) 60%, rgb(24 23 26 / 0.3) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.or-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font: 700 12px/1 "Lato", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-yellow); }
.or-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.or-banner__title { max-width: 16em; font: 600 clamp(28px, 3.3vw, 46px)/1.12 "Poppins", sans-serif; letter-spacing: -0.015em; text-wrap: balance; }
.or-banner__lede { max-width: 34em; margin-top: 18px; font: 400 17px/1.6 "Lato", sans-serif; color: var(--or-soft); }
.or-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.or-btn {
    display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
    border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px;
    font: 500 15px/1 "Poppins", sans-serif; color: var(--or-ink);
    transition: background-color 0.25s, border-color 0.25s;
}
.or-btn:hover { border-color: rgb(255 255 255 / 0.5); }
.or-btn--solid { border-color: var(--or-green); background: var(--or-green); }
.or-btn--solid:hover { border-color: var(--or-green-hi); background: var(--or-green-hi); }
.or-banner__media { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-self: stretch; margin-block: calc(-1 * clamp(28px, 4vw, 56px)); margin-right: calc(-1 * clamp(28px, 4vw, 56px)); }
.or-banner__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.or-banner__media::before {
    content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 40%;
    background: linear-gradient(90deg, rgb(24 23 26 / 0.85), transparent);
    pointer-events: none;
}

/* ── section head: title + count + view all ─────────────────────────────────────────────── */
.or-section { margin-top: clamp(48px, 6vw, 80px); }
.or-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; margin-bottom: 22px; }
.or-head__title { display: inline-flex; align-items: center; gap: 12px; font: 600 clamp(22px, 2vw, 28px)/1.1 "Poppins", sans-serif; }
.or-head__count {
    display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px;
    border: 1px solid var(--or-line); border-radius: 999px;
    font: 700 12px/1 "Lato", sans-serif; letter-spacing: 0.06em; color: var(--or-soft); font-variant-numeric: tabular-nums;
}
.or-head__sub { color: var(--or-faint); font: 400 15px/1.3 "Lato", sans-serif; }
.or-head__all {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px 8px 14px;
    font: 500 14px/1 "Poppins", sans-serif; color: var(--or-soft);
    transition: color 0.25s;
}
.or-head__all svg { transition: transform 0.3s var(--or-ease); }
.or-head__all:hover { color: var(--or-ink); }
.or-head__all:hover svg { transform: translateX(4px); }

/* ── the rails ──────────────────────────────────────────────────────────────────────────── */
.or-rail {
    --rail-pad: max(var(--or-gut), calc((100% - var(--or-max)) / 2 + var(--or-gut)));
    --rail-gap: clamp(12px, 1.4vw, 20px);
    --rail-ui: #fff;
    --rail-ui-bg: rgb(24 23 26 / 0.5);
    --rail-ui-rest: 0.35;
    --rail-fade: rgb(24 23 26 / 0.62);
    --rail-line: rgb(255 255 255 / 0.1);
    --rail-thumb: rgb(255 255 255 / 0.62);
    --rail-bar-h: 46px;
}
.or-rail--partners { --rail-card: clamp(220px, 21vw, 300px); }
.or-rail--free { --rail-card: clamp(150px, 13vw, 196px); }
.or-rail--people { --rail-card: clamp(170px, 15.5vw, 224px); }
.or-rail .rail__track { padding-block: 4px 0; }
.or-rail .rail__edge { width: clamp(48px, 7vw, 104px); }
.or-rail .rail__chev { width: 46px; height: 46px; border: 1px solid rgb(255 255 255 / 0.14); }
.or-rail .rail__edge:hover .rail__chev { background: rgb(24 23 26 / 0.72); transform: scale(1.06); }
.or-rail .rail__bar { align-items: flex-end; padding-bottom: 2px; gap: 16px; }
.or-rail .rail__line { max-width: none; }
.or-rail .rail__pos { font-size: 12px; letter-spacing: 0.14em; }

/* ── cards ──────────────────────────────────────────────────────────────────────────────── */
.or-card { display: flex; flex-direction: column; gap: 4px; color: var(--or-ink); -webkit-user-drag: none; }
.or-card__media {
    position: relative; display: block; overflow: hidden; margin-bottom: 10px;
    border-radius: var(--or-radius); background: var(--or-card-bg);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04);
}
.or-card__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.7s var(--or-ease); user-select: none; }
.or-card--person .or-card__media img { aspect-ratio: 4 / 5; }
.or-card:hover .or-card__media img { transform: scale(1.04); }
.or-card__name { font: 500 17px/1.25 "Poppins", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-card__meta { font: 400 14px/1.35 "Lato", sans-serif; color: var(--or-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-card--free .or-card__name { font-size: 15px; }
.or-card--free .or-card__meta { font-size: 13px; }
.or-card--partner .or-card__name { font-size: 19px; }

.or-badge {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
    border-radius: 999px; background: rgb(24 23 26 / 0.58);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 700 11px/1 "Lato", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
.or-badge--paid { color: var(--or-yellow); }
.or-badge--free { color: rgb(255 255 255 / 0.85); }
.or-badge--creator { color: #7fd893; }
.or-card__issues {
    position: absolute; right: 12px; bottom: 12px;
    padding: 5px 10px; border-radius: 999px; background: rgb(24 23 26 / 0.58);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 400 12px/1 "Lato", sans-serif; color: var(--or-soft);
    opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s var(--or-ease);
}
.or-card:hover .or-card__issues, .or-card:focus-visible .or-card__issues { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .or-banner__card { grid-template-columns: 1fr; }
    .or-banner__media { order: -1; height: 220px; margin: calc(-1 * clamp(28px, 4vw, 56px)) calc(-1 * clamp(28px, 4vw, 56px)) 0; }
    .or-banner__media::before { inset: auto 0 0 0; width: auto; height: 60%; background: linear-gradient(0deg, rgb(24 23 26 / 0.9), transparent); }
    .or-head { grid-template-columns: minmax(0, 1fr) auto; }
    .or-head__sub { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
    .or-rail--partners { --rail-card: 68vw; }
    .or-rail--free { --rail-card: 42vw; }
    .or-rail--people { --rail-card: 46vw; }
    .or-banner__lede { font-size: 16px; }
    .or-card__name { font-size: 16px; }
}
@media (hover: none) {
    .or-card__issues { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .or-card__media img, .or-card__issues, .or-head__all svg { transition: none; }
}