/*
 * ============================================================
 *  HOMEPAGE – STYLY TITULNÍ STRÁNKY
 *  Projekt: TOPNYZEBRIK.CZ / PRIMAKOUPELNY.CZ
 *  Poslední revize: 2026-04
 * ============================================================
 *
 *  Tento soubor obsahuje styly platné výhradně pro titulní
 *  stránku (.type-index). Načítat pouze na homepage.
 *
 *  Závislosti:
 *    main.css       — globální proměnné, písma, základní prvky
 *    kategorie.css  — .kat-identita, .kat-pruvodce, .kat-faq
 *
 *  Komponenty:
 *
 *  1. WELCOME OBSAH – omezení šířky GEO bloků
 *     Centruje vlastní HTML obsah v .welcome bloku na 800 px.
 *     Struktura Shoptet: .welcome-wrapper > .welcome > div
 *
 *  2. CAROUSEL BANNERŮ – rotující proklikové bannery
 *     Automatická rotace 5 s, swipe na mobilu, šipky + tečky.
 *     HTML struktura: #tzCarousel > .tz-carousel__slide + dots + arrows
 *
 * ============================================================
 */


/* =============================================================================
   1. WELCOME OBSAH – omezení šířky GEO bloků
   Omezení šířky vlastního HTML obsahu v .welcome bloku na titulní stránce.
   Struktura Shoptet: .welcome-wrapper > .welcome > div (přímý obal obsahu)
   ============================================================================= */

.type-index .welcome-wrapper .welcome > div {
    max-width:    900px;
    margin-left:  auto;
    margin-right: auto;
}


/* =============================================================================
   2. CAROUSEL BANNERŮ
   Portrait bannery 665×1000 px (poměr 2:3), multi-card — stejný vzor jako PK.
   Desktop: 4 bannery, gap 8px  →  VISIBLE = 4, GAP = 8 (musí sedět s JS)
   Tablet (≤1024px): 3 bannery
   Mobil  (≤640px):  2 bannery

   Breakout z .welcome > div (max-width: 900px):
   .tz-carousel-wrap se vylamuje na 100vw pomocí calc triku.

   HTML struktura:
     <div class="tz-carousel-wrap">
       <div class="tz-carousel" id="tz-carousel">
         <div class="tz-carousel__viewport">
           <div class="tz-carousel__track" id="tz-carousel-track">
             <div class="tz-carousel__slide"><a href="..."><img .../></a></div>
             ...
           </div>
         </div>
         <button id="tz-carousel-prev" ...>
         <button id="tz-carousel-next" ...>
       </div>
       <div class="tz-carousel__dots" id="tz-carousel-dots"></div>
     </div>
   ============================================================================= */

/* CSS proměnné — počet viditelných slidů a mezera */
.tz-carousel-wrap {
    --tz-visible: 4;
    --tz-gap:     8px;

    width:         100%;
    margin-bottom: 0;
    padding:       16px 0 12px;
    box-sizing:    border-box;
}

/* Hlavní kontejner */
.tz-carousel {
    position:    relative;
    width:       100%;
    -webkit-user-select: none;
    user-select: none;
}

.tz-carousel.is-dragging { cursor: grabbing; }

/* Viewport — ořízne přesahující slidy */
.tz-carousel__viewport {
    overflow: hidden;
    width:    100%;
}

/* Track — flex řada, animovaný translateX */
.tz-carousel__track {
    display:     flex;
    gap:         var(--tz-gap);
    transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Slide — šířka = (100% - (visible-1) × gap) / visible */
.tz-carousel__slide {
    flex:     0 0 calc((100% - (var(--tz-visible) - 1) * var(--tz-gap)) / var(--tz-visible));
    min-width: 0;
    overflow:  hidden;
    border-radius: 8px;
}

.tz-carousel__slide a {
    display:         block;
    text-decoration: none;
}

/* Obrázek — plná šířka slidu, poměr stran 665:1000 */
.tz-carousel__slide img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 665 / 1000;
    object-fit:   cover;
}

/* Tablet: 3 bannery */
@media (max-width: 1024px) {
    .tz-carousel-wrap { --tz-visible: 3; }
}

/* Mobil: 2 bannery */
@media (max-width: 640px) {
    .tz-carousel-wrap { --tz-visible: 2; }
}

/* Tečky — pod carouselem */
.tz-carousel__dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    padding:         12px 0 4px;
}

.tz-carousel__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    #d0d0d0;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, transform 0.2s;
}

.tz-carousel__dot.is-active {
    background: #da2935;
    transform:  scale(1.3);
}

.tz-carousel__dot:hover { background: #aa1721; }

/* Šipky */
.tz-carousel__arrow {
    position:        absolute;
    top:             40%;
    transform:       translateY(-50%);
    background:      rgba(255, 255, 255, 0.92);
    border:          none;
    border-radius:   50%;
    width:           44px;
    height:          44px;
    cursor:          pointer;
    z-index:         10;
    color:           #24242e;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      background 0.2s, transform 0.15s;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.18);
}

.tz-carousel__arrow svg {
    width:        20px;
    height:       20px;
    stroke:       currentColor;
    stroke-width: 2.5;
    fill:         none;
}

.tz-carousel__arrow:hover {
    background: #ffffff;
    transform:  translateY(-50%) scale(1.08);
}

.tz-carousel__arrow.is-hidden {
    opacity:        0;
    pointer-events: none;
}

.tz-carousel__arrow--prev { left:  8px; }
.tz-carousel__arrow--next { right: 8px; }

@media (max-width: 640px) {
    .tz-carousel__arrow {
        width:  34px;
        height: 34px;
    }
    .tz-carousel__arrow svg {
        width:  16px;
        height: 16px;
    }
}