/*
==============================================
    MODEL DETAIL PAGE STYLES (REWORKED)
==============================================
*/

/* 1. Hero Section Layout */

/* Mobile-First: A single column stack by default.
   The new HTML order (title, gallery, info) naturally creates the desired mobile layout. */
.detail-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between title, gallery, and info block */
    padding: 2rem 0;
}

/* Assign grid areas to our direct children for desktop layout */
.detail-hero__title { grid-area: title; }
.gallery-container { grid-area: image; }
.detail-hero__info { grid-area: info; }

/* Desktop Layout (992px and wider) */
@media (min-width: 992px) {
    .detail-hero {
        display: grid;
        /* Define a two-column grid with named areas */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        grid-template-areas:
            "title image"
            "info  image";
        
        /* Set spacing between columns, not rows */
        gap: 0 4rem;
        align-items: start; /* Align content to the top of their cells */
        padding: 4rem 0;
    }
}


/* 2. Hero Content Styling */
.detail-hero__title {
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0; /* Remove default margin */
}
@media (min-width: 768px) {
    .detail-hero__title {
        font-size: 3rem;
    }
}

.detail-hero__info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space out the description, price, and button */
}

.detail-hero__tagline {
    font-size: 1.1rem;
    color: var(--muted-foreground);
    max-width: 60ch;
    margin: 0;
}

.detail-hero__price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.price--original {
    text-decoration: line-through;
    color: var(--muted-foreground);
    font-size: 1rem;
}

.price--promo {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}


/* 3. Gallery & Color Swatches */
.gallery-main-view {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
    .gallery-main-view {
        aspect-ratio: 21 / 9;
    }
}

.gallery-main-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center; /* <<< THIS LINE WAS CHANGED from flex-start to center */
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-swatch.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary);
    transform: scale(1.1);
}


/* 4. Key Specs, Highlights, & Spec Tables (Largely unchanged) */
.key-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--secondary);
    padding: 2.5rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    gap: 2rem;
}
@media(min-width: 768px) {
    .key-specs { grid-template-columns: repeat(4, 1fr); }
}
.key-specs__item { text-align: center; }
.key-specs__label { display: block; font-size: 0.9rem; color: var(--muted-foreground); }
.key-specs__value { display: block; font-size: 1.5rem; font-weight: 700; }

.specs-table-container { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media(min-width: 768px) { .specs-table-container { grid-template-columns: 1fr 1fr; } }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th { background-color: var(--secondary); padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.specs-table td { padding: 1rem; border-bottom: 1px solid var(--border); }
.specs-table tr:last-child td { border-bottom: none; }
.specs-table td:first-child { font-weight: 700; color: var(--muted-foreground); width: 40%; }

.highlight-item { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.highlight-item:not(:last-child) { margin-bottom: 5rem; }
@media(min-width: 768px) {
    .highlight-item { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .highlight-item:nth-child(even) .highlight-item__image-container { order: -1; }
}
.highlight-item__title { font-size: 1.8rem; margin-bottom: 1rem; }
.highlight-item__description { color: var(--muted-foreground); line-height: 1.7; }
.highlight-item__image-container { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.highlight-item__img { width: 100%; display: block; }