/* ==========================================================================
   Innovation Homes - site fixes & responsive refinements
   Loaded after style.css. Breakpoints follow Bootstrap 5:
   phone < 576 | large phone 576-767 | tablet 768-991 | laptop 992-1399 | desktop >= 1400
   ========================================================================== */

/* ---------- Global safety nets ---------- */
img {
    max-width: 100%;
    height: auto;
}

body {
    overflow-x: clip; /* decorative shapes must never cause sideways scrolling on phones (clip, not hidden, keeps sticky headers working) */
}

/* ---------- Home: hero banner (tablet & small laptop) ---------- */
/* The banner box is a fixed 700px but the photo renders shorter below 1200px, so the caption
   hung off the bottom of the photo and the arrows floated in empty space. Size box and photo together. */
@media (max-width: 1199px) {
    .banner__image {
        height: auto;
    }

    .banner__content {
        left: 24px; /* desktop design pokes the card 50px outside the photo; on narrower screens that crops it */
    }

    .banner__image img {
        height: 560px;
        object-fit: cover;
    }
}

@media (max-width: 991px) {
    .banner__image img {
        height: 460px;
    }
}

/* ---------- Home: Our Services ---------- */
.ih-services .ih-services__intro {
    max-width: 760px;
    margin: 12px auto 0;
}

.ih-service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(8, 53, 72, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.ih-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(8, 53, 72, .12);
}

.ih-service-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sub-bg);
}

.ih-service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.ih-service-card:hover .ih-service-card__media img {
    transform: scale(1.05);
}

.ih-service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.ih-service-card__title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 14px;
}

.ih-service-card__title a {
    color: var(--heading-color);
}

.ih-service-card__title a:hover {
    color: var(--theme-color1);
}

.ih-service-card__points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ih-service-card__points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 8px;
    color: var(--paragraph);
}

.ih-service-card__points svg {
    flex: 0 0 auto;
    margin-top: 3px;
}

.ih-service-card__points svg path {
    fill: var(--theme-color3);
}

.ih-service-card__more {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color1);
    margin: 2px 0 0;
}

/* pushes buttons to the bottom so every card in a row lines up */
.ih-service-card__actions {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.ih-service-card__actions .btn-one {
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 6px;
}

.ih-service-card__link {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 15px;
    color: var(--theme-color3);
    white-space: nowrap;
}

.ih-service-card__link i {
    margin-left: 4px;
    transition: transform .25s ease;
}

.ih-service-card__link:hover {
    color: var(--theme-color1);
}

.ih-service-card__link:hover i {
    transform: translateX(4px);
}

@media (max-width: 575px) {
    .ih-service-card__body {
        padding: 20px 18px 22px;
    }

    .ih-service-card__title {
        font-size: 21px;
    }
}

/* ---------- Home: About - "Get in touch" badge ---------- */
/* Was positioned 80px outside the image, on top of the About text */
.about__image .text-shape {
    right: 20px;
    bottom: 20px;
    width: 140px;
    height: 140px;
    padding: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

@media (max-width: 991px) {
    .about__image {
        max-width: 100%;
    }

    .about__image .text-shape {
        width: 110px;
        height: 110px;
    }
}

.ih-services__swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--paragraph);
}

/* ---------- Home: Our Services on phones = swipeable row ---------- */
/* 12 full cards stacked made the phone page ~8000px long; a swipe row keeps it to one card height.
   The next card peeks in from the right so visitors can see there is more to swipe. */
@media (max-width: 767px) {
    .ih-services .row.g-4 {
        flex-wrap: nowrap;
        align-items: flex-start; /* each card fits its own content instead of the tallest card */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: calc(var(--bs-gutter-x) * .5);
        padding-bottom: 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--theme-color1) transparent;
    }

    .ih-services .row.g-4 > [class*="col-"] {
        flex: 0 0 86%;
        max-width: 86%;
        scroll-snap-align: start;
    }

    .ih-service-card:hover {
        transform: none;
    }

    /* uniform card heights in the swipe row: 3 points, 2 lines each ("Learn more" has the full list) */
    .ih-service-card__points li:nth-child(n+4),
    .ih-service-card__more {
        display: none;
    }

    .ih-service-card__points li span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ih-service-card__points {
        min-height: 152px; /* 3 points x 2 lines, so short lists don't leave the row uneven */
    }

    .ih-service-card__actions .btn-one {
        padding: 9px 16px;
        font-size: 13px;
    }

    .ih-services__swipe-hint {
        display: flex;
    }
}

/* ---------- Home: Latest Project slider captions ---------- */
@media (max-width: 575px) {
    .project__content h6 {
        font-size: 13px;
    }

    .project__content h4 {
        font-size: 18px;
        line-height: 1.3;
    }
}

/* ---------- Footer ---------- */
/* "Follow us" icons were centered inside a narrow box on phones, which looked indented */
.footer-three__left .footer-bottom__wrp {
    justify-content: flex-start;
    margin: 0;
}

@media (max-width: 767px) {
    /* the long services list goes in 2 columns instead of one tall column */
    .footer-three__item-wrp > .footer-three__item:first-child {
        width: 100%;
    }

    .footer-three__item-wrp > .footer-three__item:first-child ul {
        columns: 2;
        column-gap: 20px;
    }

    .footer-three__item-wrp > .footer-three__item:first-child ul li {
        break-inside: avoid;
    }

    .footer-three__item-wrp > .footer-three__item,
    .footer-three__item-last {
        width: 100%;
    }
}

/* ---------- Gallery page ---------- */
/* Photos were a fixed 400px tall; use a consistent crop that works at 2-per-row on phones */
.gallery.gallerypage .row img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 575px) {
    .gallery.gallerypage .row img {
        aspect-ratio: 1 / 1;
        border-radius: 8px;
    }

    .gallery.gallerypage h5 {
        font-size: 14px;
    }
}