/* Blog-specific styles */

.blog-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #333;
}

.blog-content p:not(.product-block-wrapper *) {
    margin-bottom: 1.5rem;
}

.blog-content h1:not(.product-block-wrapper *) {
    font-size: 2rem;
    font-weight: 800;
    margin: 2.5rem 0 1rem;
    color: #111;
}

.blog-content h2:not(.product-block-wrapper *) {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: #111;
}

.blog-content h3:not(.product-block-wrapper *) {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: #222;
}

.blog-content img:not(.product-block-wrapper *):not([class*="inset-0"]):not([class*="rounded-2xl"]) {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.blog-content figure:not(.product-block-wrapper *) {
    margin: 2rem 0;
    text-align: center;
}

.blog-content figure figcaption:not(.product-block-wrapper *) {
    font-size: 0.875rem;
    color: #888;
    margin-top: 0.5rem;
    font-style: italic;
}

.blog-content blockquote:not(.product-block-wrapper *) {
    border-left: 4px solid var(--primary, #6366f1);
    background: #f8f9ff;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #555;
}

.blog-content ul:not(.product-block-wrapper *),
.blog-content ol:not(.product-block-wrapper *) {
    margin: 1rem 0 1.5rem;
    padding-left: 1.5rem;
}

.blog-content ul li:not(.product-block-wrapper *),
.blog-content ol li:not(.product-block-wrapper *) {
    margin-bottom: 0.5rem;
}

.blog-content table:not(.product-block-wrapper *) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.blog-content table th:not(.product-block-wrapper *),
.blog-content table td:not(.product-block-wrapper *) {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.blog-content table th:not(.product-block-wrapper *) {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
}

.blog-content hr:not(.product-block-wrapper *) {
    border: none;
    border-top: 2px solid #f0f2f4;
    margin: 2rem 0;
}

.blog-content p a:not(.product-block-wrapper *),
.blog-content li a:not(.product-block-wrapper *),
.blog-content h1 a:not(.product-block-wrapper *),
.blog-content h2 a:not(.product-block-wrapper *),
.blog-content h3 a:not(.product-block-wrapper *),
.blog-content blockquote a:not(.product-block-wrapper *),
.blog-content td a:not(.product-block-wrapper *) {
    color: var(--primary, #6366f1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-content p a:hover:not(.product-block-wrapper *),
.blog-content li a:hover:not(.product-block-wrapper *),
.blog-content h1 a:hover:not(.product-block-wrapper *),
.blog-content h2 a:hover:not(.product-block-wrapper *),
.blog-content h3 a:hover:not(.product-block-wrapper *),
.blog-content blockquote a:hover:not(.product-block-wrapper *),
.blog-content td a:hover:not(.product-block-wrapper *) {
    opacity: 0.8;
}

.blog-content .video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 12px;
}

.blog-content .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}


/* ==========================================================================
   BENTO GRID (PAGE BUILDER) - Pepík Editor Styles & Hover Effects
   ========================================================================== */

/* 1. Globální proměnné pro snadné přizpůsobení vzhledu */
:root {
    --bento-gap: 20px;                     /* Mezera mezi kartami */
    --bento-border-color: #dfe1e5;         /* Barva ohraničení karet */
    --bento-bg-default: #f8f9fa;           /* Výchozí pozadí karet */
    --bento-radius-default: 12px;          /* Výchozí zaoblení rohů */
    --bento-primary-color: #0098f7;        /* Akcentní barva */
    
    /* 🔴 Červená barva z přílohy pro hover tlačítek */
    --bento-btn-hover-bg: #fc1508; 
    
    /* Stíny (Smooth Shadow System) */
    --bento-shadow-idle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --bento-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 2. Hlavní kontejner mřížky (Wrapper) */
html body .pepik-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bento-gap);
    margin: 24px 0;
    width: 100%;
    box-sizing: border-box;
    cursor: default !important;            
}

.blog-content {
    max-width: 100% !important;
}

.blog-content h2:not(.product-block-wrapper *) {
    border-bottom: none!important;
}

hr {
    border: none !important;
    border-top: 1px solid #E2E3E7 !important;
    width: 20% !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
}

/* 3. Jednotlivé buňky / sloupce (Cards) */
html body .pepik-grid-col {
    flex: 1;
    min-width: 250px;
    background: var(--bento-bg-default);
    border: 1px solid var(--bento-border-color);
    border-radius: var(--bento-radius-default);
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    
    /* Výchozí klasická šipka na pozadí */
    cursor: default !important;

    /* Plynulé animace karet */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.3s ease,
                background-color 0.3s ease;
    
    box-shadow: var(--bento-shadow-idle);
}

/* ==========================================================================
   🖱️ SPECIFICKÉ ŘÍZENÍ KURZORŮ
   ========================================================================== */

/* A. KLASICKÁ ŠIPKA pro texty, nadpisy a obrázky v běžném bloku (zamezení textovému "I") */
html body .pepik-grid-wrapper .pepik-grid-col,
html body .pepik-grid-wrapper .pepik-grid-col p,
html body .pepik-grid-wrapper .pepik-grid-col img,
html body .pepik-grid-wrapper .pepik-grid-col h1,
html body .pepik-grid-wrapper .pepik-grid-col h2,
html body .pepik-grid-wrapper .pepik-grid-col h3,
html body .pepik-grid-wrapper .pepik-grid-col h4,
html body .pepik-grid-wrapper .pepik-grid-col span,
html body .pepik-grid-wrapper .pepik-grid-col div,
html body .pepik-grid-wrapper .pepik-grid-col [contenteditable="true"],
html body .pepik-grid-wrapper .pepik-grid-col [contenteditable="true"] p,
html body .pepik-grid-wrapper .pepik-grid-col [contenteditable="true"] span {
    cursor: default !important;
}

/* B. UKAZUJÍCÍ PRST (ruka) pro explicitní odkazy a tlačítka uvnitř karet */
html body .pepik-grid-wrapper .pepik-grid-col a,
html body .pepik-grid-wrapper .pepik-grid-col a *,
html body .pepik-grid-wrapper .pepik-grid-col button,
html body .pepik-grid-wrapper .pepik-grid-col button *,
html body .pepik-grid-wrapper .pepik-grid-col .btn,
html body .pepik-grid-wrapper .pepik-grid-col .btn * {
    cursor: pointer !important;
}

/* C. UKAZUJÍCÍ PRST (ruka) pro celou plochu karty, pokud je celá karta klikatelná (data-link) */
html body .pepik-grid-wrapper .pepik-grid-col[data-link],
html body .pepik-grid-wrapper .pepik-grid-col[data-link] *,
html body .pepik-grid-wrapper .pepik-grid-col.pepik-hover-anim,
html body .pepik-grid-wrapper .pepik-grid-col.pepik-hover-anim * {
    cursor: pointer !important;
}

/* ==========================================================================
   Vnitřní prvky a animace
   ========================================================================== */

.pepik-grid-col > *:last-child {
    margin-bottom: 0;
}

/* Zoom efekt pro obrázky */
.pepik-grid-col img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pepik-grid-col:hover img {
    transform: scale(1.03);
}

/* Obecné textové odkazy */
.pepik-grid-col a:not([class]) {
    color: var(--bento-primary-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pepik-grid-col a:not([class]):hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ==========================================================================
   🔴 Styl & Plynulý Hover pro Tlačítka
   ========================================================================== */

/* Tlačítka vložená přes editor */
.pepik-grid-col a[style*="display:inline-block"],
.pepik-grid-col a[style*="display: inline-block"],
.pepik-grid-col a.btn,
.pepik-grid-wrapper a[style*="display:inline-block"],
.pepik-grid-wrapper a[style*="display: inline-block"],
.pepik-grid-wrapper a.btn {
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                color 0.3s ease, 
                transform 0.2s ease, 
                box-shadow 0.2s ease !important;
}

/* Hover stav tlačítek - červená barva #fc1508 */
.pepik-grid-col a[style*="display:inline-block"]:hover,
.pepik-grid-col a[style*="display: inline-block"]:hover,
.pepik-grid-col a.btn:hover,
.pepik-grid-wrapper a[style*="display:inline-block"]:hover,
.pepik-grid-wrapper a[style*="display: inline-block"]:hover,
.pepik-grid-wrapper a.btn:hover {
    background-color: var(--bento-btn-hover-bg) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 21, 8, 0.35);
}

/* Kliknutí na tlačítko */
.pepik-grid-col a[style*="display:inline-block"]:active,
.pepik-grid-wrapper a[style*="display:inline-block"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Tlačítka v produktových blocích */
.pepik-product-block [style*="background"],
.pepik-product-block div[style*="background"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pepik-product-block [style*="background"]:hover,
.pepik-product-block div[style*="background"]:hover {
    background-color: var(--bento-btn-hover-bg) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Témata a Responzivita
   ========================================================================== */

/* Tmavý motiv karty */
.pepik-grid-col[data-theme="dark"] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
}

.pepik-grid-col[data-theme="dark"] h1,
.pepik-grid-col[data-theme="dark"] h2,
.pepik-grid-col[data-theme="dark"] h3,
.pepik-grid-col[data-theme="dark"] h4,
.pepik-grid-col[data-theme="dark"] p {
    color: #ffffff;
}

.pepik-grid-col[data-theme="dark"]:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Responzivní chování na mobilech */
@media (max-width: 768px) {
    .pepik-grid-col {
        flex: 100% !important;
        min-width: 100%;
    }
    
    .pepik-grid-col:hover {
        transform: none;
        box-shadow: var(--bento-shadow-idle);
    }
}

/* ==========================================================================
   Bento Grid - Pokročilé a rovnoměrné zarovnání (Equal Heights)
   ========================================================================== */
/* 1. Nastavení výšky řádku (mřížka se roztáhne na výšku nejvyšší karty) */
.pepik-grid-wrapper.pepik-grid-equal-heights {
    align-items: stretch !important;
}
/* 2. Nastavení sloupců jako flexbox kontejnerů běžících shora dolů */
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
/* 3. Normalizace svislých okrajů nadpisů a odstavců (prevence posunu textu) */
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h1,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h2,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h3,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h4,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h5,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col h6,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col p {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}
/* 4. Sjednocení výšky nahraných obrázků (vyplní šířku, oříznou se poměrově) */
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col img {
    height: 160px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 16px !important;
}
/* 5. Tlačení tlačítek (obalených i přímých), ceníků a produktů na úplné dno karet */
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > div[style*="text-align"]:has(a),
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > div[style*="text-align"]:has(span),
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > a[style*="border-radius"],
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > span[style*="border-radius"],
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > .pepik-product-block,
.pepik-grid-wrapper.pepik-grid-equal-heights .pepik-grid-col > .pepik-align-bottom {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}