/**
 * Testimonial Section - Frontend styly
 *
 * Blok "Kdo za tím stojí":
 * - DaisyUI carousel (carousel-start = zarovnání ZLEVA, ne na střed)
 * - Prev/Next šipky (pozicované absolutně mimo karusel)
 * - Responzivní počet viditelných: 3 desktop / 2 tablet / 1 mobile
 * - CSS variables z parent theme, žádné hardcoded barvy
 *
 * @package ReactWind_Energy_Child
 * @task TASK-061
 */

/* =====================================================
   SEKCE - ZÁKLADNÍ LAYOUT
   ===================================================== */

.testimonial-section {
    position: relative;
    width: 100%;
    padding: var(--spacing-2xl, 3rem) 0;
    background: var(--ts-bg, transparent);
    overflow: hidden;
}

.testimonial-container {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding-inline: var(--container-padding, clamp(var(--spacing-sm, 0.5rem), 3vw, var(--spacing-2xl, 3rem)));
}

/* =====================================================
   TITULEK + PODTITULEK
   ===================================================== */

/* TASK-069d: Kicker - malý text nad velkým nadpisem */
.testimonial-kicker {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ts-accent, var(--color-success, var(--color-primary, #10b981)));
    margin: 0 0 0.75rem 0;
    text-align: center;
}

.testimonial-title {
    margin: 0 auto 0.75rem auto;
    color: var(--color-text-strong, inherit);
    text-align: center;
    max-width: 60ch;
}

.testimonial-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.75rem 0;
    color: var(--ts-subtitle, var(--color-text-muted, #6b7280));
    text-align: center;
}

/* =====================================================
   KARUSEL WRAPPER + ŠIPKY
   ===================================================== */

.testimonial-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* TASK-071: respektujeme nastavení Komponenty z customizeru
   - border-radius = --radius-field (zaoblení tlačítek)
   - border width = --border (šířka okraje z customizeru)
   - box-shadow škáluje přes --depth (0 = bez stínu)
*/
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--color-surface, #fff);
    color: var(--color-text-strong, #111);
    border: calc(var(--border, 1px) * 1) solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-field, 999px);
    box-shadow: 0 calc(2px * var(--depth, 1)) calc(8px * var(--depth, 1)) rgba(0, 0, 0, calc(0.12 * var(--depth, 1)));
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.testimonial-arrow:hover {
    /* scale používá --btn-focus-scale (DaisyUI), fallback 1.05 */
    transform: translateY(-50%) scale(calc(2 - var(--btn-focus-scale, 0.95)));
}

.testimonial-arrow-prev {
    left: -0.5rem;
}

.testimonial-arrow-next {
    right: -0.5rem;
}

/* Skrytá šipka = disabled stav (řízeno přes JS) */
.testimonial-arrow[aria-disabled="true"],
.testimonial-arrow.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* =====================================================
   LAYOUT KARET - CSS GRID (TASK-069a)
   ===================================================== */

/*
 * Přepnuto z DaisyUI carouselu na CSS grid.
 * Desktop: --ts-visible sloupců (default 2-3), rovná šířka.
 * Tablet/mobile: redukce počtu sloupců přes @media.
 * Šipky prev/next fungují jen pokud total > visibleCount
 * (PHP podmínka $show_arrows) - když je víc karet než sloupců,
 * přepneme grid na horizontální scroll s grid-auto-flow: column.
 */
.testimonial-carousel {
    /* --ts-gap: použije spacing token z parent theme (customizer cards gap = lg = 1.5rem).
       Lze přepsat lokálně přes --ts-gap na .testimonial-section. */
    --ts-gap: var(--spacing-lg, 1.5rem);
    display: grid;
    grid-template-columns: repeat(var(--ts-visible, 2), 1fr);
    gap: var(--ts-gap);
    padding: 0.5rem 0.25rem 1rem 0.25rem;
    /* Zarovnání zleva (prostor se nedělí na střed) */
    justify-items: stretch;
    align-items: stretch;
}

/* Pokud je karet víc než viditelných, karusel má horizontální scroll.
   PHP přidá třídu .is-scrollable když total > visibleCount. */
.testimonial-carousel.is-scrollable {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ts-visible, 2) - 1) * var(--ts-gap)) / var(--ts-visible, 2));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, rgba(0, 0, 0, 0.15)) transparent;
}

.testimonial-carousel.is-scrollable::-webkit-scrollbar {
    height: 6px;
}
.testimonial-carousel.is-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.testimonial-carousel.is-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 3px;
}

/* Karta - grid cell, bez fixní šířky (grid ji dá) */
.testimonial-item {
    width: 100%;
    min-width: 0;
    /* Snap pouze při scrollable variantě */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* =====================================================
   2 KARTY - CENTROVÁNÍ V ŠÍŘCE N SLOUPCŮ
   -----------------------------------------------------
   Když je v sekci přesně 2 karty a karusel není scrollable
   (tzn. visibleCount >= 2), přepneme grid na 2 sloupce
   a zúžíme wrapper tak, aby karty měly stejnou šířku jako
   v původním visibleCount-sloupcovém gridu a byly vycentrované.
   Vzorec max-width (gap = --ts-gap z parent theme spacing tokenu):
     visibleCount = 3 → (200% - gap)     / 3
     visibleCount = 4 → (200% - 2 * gap) / 4
   Řeší se přes data-visible atribut na .testimonial-section.
   ===================================================== */

@media (min-width: 1025px) {
    .testimonial-section[data-visible="3"] .testimonial-carousel:not(.is-scrollable):has(.testimonial-item:nth-child(2):last-child),
    .testimonial-section[data-visible="4"] .testimonial-carousel:not(.is-scrollable):has(.testimonial-item:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
        margin-inline: auto;
    }
    .testimonial-section[data-visible="3"] .testimonial-carousel:not(.is-scrollable):has(.testimonial-item:nth-child(2):last-child) {
        max-width: calc((200% - var(--ts-gap)) / 3);
    }
    .testimonial-section[data-visible="4"] .testimonial-carousel:not(.is-scrollable):has(.testimonial-item:nth-child(2):last-child) {
        max-width: calc((200% - 2 * var(--ts-gap)) / 4);
    }
}

/* =====================================================
   KARTA TESTIMONIALU (DaisyUI .card)
   ===================================================== */

/* TASK-071: karta respektuje nastavení Komponent z customizeru
   - --radius-box ... zaoblení karet (DaisyUI v5)
   - --depth ......... škálování stínu (0 vypne, 1 = default, 2 silný)
   - --border ........ šířka borderu (když customizer povolí okraj)
*/
.testimonial-card {
    width: 100%;
    height: 100%;
    background: var(--ts-card-bg, var(--color-surface, #fff));
    color: var(--ts-card-text, var(--color-text-body, #111));
    border-radius: var(--radius-box, 1rem);
    border: calc(var(--border, 0px) * 1) solid var(--color-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 calc(4px * var(--depth, 1)) calc(16px * var(--depth, 1)) rgba(0, 0, 0, calc(0.08 * var(--depth, 1)));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 calc(8px * var(--depth, 1)) calc(24px * var(--depth, 1)) rgba(0, 0, 0, calc(0.12 * var(--depth, 1)));
}

.testimonial-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

/* =====================================================
   HLAVIČKA KARTY (TASK-069b) - foto vlevo, text vpravo
   ===================================================== */

.testimonial-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.testimonial-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* Na velmi úzkém mobile (<400px) povolit stack */
@media (max-width: 399px) {
    .testimonial-header {
        gap: 0.75rem;
    }
}

/* Foto - kulaté, vlevo v hlavičce */
.testimonial-photo-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0;
    border: 3px solid var(--ts-accent, var(--color-primary, #3b82f6));
    flex-shrink: 0;
}

.testimonial-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonial-name {
    margin: 0;
    color: inherit;
}

.testimonial-role {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ts-accent, var(--color-primary, #3b82f6));
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.testimonial-description {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
}

/* =====================================================
   STATISTIKY (badges)
   ===================================================== */

/* TASK-069e: stats jako řada sloupcových boxů bez pozadí */
.testimonial-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    margin-top: 0.75rem;
}

/* =====================================================
   ROLE BADGES + TAG BADGES (TASK-063)
   ===================================================== */

.testimonial-role-badges,
.testimonial-tag-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.25rem 0 0.25rem 0;
}

/* TASK-069c: Role badges jako pill. Default success (zelená filled).
   Konfigurovatelné přes atribut roleBadgeStyle (success|primary|...|ghost). */
.testimonial-role-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    /* TASK-071: --radius-selector = zaoblení badge z customizeru (DaisyUI v5) */
    border-radius: var(--radius-selector, 999px);
    line-height: 1.2;
    border: none;
}

/* Sémantické varianty - filled pill, mapování na parent theme barvy */
.testimonial-role-badge--success {
    background: var(--color-success, oklch(var(--su, 65% 0.15 150)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}
.testimonial-role-badge--primary {
    background: var(--color-primary, oklch(var(--p, 60% 0.2 180)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}
.testimonial-role-badge--secondary {
    background: var(--color-secondary, oklch(var(--s, 60% 0.2 280)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}
.testimonial-role-badge--accent {
    background: var(--color-accent, oklch(var(--a, 70% 0.2 40)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}
.testimonial-role-badge--info {
    background: var(--color-info, oklch(var(--in, 70% 0.15 220)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}
.testimonial-role-badge--warning {
    background: var(--color-warning, oklch(var(--wa, 75% 0.15 80)));
    color: var(--color-dark-800, #1f2937);
}
.testimonial-role-badge--neutral {
    background: var(--color-neutral, oklch(var(--n, 30% 0.02 250)));
    color: var(--ts-badge-text, var(--color-white, #fff));
}

/* Legacy ghost varianta (zpětná kompatibilita) */
.testimonial-role-badge--ghost {
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    /* TASK-071: --border z customizeru (šířka okraje komponent) */
    border: calc(var(--border, 1px) * 1) solid var(--color-border, rgba(0, 0, 0, 0.15));
    font-weight: 500;
    padding: 0.25rem 0.625rem;
}

.testimonial-tag-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    /* TASK-071: --radius-selector = zaoblení badge z customizeru (DaisyUI v5) */
    border-radius: var(--radius-selector, 999px);
    /* TASK-066: ponecháno var() pro override přes --ts-badge-text v child theme */
    color: var(--ts-badge-text, var(--color-white, #fff));
}

/* Mapování sémantických barev na CSS proměnné z parent theme / DaisyUI (TASK-066) */
.testimonial-tag-badge.badge-primary   { background: var(--color-primary, oklch(var(--p, 60% 0.2 180))); }
.testimonial-tag-badge.badge-secondary { background: var(--color-secondary, oklch(var(--s, 60% 0.2 280))); }
.testimonial-tag-badge.badge-accent    { background: var(--color-accent, oklch(var(--a, 70% 0.2 40))); }
.testimonial-tag-badge.badge-info      { background: var(--color-info, oklch(var(--in, 70% 0.15 220))); }
.testimonial-tag-badge.badge-success   { background: var(--color-success, oklch(var(--su, 65% 0.15 150))); }
.testimonial-tag-badge.badge-warning   { background: var(--color-warning, oklch(var(--wa, 75% 0.15 80))); color: var(--color-dark-800, #1f2937); }
.testimonial-tag-badge.badge-neutral   { background: var(--color-neutral, oklch(var(--n, 30% 0.02 250))); }

/* =====================================================
   STATS IKONY (TASK-063)
   ===================================================== */

.testimonial-stat-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* TASK-069e: stat box - value/label stack bez pozadí */
.testimonial-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* Horní řádek: ikona (volitelně) + hodnota v jednom řádku */
.testimonial-stat-value-row {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ts-accent, var(--color-success, var(--color-primary, #10b981)));
    line-height: 1.15;
}

.testimonial-stat-value-row .testimonial-stat-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.testimonial-stat-value {
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--ts-accent, var(--color-success, var(--color-primary, #10b981)));
    line-height: 1.15;
}

.testimonial-stat-label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
    opacity: 0.95;
    line-height: 1.3;
}

/* =====================================================
   ODKAZ / KONTAKTY (TASK-097: LinkedIn + telefon + email)
   ===================================================== */

/* Card-actions: zajistit flex-wrap při více tlačítkách (LinkedIn + telefon + email) */
.testimonial-card .card-actions {
    margin-top: auto;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.testimonial-link {
    align-self: flex-start;
    gap: 0.375rem;
    color: var(--ts-accent, var(--color-primary, #3b82f6));
    /* Zabránit rozbití dlouhého emailu na mobilu */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-link:hover {
    color: var(--ts-accent, var(--color-primary, #3b82f6));
    opacity: 0.8;
}

/* =====================================================
   RESPONZIVITA
   ===================================================== */

/* Tablet - 2 sloupce */
@media (max-width: 1024px) {
    .testimonial-carousel {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonial-carousel.is-scrollable {
        grid-template-columns: unset;
        grid-auto-columns: calc((100% - var(--ts-gap)) / 2);
    }
    .testimonial-arrow-prev { left: 0; }
    .testimonial-arrow-next { right: 0; }
}

/* Mobile - 1 sloupec */
@media (max-width: 767px) {
    .testimonial-carousel {
        grid-template-columns: 1fr;
    }
    .testimonial-carousel.is-scrollable {
        grid-template-columns: unset;
        grid-auto-columns: 100%;
    }
    .testimonial-arrow {
        width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
    }
}

/* =====================================================
   PREFERS-REDUCED-MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .testimonial-carousel {
        scroll-behavior: auto;
    }
    .testimonial-card {
        transition: none;
    }
    .testimonial-card:hover {
        transform: none;
    }
}