/* ============================================================
   Cena Jiřího Lišky – Public Web
   Palette: #3d5fda (accent) · #6d7CFF (bg) · #FFFFFF
   Font: Elza
   ============================================================ */

/* Elza font – local OTF hosting */
@font-face { font-family: 'Elza'; src: url('../fonts/elza-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elza'; src: url('../fonts/elza-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elza'; src: url('../fonts/elza-semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elza'; src: url('../fonts/elza-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elza'; src: url('../fonts/elza-black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elza'; src: url('../fonts/elza-bold-italic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
    --bg: #6d7cff;
    --bg-light: #7d8bff;
    --accent: #3d5fda;
    --white: #ffffff;
    --text: rgba(255,255,255,0.92);
    --text-muted: rgba(255,255,255,0.60);
    --content-width: 1200px;
}

/* Reusable centered container */
.site-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Elza', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ============================================================
   WAVY BACKGROUND – infinite-tiling SVG sine curves
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900'%3E%3Cpath d='M0,90 C60,45 120,45 180,90 C240,135 300,135 360,90 C420,45 480,45 540,90 C600,135 660,135 720,90 C780,45 840,45 900,90 C960,135 1020,135 1080,90 C1140,45 1200,45 1260,90 C1320,135 1380,135 1440,90' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Cpath d='M0,270 C80,215 160,215 240,270 C320,325 400,325 480,270 C560,215 640,215 720,270 C800,325 880,325 960,270 C1040,215 1120,215 1200,270 C1280,325 1360,325 1440,270' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.8'/%3E%3Cpath d='M0,450 C48,400 96,400 144,450 C192,500 240,500 288,450 C336,400 384,400 432,450 C480,500 528,500 576,450 C624,400 672,400 720,450 C768,500 816,500 864,450 C912,400 960,400 1008,450 C1056,500 1104,500 1152,450 C1200,400 1248,400 1296,450 C1344,500 1392,500 1440,450' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.5'/%3E%3Cpath d='M0,630 C120,580 240,580 360,630 C480,680 600,680 720,630 C840,580 960,580 1080,630 C1200,680 1320,680 1440,630' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.8'/%3E%3Cpath d='M0,810 C60,755 120,755 180,810 C240,865 300,865 360,810 C420,755 480,755 540,810 C600,865 660,865 720,810 C780,755 840,755 900,810 C960,865 1020,865 1080,810 C1140,755 1200,755 1260,810 C1320,865 1380,865 1440,810' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 1440px 900px;
    background-repeat: repeat;
}

body > * { position: relative; z-index: 1; }

/* ============================================================
   NAVBAR – full width, pill links left, logo right
   ============================================================ */
.navbar {
    background: transparent;
    z-index: 1000;
    padding: 9px 0;
}

.navbar > .site-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.navbar-nav { gap: 14px; flex-wrap: wrap; }

.nav-pill {
    color: var(--white) !important;
    background: #3d5fda;
    border: none;
    border-radius: 24px;
    padding: 6px 18px !important;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    text-decoration: none;
}

.nav-pill:hover,
.nav-pill.active {
    color: var(--white) !important;
    background: #2d4fc8;
}

.navbar-logo { flex-shrink: 0; margin-left: auto; }
.navbar-logo img { height: 72px; width: auto; }

/* ============================================================
   HERO – Homepage (Desktop-101)
   Pen bottom-left, title right of pen, description far right
   Logos bottom-left below pen
   ============================================================ */
.hero {
    position: relative;
    overflow: visible;
    padding-bottom: 0;
}

.hero-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: 520px;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px 0 calc(500px + 5%);
    overflow: visible;
}

/* Dark blue triangle – extends full viewport width
   Apex at pen tip, 65° left, 45° right
   tan(65°)=2.145, tan(45°)=1
   Pen tip ≈ 300px from content-box left, 26% from top */
.hero-inner::before {
    content: '';
    position: absolute;
    top: 10px;
    left: calc(-54.4vw + 50%);
    width: 105.6vw;
    height: 100%;
    background: #3d5fda;
    z-index: 0;
    clip-path: polygon(
        calc(50% - 340px) 26%,
        calc(50% - 1102px) 100%,
        calc(50% + 15px) 100%
    );
}

/* Hero logo – shifted 15% right */
.hero-logo-area {
    position: absolute;
    left: 15%;
    top: 0;
    bottom: 0;
    width: 300px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-img {
    max-width: 100%;
    max-height: 85%;
    width: auto;
    height: auto;
    display: block;
}


/* Description text – right of logo, aligned with logo top */
.hero-right {
    flex: 1;
    padding-top: 151px;
    z-index: 2;
    max-width: 520px;
}

.hero-desc {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

/* Logos – bottom-left within the pen shadow area */
.hero-logos {
    position: absolute;
    bottom: 9px;
    left: 100px;
    display: flex;
    align-items: center;
    gap: 22px;
    z-index: 3;
    flex-wrap: wrap;
}

.hero-logos > img {
    width: auto;
    height: auto;
    opacity: 0.92;
}

.hero-logos .logo-jicin {
    position: relative;
    top: -16px;
}

.hero-logos .logo-ustr {
    position: relative;
    top: 4px;
}

.partner-ct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    top: -5px;
}

.partner-ct-label {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1;
    margin-bottom: 3px;
}

.hero-logos .logo-ct {
    height: 30px;
    width: 198px;
    object-fit: cover;
    object-position: bottom;
}

/* ============================================================
   HOME CONTENT – white section, centered text
   ============================================================ */
.home-content {
    background: #ffffff;
    color: #8098ff;
    padding: 50px 0;
    position: relative;
    z-index: 2;
}

.home-content-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.home-content p {
    font-size: 22px;
    line-height: 1.75;
    color: #8098ff;
    margin-bottom: 6px;
}

.home-content a {
    color: #8098ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   SHARED CONTENT COMPONENTS
   ============================================================ */
.section-heading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #8098ff;
}

.home-content .section-heading.smaller {
    font-size: 20px;
}

.content-block { margin-bottom: 28px; }

/* Category capsule */
.categories-capsule {
    margin: 18px auto 28px;
    background: #8098ff;
    border-radius: 999px;
    padding: 28px 40px;
    width: 70%;
    text-align: center;
}

.categories-capsule p {
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 4px;
}

.categories-capsule p:last-child {
    margin-bottom: 0;
}

.dash-list p {
    font-size: 20px;
    line-height: 1.7;
    color: #8098ff;
    margin-bottom: 2px;
    padding-left: 4px;
    text-align: center;
}

/* ============================================================
   QUOTES SECTION – chat-style bubbles
   ============================================================ */
.quotes-section {
    padding: 50px 0;
    position: relative;
    z-index: 1;
}

.quotes-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.quote-bubble {
    width: 70%;
}

.quote-bubble.quote-left {
    align-self: flex-start;
}

.quote-bubble.quote-right {
    align-self: flex-end;
}

.quote-name {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 8px;
    color: var(--white);
}

.quote-right .quote-name {
    text-align: left;
}

.quote-box {
    background: rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 24px 30px;
}

.quote-box p {
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 8px;
}

.quote-box p:last-child {
    margin-bottom: 0;
}

.quote-card p {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text);
}

/* ============================================================
   SECTION CONTENT – subpages (Jiří Liška, Pravidla, etc.)
   ============================================================ */
.section-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.section-content h1 {
    font-size: 2.32rem;
    font-weight: 900;
    margin-bottom: 5px;
    text-align: center;
}

.section-content .subtitle {
    font-size: 1.22rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    color: var(--text);
}

.section-content h2 {
    font-size: 1.28rem;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 12px;
}

.section-content p {
    font-size: 1.0rem;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 6px;
}

.section-content a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.section-content ul { padding-left: 22px; margin-bottom: 14px; }

.section-content li {
    margin-bottom: 6px;
    color: var(--text);
    font-size: 1.0rem;
    line-height: 1.7;
}

/* ============================================================
   PHOTO GRID – Jiří Liška page (Desktop-102)
   ============================================================ */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.photo-item { display: flex; flex-direction: column; }

.photo-placeholder {
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    min-height: 260px;
    max-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-placeholder.photo-large { min-height: 360px; max-height: 420px; }
.photo-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.photo-caption {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* ============================================================
   FORMS – Přihláška
   ============================================================ */
.form-section {
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 35px;
}

.form-section .form-label {
    color: var(--text);
    font-weight: 600;
    font-size: 0.86rem;
    margin-bottom: 4px;
}

.form-section .form-control,
.form-section .form-select {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--white);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.88rem;
}

.form-section .form-control:focus,
.form-section .form-select:focus {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.45);
    color: var(--white);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.form-section .form-control::placeholder { color: rgba(255,255,255,0.32); }

.form-section .form-select option { background: #fff; color: #222; }

.form-section input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

.form-section input[type="file"]::file-selector-button {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    border-radius: 4px;
    padding: 6px 16px;
    margin-right: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.form-section input[type="file"]::file-selector-button:hover {
    background: rgba(255,255,255,0.20);
}

.form-check-input {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
}

.form-check-input:checked { background-color: var(--white); border-color: var(--white); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
.form-check-label { color: var(--text); font-size: 0.88rem; }

.btn-submit {
    background: var(--white);
    color: var(--accent) !important;
    font-weight: 700;
    padding: 13px 44px;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.03em;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-submit:hover {
    background: rgba(255,255,255,0.92);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

/* ============================================================
   VALIDATION
   ============================================================ */
.field-validation-error { color: #ff6b6b; font-size: 0.8rem; display: block; margin-top: 3px; }
.input-validation-error { border-color: #ff6b6b !important; }

.validation-summary-errors {
    background: rgba(255,80,80,0.12);
    border: 1px solid rgba(255,80,80,0.3);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }
.validation-summary-errors li { color: #ff6b6b; font-size: 0.88rem; }

/* ============================================================
   FILE UPLOAD – progress bar & result
   ============================================================ */
.upload-progress {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.upload-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: var(--white);
    border-radius: 4px;
    width: 0%;
    transition: width 0.2s ease;
}

.upload-progress-text {
    font-size: 0.82rem;
    color: var(--text);
    min-width: 40px;
    text-align: right;
}

.upload-result {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 10px 16px;
    gap: 12px;
}

.upload-result-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.upload-result-icon {
    color: #6dff6d;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.upload-result-info > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 0.88rem;
}

.upload-result-size {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.btn-change-file {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    border-radius: 4px;
    padding: 4px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-change-file:hover {
    background: rgba(255,255,255,0.20);
}

.upload-error {
    margin-top: 8px;
    color: #ff6b6b;
    font-size: 0.8rem;
}

/* ============================================================
   CONFIRMATION
   ============================================================ */
.confirmation-card {
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 50px 40px;
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
}

.confirmation-card .check-icon { font-size: 3.5rem; margin-bottom: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    border-top: 1px solid #e0e0e0;
    padding: 22px 0;
    background: #ffffff;
}

footer p { font-size: 0.78rem; color: #888; margin-bottom: 2px; }
footer a { color: #888; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
footer a:hover { color: var(--accent); }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-consent {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(10,10,30,0.88);
    color: var(--white);
    padding: 14px 0;
    z-index: 9999;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cookie-consent p { color: rgba(255,255,255,0.85); font-size: 0.82rem; margin: 0; }
.cookie-consent a { color: var(--white); text-decoration: underline; }
.cookie-consent .btn-light { color: #212529 !important; }
.cookie-consent .btn-outline-light { color: var(--white) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px) {
    .hero-inner { padding-left: 300px; }
    .hero-logo-area { width: 300px; }
    .hero-right { padding-top: 10px; max-width: 250px; margin-left: auto; }
    .hero-desc { font-size: 18px; }
    .quotes-inner { gap: 20px; }
}

@media (max-width: 1024px) {
    .hero-inner { min-height: 360px; padding-left: 220px; }
    .hero-logo-area { width: 220px; }
    .hero-logos { left: 30px; bottom: 20px; gap: 14px; }
    .quotes-inner { flex-direction: column; }
}

@media (max-width: 768px) {
    .navbar { padding: 14px 0; }

    .nav-pill { display: block; text-align: center; margin: 2px 0; }
    .navbar-logo { margin: 10px auto 0; }

    .hero-inner { flex-direction: column; min-height: auto; gap: 20px; padding-left: 0; }

    .hero-right { flex: auto; max-width: 100%; padding-top: 20px; padding-left: 16px; padding-right: 16px; }
    .hero-desc { font-size: 0.84rem; }

    .quote-bubble { width: 100%; }

    .categories-capsule { width: 95%; padding: 22px 24px; }

    .hero-logo-area {
        position: relative;
        left: auto; top: auto; bottom: auto;
        width: 220px;
        height: 260px;
        align-self: center;
    }
    .hero-logo-img {
        position: relative;
        left: auto; bottom: auto;
    }

    .hero-logos {
        position: relative;
        left: auto; bottom: auto;
        justify-content: center;
        margin-top: 20px;
    }

    .quotes-inner { flex-direction: column; gap: 16px; }

    .photo-grid { grid-template-columns: 1fr; }
    .photo-placeholder.photo-large { min-height: 220px; }

    .form-section { padding: 20px 16px; }
    .quote-card { padding: 20px; }
    .section-content h1 { font-size: 1.7rem; }
}

@media (max-width: 480px) {
    .hero-logo-area { width: 160px; height: 200px; }
    .cat-box { padding: 10px 16px; font-size: 0.82rem; }

    .section-content h1 { font-size: 1.4rem; }
    .section-content .subtitle { font-size: 1.05rem; }

    .categories-capsule { width: 100%; padding: 18px 16px; border-radius: 20px; }
    .categories-capsule p { font-size: 18px; }

    .home-content p { font-size: 18px; }
    .dash-list p { font-size: 17px; }

    .form-section { padding: 16px 12px; }
}