/* =========================================================
   OCEANBRIDGE GLOBAL PRODUCTS PAGE
   ========================================================= */


/* =========================================================
   CONTAINER
   ========================================================= */

.products-container {

    width: calc(100% - 76px);

    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   HERO
   ========================================================= */

.products-hero {

    position: relative;

    padding: 100px 0 80px;

    background:
        linear-gradient(
            135deg,
            #07152f 0%,
            #102d5c 55%,
            #07152f 100%
        );

    overflow: hidden;

}


.products-hero::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -140px;
    top: -180px;

    border-radius: 50%;

    background: rgba(
        220,
        185,
        73,
        0.08
    );

}


.products-hero .products-container {

    position: relative;

    z-index: 1;

}


.products-hero .section-label {

    display: inline-block;

    margin-bottom: 18px;

    color: #dcb949;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}


.products-hero h1 {

    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        42px,
        5vw,
        72px
    );

    line-height: 1.05;

    font-weight: 700;

}


.products-hero p {

    max-width: 700px;

    margin: 26px 0 0;

    color: #b9c5d8;

    font-size: 18px;

    line-height: 1.8;

}


/* =========================================================
   PRODUCTS SECTION
   ========================================================= */

.products-section {

    padding: 80px 0 110px;

    background: #f7f9fc;

}


/* =========================================================
   GRID
   ========================================================= */

.products-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 30px;

    width: 100%;

}


/* =========================================================
   CARD
   ========================================================= */

.product-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5eaf1;

    border-radius: 18px;

    box-shadow:
        0 12px 35px
        rgba(
            12,
            35,
            68,
            0.08
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.product-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px
        rgba(
            12,
            35,
            68,
            0.14
        );

}


/* =========================================================
   IMAGE
   ========================================================= */

.product-card-image {

    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #0b1d3d;

}


.product-card-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;

}


.product-card:hover
.product-card-image img {

    transform: scale(1.04);

}


.product-image-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #102b57,
            #07152f
        );

}


.product-image-placeholder span {

    color: #dcb949;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 0.05em;

}


/* =========================================================
   CONTENT
   ========================================================= */

.product-card-content {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 28px;

}


.product-card-label {

    margin-bottom: 12px;

    color: #b18e28;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.product-card-title {

    margin: 0;

    color: #102a52;

    font-size: 24px;

    line-height: 1.25;

    font-weight: 700;

}


.product-card-description {

    margin: 16px 0 25px;

    color: #68778d;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   BUTTON
   ========================================================= */

.product-card-actions {

    margin-top: auto;

}


.product-download-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 8px;

    background: #102d5c;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.product-download-btn:hover {

    background: #dcb949;

    color: #07152f;

    transform: translateY(-2px);

}


.product-download-btn span {

    font-size: 18px;

    line-height: 1;

}


/* =========================================================
   LOADING
   ========================================================= */

.products-loading {

    grid-column: 1 / -1;

    min-height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #66758a;

    font-size: 16px;

}


/* =========================================================
   EMPTY
   ========================================================= */

.products-empty {

    grid-column: 1 / -1;

    padding: 80px 20px;

    text-align: center;

}


.products-empty h3 {

    margin: 0 0 10px;

    color: #102a52;

    font-size: 24px;

}


.products-empty p {

    margin: 0;

    color: #718096;

}


/* =========================================================
   ERROR
   ========================================================= */

.products-error {

    grid-column: 1 / -1;

    padding: 80px 20px;

    text-align: center;

}


.products-error h3 {

    margin: 0 0 10px;

    color: #102a52;

    font-size: 24px;

}


.products-error p {

    margin: 0 0 22px;

    color: #718096;

}


.products-retry {

    border: 0;

    border-radius: 8px;

    padding: 12px 22px;

    background: #102d5c;

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

}


.products-retry:hover {

    background: #dcb949;

    color: #07152f;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .products-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .products-container {

        width: calc(100% - 32px);

    }


    .products-hero {

        padding: 70px 0 60px;

    }


    .products-hero h1 {

        font-size: 42px;

    }


    .products-hero p {

        font-size: 16px;

    }


    .products-section {

        padding: 55px 0 75px;

    }


    .products-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .product-card-image {

        height: 220px;

    }


    .product-card-content {

        padding: 22px;

    }


    .product-card-title {

        font-size: 21px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .products-container {

        width: calc(100% - 24px);

    }


    .products-hero h1 {

        font-size: 34px;

    }

}


/* =========================================================
   OCEANBRIDGE GLOBAL
   PAGES FOLDER — FULL WIDTH
   Applies to:
   /pages/projects.html
   /pages/products.html
   /pages/blog.html
   /pages/blog-details.html
   /pages/careers.html
   /pages/contact.html
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   SHARED NAVBAR
   ========================================================= */

#siteHeader,
.site-header {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* Navbar background = entire screen */

.site-header {
    position: relative;
    width: 100%;
}


/* Navbar inner row */

.site-header-container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
}


/* =========================================================
   PAGE BODY
   ========================================================= */

body {
    min-width: 320px;
}


/* Remove old centered page wrappers */

.page-container,
.page-wrapper,
.content-wrapper,
.main-container,
.container,
.blog-container,
.products-container,
.projects-container,
.contact-container,
.careers-container {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HERO / PAGE HEADER
   ========================================================= */

.page-hero,
.page-header,
.blog-hero,
.products-hero,
.projects-hero,
.careers-hero,
.contact-hero,
.blog-detail-hero,
.article-hero {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   SECTIONS
   ========================================================= */

section {
    max-width: none;
}


/* =========================================================
   BLOG / INSIGHTS GRID
   ========================================================= */

.blog-grid,
.blog-list,
.insights-grid,
.articles-grid {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-left: 5%;
    padding-right: 5%;
}


/* =========================================================
   BLOG CARDS
   ========================================================= */

.blog-card,
.article-card,
.insight-card {
    width: 100%;
    max-width: none;

    min-width: 0;
}


/* =========================================================
   BLOG CARD IMAGES
   ========================================================= */

.blog-card-image,
.article-card-image,
.insight-card-image {
    width: 100%;
    height: 300px;

    overflow: hidden;
}

.blog-card-image img,
.article-card-image img,
.insight-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   BLOG DETAIL
   ========================================================= */

.blog-detail,
.blog-detail-page,
.blog-details-page {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   BLOG DETAIL HERO CONTENT
   ========================================================= */

.blog-detail-hero-content,
.blog-hero-content,
.article-hero-content {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   BLOG FEATURE IMAGE
   ========================================================= */

.blog-feature-section,
.feature-image-section,
.blog-detail-image-section {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


.feature-image-wrapper,
.blog-feature-image,
.blog-detail-feature-image {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.feature-image-wrapper img,
.blog-feature-image img,
.blog-detail-feature-image img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;

    object-fit: contain;
    object-position: center;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.blog-detail-content,
.blog-content,
.article-content,
.blog-body,
.article-body {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-left: 8%;
    padding-right: 8%;
    padding-top: 70px;
    padding-bottom: 70px;
}


/* =========================================================
   ARTICLE TEXT
   ========================================================= */

.blog-detail-content p,
.blog-content p,
.article-content p,
.blog-body p,
.article-body p {
    max-width: none;
    width: 100%;

    line-height: 1.8;

    margin-top: 0;
    margin-bottom: 28px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.products-page,
.products-section,
.products-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.projects-page,
.projects-section,
.projects-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   CAREERS
   ========================================================= */

.careers-page,
.careers-section,
.careers-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-page,
.contact-section,
.contact-grid {
    width: 100%;
    max-width: none;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.site-footer {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-header-container {
        width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }

    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        padding-left: 5%;
        padding-right: 5%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-header-container {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    .blog-grid,
    .blog-list,
    .insights-grid,
    .articles-grid {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        width: 100%;

        padding: 40px 20px;
    }


    .feature-image-wrapper img,
    .blog-feature-image img,
    .blog-detail-feature-image img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .site-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .blog-grid,
    .blog-list,
    .insights-grid,
    .articles-grid {
        padding-left: 15px;
        padding-right: 15px;
    }


    .blog-detail-content,
    .blog-content,
    .article-content,
    .blog-body,
    .article-body {
        padding-left: 15px;
        padding-right: 15px;
    }

}
/* =========================================================
   PRODUCT IMAGE FIX
   Keep uploaded product artwork fully visible instead of
   cropping/zooming it inside the card.
   ========================================================= */
.product-card-image {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%);
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 10px;
    background: #ffffff;
    transform: none;
}

.product-card:hover .product-card-image img {
    transform: none;
}

.product-image-placeholder {
    background: linear-gradient(135deg, #102b57, #07152f);
}

@media (max-width: 700px) {
    .product-card-image {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .product-card-image img {
        padding: 6px;
    }
}