/* New "Visit Our Offices" design (Figma node 4209:50242) — independent from
   the legacy visit-offices.css (visit_offices_en/es), which stays untouched
   on the pages already using it. */

.cta-office {
    padding-top: 80px;
    padding-bottom: 80px;
}

.cta-office-header {
    padding-bottom: 32px;
}

/* Featured office banner */
.cta-office-featured {
    min-height: 22rem;
    background-color: var(--bs-secondary-500);
    align-items: stretch;
}

.cta-office-featured-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-office-featured-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single gradient (not a separate flat wash): fully solid at the left, where
   the text sits, fading to fully transparent by the right, where the people
   photo shows through untinted — matches the Figma "media" background exactly. */
.cta-office-featured-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--bs-secondary-500) 0%,
        var(--bs-secondary-500) 25%,
        rgba(1, 80, 87, 0.8) 66%,
        rgba(1, 80, 87, 0) 100%
    );
}

.cta-office-featured-content {
    z-index: 1;
    /* Narrower by default (matches the legacy component's 28rem) so there's room
       for the people photo beside it — only widened at xl+ below, where the
       container is wide enough to fit both the photo and the longer real CTA
       labels (e.g. "Request A Legal Case Evaluation") on one line. */
    max-width: 28rem;
    padding: 48px;
    gap: 32px;
    justify-content: flex-end;
    width: 100%;
}

@media screen and (min-width: 1200px) {
    .cta-office-featured-content {
        max-width: 47rem; /* 752px */
    }
}

.cta-office-featured-primary,
.cta-office-featured-contact {
    gap: 16px;
    width: 100%;
}

.cta-office-featured-name {
    color: var(--bs-white);
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.cta-office-featured-address,
.cta-office-card-address {
    font-style: italic;
    font-weight: 600;
}

/* Underline only the actual link, not the plain-text fallback when there's no location_link — an
   underlined address that isn't clickable reads as broken. */
.cta-office-featured-address a,
.cta-office-card-address a {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 10%;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.cta-office-featured-address {
    color: var(--bs-white);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}

.cta-office-featured-address a {
    color: var(--bs-white);
}

.cta-office-featured-contact {
    gap: 24px;
}

.cta-office-featured-phone {
    color: var(--bs-white);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.cta-office-featured-ctas {
    gap: 16px;
}

/* Button/Secondary in Figma: transparent, just a white border — not the solid button style .fixed-cta-btn normally has, so override background/border here on top of it (still reusing its position:static override + hover text-roll below). */
.cta-office-chat-btn.fixed-cta-btn {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
    color: var(--bs-white);
    border: 1px solid var(--bs-white);
}

.cta-office-chat-btn.fixed-cta-btn:hover,
.cta-office-chat-btn.fixed-cta-btn:visited {
    background-color: transparent;
    color: var(--bs-white);
}

.cta-office-chat-btn .fixed-cta-icon path {
    fill: var(--bs-white);
}

/* Button/Primary in Figma: solid white background, secondary-500 text — same as the site's existing CTA button base. */
.cta-office-phone-btn {
    background-color: var(--bs-white);
    color: var(--bs-secondary-500);
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 32px;
    border-radius: 2px;
    gap: 12px;
    width: fit-content;
}

.cta-office-phone-btn:hover,
.cta-office-phone-btn:visited {
    color: var(--bs-secondary-500);
}

/* Same hover text-swap animation as the rest of the site's CTA buttons, reusing the shared .fixed-cta-text markup/animation. */
.cta-office-chat-btn:hover .fixed-cta-text span,
.cta-office-phone-btn:hover .fixed-cta-text span {
    transform: translateY(-100%);
}

.cta-office-featured-people {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    height: 75%;
    display: flex;
    align-items: flex-end;
}

.cta-office-featured-people img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Secondary offices — cards */
.cta-office-cards-grid {
    gap: 16px;
    margin-top: 16px;
}

.cta-office-card {
    /* Without this, the mobile Swiper's inline width (see cta-office.js) covers only the content
       box, and this card's own padding gets added on top — silently widening the slide past what
       Swiper computed and swallowing the next-slide peek entirely. */
    box-sizing: border-box;
    flex: 1 0 0;
    min-width: 0;
    background-color: var(--bs-light);
    /* Right gutter reserves room for the photo, absolutely positioned at bottom-right instead of stacked in the flow. */
    padding: 24px 140px 24px 24px;
    justify-content: space-between;
    min-height: 218px; /* photo height (170px) + its own 24px top/bottom padding */
}

.cta-office-card-title {
    gap: 16px;
}

.cta-office-card-name {
    color: var(--bs-black);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cta-office-card-address {
    color: var(--bs-black);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}

/* Only the address text and "View Details" link go to Google Maps — not the whole card. */
.cta-office-card-address a {
    color: var(--bs-black);
}

.cta-office-card-details {
    color: var(--bs-black);
    font-weight: 600;
    font-size: 16px;
    gap: 8px;
    /* justify-content:space-between on .cta-office-card only pushes this to the bottom when
       content is short — a fixed margin guarantees breathing room from the address either way. */
    margin-top: 16px;
}

.cta-office-card-details,
.cta-office-card-details:hover,
.cta-office-card-details:visited {
    text-decoration: none;
    color: var(--bs-black);
}

.cta-office-card-details svg {
    /* Matches the pin icon's teal, not the link text's black — the svg's fill="currentColor"
       resolves to this element's own color, independent of the link's. */
    color: var(--bs-main-500);
    transition: transform 0.3s ease;
}

.cta-office-card-details:hover svg {
    transform: translate(2px, -2px);
}

.cta-office-card-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 170px;
}

.cta-office-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Mobile carousel (see js/flexible-content/cta-office.js — grid becomes a Swiper below 992px, same pattern as .cards-banner-grid/swiper-cards.js) */
.cta-office-cards-swiper .swiper-pagination {
    position: static;
    display: flex;
    padding-top: 16px;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
}

.cta-office-cards-swiper .swiper-pagination-bullet {
    width: 100%;
    height: 3px;
    border-radius: 0;
    margin: 0 !important;
    background-color: var(--bs-neutral);
    opacity: 1;
}

/* Same specificity as the base rule above, so this must come after it in source order to actually win. */
.cta-office-cards-swiper .swiper-pagination-bullet-active {
    background-color: var(--bs-secondary-500);
}

@media screen and (max-width: 992px) {
    .cta-office-featured {
        min-height: auto;
        flex-direction: column;
        /* On .cta-office-featured itself (not the cards grid below): cta-office.js's Swiper
           conversion renames the grid's class (cta-office-cards-grid → cta-office-cards-swiper),
           so a margin scoped to that class only held for the instant before JS ran. This element
           never changes class, so the gap is never dropped once the carousel initializes. */
        margin-bottom: 32px;
    }

    .cta-office-featured-content {
        max-width: 100%;
        padding: 24px;
    }

    /* Below the desktop breakpoint the people photo drops out of the corner overlay and
       becomes its own full-width block under the CTAs, stacked via .cta-office-featured's
       column direction above instead of absolutely positioned over the text. */
    .cta-office-featured-people {
        position: static;
        z-index: 1;
        width: 100%;
        height: 220px;
        margin-top: 16px;
        justify-content: center;
    }

    .cta-office-featured-people img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        /* contain (not cover): shows the whole photo instead of cropping it at intermediate
           widths, centered in the 220px band. */
        object-fit: contain;
        object-position: center center;
    }

    /* Both CTA buttons stack full-width instead of shrinking to their own text. */
    .cta-office-featured-ctas {
        flex-direction: column;
    }

    .cta-office-chat-btn.fixed-cta-btn,
    .cta-office-phone-btn {
        width: 100%;
        justify-content: center;
    }

    /* Photos are hidden below this breakpoint (see .cta-office-card-photo's d-lg-block), so the reserved right gutter isn't needed either. */
    .cta-office-card {
        /* Resets the desktop flex-basis (which takes priority over width in flex layout, same as .cards-banner-card), so cta-office.js's Swiper conversion can size each slide via slidesPerView instead of splitting evenly with the others. */
        flex: 0 0 auto;
        padding-right: 24px;
        min-height: 0;
    }
}