/* ============================================================
   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: 0;
    left: calc(-52.8vw + 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.1;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-placeholder.photo-large { min-height: 360px; }
.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; }

/* ============================================================
   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; }
    .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; }
    .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;
        height: 100%;
    }

    .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; }
}