/* ==========================================================================
   About Hero — Explore Rent One
   Figma: store image with dark gradient overlay
   CTA: 423.376 × 85.015px, white border, radius 56.11px, text 23.804px
   ========================================================================== */
.about-hero {
    padding-top: 62px;
}

.explore-section {
    padding-top: 152px;
    padding-bottom: 142px;
}

.explore-section .section-title {
    margin-bottom: 32px;
}

.explore-section>.container {
    max-width: 1640px;
}

.about-hero__bg {
    background-size: cover;
    background-position: left center;
    padding: 76px 0 177px;
}

/* Lazy background — gated behind .lazy-bg (core.js IntersectionObserver). Keep in uncritical. */
.about-hero__bg:not(.lazy-bg) {
    background-image: image-set(url('../../images/about/store-exterior.jpg') 1x,
            url('../../images/about/store-exterior@2x.jpg') 2x);
}


.about-hero__content {
    max-width: 640px;
}

.about-hero__text {
    margin-bottom: 35px;
}

/* Figma: 23.804px Regular white, letter-spacing 1.1902px, line-height 32.306px */
.about-hero__text p {
    font-size: 23.804px;
    line-height: 32.306px;
    letter-spacing: 1.1902px;
    margin-bottom: 17px;
}

.about-hero__text p:last-child {
    margin-bottom: 0;
}

/* Figma: 423.376 × 85.015px, transparent bg, white border 0.85px, radius 56.11px */
.about-hero__cta {
    width: 423.376px;
    height: 85.015px;
    font-size: 23.804px;
    letter-spacing: 1.1902px;
    border: 0.85px solid var(--white);
    transition: all 0.3s;
}

.about-hero__cta:hover {
    background-color: var(--white);
    color: var(--gray-900);
}

/* ==========================================================================
   Explore Cards — 3-card grid
   Figma: 3 cards, each ~528px wide, gap ~20.41px
   Card 1 & 3: image + navy #00447c overlay bar
   Card 2: #f1f1f1 bg + refer graphic
   ========================================================================== */

/* Figma: gap 20.41px between cards */
.explore-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20.41px;
}

/* Image fills available card height — grid items-stretch keeps cards even */
.explore-card__image {
    flex-grow: 1;
    height: 421px;
}

.explore-card__image--advantage,
.explore-card__image--careers {
    position: relative;
}

.explore-card__image--advantage:not(.lazy-bg)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: image-set(url('../../images/about/r1-advantage.jpg') 1x,
            url('../../images/about/r1-advantage@2x.jpg') 2x);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 287px;
}

.explore-card__image--careers:not(.lazy-bg)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: image-set(url('../../images/about/careers.jpg') 1x,
            url('../../images/about/careers@2x.jpg') 2x);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 287px;
}

/* Figma: navy bar #00447c, 183px tall, aligned to bottom of image */
.explore-card__bar {
    height: 183px;
    padding: 20px 30px;
}

/* Figma: 33.765px Medium white */
.explore-card__heading {
    font-size: 33.765px;
}

/* Figma: 21.201px Light white, line-height 27.483px */
.explore-card__desc {
    font-size: 21.201px;
    line-height: 27.483px;
    max-width: 388.964px;
}

/* Light bar variant (Refer a Friend) — Figma: #f1f1f1 bg */
.explore-card__bar--light {
    background-color: #f1f1f1;
}

/* Refer a Friend card — no image, gray bg fills the card */
.explore-card__bar--full {
    height: 468px;
    flex-grow: 1;
    padding: 20px 10px 10px 10px;
}

.explore-card__logo {
    width: 252.843px;
    height: auto;
    margin-bottom: 15px;
}

.explore-card__colors {
    height: 24px;
}

.explore-card__colors span {
    flex: 1;
}

.explore-card__heading--dark {
    font-size: 35.335px;
}

.explore-card__desc--dark {
    font-size: 31.409px;
    line-height: 31.409px;
    max-width: unset;
}

/* Figma: 66.744px Bold #00447c */
.explore-card__save {
    font-size: 66.744px;
    line-height: 1;
    margin-bottom: 5px;
}

.explore-card__save sup {
    font-size: 30px;
}

/* Figma: 14.134px Light Italic #00447c */
.explore-card__terms {
    font-size: 14.134px;
    margin-top: 30px;
}

/* Figma: white bg, radius 34.55px, 250.488 × 46.328px, text 18.703px Medium #5c5c5c */
.explore-card__btn {
    width: 250.488px;
    height: 46.328px;
    margin-top: 12px;
    color: #5c5c5c;
    font-size: 18.703px;
    transition: all 0.2s;
}

.explore-card__btn:hover {
    background-color: var(--gray-100);
}

/* Figma: 23.557px Light #242424, line-height 31.409px + arrow chevron 5.951 × 11.902px */
.explore-card__link {
    gap: 8px;
    padding: 15px 0;
    font-size: 23.557px;
    color: #242424;
    line-height: 31.409px;
    transition: color 0.2s;
}

.explore-card__link:hover {
    color: var(--primary);
}

.explore-card__link svg {
    flex-shrink: 0;
    width: 5.951px;
    height: 11.902px;
    transition: transform 0.2s;
}

.explore-card__link:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (min-width: 1300px) and (max-width: 1915px) {
    .explore-section {
        margin-left: 140px;
        margin-right: 140px;
    }
}

@media (max-width: 1720px) {
    .explore-card__heading {
        font-size: 26.765px;
    }

    .explore-card__desc {
        font-size: 15.201px;
        line-height: 18.483px;
        max-width: 270px;
    }

    .explore-card__heading--dark {
        font-size: 29.335px;
    }

    .explore-card__save {
        font-size: 54.744px;
    }

    .explore-card__desc--dark {
        font-size: 25.409px;
        line-height: 25.409px;
        max-width: unset;
        text-transform: lowercase;
    }

    .explore-card__logo {
        width: 199.843px;
    }

    .explore-card__link {
        font-size: 18.557px;
    }

    .explore-card__btn {
        width: 187.488px;
        height: 37.328px;
        font-size: 13.703px;
        font-weight: 700;
        line-height: 0px;
    }

    .explore-card__bar {
        height: 140px;
        padding: 10px 30px 17px 30px;
    }

    .explore-card__image {
        flex-grow: 1;
        height: 410px;
    }

    .explore-card__image--advantage:not(.lazy-bg)::before,
    .explore-card__image--careers:not(.lazy-bg)::before {
        max-height: 274px;
    }

    .explore-card__terms {
        font-size: 13.134px;
        margin-top: 43px;
    }
}

@media (max-width: 1480px) {
    .explore-card__heading {
        font-size: 20.765px;
    }

    .explore-card__desc {
        font-size: 12.201px;
        line-height: 17.483px;
        max-width: 232px;
    }

    .explore-card__heading--dark {
        font-size: 22.335px;
    }

    .explore-card__save {
        font-size: 42.744px;
    }

    .explore-card__desc--dark {
        font-size: 19.409px;
        line-height: 25.409px;
        max-width: unset;
    }

    .explore-card__link {
        font-size: 16.557px;
    }

    .explore-card__logo {
        width: 155.843px;
    }

    .explore-card__bar {
        height: 135px;
    }

    .explore-card__image--advantage:not(.lazy-bg)::before,
    .explore-card__image--careers:not(.lazy-bg)::before {
        max-height: 196px;
    }

    .explore-card__image {
        height: 330px;
    }

    .explore-card__terms {
        font-size: 13.134px;
        margin-top: 23px;
    }
}

@media (max-width: 1300px) {
    .explore-section {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 1199px) {
    .about-hero__content {
        max-width: 550px;
    }

    .about-hero__text p {
        font-size: 19px;
        line-height: 28px;
    }

    .about-hero__cta {
        width: 350px;
        height: 70px;
        font-size: 20px;
    }

    .explore-card__heading {
        font-size: 26px;
    }

    .explore-card__desc {
        font-size: 17px;
    }

    .explore-card__save {
        font-size: 50px;
    }

    .explore-card__link {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .about-hero__bg {
        height: 500px;
    }

    .about-hero__content {
        max-width: 500px;
    }

    .explore-cards__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .explore-card__image {
        height: 427px;
    }

    .explore-card__image--advantage:not(.lazy-bg)::before,
    .explore-card__image--careers:not(.lazy-bg)::before {
        max-height: 245px;
    }

    .explore-card__bar {
        height: 183px;
    }

    .explore-card__bar--full {
        height: auto;
        flex-grow: 1;
        padding: 46px 30px 30px;
    }
}

@media (max-width: 767px) {
    .about-hero {
        padding-top: 0;
    }

    .about-hero__bg {
        height: 600px;
        padding: 46px 15px 0;
        align-items: flex-start;
    }

    /* Lazy mobile background — gated behind .lazy-bg. */
    .about-hero__bg:not(.lazy-bg) {
        background-image: image-set(url('../../images/about/store-exterior-mobile.jpg') 1x,
                url('../../images/about/store-exterior-mobile@2x.jpg') 2x);
    }

    .about-hero__bg>.container {
        padding: 0;
    }

    .about-hero__content {
        max-width: 356px;
        margin: 0 0 0 auto;
        text-align: right;
    }

    .about-hero__text p {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.8px;
    }

    .about-hero__text {
        margin-bottom: 25px;
    }

    .about-hero__cta {
        width: 310px;
        height: 62px;
        font-size: 18.788px;
        letter-spacing: 0.9394px;
        border-width: 0.939px;
        border-radius: 68.576px;
    }

    .about-hero {
        padding-bottom: 50px;
    }

    /* Explore cards — horizontal scroll on mobile */
    .explore-section {
        padding-top: 80px;
        padding-bottom: 80px;
        padding-left: 0;
        padding-right: 0;
    }

    .explore-section .section-title {
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .explore-section>.container {
        padding: 0;
        max-width: 100%;
    }

    .explore-cards__grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .explore-card {
        flex: 0 0 311px;
    }

    .explore-card__image {
        flex-grow: 0;
        height: 289px;
    }

    .explore-card__bar {
        height: 108px;
        padding: 10px 15px 15px 15px;
    }

    .explore-card__bar--full {
        aspect-ratio: 311 / 289;
        position: relative;
        height: auto;
    }

    .explore-card__heading {
        font-size: 20px;
    }

    .explore-card__desc {
        font-size: 13px;
        line-height: 18px;
        max-width: 231px;
    }

    .explore-card__save {
        font-size: 39.276px;
    }

    .explore-card__heading--dark {
        font-size: 20px;
    }

    .explore-card__desc--dark {
        font-size: 18px;
    }

    .explore-card__terms {
        font-size: 10px;
    }

    .explore-card__logo {
        width: 149px;
    }

    .explore-card__btn {
        width: 147px;
        height: 27px;
        font-size: 11px;
        border-radius: 20px;
        margin-top: 6px;
    }

    .explore-card__link {
        font-size: 16px;
        line-height: 18.483px;
    }

    .explore-card__image--advantage:not(.lazy-bg)::before,
    .explore-card__image--careers:not(.lazy-bg)::before {
        max-height: 184px;
    }

}