/**
 * TransportBN page template.
 *
 * @package jpd-theme
 */

.jpd-transportbn-page { background:#fff; color:#111; }
.jpd-transportbn-page .jpd-container { width:min(1150px, calc(100% - 48px)); margin:0 auto; }
.jpd-transportbn-hero { padding:0 0 34px; }
.jpd-transportbn-hero__card { position:relative; overflow:hidden; min-height:206px; border-radius:0 0 24px 24px; border-top-left-radius:0; border-top-right-radius:0; background:#dfe8ef; }
.jpd-transportbn-hero__bg { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.jpd-transportbn-hero__content { position:relative; z-index:1; display:flex; align-items:center; gap:18px; min-height:206px; padding:38px 40px; color:#fff; }
.jpd-transportbn-hero__logo { width:96px; height:96px; flex:0 0 96px; border-radius:18px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.jpd-transportbn-hero__title { margin:0 0 4px; color:#fff; font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:800; line-height:1.05; }
.jpd-transportbn-hero__subtitle { margin:0 0 12px; color:#fff; font-size:clamp(1rem, 1.4vw, 1.18rem); line-height:1.18; }
.jpd-transportbn-hero__share { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 16px; border-radius:999px; background:#ffc72c; color:#fff; font-size:.86rem; font-weight:700; text-decoration:none; }
.jpd-transportbn-hero__stores { position:absolute; right:48px; bottom:52px; z-index:2; display:flex; align-items:center; gap:20px; }
.jpd-transportbn-store { display:inline-flex; align-items:center; justify-content:center; width:132px; height:40px; padding:0; border:0; border-radius:999px; background:transparent; color:inherit; text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.12); transition:transform .22s ease, filter .22s ease; }
.jpd-transportbn-store img { display:block; width:100%; height:100%; object-fit:contain; }
.jpd-transportbn-store:hover,.jpd-transportbn-store:focus-visible { transform:translateY(-1px); filter:brightness(1.04); outline:none; }
.jpd-transportbn-store:focus-visible { box-shadow:0 0 0 3px rgba(1,180,150,.35), 0 8px 22px rgba(0,0,0,.12); }
.jpd-transportbn-content { padding:0 0 18px; }
.jpd-transportbn-content__inner { max-width:960px; padding-left:34px; }
.jpd-transportbn-block { margin:0 0 28px; }
.jpd-transportbn-block h2,.jpd-transportbn-screenshots__header h2 { margin:0 0 16px; color:#111; font-size:1rem; font-weight:800; line-height:1.35; }
.jpd-transportbn-block p { max-width:840px; margin:0 0 12px 22px; color:#111; font-size:1rem; line-height:1.35; }
.jpd-transportbn-block ul { margin:0 0 0 42px; padding-left:18px; }
.jpd-transportbn-block li { margin:0 0 8px; color:#111; font-size:1rem; line-height:1.35; }
.jpd-transportbn-screenshots { padding:14px 0 92px; }
.jpd-transportbn-screenshots__header { max-width:960px; padding-left:34px; margin-bottom:30px; }
.jpd-transportbn-screenshots__viewport { position:relative; width:100%; }
.jpd-transportbn-screenshots__track { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; align-items:start; padding:0 24px; }
.jpd-transportbn-screenshot { margin:0; overflow:hidden; background:#fff; }
.jpd-transportbn-screenshot img { display:block; width:100%; height:auto; object-fit:contain; }
.jpd-transportbn-screenshots__control { position:absolute; top:50%; z-index:3; display:inline-flex; align-items:center; justify-content:center; width:44px; height:64px; border:0; background:transparent; color:#111; font-size:4rem; font-weight:300; line-height:1; cursor:pointer; transform:translateY(-50%); }
.jpd-transportbn-screenshots__control--prev { left:-44px; }
.jpd-transportbn-screenshots__control--next { right:-44px; }
.jpd-transportbn-screenshots__control:hover,.jpd-transportbn-screenshots__control:focus-visible { color:#01B496; outline:none; }
@media screen and (max-width:980px){.jpd-transportbn-hero__content{min-height:220px;padding:32px 28px}.jpd-transportbn-hero__stores{right:28px;bottom:28px}.jpd-transportbn-screenshots__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.jpd-transportbn-screenshots__track::-webkit-scrollbar{display:none}.jpd-transportbn-screenshot{flex:0 0 min(280px, 74vw);scroll-snap-align:start}.jpd-transportbn-screenshots__control--prev{left:-18px}.jpd-transportbn-screenshots__control--next{right:-18px}}
@media screen and (max-width:700px){.jpd-transportbn-page .jpd-container{width:min(100% - 28px, 1150px)}.jpd-transportbn-hero__card{min-height:320px;border-radius:0 0 20px 20px;border-top-left-radius:0;border-top-right-radius:0}.jpd-transportbn-hero__content{align-items:flex-start;min-height:220px;padding:30px 22px}.jpd-transportbn-hero__logo{width:74px;height:74px;flex-basis:74px;border-radius:14px}.jpd-transportbn-hero__stores{left:22px;right:22px;bottom:28px;justify-content:flex-start;flex-wrap:wrap;gap:12px}.jpd-transportbn-store{width:124px;height:38px}.jpd-transportbn-content__inner,.jpd-transportbn-screenshots__header{padding-left:0}.jpd-transportbn-block p{margin-left:0}.jpd-transportbn-block ul{margin-left:0}.jpd-transportbn-screenshots__track{padding:0}.jpd-transportbn-screenshots__control{display:none}}


/* TransportBN hero background fix:
   The header artwork now fills the SVG canvas, and this keeps the top edge square. */
.jpd-transportbn-hero__card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.jpd-transportbn-hero__bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* TransportBN hero stretch fix:
   Stretch the header SVG to the full card width and height instead of preserving aspect ratio. */
.jpd-transportbn-hero__bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* TransportBN hero contained background fix:
   Keep the hero inside the normal page container, but make the background
   artwork fill that card. Do not make the hero full browser width. */
.jpd-transportbn-hero > .jpd-container {
    width: min(1150px, calc(100% - 48px));
    max-width: none;
    margin: 0 auto;
}

.jpd-transportbn-hero__card {
    width: 100%;
    min-height: 206px;
    border-radius: 0 0 24px 24px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #dfe8ef;
    background-image: url("../../images/transportbn/TBNheader.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.jpd-transportbn-hero__bg {
    display: none;
}

.jpd-transportbn-hero__content {
    min-height: 206px;
}

@media screen and (max-width: 700px) {
    .jpd-transportbn-hero > .jpd-container {
        width: min(100% - 28px, 1150px);
    }

    .jpd-transportbn-hero__card {
        min-height: 320px;
        border-radius: 0 0 20px 20px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-size: 100% 100%;
    }
}

/* TransportBN hero blur + white haze fix.
   Blur only the background layer, keep logo/text/store buttons sharp.
   Do not set .jpd-transportbn-hero__stores to position: relative,
   because that breaks its absolute placement on the right. */
.jpd-transportbn-hero__card {
    position: relative;
    overflow: hidden;
    background-image: none;
    background-color: #dfe8ef;
}

.jpd-transportbn-hero__card::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: 0;
    background-image: url("../../images/transportbn/TBNheader.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    filter: blur(12px);
    transform: scale(1.05);
}

.jpd-transportbn-hero__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.18) 42%,
            rgba(255, 255, 255, 0.32) 100%
        ),
        rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.jpd-transportbn-hero__content {
    position: relative;
    z-index: 2;
}

.jpd-transportbn-hero__stores {
    position: absolute;
    right: 48px;
    bottom: 52px;
    z-index: 3;
}

@media screen and (max-width: 980px) {
    .jpd-transportbn-hero__stores {
        right: 28px;
        bottom: 28px;
    }
}

@media screen and (max-width: 700px) {
    .jpd-transportbn-hero__stores {
        left: 22px;
        right: 22px;
        bottom: 28px;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }
}