/* ==========================================================================
   JoyRush — Interior page component system
   Shared by: Page Header, Job List, Locations, Contact Form, Feature Intro,
   Media Split, Timeline widgets. Namespaced with "jr-" to avoid colliding
   with the homepage's own component classes (c-*, b-*).

   Design tokens (kept in sync with base.css):
   --jr-blue:   #294a9f   (brand blue — headings, CTAs, borders)
   --jr-ink:    #1a2139   (near-black for high-contrast text/hover)
   --jr-cream:  #fbf6ed   (page background / light text on blue)
   ========================================================================== */

:root {
    --jr-blue: #294a9f;
    --jr-ink: #1a2139;
    --jr-cream: #fbf6ed;
    --jr-radius-sm: 1.2rem;
    --jr-radius-md: 2rem;
    --jr-radius-pill: 10rem;
    --jr-gap: 2.4rem;
}

/* Full-bleed breakout — identical technique used by every JoyRush Elementor
   section widget so interior pages match the homepage edge-to-edge. */
.jr-full-bleed {
    left: 50%;
    margin-inline-start: 0;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw
}

/* ------------------------------------------------------------------------
   Page Header — eyebrow + heading + description + divider
   ------------------------------------------------------------------------ */
.jr-pagehead {
    padding: 8rem 0 4rem;
    position: relative;
    z-index: 1
}

@media(min-width:768px) {
    .jr-pagehead { padding: 11rem 0 5rem }
}

.jr-pagehead__eyebrow {
    display: inline-block;
    font-size: 1.3rem;
    letter-spacing: .08em;
    margin-bottom: 1.2rem
}

.jr-pagehead__heading {
    font-size: clamp(3.2rem, 7vw, 5.6rem);
    letter-spacing: -.03em;
    line-height: .96
}

.jr-pagehead__desc {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 1.6rem;
    max-width: 56rem
}

.jr-pagehead--center .jr-pagehead__desc { margin-inline: auto }

.jr-pagehead__rule {
    background-color: currentColor;
    height: .1rem;
    margin-top: 3.2rem;
    opacity: .25;
    width: 100%
}

@media(min-width:768px) {
    .jr-pagehead__rule { margin-top: 4rem }
}

/* ------------------------------------------------------------------------
   Job List — Careers / Open Roles
   ------------------------------------------------------------------------ */
.jr-jobs {
    padding: 0 0 6rem;
    position: relative;
    z-index: 1
}

.jr-job {
    align-items: flex-start;
    border-bottom: .1rem solid rgba(41, 74, 159, .25);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    justify-content: space-between;
    padding: 3.2rem 0
}

@media(min-width:768px) {
    .jr-job { align-items: center; flex-direction: row; gap: 2.4rem }
}

.jr-job:first-child { border-top: .1rem solid rgba(41, 74, 159, .25) }

.jr-job__main { flex: 1 1 auto; min-width: 0 }

.jr-job__title {
    font-size: 2rem;
    letter-spacing: -.02em;
    margin-bottom: .6rem
}

.jr-job__desc {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    max-width: 48rem;
    opacity: .85
}

.jr-job__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.jr-job__tag {
    background-color: var(--jr-blue);
    border-radius: var(--jr-radius-pill);
    color: var(--jr-cream);
    font-size: 1.1rem;
    letter-spacing: .02em;
    padding: .7rem 1.6rem;
    text-transform: uppercase;
    white-space: nowrap
}

.jr-job__apply {
    align-items: center;
    align-self: flex-start;
    color: var(--jr-ink);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.6rem;
    gap: .8rem;
    letter-spacing: -.01em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap .25s ease, color .25s ease
}

@media(min-width:768px) {
    .jr-job__apply { align-self: center }
}

.jr-job__apply svg { height: 1.4rem; transition: transform .25s ease; width: 1.4rem }

.jr-job__apply:hover { color: var(--jr-blue); gap: 1.2rem }
.jr-job__apply:hover svg { transform: translate(.2rem, -.2rem) }

.jr-jobs__empty {
    font-family: PPNeueMontreal-Medium, sans-serif;
    opacity: .6;
    padding: 4rem 0;
    text-align: center
}

/* ------------------------------------------------------------------------
   Collection — Grid layout mode (full Collections page)
   ------------------------------------------------------------------------ */
.b-home-collection__grid {
    display: grid;
    gap: 2.4rem 1.6rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 2rem 4rem
}

@media(min-width:576px) {
    .b-home-collection__grid {
        gap: 3.2rem 2.4rem;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 1rem 4rem
    }
}

@media(min-width:1024px) {
    .b-home-collection__grid { grid-template-columns: repeat(4, 1fr) }
}

.b-home-collection__grid .c-product {
    border-radius: 0;
    gap: 1.2rem;
    justify-content: flex-start;
    width: 100%
}

.b-home-collection__grid .c-product__tile {
    aspect-ratio: 4/5;
    background-color: var(--jr-blue);
    overflow: hidden;
    position: relative;
    width: 100%
}

/* Titles sit under the block at full card width so long titles wrap
   without offsetting neighbours in the row */
.b-home-collection__grid .c-product__title {
    margin-top: 0;
    max-width: 100%;
    width: auto
}

.b-home-collection__grid .c-product__pattern { display: none }

/* ------------------------------------------------------------------------
   Locations — cards + feature row (reused, simplified, on Contact page)
   ------------------------------------------------------------------------ */
.jr-locations {
    padding: 0 0 6rem;
    position: relative;
    z-index: 1;
    /* full-bleed breakout — same technique as the other widgets */
    left: 50%;
    margin-inline-start: 0;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw
}

/* per-device nudges from the widget's Content offset controls */
.jr-locations .wrapper {
    transform: translate(var(--loc-off-x, 0rem), calc(var(--loc-off-y, 0rem) * -1))
}

.jr-locations__grid {
    display: grid;
    gap: var(--jr-gap);
    grid-template-columns: 1fr
}

@media(min-width:768px) {
    .jr-locations__grid { grid-template-columns: repeat(3, 1fr) }
}

.jr-location-card {
    color: var(--jr-ink);
    display: flex;
    flex-direction: column
}

.jr-location-card__media {
    aspect-ratio: 4/3;
    background-color: var(--jr-blue);
    overflow: hidden;
    position: relative;
    width: 100%
}

.jr-location-card__map {
    border: 0;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.jr-location-card__name {
    font-size: 2rem;
    letter-spacing: -.02em;
    margin-top: 1.6rem
}

.jr-location-card__city {
    color: var(--jr-blue);
    font-size: 1.2rem;
    letter-spacing: .04em;
    margin-top: .2rem;
    text-transform: uppercase
}

.jr-location-card__addr {
    align-items: flex-start;
    color: var(--jr-ink);
    display: flex;
    font-size: 1.4rem;
    gap: .8rem;
    line-height: 1.4;
    margin-top: 1.2rem;
    opacity: .85
}

.jr-location-card__addr svg { flex-shrink: 0; height: 1.6rem; margin-top: .2rem; width: 1.6rem }

.jr-location-card__cta {
    align-items: center;
    background-color: var(--jr-blue);
    border-radius: var(--jr-radius-pill);
    color: var(--jr-cream);
    display: inline-flex;
    font-size: 1.3rem;
    gap: .8rem;
    letter-spacing: .02em;
    margin-top: 2rem;
    padding: 1.2rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .25s ease;
    width: fit-content
}

.jr-location-card__cta svg { height: 1.4rem; transition: transform .25s ease; width: 1.4rem }
.jr-location-card__cta:hover { background-color: var(--jr-ink) }
.jr-location-card__cta:hover svg { transform: translateX(.3rem) }

/* Simple card style — image + name only (Contact page) */
.jr-locations--simple .jr-location-card__media { aspect-ratio: 1/1 }
.jr-locations--simple .jr-location-card__name { font-size: 1.6rem; margin-top: 1.2rem }

/* Simple variant — name sits above the media block */
.jr-locations--name-top .jr-location-card__name {
    margin-bottom: 1.2rem;
    margin-top: 0;
    order: -1
}

/* Feature icon row */
.jr-features {
    display: grid;
    gap: 2.4rem;
    grid-template-columns: 1fr;
    margin: 4.8rem 0;
    padding: 3.2rem 2rem;
    text-align: center;
    /* per-device nudges from the widget's Feature row offset controls */
    transform: translate(var(--feat-off-x, 0rem), calc(var(--feat-off-y, 0rem) * -1))
}

@media(min-width:768px) {
    .jr-features { grid-template-columns: repeat(3, 1fr); text-align: left }
}

.jr-feature {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center
}

@media(min-width:768px) {
    .jr-feature { align-items: flex-start; flex-direction: row }
}

.jr-feature__icon {
    align-items: center;
    background-color: var(--jr-blue);
    border-radius: 50%;
    color: var(--jr-cream);
    display: flex;
    flex-shrink: 0;
    height: 4.4rem;
    justify-content: center;
    width: 4.4rem
}

.jr-feature__icon svg { height: 2rem; width: 2rem }

.jr-feature__title {
    display: block;
    font-size: 1.4rem;
    letter-spacing: .02em;
    text-transform: uppercase
}

.jr-feature__desc {
    display: block;
    font-size: 1.3rem;
    margin-top: .2rem;
    opacity: .7
}

/* ------------------------------------------------------------------------
   Contact Form
   ------------------------------------------------------------------------ */
.jr-contact { padding: 0 0 6rem; position: relative; z-index: 1 }

/* per-device nudges from the widget's Content offset controls */
.jr-contact .wrapper {
    transform: translate(var(--cf-off-x, 0rem), calc(var(--cf-off-y, 0rem) * -1))
}

.jr-form {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
    max-width: 72rem
}

@media(min-width:576px) {
    .jr-form { grid-template-columns: 1fr 1fr }
}

.jr-form__field { display: flex; flex-direction: column }
.jr-form__field--full { grid-column: 1 / -1 }

.jr-form__field label {
    font-size: 1.1rem;
    letter-spacing: .04em;
    margin-bottom: .6rem;
    text-transform: uppercase
}

.jr-form__field input,
.jr-form__field textarea {
    background-color: transparent;
    border: .15rem solid var(--jr-blue);
    border-radius: 1.2rem;
    color: var(--jr-ink);
    font-size: 1.4rem;
    padding: 1.4rem 1.6rem;
    transition: border-color .25s ease, box-shadow .25s ease
}

.jr-form__field textarea { min-height: 14rem; resize: vertical }

.jr-form__field input::placeholder,
.jr-form__field textarea::placeholder { color: rgba(26, 33, 57, .4) }

.jr-form__field input:focus,
.jr-form__field textarea:focus {
    border-color: var(--jr-ink);
    box-shadow: 0 0 0 .3rem rgba(41, 74, 159, .15);
    outline: none
}

.jr-form__honeypot { left: -9999px; position: absolute }

.jr-form__submit {
    align-items: center;
    background-color: var(--jr-blue);
    border: none;
    border-radius: var(--jr-radius-pill);
    color: var(--jr-cream);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.4rem;
    gap: 1rem;
    grid-column: 1 / -1;
    justify-content: center;
    letter-spacing: .02em;
    margin-top: .8rem;
    padding: 1.4rem 2.8rem;
    text-transform: uppercase;
    transition: background-color .25s ease;
    width: fit-content
}

.jr-form__submit:hover { background-color: var(--jr-ink) }
.jr-form__submit svg { height: 1.4rem; width: 1.4rem }

.jr-form__notice {
    border-radius: 1.2rem;
    font-family: PPNeueMontreal-Medium, sans-serif;
    font-size: 1.4rem;
    margin-bottom: 1.6rem;
    max-width: 72rem;
    padding: 1.4rem 1.8rem
}

.jr-form__notice--success { background-color: rgba(41, 74, 159, .1); color: var(--jr-blue) }
.jr-form__notice--error { background-color: rgba(254, 67, 26, .1); color: #c93a12 }

/* ------------------------------------------------------------------------
   Feature Intro — eyebrow pill + heading + paragraph(s)
   ------------------------------------------------------------------------ */
.jr-feature-intro {
    padding: 6rem 0;
    position: relative;
    text-align: center;
    z-index: 1;
    /* full-bleed breakout — same technique as the Hero/Nav/Collection widgets */
    left: 50%;
    margin-inline-start: 0;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw
}

/* per-device nudges from the widget's Content offset controls */
.jr-feature-intro .wrapper {
    transform: translate(var(--fi-off-x, 0rem), calc(var(--fi-off-y, 0rem) * -1))
}

.jr-feature-intro--left { text-align: left }

.jr-feature-intro__pill {
    background-color: var(--jr-blue);
    border-radius: var(--jr-radius-pill);
    color: var(--jr-cream);
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: .04em;
    margin-bottom: 2rem;
    padding: .9rem 2rem;
    text-transform: uppercase
}

.jr-feature-intro__heading {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-inline: auto;
    max-width: 64rem
}

.jr-feature-intro--left .jr-feature-intro__heading { margin-inline: 0 }

.jr-feature-intro__text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 2.4rem auto 0;
    max-width: 56rem
}

.jr-feature-intro--left .jr-feature-intro__text { margin-inline: 0 }

.jr-feature-intro__text p {
    font-size: 1.5rem;
    line-height: 1.6;
    opacity: .85
}

/* ------------------------------------------------------------------------
   Media Split — image one side, eyebrow+heading+text other side
   ------------------------------------------------------------------------ */
.jr-split {
    padding: 4rem 0;
    position: relative;
    z-index: 1;
    /* full-bleed breakout — same technique as the Hero/Nav/Collection widgets */
    left: 50%;
    margin-inline-start: 0;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw
}

.jr-split__inner {
    align-items: center;
    display: grid;
    gap: 3.2rem;
    grid-template-columns: 1fr;
    /* per-device nudges from the widget's Content offset controls */
    transform: translate(var(--ms-off-x, 0rem), calc(var(--ms-off-y, 0rem) * -1))
}

@media(min-width:768px) {
    .jr-split__inner {
        gap: 6rem;
        /* --ms-media-w set by the widget's Media column width control */
        grid-template-columns: var(--ms-media-w, 1fr) 1.2fr
    }
}

.jr-split--reverse .jr-split__media { order: -1 }

@media(min-width:768px) {
    .jr-split--reverse .jr-split__media { order: 2 }
}

.jr-split__media {
    aspect-ratio: 4/5;
    background-color: var(--jr-blue);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    width: 100%
}

.jr-split__content {
    position: relative
}

/* Decorative tilted block beside the heading */
.jr-split__sticker {
    background-color: var(--jr-blue);
    border-radius: .8rem;
    height: 4.4rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(var(--sticker-x, 0rem), var(--sticker-y, 0rem)) rotate(var(--sticker-rot, 14deg));
    width: 4.4rem
}

.jr-split__sticker img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

@media(max-width:575.98px) {
    .jr-split.no-mobile-sticker .jr-split__sticker {
        display: none
    }
}

.jr-split__eyebrow {
    color: var(--jr-blue);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase
}

.jr-split__heading {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: .8rem
}

.jr-split__text {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 1.4rem;
    opacity: .85
}

/* ------------------------------------------------------------------------
   Timeline — year / image / title / description cards
   ------------------------------------------------------------------------ */
.jr-timeline {
    --tl-card-w: 22rem;
    padding: 4rem 0 6rem;
    position: relative;
    z-index: 1;
    /* full-bleed breakout — same technique as the other widgets */
    left: 50%;
    margin-inline-start: 0;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw
}

@media(min-width:768px) {
    .jr-timeline { --tl-card-w: 28rem }
}

/* Swiper track — bleeds off the right edge of the page */
.jr-timeline__track {
    margin-right: -2rem
}

.jr-timeline .swiper-slide {
    margin-right: 1.6rem;
    width: var(--tl-card-w)
}

.jr-timeline-card { display: flex; flex-direction: column }

.jr-timeline-card__media {
    aspect-ratio: 3/4;
    background-color: var(--jr-blue);
    border-radius: .8rem;
    overflow: hidden;
    position: relative;
    width: 100%
}

.jr-timeline-card__year {
    background-color: var(--jr-cream);
    border-radius: .6rem;
    color: var(--jr-ink);
    font-size: 1.1rem;
    left: 1rem;
    padding: .4rem .8rem;
    position: absolute;
    top: 1rem
}

.jr-timeline-card__title {
    font-size: 1.4rem;
    letter-spacing: -.01em;
    margin-top: 1.2rem;
    text-transform: uppercase
}

.jr-timeline-card__desc {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: .6rem;
    opacity: .75
}

/* ------------------------------------------------------------------------
   Accessibility — shared focus-visible ring for all new interactive elements
   ------------------------------------------------------------------------ */
.jr-job__apply:focus-visible,
.jr-location-card__cta:focus-visible,
.jr-form__submit:focus-visible,
.jr-form__field input:focus-visible,
.jr-form__field textarea:focus-visible {
    outline: .2rem solid var(--jr-blue);
    outline-offset: .2rem
}