/* =====================================================================
   responsive-fixes.css  (loaded LAST, after main.css + override-image-sizes.css)
   Fixes for phones / tablets / laptops / desktops / TVs.
   ===================================================================== */

/* ---------- Shared responsive foundation ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: clip;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    width: 100%;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    min-width: 0;
}

textarea { resize: vertical; }

p,
li,
address {
    overflow-wrap: anywhere;
}

.container,
.container-fluid {
    width: 100%;
}

.row {
    --bs-gutter-x: clamp(1rem, 3vw, 2rem);
}

/* Use legible, fluid type for long project names and content. */
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* ---------- Project detail layout ---------- */
.breadcrumb-area .project-heading-block,
.breadcrumb-area .project-main-title,
#project-gallery {
    min-width: 0;
}

#project-gallery > div {
    min-width: 0;
}

#project-gallery img {
    display: block;
    max-width: 100%;
    border-radius: clamp(8px, 1.2vw, 16px);
}

/* Keep the first project image full-size; crop every following image consistently. */
#project-gallery > div:not(:first-child) > .text-center {
    aspect-ratio: 692 / 545;
    overflow: hidden;
}

#project-gallery > div:not(:first-child) > .text-center img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* ---------- Forms and navigation touch targets ---------- */
input,
select,
textarea {
    font-size: 16px;
}

button,
[role="button"],
.pagination .page-link {
    touch-action: manipulation;
}

.footer a,
.nav-menu__link {
    overflow-wrap: anywhere;
}

/* ---------- Hero (home page): one-screen slider ---------- */
/* Real mobile browsers: 100vh is taller than the visible area (URL bar), use svh when supported */
.fullscreen-banner-three .swiper-container,
.fullscreen-banner-three .slider .swiper-slide .slide-inner,
.fullscreen-banner-three .slider .swiper-slide .slide-inner img {
    height: 100vh;
    height: 100svh;
}
.fullscreen-banner-three .slider .swiper-slide .slide-inner img {
    width: 100%;
}

/* Fluid title: the longest word (EXTRAORDINARY) is ~8.9em wide, so the font
   size follows the viewport width and can never split a word in half.
   13vh keeps it from overflowing on short landscape phones. */
.fullscreen-banner-one-title {
    font-size: clamp(26px, min(calc((100vw - 28px) / 9.6), 13vh), 82px);
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Title block: keep inside the screen on every size */
.fullscreen-banner-three-content {
    inset-inline-start: max(16px, 6%);
    inset-inline-end: 16px;
    max-width: calc(100% - 32px);
}
.fullscreen-banner-three-list { margin-top: 24px; }

/* ---------- Floating IFES badge ---------- */
.floating-image { width: 56px; height: 56px; bottom: 16px; left: 16px; }

@media (max-width: 575px) {
    .fullscreen-banner-three-content {
        inset-inline-start: 16px;
        inset-block-end: 68px;
    }
    /* slider bars: smaller + right aligned so they never touch the IFES badge */
    .fullscreen-banner-three .fullscreen-banner-three-pagination {
        gap: 6px;
        inset-inline-end: 16px;
        inset-block-end: 28px;
    }
    .fullscreen-banner-three .swiper-pagination-bullet { width: 44px; margin: 0 2px; }
    .floating-image { width: 44px; height: 44px; left: 12px; bottom: 16px; }
}

/* Short landscape phones */
@media (max-height: 480px) {
    .fullscreen-banner-three-content { inset-block-end: 56px; }
    .fullscreen-banner-three-list { margin-top: 8px; }
    .fullscreen-banner-three .fullscreen-banner-three-pagination { inset-block-end: 20px; }
    .floating-image { width: 40px; height: 40px; bottom: 12px; }
}

/* ---------- Big screens / TV ---------- */
@media (min-width: 1920px) {
    .fullscreen-banner-one-title { font-size: clamp(82px, 4.3vw, 220px); }
    .container { max-width: 1600px; }
}
@media (min-width: 2560px) {
    .container { max-width: 2000px; }
    .floating-image { width: 84px; height: 84px; bottom: 32px; left: 32px; }
}
@media (min-width: 3200px) {
    .container { max-width: 2600px; }
    .floating-image { width: 110px; height: 110px; bottom: 44px; left: 44px; }
}

/* ---------- Portfolio / event cards ----------
   main.css gives .tw-rounded-xl a fixed width:400px + height:250px, which made the
   card thumbnails stick out of the screen on phones (and not fill the card on big screens).
   Make the thumbnail fluid and keep one consistent crop (692x545, same as override-image-sizes.css). */
.portfolio-ip-wrapper .portfolio-ip-thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.portfolio-ip-wrapper .portfolio-ip-thumb a { display: block; }
.portfolio-ip-wrapper .portfolio-ip-thumb img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 692 / 545;
    object-fit: cover;
    object-position: center;
}

/* Keep generated listings and pagination balanced at every breakpoint. */
#portfolio-cards > .portfolio-card {
    min-width: 0;
}

#portfolio-pagination {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ---------- Fixed-width utility classes must never exceed the screen ---------- */
[class*="tw-w-"][class*="-px"] { max-width: 100%; }

/* ---------- Contact details and form controls ---------- */
.contact-left-item > div:last-child {
    min-width: 0;
}

.contact-left-item a,
.footer-address a {
    overflow-wrap: anywhere;
}

.footer img {
    max-width: min(100%, 100%);
    height: auto;
}

/* ---------- About page featured project gallery ---------- */
#about-project-gallery .container-fluid {
    max-width: 2200px;
    margin-inline: auto;
    padding-inline: clamp(12px, 3vw, 56px);
}

#about-project-gallery > .container-fluid > .row {
    align-items: stretch;
    row-gap: clamp(12px, 1.5vw, 24px);
}

#about-project-gallery .cta-two-thumb {
    width: 100%;
    overflow: hidden;
    border-radius: clamp(8px, 1.2vw, 16px);
}

#about-project-gallery .cta-two-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#about-project-gallery .cta-two-thumb.one {
    min-height: 100%;
}

#about-project-gallery .cta-two-thumb.two {
    aspect-ratio: 12 / 7;
}

#about-project-gallery .cta-two-thumb.three,
#about-project-gallery .cta-two-thumb.four {
    aspect-ratio: 1;
}

#about-project-gallery .cta-two-thumb .cta-two-counter,
#about-project-gallery .cta-two-thumb .cta-two-content {
    max-width: calc(100% - 32px);
}

@media (max-width: 1199.98px) {
    #about-project-gallery .cta-two-thumb.one {
        aspect-ratio: 4 / 3;
        height: auto !important;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    #about-project-gallery .row > .col-md-6 {
        width: 50%;
    }

    #about-project-gallery .cta-two-thumb.one {
        aspect-ratio: 4 / 3;
    }

    #about-project-gallery .cta-two-thumb.two {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1920px) {
    #about-project-gallery .cta-two-thumb.one img {
        object-position: center 35%;
    }
}

/* ---------- Footer: safe fallback if footer.jpg is not uploaded ---------- */
.footer { background-color: #E8E8E8; background-size: cover; background-position: center; }

/* Keep the fixed IFES badge / back-to-top button from covering the copyright line + social icons */
.footer { padding-bottom: 84px; }
@media (min-width: 2560px) { .footer { padding-bottom: 140px; } }

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        padding-inline: 20px;
    }

    .row {
        --bs-gutter-x: 1.25rem;
    }

    [class~="py-140"] {
        padding-block: clamp(3.75rem, 12vw, 6rem) !important;
    }

    .footer {
        padding-top: clamp(4rem, 12vw, 7rem);
        padding-bottom: 96px;
    }

    .footer-copyright-wrapper {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
        width: 100%;
    }

    .floating-image {
        z-index: 20;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-inline: 16px;
    }

    .portfolio-ip-area {
        padding-inline: 0;
    }

    #project-gallery > div {
        margin-bottom: 20px !important;
    }

    .breadcrumb-area .project-breadcrumb {
        column-gap: 8px;
    }

    .breadcrumb-area .project-breadcrumb-separator {
        font-size: 21px;
    }
}