/* Pályafény: the recommendation grid and ticket on car detail pages. */
.pf-inner {
    width: min(1440px, calc(100% - 120px));
    margin-inline: auto;
}
.pf-recommendations {
    background: #131414;
    color: #f4f4ed;
    padding-block: 42px 34px;
}
.pf-recommendations [hidden] { display: none !important; }
.pf-kicker, .pf-slot, .pf-make {
    font: 700 10px/1.5 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .13em;
}
.pf-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c4c6bd;
    margin: 0;
}
.pf-kicker::before {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background: var(--rr-red);
}
.pf-intro, .pf-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.pf-intro { margin: 12px 0 22px; }
.rr-site .pf-intro h2 {
    margin: 0;
    font-size: clamp(42px, 4.7vw, 72px);
    letter-spacing: -.045em;
    line-height: 1;
}
.pf-intro h2 em { color: var(--rr-yellow); font-style: normal; }
.pf-intro p, .pf-empty {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #c8c9c1;
}
.pf-route { width: 34%; max-height: 120px; flex: none; opacity: .85; }
.pf-tools { margin-bottom: 15px; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-site .pf-filters button {
    color: #f4f4ed;
    background: transparent;
    border: 1px solid #5b5f57;
    border-radius: 0;
    padding: 9px 16px;
    min-height: 40px;
    font: 700 12px/1.45 Arial, sans-serif;
}
.rr-site .pf-filters button[aria-pressed=true] {
    color: #131414;
    border-color: var(--rr-yellow);
    background: var(--rr-yellow);
}
.rr-site .pf-all-cars {
    color: #f4f4ed;
    margin-left: auto;
    font-size: 13px;
    font-weight: bold;
}
.pf-all-cars span, .pf-arrow { color: var(--rr-yellow); }
.pf-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.rr-site .pf-card {
    display: block;
    position: relative;
    min-width: 0;
    overflow: hidden;
    color: #f4f4ed;
    background: #1c1d1b;
    border: 1px solid #474942;
}
.pf-stage {
    position: relative;
    isolation: isolate;
    height: clamp(150px, 12.8vw, 200px);
    background-color: #252723;
    background-image: repeating-linear-gradient(0deg, transparent 0 23px, #ffffff07 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, #ffffff07 23px 24px),
        linear-gradient(118deg, #171817 15%, #30352e 45%, #464c40 57%, #222421 84%);
}
.pf-stage::after {
    content: '';
    position: absolute;
    bottom: 12%;
    left: 4%;
    right: 4%;
    height: 1px;
    background: #a4a89c55;
    z-index: -1;
}
.pf-stage .dd-car-art { position: absolute; inset: 6% 0 0; height: 94%; aspect-ratio: auto; }
.pf-slot {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 14px;
    font-size: 9px;
    color: #e5e6de;
}
.pf-slot::before {
    content: '';
    display: inline-block;
    margin-right: 7px;
    width: 6px;
    height: 6px;
    background: var(--rr-yellow);
}
.pf-watermark {
    position: absolute;
    right: 11px;
    top: 7px;
    color: transparent;
    -webkit-text-stroke: 1px #ffffff38;
    font: 700 102px/.9 'Roboto Condensed', Arial, sans-serif;
    letter-spacing: -.07em;
}
.pf-caption { position: relative; border-top: 1px solid #43463e; padding: 16px 19px 18px; }
.pf-make { margin: 0; color: #cbd0c6; }
.rr-site .pf-caption h3 { margin: 5px 0 11px; font-size: clamp(25px, 2.3vw, 36px); overflow-wrap: anywhere; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding-right: 16px; margin: 0; font-size: 12px; color: #c3c5bb; }
.pf-meta b { color: white; }
.pf-meta b + span { padding-left: 8px; border-left: 1px solid #62665d; }
.pf-arrow { position: absolute; right: 16px; bottom: 12px; font-size: 18px; }
.pf-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.pf-voucher { padding-block: 28px 32px; background: #eeefe8; color: #151512; }
.pf-pass {
    display: grid;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    grid-template-columns: minmax(0,1fr) 224px;
    background: var(--rr-yellow);
}
.pf-pass::before, .pf-pass::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    left: calc(100% - 235px);
    border-radius: 50%;
    background: #eeefe8;
}
.pf-pass::before { top: -11px; }
.pf-pass::after { bottom: -11px; }
.pf-pass-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    padding: 28px 35px;
    gap: 26px;
}
.pf-pass .pf-kicker { color: #312d20; }
.pf-pass .pf-kicker::before { background: #151512; }
.rr-site .pf-pass h2 {
    margin: 14px 0 0;
    font-size: clamp(43px, 4.65vw, 67px);
    letter-spacing: -.05em;
    line-height: .96;
}
.pf-pass-copy { max-width: 295px; }
.pf-pass-copy p { font-size: 15px; line-height: 1.6; margin: 0; }
.rr-site .pf-voucher-buy {
    margin-top: 19px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    padding: 10px 17px;
    background: #151512;
    color: white;
    font: 700 13px/1.45 Arial, sans-serif;
}
.pf-voucher-buy span { color: var(--rr-yellow); font-size: 20px; }
.pf-stub {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    min-height: 220px;
    padding: 26px 20px;
    border-left: 1.5px dashed #38351c77;
}
.pf-stub img { width: 128px; height: auto; filter: brightness(0); }
.pf-stub strong { font: 700 25px/1 'Roboto Condensed', Arial, sans-serif; letter-spacing: -.035em; }
.pf-stub small { display: block; margin-top: 8px; font: 700 8px Arial, sans-serif; letter-spacing: .15em; }
.pf-flag {
    position: absolute;
    top: 63px;
    left: 26px;
    width: 160px;
    height: 73px;
    transform: skew(-16deg);
    background: repeating-conic-gradient(#161715 0 25%, transparent 0 50%) 0 0 / 34px 34px;
    mask-image: linear-gradient(100deg,#000 55%,transparent);
}
@media (hover:hover) {
    .rr-site .pf-card:hover, .rr-site .pf-filters button:hover { border-color: var(--rr-yellow); }
    .rr-site .pf-all-cars:hover { color: var(--rr-yellow); }
    .rr-site .pf-voucher-buy:hover { background: #30312c; }
}
@media (min-width:801px) and (max-width:1070px) {
    .pf-inner { width: calc(100% - 64px); }
    .pf-pass { grid-template-columns: minmax(0,1fr) 170px; }
    .pf-pass::before, .pf-pass::after { left: calc(100% - 181px); }
    .pf-pass-main { padding: 25px; gap: 18px; }
    .pf-stub { padding: 25px 16px; }
    .pf-stub strong { font-size: 20px; }
    .pf-flag { width: 115px; }
}
@media (max-width:800px) {
    .pf-inner { width: calc(100% - 36px); }
    .pf-recommendations { padding-block: 28px 24px; }
    .pf-intro { margin: 15px 0 18px; position: relative; display: block; }
    .rr-site .pf-intro h2 { font-size: clamp(39px,8vw,53px); }
    .pf-intro h2 em { display: block; }
    .pf-intro p { font-size: 13px; max-width: 370px; }
    .pf-route { position: absolute; right: 0; top: 2px; width: 20%; max-width: 110px; opacity: .68; }
    .pf-tools { flex-wrap: wrap; gap: 12px; }
    .pf-filters { gap: 4px; }
    .rr-site .pf-filters button { padding-inline: 10px; }
    .rr-site .pf-all-cars { margin-left: 0; font-size: 12px; }
    .pf-cards { grid-template-columns: 1fr; gap: 8px; }
    .rr-site .pf-card { display: grid; grid-template-columns: minmax(0,42fr) minmax(0,58fr); }
    .pf-stage { min-height: 106px; height: 100%; }
    .pf-stage .dd-car-art { top: 15%; height: 85%; }
    .pf-slot { left: 8px; top: 8px; font-size: 7px; letter-spacing: .06em; }
    .pf-slot::before { width: 4px; height: 4px; margin-right: 4px; }
    .pf-watermark { font-size: 57px; right: 7px; top: 6px; }
    .pf-caption { border: 0; border-left: 1px solid #43463e; padding: 14px 12px; align-self: center; }
    .pf-make { font-size: 9px; }
    .rr-site .pf-caption h3 { font-size: 25px; margin: 5px 0 9px; }
    .pf-meta { font-size: 11px; gap: 5px; padding: 0; }
    .pf-arrow { right: 9px; top: 8px; bottom: auto; font-size: 14px; }
    .pf-voucher { padding-block: 18px; }
    .pf-pass { display: block; }
    .pf-pass-main { display: block; padding: 23px; }
    .rr-site .pf-pass h2 { font-size: 49px; }
    .pf-pass-copy { margin-top: 13px; }
    .pf-pass-copy p { font-size: 14px; }
    .pf-stub { min-height: 53px; flex-direction: row; align-items: center; padding: 14px 23px; border: 0; border-top: 1.5px dashed #38351c77; }
    .pf-stub img { width: 94px; }
    .pf-stub strong { display: none; }
    .pf-flag { top: 9px; left: auto; right: 21px; width: 80px; height: 34px; background-size: 16px 16px; }
    .pf-pass::before, .pf-pass::after { width: 17px; height: 17px; top: auto; bottom: 45px; }
    .pf-pass::before { left: -8px; }
    .pf-pass::after { left: auto; right: -8px; }
}
@media (max-width:380px) {
    .pf-route { display: none; }
    .rr-site .pf-caption h3 { font-size: 22px; }
}