/* Offices child pages grid */
.offices-childpages__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/*
  Reuse .btn-second base styling you already have.
  We override only what we need for layout + colors for this block.
*/
.offices-childpages__item.btn-second {
    display: flex;
    align-items: center;
    gap: 16px;

    /* keep your btn-second proportions but make room for thumb */
    padding: 18px 80px 18px 18px;

    /* reverse state: light default, dark on hover */
    background-color: #E0E7EC;
    color: #2e3f4b;
    text-decoration: none;

    /* needed because :after is absolutely positioned */
    position: relative;

    border-radius: 6px;
}

/* Thumbnail */
.offices-childpages__thumb {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.offices-childpages__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Text stack (title + description under it) */
.offices-childpages__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.offices-childpages__title {
    display: block;
    line-height: 1.2;
}

.offices-childpages__desc {
    display: block;
    font-size: 1.6rem!important;
    line-height: 1.4;
    opacity: 0.8;
    font-weight: 500!important;
}

/* Default arrow (black_arrow.svg has dark bg + white arrow baked in) */
.offices-childpages__item.btn-second:after {
    content: "";
    background-image: url(/wp-content/themes/visionite/assets/icons/black_arrow.svg);
    width: 44px;
    height: 44px;
    background-size: 44px !important;
    background-repeat: no-repeat;
    position: absolute;
    right: 20px;

    /* vertically center the arrow */
    top: 50%;
    transform: translateY(-50%);
}

/* Hover/focus state: dark button + swap arrow asset */
.offices-childpages__item.btn-second:hover,
.offices-childpages__item.btn-second:focus,
.offices-childpages__item.btn-second:focus-visible {
    background-color: #2e3f4b;
    color: #fff;
    text-decoration: none;
}

/* Ensure any nested elements follow the text color on hover */
.offices-childpages__item.btn-second:hover *,
.offices-childpages__item.btn-second:focus *,
.offices-childpages__item.btn-second:focus-visible * {
    color: #fff;
}

/* Swap to white_arrow.svg (white bg + dark arrow baked in) */
.offices-childpages__item.btn-second:hover:after,
.offices-childpages__item.btn-second:focus:after,
.offices-childpages__item.btn-second:focus-visible:after {
    background-image: url(/wp-content/themes/visionite/assets/icons/white_arrow2.svg);
}

@media (max-width: 767px) {
    .offices-childpages__grid {
        grid-template-columns: 1fr;
    }
}