.pk-index-scope /* =========================================================
       POPULAR CITIES
       DESKTOP/TABLET : 4 cards / row x 2 rows + pagination
       MOBILE         : 2 cards / row x 2 rows + pagination
       Pagination is fully client-side; no page refresh.
       ========================================================= */
    .popular-section {
        background:radial-gradient(circle at 50% 5%,#fff 0,#f5faff 36%,#e9f5ff 100%);
        padding:30px 34px 48px;
        overflow:hidden;
    }
    .pk-index-scope .popular-inner {max-width:1920px;margin:0 auto}
    .pk-index-scope .section-head {
        display:flex;
        justify-content:center;
        text-align:center;
        margin:0 0 28px;
    }
    .pk-index-scope .heading {text-align:center}
    .pk-index-scope .heading h1 {
        margin:0;
        color:#092d4d;
        font-size:56px;
        line-height:1.05;
        letter-spacing:-2.5px;
        font-weight:800;
    }
    .pk-index-scope .heading h1 span {color:#1479ee}
    .pk-index-scope .heading p {
        margin:9px 0 0;
        color:#173d60;
        font-size:22px;
        line-height:1.35;
        letter-spacing:-.45px;
    }

    .pk-index-scope .viewport {
        width:100%;
        overflow:hidden;
        border-radius:18px;
    }

    .pk-index-scope /* Desktop/tablet: exactly 4 cards in each row. */
    .track {
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        grid-auto-rows:224px;
        column-gap:14px;
        row-gap:14px;
    }

    .pk-index-scope .city-card {
        position:relative;
        min-width:0;
        width:100%;
        height:224px;
        border-radius:17px;
        overflow:hidden;
        background:#d7eafa;
        box-shadow:0 9px 18px rgba(8,45,77,.16);
        isolation:isolate;
    }

    .pk-index-scope /* JS controls which 8 cards are shown on desktop/tablet. */
    .city-card.is-hidden {display:none}

    .pk-index-scope .city-image {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        z-index:0;
        transition:transform .45s ease;
    }
    .pk-index-scope .city-card:hover .city-image {transform:scale(1.035)}
    .pk-index-scope .city-card::after {
        content:"";
        position:absolute;
        inset:0;
        z-index:1;
        background:linear-gradient(
            to bottom,
            rgba(0,0,0,0) 35%,
            rgba(2,28,50,.10) 48%,
            rgba(2,29,52,.68) 66%,
            rgba(2,28,50,.96) 100%
        );
    }
    .pk-index-scope .card-link {
        position:absolute;
        inset:0;
        z-index:5;
        color:#fff;
        text-decoration:none;
    }
    .pk-index-scope .card-content {
        position:absolute;
        left:19px;
        right:70px;
        bottom:18px;
        z-index:3;
    }
    .pk-index-scope .city-name {
        margin:0 0 7px;
        color:#fff;
        font-size:22px;
        line-height:1.15;
        letter-spacing:-.45px;
        font-weight:700;
        text-shadow:0 2px 5px rgba(0,0,0,.25);
    }
    .pk-index-scope .city-tagline {
        margin:0;
        color:#fff;
        font-size:15.5px;
        line-height:1.35;
        font-weight:400;
        letter-spacing:-.2px;
    }
    .pk-index-scope .card-arrow {
        position:absolute;
        z-index:4;
        right:14px;
        bottom:17px;
        width:46px;
        height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:#fff;
        color:#1479ee;
        font-size:26px;
        line-height:1;
        box-shadow:0 5px 13px rgba(0,0,0,.13);
        transition:transform .2s ease;
    }
    .pk-index-scope .city-card:hover .card-arrow {transform:translateX(3px)}

    .pk-index-scope /* Pagination is shown on desktop,
    .pk-index-scope tablet and mobile. */
    .position-row {
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:18px;
        min-height:36px;
    }
    .pk-index-scope .mobile-pages {
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:6px;
    }
    .pk-index-scope .page-number {
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
        border:1px solid #d7e4f0;
        border-radius:5px;
        background:#fff;
        color:#0b3d68;
        font-size:16px;
        font-weight:700;
        line-height:1;
        box-shadow:0 2px 5px rgba(8,45,77,.10);
        cursor:pointer;
        transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .pk-index-scope .page-number:hover {transform:translateY(-1px);background:#f2f8ff}
    .pk-index-scope .page-number.active {
        background:#1479ee;
        border-color:#1479ee;
        color:#fff;
    }
    .pk-index-scope .page-number:focus-visible {
        outline:3px solid rgba(20,121,238,.25);
        outline-offset:2px;
    }

    @media (max-width:1199.98px) and (min-width:768px){
        .pk-index-scope .popular-section {padding:30px 24px 45px}
        .pk-index-scope .heading h1 {font-size:47px}
        .pk-index-scope .heading p {font-size:18px}
        .pk-index-scope .track {
            column-gap:12px;
            row-gap:12px;
            grid-auto-rows:218px;
        }
        .pk-index-scope .city-card {height:218px}
        .pk-index-scope .city-name {font-size:20px}
        .pk-index-scope .city-tagline {font-size:14px}
    }

    @media (max-width:767.98px){
        .pk-index-scope .popular-section {padding:30px 14px 42px}
        .pk-index-scope .section-head {margin-bottom:18px}
        .pk-index-scope .heading h1 {font-size:39px;letter-spacing:-1.8px}
        .pk-index-scope .heading p {
            max-width:370px;
            margin:8px auto 0;
            font-size:15px;
            line-height:1.45;
        }
        .pk-index-scope .viewport {border-radius:15px}

        .pk-index-scope /* Mobile: exactly 2 cards per row and 2 rows = 4 cards per page. */
        .track {
            width:100%;
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            grid-auto-rows:211px;
            column-gap:12px;
            row-gap:12px;
        }
        .pk-index-scope .city-card {
            width:100%;
            height:211px;
            border-radius:15px;
        }
        .pk-index-scope .city-card.is-hidden {display:none}
        .pk-index-scope .card-content {left:13px;right:52px;bottom:12px}
        .pk-index-scope .city-name {margin-bottom:5px;font-size:17px;line-height:1.12}
        .pk-index-scope .city-tagline {font-size:12.5px;line-height:1.3}
        .pk-index-scope .card-arrow {
            right:9px;
            bottom:10px;
            width:36px;
            height:36px;
            font-size:20px;
        }
        .pk-index-scope .position-row {margin-top:16px;min-height:36px}
        .pk-index-scope .page-number {width:34px;height:34px;font-size:16px}
    }

    @media (max-width:420px){
        .pk-index-scope .popular-section {padding-left:10px;padding-right:10px}
        .pk-index-scope .track {grid-auto-rows:185px}
        .pk-index-scope .city-card {height:185px}
        .pk-index-scope .heading h1 {font-size:34px}
        .pk-index-scope .heading p {font-size:14px}
        .pk-index-scope .city-name {font-size:16px}
        .pk-index-scope .city-tagline {font-size:11.5px}
        .pk-index-scope .page-number {width:32px;height:32px;font-size:15px}
    }

    @media (prefers-reduced-motion:reduce){
        .pk-index-scope .city-image,
.pk-index-scope .card-arrow,
.pk-index-scope .page-number {transition:none}
    }