/* *#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* product-carousel.css *#*#*#*#*#*#*#*#*#*#*#*#* (C) 2025 DekTec */
/*                                                                                                          */
/* Stylesheet for a responsive, JavaScript-enhanced image carousel with support for fade transitions,       */
/* navigation buttons, dot indicators, and theme variants (light and dark).                                 */
/*                                                                                                          */
/* The layout adapts seamlessly between desktop and mobile viewports.                                       */
/*                                                                                                          */
/* JavaScript (InitCarousel) controls the behavior: transitions, vertical centering, dot state, and         */
/* automatic slide progression.                                                                             */
/*                                                                                                          */
/* Carousels are populated dynamically using <script type="application/json"> tags embedded in the HTML.    */
/* These JSON blocks (with IDs such as 'hero-scenes' and 'arrivals-scenes') define the content of each      */
/* slide: type, tagline, description, image URL, and an optional vertical image offset.                     */

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.- Common for Mobile Portrait/Landscape, Desktop -.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

/* The frame fills up the entire available space in the panel below the panel-header. */
.product-carousel-frame {height:100%; position:relative; width:100%}

/* Grid container for image and text; expands to fill frame height. */
.product-carousel {display:grid; height:100%; width:100%}

.product-carousel .item-type {grid-area:type}
.product-carousel .item-tagline {grid-area:tagline}
.product-carousel .item-description {grid-area:desc}
.product-carousel .item-image {grid-area:image; width:100%; position:relative}
.product-carousel .item-text-block {grid-area:text}

/* “Learn More” link inherits color/weight from .blue-link in base-styles.                                  */
/* We only adjust font-size per breakpoint here.                                                            */
.product-carousel .blue-link {font-size:1rem}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Desktop (md+xl) -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

@media (min-width:860px)
{
  .product-carousel {column-gap:4rem; grid-template-areas:"image text"; grid-template-columns:1fr 1.5fr; 
                     padding:2rem 3rem 2rem 4rem}

  .product-carousel .item-text-block {height:20rem; 
                                       display:flex; flex-direction:column; justify-content:center}
  .product-carousel .item-type {margin:0; font-size:2.5rem; font-weight:600}
  .product-carousel .item-tagline {margin:0; font-size:1.8rem; font-weight:400}
  .product-carousel .item-description {font-size:1.2rem; font-weight:300; line-height:1.8rem; margin:1.5rem 0}
  .product-carousel .blue-link {font-size:1.4rem}

  .product-carousel .image-stack img.visible {filter:drop-shadow(0rem 3rem 0.6rem rgba(0, 0, 0, 0.1))}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Portrait -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

@media (max-width:859.98px) and (orientation:portrait)
{
  .product-carousel-frame {display:grid; grid-template-rows:1fr auto}

  .product-carousel {padding:0; margin-bottom:3rem; min-height:0;
                     display:flex; flex-direction:column; justify-content:center}
   
  .product-carousel .item-image {width:70%; height:60vw; margin-inline:auto}
  .product-carousel .image-stack {inset:0; display:grid}
  .product-carousel .item-type {font-size:clamp(1.3rem, calc(0.04rem + 6.2vw), 3.5rem); font-weight:600} /* 23px to 54px as viewport grows from 360px to 860px  */
  .product-carousel .item-tagline {margin-top:2vw; font-weight:400;
                                      font-size:clamp(0.9rem, calc(0.12rem + 4.2vw), 2.5rem); } /* 17px to 38px as viewport grows from 360px to 860px */
  .product-carousel .item-text-block {margin-left:0.7rem}
  .product-carousel .item-description {margin:4.4vw 0; line-height:1.6; font-weight:300;
                                       font-size:clamp(0.8rem, calc(0.53rem + 1.8vw), 1.6rem)} /* 15px to 24px as viewport grows from 360px to 860px */
  .product-carousel .blue-link {font-size:clamp(0.9rem, calc(0.37rem + 2.8vw), 2rem)} /* 16px @360 … 30px @860 */

  .product-carousel .image-stack img.visible {filter:drop-shadow(0rem 1.3rem 0.6rem rgba(0, 0, 0, 0.2))}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Landscape -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

@media (max-width:859.98px) and (orientation:landscape)
{
   /* Frame layout with two rows: carousel expands to fill height, dots below. */
  .product-carousel-frame {display:grid; grid-template-rows:1fr auto}

  /* Carousel grid: two columns (image | text), vertically centered. */
  .product-carousel {align-items:center; column-gap:2rem; grid-template-areas:"image text";
                     grid-template-columns:1fr 1.75fr}

  /* Text block: vertically centered by the grid, with spacing inside. */
  .product-carousel .item-text-block {gap:2svh; padding:6svh 0}

  /* Combine Type — Tagline on a single line in mobile-landscape. */
  .product-carousel .item-type, .product-carousel .item-tagline {display:inline}
  .product-carousel .item-tagline::before {content:" \2013\00a0"}

  /* Text styles within the text block. */
  .product-carousel .item-type {color:hsl(var(--dektec-blue-h) var(--dektec-blue-s) 36%);
                                font-size:1.1rem; font-weight:600; letter-spacing:0.02em}
  .product-carousel .item-tagline {margin:0; font-size:1.1rem; font-weight:400}
  .product-carousel .item-description {font-size:0.8rem; font-weight:300; line-height:1.5; margin:6svh 0 6svh}
  .product-carousel .blue-link {font-size:0.9rem}

   /* Subtle image shadow for visible product. */  
  .product-carousel .image-stack img.visible {filter:drop-shadow(0rem 1rem 0.6rem rgba(0, 0, 0, 0.1))}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Image Stack -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

/* The image stack consists of two overlaid <img> elements (.image-a and .image-b) used for crossfade       */
/* transitions between carousel slides. Only one image is visible at a time.                                */
/*                                                                                                          */
/* JavaScript dynamically swaps the 'visible' class to fade in the next image while fading out the current. */
/* The 'top' style of .image-stack is updated in JS to vertically center the image within .item-image,      */
/* using offsetHeight and a configurable vertical offset (ImageVertOffset from JSON).                       */
/*                                                                                                          */
/* This layout is shared across all viewports. The image container always spans 100% width and uses         */
/* absolute positioning for animated top/height adjustments.                                                */

.product-carousel .image-stack {width:100%; display:grid; position:absolute; left:0; top:0; 
              transition:height var(--fade-duration) ease, top var(--fade-duration) ease}
.product-carousel .image-stack img {width:100%; grid-area:1/1; opacity:0; z-index:0;
                                    transition:opacity var(--fade-duration) ease}
.product-carousel .image-stack img.visible {position:relative; opacity:1; z-index:1}
.product-carousel .image-stack img:not(.visible) {pointer-events:none; visibility:hidden}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Utility -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.product-carousel .no-transition {transition:none !important}