/* ==========================================================
   TYM-RECEPT GLOBAL CSS — Tymiaan Blog šablona v1.0
   Prefix: tym-recept-  (bezpečný, nekoliduje s Shoptetem)
   Barvy: var(--color-secondary)       = #6b7c45 olivová
          var(--color-secondary-hover) = #4a5730 tmavá olivová
          #3AAA47 signální zelená — jen CTA boxy a badges
   Nesahá na: body, font-family, globální typografii
   Nesahá do: style-1/2/3/4/5.css ani script-1/2.js
   ========================================================== */

/* === 1. LAYOUT — dvousloupcový wrapper === */

.tym-recept-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.tym-recept-left {
    flex: 1;
    min-width: 0;
}

.tym-recept-right {
    width: 360px;
    flex-shrink: 0;
}

/* === 2. MOBILNÍ TLAČÍTKO "SUROVINY" (skryté na desktopu) === */

.tym-recept-mobile-btn {
    display: none;
    text-align: center;
    margin-bottom: 24px;
}

.tym-recept-mobile-btn a {
    display: inline-block;
    background-color: var(--color-secondary, #6b7c45);
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.2s;
}

.tym-recept-mobile-btn a:hover {
    background-color: var(--color-secondary-hover, #4a5730);
}

/* === 3. KROKY POSTUPU === */

.tym-recept-step {
    margin-bottom: 25px;
    padding-left: 48px;
    position: relative;
}

.tym-recept-step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    background-color: var(--color-secondary, #6b7c45);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}

.tym-recept-step p {
    margin: 0;
    color: #555;
    font-size: 1.02em;
    line-height: 1.7;
}

.tym-recept-step a {
    color: var(--color-secondary, #6b7c45);
    font-weight: 600;
    text-decoration: none;
}

.tym-recept-step a:hover {
    text-decoration: underline;
}

/* === 4. SEPARÁTOR DEN 1 / DEN 2 === */

.tym-recept-h3-day {
    font-size: 1.3em;
    color: #1a1a1a;
    margin: 32px 0 16px;
    font-weight: 700;
}

/* === 5. BOXY OBSAHU === */

/* Box "5 kroků" */
.tym-recept-box-kroky {
    background: linear-gradient(135deg, #f5f2ec 0%, #e8e4d6 100%);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.tym-recept-box-kroky h3 {
    color: #1a1a1a;
    margin-top: 0;
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 16px;
}

.tym-recept-box-kroky ol {
    margin: 0;
    padding-left: 22px;
    color: #555;
    line-height: 1.8;
}

.tym-recept-box-kroky ol li {
    margin-bottom: 8px;
}

/* Box Tipy */
.tym-recept-box-tipy {
    margin: 30px 0;
    padding: 25px;
    background-color: #f5f2ec;
    border-left: 4px solid var(--color-secondary, #6b7c45);
    border-radius: 0 6px 6px 0;
}

.tym-recept-box-tipy h3 {
    margin-top: 0;
    color: #1a1a1a;
    font-size: 1.3em;
    margin-bottom: 16px;
    font-weight: 700;
}

.tym-recept-box-tipy ul {
    margin: 0;
    padding-left: 22px;
}

.tym-recept-box-tipy ul li {
    color: #555;
    margin-bottom: 8px;
    line-height: 1.6;
}

.tym-recept-box-tipy ul li strong {
    color: var(--color-secondary, #6b7c45);
}

.tym-recept-box-tipy a {
    color: var(--color-secondary, #6b7c45);
    font-weight: 600;
    text-decoration: none;
}

.tym-recept-box-tipy a:hover {
    text-decoration: underline;
}

/* Box Zajímavost */
.tym-recept-box-zajimavost {
    margin: 30px 0;
    padding: 25px;
    background: linear-gradient(135deg, #f5f2ec 0%, #ebe5d3 100%);
    border-left: 4px solid var(--color-secondary-hover, #4a5730);
    border-radius: 0 6px 6px 0;
}

.tym-recept-box-zajimavost h3 {
    margin-top: 0;
    color: #1a1a1a;
    font-size: 1.3em;
    margin-bottom: 14px;
    font-weight: 700;
}

.tym-recept-box-zajimavost p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
    font-size: 1.02em;
}

.tym-recept-box-zajimavost p:last-child {
    margin-bottom: 0;
}

.tym-recept-box-zajimavost a {
    color: var(--color-secondary, #6b7c45);
    font-weight: 600;
    text-decoration: none;
}

.tym-recept-box-zajimavost a:hover {
    text-decoration: underline;
}

/* CTA Box (Streetfood Box) — SIGNÁLNĚ ZELENÝ, jen když existuje balíček */
.tym-recept-box-cta {
    background: linear-gradient(135deg, #3AAA47 0%, #2E8A39 100%);
    padding: 25px;
    border-radius: 12px;
    margin: 30px 0;
    border: 3px solid #2E8A39;
    text-align: center;
}

.tym-recept-box-cta h3 {
    color: #fff;
    margin: 0 0 14px 0;
    font-size: 1.4em;
    font-weight: 700;
}

.tym-recept-box-cta p {
    margin: 0 0 18px 0;
    color: #fff;
    font-size: 1.05em;
    line-height: 1.6;
}

.tym-recept-box-cta a.tym-recept-cta-btn {
    display: inline-block;
    background: #fff;
    color: #2E8A39;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    transition: background-color 0.2s;
}

.tym-recept-box-cta a.tym-recept-cta-btn:hover {
    background: #f5f2ec;
}

/* Badge (NOVINKA, SEZÓNNÍ, TIP…) — signálně zelená, max 1 na recept */
.tym-recept-badge {
    display: inline-block;
    background: #3AAA47;
    color: #fff;
    font-weight: 700;
    font-size: 0.85em;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 10px;
    vertical-align: middle;
}

/* === 6. PRODUKTY SLIDER === */

.tym-recept-products {
    margin: 30px 0;
}

.tym-recept-products h3 {
    margin-bottom: 18px;
    font-size: 1.2em;
    color: #1a1a1a;
}

/* Shoptet dmproducts overrides */
.tym-recept-products .dmproducts .p-desc { display: none !important; }
.tym-recept-products .dmproducts .p-name a { font-size: 0.9em !important; }
.tym-recept-products .dmproducts .price { font-size: 0.95em !important; }
.tym-recept-products .dmproducts .p-image img { max-width: 85% !important; height: auto !important; }
.tym-recept-products .dmproducts .btn { font-size: 0.9em !important; padding: 10px 20px !important; }

/* === 7. FOTKY V ČLÁNKU === */

.tym-recept-photo {
    margin: 24px 0;
}

.tym-recept-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Foto klikatelné (lightbox) — odkaz v .tym-recept-photo */
.tym-recept-photo a {
    display: block;
    cursor: zoom-in;
}

/* === 8. STICKY SLOUPEC — SUROVINY === */

.tym-recept-ingredients-box {
    background-color: #f5f2ec;
    padding: 25px;
    border-radius: 8px;
    position: sticky;
    top: 20px;
}

/* Počítadlo porcí */
.tym-recept-portion-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-secondary, #6b7c45);
}

.tym-recept-portion-label {
    font-weight: 600;
    color: #555;
    font-size: 1em;
}

.tym-recept-portion-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tym-recept-portion-btn {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-secondary, #6b7c45);
    background-color: #fff;
    color: var(--color-secondary, #6b7c45);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tym-recept-portion-btn:hover {
    background-color: var(--color-secondary, #6b7c45);
    color: #fff;
}

.tym-recept-portion-count {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-secondary, #6b7c45);
    min-width: 22px;
    text-align: center;
}

/* Sekce ingrediencí */
.tym-recept-ing-section {
    margin-bottom: 20px;
}

.tym-recept-ing-section h3 {
    font-size: 1.05em;
    color: var(--color-secondary, #6b7c45);
    margin: 0 0 10px 0;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-secondary, #6b7c45);
}

.tym-recept-ing-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tym-recept-ing-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e0ddd6;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.tym-recept-ing-list li:last-child {
    border-bottom: none;
}

.tym-recept-ing-amount {
    font-weight: 700;
    color: #1a1a1a;
    min-width: 72px;
    flex-shrink: 0;
    font-size: 0.9em;
}

.tym-recept-ing-name {
    flex: 1;
    color: #555;
    line-height: 1.5;
    font-size: 0.95em;
}

.tym-recept-ing-name a {
    color: var(--color-secondary, #6b7c45);
    text-decoration: none;
    font-weight: 600;
}

.tym-recept-ing-name a:hover {
    text-decoration: underline;
}

.tym-recept-ing-name em {
    font-size: 0.9em;
    color: #888;
}

/* Mini CTA ve sticky sloupci */
.tym-recept-ing-cta {
    background: linear-gradient(135deg, #3AAA47 0%, #2E8A39 100%);
    padding: 18px;
    border-radius: 10px;
    margin-top: 24px;
    text-align: center;
    border: 2px solid #2E8A39;
}

.tym-recept-ing-cta p {
    margin: 0;
    color: #fff;
    font-size: 0.95em;
    line-height: 1.5;
    font-weight: 600;
}

.tym-recept-ing-cta a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* === 9. LIGHTBOX (pro klikatelné fotky v článku) === */

.tym-recept-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.tym-recept-lightbox.active {
    background-color: rgba(0, 0, 0, 0.92);
}

.tym-recept-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
}

.tym-recept-lightbox-content img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    transition: opacity 0.2s ease;
}

.tym-recept-lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    transition: color 0.2s;
}

.tym-recept-lightbox-close:hover {
    color: var(--color-secondary, #6b7c45);
}

/* === 10. RESPONZIVITA === */

@media (max-width: 968px) {
    .tym-recept-wrapper {
        flex-direction: column;
    }

    /* Na mobilu: levý sloupec nahoře, suroviny dole */
    .tym-recept-left  { order: 1; }
    .tym-recept-right { order: 2; width: 100%; }

    .tym-recept-ingredients-box {
        position: static;
    }

    .tym-recept-mobile-btn {
        display: block; /* zobraž mobilní tlačítko */
    }
}

@media (max-width: 640px) {
    .tym-recept-step {
        padding-left: 42px;
    }

    .tym-recept-step-num {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }

    .tym-recept-ingredients-box {
        padding: 18px;
    }
}