/*============================================================================
   17-seasonal.css — sezónní banner podle sezóny

   Základ .seasonal (grid, razítko, nadpis) je v 09-sections.css, tady je
   vzhled, který vykresluje [ok_seasonal] (includes/seasons-design.php):

     .seasonal--{vzhled}   paleta (podzim, vanoce, velikonoce, …)
     .seasonal-motivy      motivy na pozadí (inline SVG, lehká animace)
     .seasonal-karty       vějíř až 6 omalovánek sezóny, hover vytáhne kartu
     .seasonal-stitek      štítek „+N nových" / odpočet

   Kontrola napříč sezónami: page-sezona-nahled.php
============================================================================*/

/* --- Proměnné vzhledu (výchozí = berry, stejné jako 09-sections) --- */
.seasonal {
    --sz-bg:        var(--berry);
    --sz-ink:       #fff;              /* text v banneru */
    --sz-ink-soft:  rgba(255,255,255,.9);
    --sz-em:        var(--yellow);     /* zvýrazněné slovo v nadpisu */
    --sz-blob:      var(--yellow);     /* kulatý flek v rohu */
    --sz-stamp:     var(--yellow);
    --sz-stamp-ink: var(--ink);
    --sz-btn:       var(--yellow);
    --sz-btn-ink:   var(--ink);
    --sz-btn-hover: #F5C020;
    --sz-motiv:     #fff;
    --sz-motiv-op:  .28;
    --sz-c1:        var(--yellow);     /* rámečky karet */
    --sz-c2:        var(--teal);
    --sz-c3:        var(--lilac);
}

/* --- Palety --- */
.seasonal--zima        { --sz-bg: var(--sky);  --sz-blob: #fff; --sz-stamp: #fff; --sz-btn: var(--ink); --sz-btn-ink: #fff; --sz-btn-hover: #2c3157; --sz-c1: #fff; --sz-c2: var(--yellow); --sz-c3: var(--lilac); }
.seasonal--masopust    { --sz-bg: var(--lilac); --sz-blob: var(--yellow); --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv-op: .4; --sz-c1: var(--yellow); --sz-c2: var(--berry); --sz-c3: var(--teal); }
.seasonal--jaro        { --sz-bg: #A8E6D6; --sz-ink: var(--ink); --sz-ink-soft: var(--ink-soft); --sz-em: var(--berry-deep); --sz-blob: #fff; --sz-stamp: var(--yellow); --sz-btn: var(--teal-deep); --sz-btn-ink: #fff; --sz-btn-hover: #0c7a6d; --sz-motiv: var(--berry); --sz-motiv-op: .35; --sz-c1: var(--berry); --sz-c2: var(--yellow); --sz-c3: var(--lilac); }
.seasonal--velikonoce  { --sz-bg: #CDEBB4; --sz-ink: var(--ink); --sz-ink-soft: var(--ink-soft); --sz-em: var(--berry-deep); --sz-blob: #fff; --sz-stamp: #F9A8D4; --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv: var(--lilac); --sz-motiv-op: .5; --sz-c1: #F9A8D4; --sz-c2: var(--lilac); --sz-c3: var(--yellow); }
.seasonal--carodejnice { --sz-bg: #4C1D95; --sz-blob: #F59E0B; --sz-stamp: #F59E0B; --sz-btn: #F59E0B; --sz-btn-hover: #d98b06; --sz-em: #FBBF24; --sz-motiv: #FBBF24; --sz-motiv-op: .35; --sz-c1: #F59E0B; --sz-c2: var(--lilac); --sz-c3: var(--teal); }
.seasonal--den-matek   { --sz-bg: var(--blush); --sz-ink: var(--ink); --sz-ink-soft: var(--ink-soft); --sz-em: var(--berry-deep); --sz-blob: #fff; --sz-stamp: #fff; --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv: var(--berry); --sz-motiv-op: .3; --sz-c1: var(--berry); --sz-c2: var(--yellow); --sz-c3: var(--lilac); }
.seasonal--den-deti    { --sz-bg: var(--sky); --sz-blob: var(--yellow); --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv-op: .4; --sz-c1: var(--yellow); --sz-c2: var(--berry); --sz-c3: var(--teal); }
.seasonal--leto        { --sz-bg: var(--yellow); --sz-ink: var(--ink); --sz-ink-soft: var(--ink-soft); --sz-em: var(--berry-deep); --sz-blob: #fff; --sz-stamp: var(--sky); --sz-stamp-ink: #fff; --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv: #fff; --sz-motiv-op: .6; --sz-c1: var(--sky); --sz-c2: var(--berry); --sz-c3: var(--teal); }
.seasonal--skola       { --sz-bg: var(--teal); --sz-blob: var(--yellow); --sz-btn: var(--ink); --sz-btn-ink: #fff; --sz-btn-hover: #2c3157; --sz-motiv: var(--yellow); --sz-motiv-op: .4; --sz-c1: var(--yellow); --sz-c2: var(--berry); --sz-c3: var(--lilac); }
.seasonal--podzim      { --sz-bg: #F28C38; --sz-blob: var(--yellow); --sz-btn: var(--ink); --sz-btn-ink: #fff; --sz-btn-hover: #2c3157; --sz-motiv: #7C2D12; --sz-motiv-op: .3; --sz-c1: var(--yellow); --sz-c2: #7C2D12; --sz-c3: var(--teal); }
.seasonal--halloween   { --sz-bg: var(--ink); --sz-blob: #F97316; --sz-stamp: #F97316; --sz-btn: #F97316; --sz-btn-hover: #e2640a; --sz-em: #F97316; --sz-motiv: #F97316; --sz-motiv-op: .35; --sz-c1: #F97316; --sz-c2: var(--lilac); --sz-c3: var(--yellow); }
.seasonal--martin      { --sz-bg: #DCE7F5; --sz-ink: var(--ink); --sz-ink-soft: var(--ink-soft); --sz-em: var(--berry-deep); --sz-blob: #fff; --sz-stamp: var(--berry); --sz-stamp-ink: #fff; --sz-btn: var(--ink); --sz-btn-ink: #fff; --sz-btn-hover: #2c3157; --sz-motiv: var(--sky); --sz-motiv-op: .5; --sz-c1: var(--berry); --sz-c2: var(--sky); --sz-c3: var(--yellow); }
.seasonal--advent      { --sz-bg: #5B21B6; --sz-blob: var(--yellow); --sz-btn: var(--yellow); --sz-motiv: var(--yellow); --sz-motiv-op: .35; --sz-c1: var(--yellow); --sz-c2: var(--berry); --sz-c3: var(--teal); }
.seasonal--vanoce      { --sz-bg: #1E3A8A; --sz-blob: var(--berry); --sz-stamp: var(--yellow); --sz-btn: var(--berry); --sz-btn-ink: #fff; --sz-btn-hover: var(--berry-deep); --sz-motiv: #fff; --sz-motiv-op: .3; --sz-c1: var(--berry); --sz-c2: var(--yellow); --sz-c3: var(--teal); }

/* --- Aplikace proměnných --- */
.seasonal { background: var(--sz-bg); color: var(--sz-ink); }
.seasonal::before { background: var(--sz-blob); }
.seasonal .seasonal-stamp { background: var(--sz-stamp); color: var(--sz-stamp-ink); }
.seasonal .seasonal-stamp strong { color: var(--sz-stamp-ink); }
.seasonal-stamp--long strong { font-size: 1.05rem; letter-spacing: -.01em; }
.seasonal h3 { color: var(--sz-ink); }
.seasonal h3 em { color: var(--sz-em); }
.seasonal p { color: var(--sz-ink-soft); }

.seasonal a.pill-btn.seasonal-btn,
.seasonal .pill-btn.seasonal-btn {
    background: var(--sz-btn) !important;
    border-color: var(--sz-btn) !important;
    color: var(--sz-btn-ink) !important;
}
.seasonal a.pill-btn.seasonal-btn:hover,
.seasonal .pill-btn.seasonal-btn:hover {
    background: var(--sz-btn-hover) !important;
    border-color: var(--sz-btn-hover) !important;
    color: var(--sz-btn-ink) !important;
    transform: translateY(-1px);
}

/* --- Tělo (nadpis, text, tlačítko) --- */
.seasonal-body { position: relative; z-index: 1; min-width: 0; }
.seasonal-body .pill-btn { margin-top: 16px; }

/* --- Štítek v nadpisu --- */
.seasonal-stitek {
    display: inline-block; vertical-align: middle; margin-left: 10px;
    font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    padding: 4px 11px; border-radius: 999px; line-height: 1.2;
    background: var(--sz-btn); color: var(--sz-btn-ink);
    transform: translateY(-2px);
}

/* --- Vějíř omalovánek vpravo (pozice = .sz-slot-N, 1 vzadu vlevo, 6 vpředu vpravo) --- */
.seasonal--karty { grid-template-columns: auto 1fr auto; }
.seasonal-karty { position: relative; z-index: 1; align-self: center; width: 320px; height: 172px; flex-shrink: 0; }
.sz-card {
    position: absolute; bottom: 0; left: 50%;
    width: 92px; padding: 4px 4px 5px;
    border-radius: 16px; background: var(--sz-c1);
    box-shadow: 0 10px 26px rgba(27, 31, 58, .18);
    transform-origin: 50% 100%;
    transform: translateX(calc(-50% + var(--sz-x, 0px))) translateY(var(--sz-y, 0px)) rotate(var(--sz-rot, 0deg));
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
    text-decoration: none;
}
.sz-card .thumb { display: block; aspect-ratio: 2 / 3; background: #fff; border-radius: 12px; overflow: hidden; }
.sz-card .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.sz-card .thumb svg { width: 70%; height: 70%; margin: 15%; }
.sz-card:nth-child(3n+1) { background: var(--sz-c1); }
.sz-card:nth-child(3n+2) { background: var(--sz-c2); }
.sz-card:nth-child(3n+3) { background: var(--sz-c3); }
.sz-slot-1 { --sz-x: -80px; --sz-rot: -18deg; --sz-y: 0px;   z-index: 1; }
.sz-slot-2 { --sz-x: -48px; --sz-rot: -11deg; --sz-y: -8px;  z-index: 2; }
.sz-slot-3 { --sz-x: -16px; --sz-rot: -4deg;  --sz-y: -13px; z-index: 3; }
.sz-slot-4 { --sz-x: 16px;  --sz-rot: 3deg;   --sz-y: -13px; z-index: 4; }
.sz-slot-5 { --sz-x: 48px;  --sz-rot: 10deg;  --sz-y: -8px;  z-index: 5; }
.sz-slot-6 { --sz-x: 80px;  --sz-rot: 17deg;  --sz-y: 0px;   z-index: 6; }
.sz-card:hover,
.sz-card:focus-visible {
    transform: translateX(calc(-50% + var(--sz-x, 0px))) translateY(calc(var(--sz-y, 0px) - 16px)) rotate(var(--sz-rot, 0deg)) scale(1.05);
    z-index: 9; box-shadow: 0 18px 36px rgba(27, 31, 58, .26);
}
.sz-card:focus-visible { outline: 3px solid var(--sz-ink); outline-offset: 3px; }

/* --- Motivy na pozadí --- */
.seasonal-motivy { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sz-motiv {
    position: absolute; width: 44px; height: 44px;
    color: var(--sz-motiv); opacity: var(--sz-motiv-op);
    transform: rotate(var(--sz-r, 0deg));
}
.sz-motiv-1 { left: 17%; top: -8px;    width: 38px; height: 38px; --sz-r: -18deg; }
.sz-motiv-2 { left: 34%; bottom: -10px; width: 52px; height: 52px; --sz-r: 22deg; }
.sz-motiv-3 { left: 55%; top: 10px;    width: 30px; height: 30px; --sz-r: 8deg; }
.sz-motiv-4 { right: 38%; bottom: 6px; width: 40px; height: 40px; --sz-r: -30deg; }
.sz-motiv-5 { right: 28%; top: 14px;   width: 34px; height: 34px; --sz-r: 15deg; }

/* --- Animace motivů (jen když si to uživatel nevypnul) --- */
@media (prefers-reduced-motion: no-preference) {
    .sz-motiv { animation: sz-float 4.5s ease-in-out infinite alternate; }
    .sz-motiv-2 { animation-duration: 5.5s; animation-delay: -2s; }
    .sz-motiv-3 { animation-duration: 4s;   animation-delay: -3s; }
    .sz-motiv-4 { animation-duration: 6s;   animation-delay: -1s; }
    .sz-motiv-5 { animation-duration: 5s;   animation-delay: -4s; }

    /* padání: listí, sníh, konfety */
    .seasonal--podzim .sz-motiv,
    .seasonal--zima .sz-motiv,
    .seasonal--martin .sz-motiv,
    .seasonal--vanoce .sz-motiv,
    .seasonal--masopust .sz-motiv { animation-name: sz-fall; animation-direction: normal; animation-timing-function: linear; animation-duration: 14s; }
    .seasonal--podzim .sz-motiv-2, .seasonal--zima .sz-motiv-2, .seasonal--vanoce .sz-motiv-2, .seasonal--masopust .sz-motiv-2, .seasonal--martin .sz-motiv-2 { animation-duration: 18s; animation-delay: -6s; }
    .seasonal--podzim .sz-motiv-3, .seasonal--zima .sz-motiv-3, .seasonal--vanoce .sz-motiv-3, .seasonal--masopust .sz-motiv-3, .seasonal--martin .sz-motiv-3 { animation-duration: 12s; animation-delay: -9s; }
    .seasonal--podzim .sz-motiv-4, .seasonal--zima .sz-motiv-4, .seasonal--vanoce .sz-motiv-4, .seasonal--masopust .sz-motiv-4, .seasonal--martin .sz-motiv-4 { animation-duration: 16s; animation-delay: -3s; }
    .seasonal--podzim .sz-motiv-5, .seasonal--zima .sz-motiv-5, .seasonal--vanoce .sz-motiv-5, .seasonal--masopust .sz-motiv-5, .seasonal--martin .sz-motiv-5 { animation-duration: 20s; animation-delay: -12s; }
}
@keyframes sz-float {
    from { transform: translate(0, 0) rotate(var(--sz-r, 0deg)) scale(1); }
    to   { transform: translate(-8px, -22px) rotate(calc(var(--sz-r, 0deg) + 24deg)) scale(1.12); }
}
@keyframes sz-fall {
    0%   { transform: translateY(-70px) rotate(var(--sz-r, 0deg)); }
    100% { transform: translateY(190px) rotate(calc(var(--sz-r, 0deg) + 160deg)); }
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .seasonal-karty { width: 270px; }
    .sz-card { width: 80px; }
    .sz-slot-1 { --sz-x: -68px; }
    .sz-slot-2 { --sz-x: -41px; }
    .sz-slot-3 { --sz-x: -14px; }
    .sz-slot-4 { --sz-x: 14px; }
    .sz-slot-5 { --sz-x: 41px; }
    .sz-slot-6 { --sz-x: 68px; }
}
@media (max-width: 780px) {
    .seasonal--karty { grid-template-columns: 1fr; }
    .seasonal-karty { width: 100%; height: 150px; margin: 12px auto 0; }
    .seasonal-stitek { display: block; width: max-content; margin: 8px auto 0; transform: none; }
    .sz-motiv-1, .sz-motiv-3 { display: none; }
}