/* Base reset & typography (kept) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'poppins', sans-serif;
}

p,a,input,label,textarea,span,ul,li{
    font-family: 'poppins', sans-serif;
}

/* ======= NEW: section-centering helper (requirement #2) =====
   Sections keep full-width backgrounds; .section-center is an inner container
   that centers content and constrains max-width. 
   CHANGE: increased horizontal padding so text doesn't touch edges on responsive.
*/
.section-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px; /* CHANGED: increased from 20px to 28px for better breathing room */
}

/* ======= BANNER WRAPPER (unchanged visual behavior) ======
   The banner remains full-width and is excluded from section-centering.
*/
.banner-wrapper {
    width: 100%;
    position: relative;
}

/* Top Banner Section */
.technology-hero {
    position: relative;
    height: 40vh;
    background: url(images/technology/tech-banner.jpg) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Baseline hero content (mobile-friendly baseline) */
/* On desktop this becomes absolute (overlap); on responsive it becomes static and stacks. */
.technology-hero-content {
    background: rgba(0, 0, 0, 0.8);
    padding: 2rem;
    max-width: 600px;
    color: white;
    margin: 0 auto 24px;
    box-sizing: border-box;
    text-align: left;
}

.technology-hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.technology-hero-content p {
    font-weight: 300;
    line-height: 1.6;
}

/* Content Placeholder Section */
.technology-content-container{
    margin: 40px 0;
}

.technology-content-row {
    padding-top: 40px;
    margin: 40px auto;
    max-width: 1200px;
    text-align: start;
}

/* Thumbnails Section (grid reused from business styles) */
.business-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    padding: 1.5rem 0;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 40px;
}

/* Default grid item — auto height so images don't overflow */
.business-grid-item {
    position: relative;
    font-size: 1.4rem;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}

/* Responsive images — used across the page */
.business-grid-item img,
.thumb-img,
.responsive-img,
.responsive-icon {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Label overlay */
.business-grid-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
}
.common-products {
    padding-bottom: 40px;
}

/* Technology Content */
.tanita-technology-container {
    background-color: #91aab9;
    padding: 2rem 0;
}

.tanita-technology-container h1 {
    color: #233b55;
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin-bottom: 60px;
}

.technology-container-1{
    background-color: #dfdfdf;
    padding: 2rem 0;
}

.tech-section {
    align-items: center;
    background-color: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 8px;
}

.top-section {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.tech-content {
    flex: 1;
    min-width: 280px;
}

.tech-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.visualization {
    flex: 1;
    min-width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
    color: #000;
    margin-bottom: 1.5rem;
}

.info-block {
    margin-bottom: 1.5rem;
}

.info-block h3 {
    color: #005587;
    margin-bottom: 0.5rem;
}

.info-block p {
    color: #000;
    line-height: 1.6;
}

.frequency-info-block{
    margin-bottom: 1.5rem;
}

.frequency-info-block p {
    color: #000;
    line-height: 1.6rem;
}

.frequency-info-block img{
    width: 20%;
    float: left;
    margin-right: 20px;
}

.diagram {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

/* containers 2 & 3 */
.technology-container-2{
    background-color: #f5f0eb;
    padding: 2rem 0;
}

.technology-container-3{
    background-color: #233b55;
    padding: 2rem 0;
    color: #fff;
}

.technology-container-3 h2 {
    color: #fff;
    line-height: 2.5rem;
    margin-bottom: 2.2rem;
}

.analyzer-info-block p {
    color: #fff;
    line-height: 1.6rem;
}

/* market and comparison */
.market-innovator {
    background-color: #fff;
    padding: 2rem 0;
    margin-bottom: 40px;
}

.algorithm-section {
    max-width: 1200px;
    margin: 0 auto;
}

.algorithm-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3.5rem;
}

.algorithm-section p {
    text-align: center;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.comparison-item {
    background-color: #fff;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}

/* dr-quote */
.dr-quote {
    background-color: #dfdfdf;
    padding: 2rem 0;
}

.quote-tech-content h1 {
    font-size: 3rem;
    line-height: 3.2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.quote-info-block h3 {
    color: #005587;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* ==========================
   DESKTOP: recreate original overlapping look
   (desktop breakpoint now starts at 1024px per previous request)
   ========================== */
@media (min-width: 1024px) {
    .technology-hero {
        height: 40vh;
    }

    /* absolute hero to overlap banner (original desktop look) */
    .technology-hero-content {
        position: absolute;
        bottom: 0;
        left: 15%;
        right: 15%;
        background: rgba(0,0,0,0.8);
        padding: 2rem;
        max-width: 600px;
        margin: 0;
        z-index: 10;
        box-sizing: border-box;
        text-align: left;
    }

    /* tech-thumbs: desktop 3-column layout */
    .tech-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* comparison-grid default on large: keep single row if space allows */
    .comparison-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================
   TABLET RANGE: 768px — 1023px
   Start responsive behavior below 1024px.
   ========================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .technology-hero {
        height: 320px;
        background-attachment: scroll;
    }

    /* hero flows below banner on tablet sizes */
    .technology-hero-content {
        position: static !important;
        width: auto; /* CHANGED: use auto so inner padding from .section-center controls spacing */
        margin: 12px auto;
        padding: 1.25rem;
        max-width: none;
    }

    /* CHANGE: increase inner container padding on tablet so text is not close to edge */
    .section-center {
        padding: 0 32px; /* CHANGED: larger horizontal padding for tablet */
    }

    /* Professional Analyzer thumbnails: one row (3-up) at this range */
    .tech-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .thumb-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Market Innovator: one-row view at tablet (all items inline) */
    .comparison-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* stack top-section vertically for better spacing on tablets */
    .top-section {
        flex-direction: column;
        align-items: center;
    }

    .visualization {
        width: 100%;
    }

    .diagram img,
    .responsive-img,
    .thumb-img,
    .responsive-icon {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* text adjustments */
    .technology-hero-content h1 {
        font-size: 1.6rem;
    }

    .technology-hero-content p {
        font-size: 0.95rem;
        line-height: 1.45;
    }
}

/* ==========================
   MOBILE: <= 767px
   - tech-thumbs stack to 1 column
   - comparison-grid becomes 2x2 (two columns)
   ========================== */
@media (max-width: 767px) {
    .technology-hero {
        height: 280px;
        background-attachment: scroll;
    }

    .technology-hero-content {
        position: static !important;
        width: auto;
        margin: 12px auto;
        padding: 1.25rem;
        max-width: none;
    }

    /* CHANGE: give mobile a comfortable inner gutter */
    .section-center {
        padding: 0 20px; /* CHANGED: larger than previous 12px to avoid text touching edge */
    }

    /* tech-thumbs => single column on small screens */
    .tech-thumbs {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .thumb-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Market Innovator => 2 columns (2x2 grid) on mobile */
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* stack top-section vertically on phones */
    .top-section {
        flex-direction: column;
        align-items: center;
    }

    .diagram img,
    .responsive-img,
    .thumb-img,
    .responsive-icon {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .tanita-technology-container h1 {
        font-size: 1.8rem;
        line-height: 2rem;
        margin-bottom: 16px;
    }

    .quote-tech-content h1 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
}