/*-- Gigabyte Styles --*/

:root {
    --giga-dbrown:#462000;
    --giga-dblack:#212121;
}

html { scroll-behavior: smooth; }

/* Page Wrapper */
.giga-page-wrapper {
    min-height: 100vh;
    background: linear-gradient(to bottom, #d4b896, #c9a882, #b89968);
    font-family:"Play", sans-serif;
    font-weight:400;    
    overflow:hidden; 
}

/* Header */
.giga-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6.7rem 1.5rem 19.4rem;
}

.giga-header img { max-width:523px; width:100%; }

.giga-header-content {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.giga-hero2 { position: relative; }
.giga-hero2-details { position:absolute; top:4%; left:26%; margin:auto; text-align:center; }
.giga-hero2-bg img { width:100%; position: relative; z-index:-1; }
.giga-logo { max-width:523px; width:100%; margin:auto;}

.giga-logo-gigabyte {
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.giga-logo-aero {
    color: white;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0.2em;
}

/* Hero Section */
.giga-hero {
    text-align: center;
    padding: 3rem 1.5rem;
}

.giga-hero-bg { background:url('../imgs/giga-bg.png') no-repeat top center; background-size:contain; }
.giga-bg { background: linear-gradient(to bottom, #d4b896, #c9a882, #b89968); }

.giga-hero-subtitle {
    color: var(--giga-dbrown);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
}

.giga-hero-title {
    color: var(--giga-dbrown);
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.giga-hero-tagline {
    color: var(--giga-dbrown);
    font-size: clamp(1.8rem, 1vw, 0.75rem);
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
}

.giga-btn-primary {
    background-color: #8B5A2B;
    color: white;
    padding: 0.89rem 6rem;
    border-radius: 9999px;
    font-family: "Play",sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 0.75rem;

}

.giga-btn-primary:hover {
    background-color: #704824;
}

.giga-hero-footnote {
    color: var(--giga-dbrown);
    font-size: clamp(1.4rem, 1.8vw, 2.3rem);
    letter-spacing: 0.05em;
}

/* Product Showcase */
.giga-product-showcase {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.giga-product-image-wrapper {
    position: relative;
    max-width: 42rem;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.giga-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Collaboration Banner */
.giga-collaboration {
    text-align: center;
    padding: 2rem 1.5rem;
}

.giga-collaboration-title {
    color: var(--giga-dbrown);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.giga-collaboration-subtitle {
    color: var(--giga-dbrown);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

/* Description Section */
.giga-description {
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

.giga-section-heading {
    color: var(--giga-dbrown);
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.giga-description-text {
    color: var(--giga-dbrown);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Heart of the Build */
.giga-heart-of-build {
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.giga-heart-of-build .giga-section-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.giga-heart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.giga-heart-content {
    color: var(--giga-dbrown);
}

.giga-feature-text {
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    color: var(--giga-dbrown);
}

.giga-feature-list {
    list-style: none;
    margin-top: 3rem;
}

.giga-feature-list li {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.giga-heart-image {
    /*background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;*/
    padding: 1.5rem;
    /*backdrop-filter: blur(8px);*/
}

.giga-placeholder-box {
   /* aspect-ratio: 1;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.giga-placeholder-text {
    color: var(--giga-dbrown);
    font-size: 0.875rem;
}

/* Curated Parts */
.giga-curated-parts {
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.giga-curated-parts .giga-section-heading {
    text-align: center;
    margin-bottom: 1rem;
}

.giga-curated-subtitle {
    color: var(--giga-dbrown);
    font-size: clamp(1.5rem, 3vw, 3rem);
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 3rem;
    font-weight:600; 
}

.giga-parts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.giga-part-card {
    text-align: center;
}
.giga-part-card div, .giga-part-card p { flex:1; }

.giga-part-image {
    /*background-color: rgba(255, 255, 255, 0.2);*/
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
    /*aspect-ratio: 1;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.giga-part-description {
    color: var(--giga-dbrown);
    font-size: 0.75rem;
}

/* Combo Pricing */
.giga-combo-pricing {
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.giga-combo-pricing .giga-section-heading {
    margin-bottom: 1.5rem;
}

.giga-combo-description {
    color: var(--giga-dbrown);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 auto 2rem;
}

.giga-combo-footnote {
    color: var(--giga-dbrown);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-top: 1.5rem;
}

/* Build Gallery */
.giga-build-gallery {
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.giga-build-gallery .giga-section-heading {
    text-align: center;
    margin-bottom: 1rem;
}

.giga-gallery-subtitle {
    color: var(--giga-dblack);
    text-align: center;
    letter-spacing: 0em;
    margin-bottom: 2rem;
    font-weight:700;
}

.giga-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.giga-gallery-item {
    /*
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
    aspect-ratio: 4 / 3;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.giga-gallery-item img, .giga-img img { width:100%; }

/* Footer */
.giga-footer {
    text-align: center;
    padding: 3rem 1.5rem;
}

.giga-footer-title {
    color: var(--giga-dbrown);
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.giga-footer-text {
    color: var(--giga-dbrown);
    margin-bottom: 0.75rem;
}

.giga-bold {
    font-weight: bold;
}

.giga-footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 5rem;
}

.giga-footer-logo-amd {
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
}

.giga-footer-logo-ryzen {
    color: white;
    font-size: 0.75rem;
    line-height: 1.2;
}

.giga-footer-logo-chipset {
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.giga-collaboration-title {
        font-size: clamp(3rem, 6vw, 6rem);
        line-height:1; 
    }
    
    .giga-collaboration-subtitle, .giga-gallery-subtitle {
        font-size: clamp(2rem, 3vw, 3rem);
    }
    
    
    
    .giga-description-text, .giga-combo-description, .giga-footer-text {
        font-size: clamp(1.6rem, 3.6vw, 3.6rem);
        line-height:1.2;
        padding:0 5%;
    }

    .giga-description .giga-section-heading {
        font-size: clamp(1.8rem, 3vw, 3rem);
        letter-spacing: 7px;
    }
    
    .giga-section-heading, .giga-footer-title {
        font-size: clamp(2rem, 6vw, 6rem);
    }

    .giga-hero-title {
        font-size: clamp(2rem, 8.7vw, 8.7rem);
        line-height:.95;
    }

    .giga-heart-grid {
        grid-template-columns: 40fr 60fr;
        align-items: flex-start;
    }
    
    .giga-feature-text,
    .giga-feature-list li {
        font-size: clamp(1.5rem, 3vw, 3rem);
        line-height:1;
    }
    
    
    .giga-parts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .giga-item { grid-column:span 2; }
    .giga-fifth { grid-column: 2 / span 2; margin:0 auto; }
    
    .giga-part-description {
        font-size: clamp(1.5rem, 3vw, 3rem);
    }
    
       
    
    .giga-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .giga-hero-subtitle {
        font-size: clamp(1.5rem, 4.9vw, 4.9rem);
    }

.giga-sect2 { margin-top:0%; }
/* Responsive Design - Tablet */
@media (min-width: 768px) {
    .giga-sect2 { margin-top:-14%; }
    .giga-hero {
        padding: 25.5rem 1.5rem 0;
    }
    
    
    
    
    .giga-hero-tagline {
        font-size: 2.4rem;
        padding:1% 0;
    }
    
    .giga-btn-primary {
        font-size: 4rem;
    }
        
    .giga-footer-logo-amd {
        font-size: 1.5rem;
    }
    
    .giga-footer-logo-chipset {
        font-size: 2.5rem;
    }
}

/* Responsive Design - Desktop */
@media (min-width: 1024px) {
    .giga-logo-gigabyte {
        font-size: 1.5rem;
    }
    
    .giga-logo-aero {
        font-size: 1.25rem;
    }
    

    .giga-parts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Design - 1200px */    
@media (max-width:1200px) {
    .giga-hero-tagline { letter-spacing:0.025em; }
    .giga-hero { padding-top:16.5rem; }
    .giga-hero-title { font-size: clamp(2.8rem, 11vw, 7.5rem); }
    .giga-part-image img { width:60%;  }
    .giga-item { grid-column:unset; }    
}

@media (max-width:1000px) {
    .giga-hero2-details { left:21%; }   
    .giga-btn-primary { font-size:2.85rem; padding:0.8rem 2.5rem; }
}

@media (max-width:550px) {
    .giga-hero2-details { left:0; }
    .giga-hero { padding-top:9rem; }
    .giga-logo { width:65%; }
    .giga-hero-bg { background-size:164%; }
    .giga-hero2-details { top:7%; }
    .giga-btn-primary { font-size:2rem; padding:0.2rem 2rem; }
    .giga-sect2 { margin-top:50%; }
    .giga-heart-grid, .giga-parts-grid { grid-template-columns:1fr; grid-template-rows:1fr; }
    .giga-heart-grid { gap:0; }
    .giga-feature-list { padding-left:25%; margin-top:1rem; }
    .giga-part-image { padding-bottom:0; }
    .giga-part-image img { width:100%; max-width:250px; }
    
    .giga-hero-tagline { margin-bottom:10px; }
    .giga-description .giga-section-heading { letter-spacing:3px; }
    .giga-description-text { padding:0; }
}