/* ============================================================
   aziProductPages.css
   Individual product sub-pages (software and hardware).
   Two-column layout: main content + sticky side panel.
   Image carousel, feature cards, specs card, CTA.

   Colour distinction: software = primary teal, hardware = hw teal.
   Applied via modifier classes .sw and .hw on container elements.

   All colour values come from tokens in aziBase.css.
   ============================================================ */


/* ============================================================
   PAGE LAYOUT — TWO COLUMN
   ============================================================ */

.product-page-layout {
    display:               grid;
    grid-template-columns: 1fr 270px;
    gap:                   28px;
    padding:               36px 0 54px;
    align-items:           start;
}

.product-main  { min-width: 0; }
.product-aside { position: sticky; top: 20px; }


/* ============================================================
   INTRO PARAGRAPH
   ============================================================ */

.product-intro {
    margin-bottom: 20px;
}

.product-intro p {
    font-size:   0.9rem;
    line-height: 1.78;
    color:       var(--color-text-body);
    margin:      0;
    text-align:  justify;
    text-justify: inter-word;
    text-align-last: left;
}


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

.carousel-container {
    position:      relative;
    width:         100%;
    overflow:      hidden;
    border-radius: var(--card-radius);
    background:    var(--color-navy);
    margin-bottom: 22px;
}

.carousel-track {
    display:    flex;
    width:      100%;
    transition: transform 0.5s ease;
}

.carousel-track figure {
    flex:     0 0 100%;
    margin:   0;
    position: relative;
}

/* Default variant — full-width image, caption overlaid */
.carousel-track img {
    width:         100%;
    height:        380px;
    object-fit:    cover;
    display:       block;
    border-radius: var(--card-radius);
}

.carousel-track figcaption {
    position:      absolute;
    bottom:        0;
    left:          0;
    width:         100%;
    padding:       10px 16px;
    background:    rgba(0, 0, 0, 0.50);
    color:         rgba(255, 255, 255, 0.85);
    font-size:     0.76rem;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* Caption-below variant */
.carousel-container.caption-below .carousel-track figure {
    display:        flex;
    flex-direction: column;
}

.carousel-container.caption-below .carousel-track figcaption {
    position:      static;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* Height-driven / screenshot variant (software) */
.carousel-container.height-driven .carousel-track img {
    height:     340px;
    width:      auto;
    max-width:  100%;
    object-fit: contain;
}

/* Light background variant — for real-world photography carousels
   where the navy background reads as harsh against natural images.
   Usage: add class="carousel-container light-bg ..." */
.carousel-container.light-bg {
    background: var(--color-bg-surface);
    border:     1px solid var(--color-border);
}

/* Navigation buttons */
.carousel-btn {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    background: rgba(0, 0, 0, 0.28);
    color:      var(--white);
    border:     none;
    padding:    10px 13px;
    font-size:  1.6rem;
    cursor:     pointer;
    border-radius: 4px;
    z-index:    10;
    transition: background 0.2s ease;
    line-height: 1;
}

.carousel-btn:hover { background: rgba(0, 0, 0, 0.48); }
.carousel-btn.prev  { left:  10px; }
.carousel-btn.next  { right: 10px; }


/* Product feature cards moved to aziCards.css */


/* ============================================================
   PRODUCT DESCRIPTION  (Detailed Overview section)
   ============================================================ */

.product-description {
    margin-bottom: 4px;
}

.product-description h2 {
    font-family:   var(--font-heading);
    font-size:     0.98rem;
    font-weight:   400;
    color:         var(--color-text-primary);
    padding-bottom: 7px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.product-description p {
    font-size:   0.86rem;
    line-height: 1.74;
    color:       var(--color-text-body);
    margin-bottom: 0.9rem;
    text-align:  justify;
    text-justify: inter-word;
    text-align-last: left;
}

.product-description a {
    color: var(--color-primary);
}


/* Side panel cards moved to aziCards.css */


/* ============================================================
   PRODUCT CTA (inline, below description on small screens)
   ============================================================ */

.product-cta {
    margin-top: 8px;
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .product-page-layout {
        grid-template-columns: 1fr;
    }

    .product-aside {
        position: static;
        /* Side panel cards render inline below main content */
    }

    .carousel-track img { height: 260px; }
}

@media (max-width: 768px) {

    .product-page-layout { padding: 28px 0 40px; gap: 20px; }

    .carousel-track img                       { height: 220px; }
    .carousel-container.height-driven
        .carousel-track img                   { height: 220px; }
}