/**
 * GB Category Content
 * Module for PrestaShop E-Commerce Software
 *
 * NOTICE OF LICENSE
 *
 * Each license you purchase is valid for use on a single website only. This file is not open source!
 * If you wish to use this file on multiple websites (or projects), you need to buy additional licenses.
 * However, if you have set up your PrestaShop as a Multishop, you may use the file for the URLs associated with that Multishop.
 * You are not permitted to redistribute, resell, lease, license, sub-license, or provide our resources to any third party.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future.
 *
 * @author    Günter Borsch <info@gunibo.com>
 * @copyright Copyright (c) 2026, gunibo.com
 * @license   Each license purchase is valid for a single website (or project)
 */

/* GB Category Content Module CSS */

/* =========================================================
   Overlay mount
   ========================================================= */
.gbcc-overlay-root{
  position: relative;
  isolation: isolate;
}

/* Hide all other content inside the root, except the overlay */
.gbcc-overlay-root > :not(.gbcc-overlay){
  visibility: hidden;
  pointer-events: none;
}

/* Show the overlay content */
.gbcc-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Block styles */
.gbcc-overlay .gbcc-block{
  display: block !important;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* =========================================================
   Whole-card click (stretched link)
   ========================================================= */
.gbcc-block .gbcc-stretched-link{
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px;
  overflow: hidden;
  pointer-events: auto;
}

/* Disable whole-card click while Klaro placeholder is visible */
.gbcc-block:has(.gbcc-block-video-embed [data-type="placeholder"]:not([style*="display: none"])) .gbcc-stretched-link{
  pointer-events: none;
}

/* =========================================================
   Inner content
   ========================================================= */
.gbcc-block-inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--gbcc-padding-top, 16px);
  padding-right: var(--gbcc-padding-right, 16px);
  padding-bottom: var(--gbcc-padding-bottom, 16px);
  padding-left: var(--gbcc-padding-left, 16px);
}

/* Make interactive elements inside the block clickable */
.gbcc-block-inner a,
.gbcc-block-inner button,
.gbcc-block-inner input,
.gbcc-block-inner select,
.gbcc-block-inner textarea,
.gbcc-block-inner [role="button"]{
  pointer-events: auto;
}

/* Block body grows to fill available space */
.gbcc-block-body{
  flex: 1 1 auto;
  width: 100%;
}

/* Text margin */
.gbcc-text{
  margin-top: var(--gbcc-space-text-top, 0px);
}

/* Footer (button etc.) aligned to bottom */
.gbcc-block-footer{
  margin-top: auto;
  margin-bottom: var(--gbcc-space-button-top, 0px);
  width: 100%;
  display: flex;
}

/* Justify content options */
.gbcc-justify-start  { justify-content: flex-start; }
.gbcc-justify-center { justify-content: center; }
.gbcc-justify-end    { justify-content: flex-end; }

/* =========================================================
   Background media
   ========================================================= */
.gbcc-block-poster{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* File video */
.gbcc-block-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   Embedded video (YouTube/Vimeo/etc.)
   IMPORTANT:
   - By default, the embed must NOT eat clicks (so stretched-link works).
   - Only the Klaro placeholder inside may receive clicks.
   ========================================================= */
.gbcc-block-video-embed{
  position: absolute;
  inset: 0;
  /* z-index: 1; */
  overflow: hidden;

  /* IMPORTANT: don't block card clicks */
  pointer-events: none;

  --gbcc-embed-zoom: 1.25;
}

/* Klaro placeholder must be above the stretched link and fully clickable */
.gbcc-block-video-embed [data-type="placeholder"]{
  position: relative;
  z-index: 30; /* > stretched link (10) */
  pointer-events: auto;
}

.gbcc-block-video-embed [data-type="placeholder"] *,
.gbcc-block-video-embed .klaro,
.gbcc-block-video-embed .klaro *{
  pointer-events: auto;
}

/* Make iframe cover the embed container */
.gbcc-block-video-embed iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 0;

  /* Card overlay scenario: do not allow iframe to capture clicks */
  pointer-events: none;

  transform: translate(-50%, -50%) scale(var(--gbcc-embed-zoom));
  transform-origin: center;
}

/* Media ready state - fade in video, fade out poster */
.gbcc-media-ready .gbcc-block-poster{
  opacity: 0;
  transition: opacity .2s ease;
}

/* Reduced motion preference - hide videos */
@media (prefers-reduced-motion: reduce){
  .gbcc-block-video,
  .gbcc-block-video-embed{ display: none; }
}