/* ==========================================
   WEDDING PHOTOGRAPHY - WORDPRESS CSS
   Černá & zlatá - BEZ BOX-SHADOW
   ========================================== */

:root {
    /* ===== BARVY ===== */
    --black: #000000;
    --black-soft: #0d0d0d;       /* původní dark */
    --black-light: #1a1a1a;      /* původní charcoal */
    
    /* HNĚDÁ AKCENTOVÁ PALETA */
    --accent: #8b5a3c;           /* Základní hnědá */
    --accent-light: #b8856a;     /* Světlejší hnědá */
    
    /* BÍLÁ A ŠEDÁ */
    --white: #ffffff;
    --white-off: #cccccc;         /* původní text-light */
    --text-light: #cccccc;        /* Světle šedá pro text */
    --text-soft: #666666;         /* původní light-gray */
    --text-gray: #999999;         /* původní text-gray */
    
    /* Další šedé odstíny */
    --gray: #2a2a2a;              /* původní gray */
    --medium-gray: #404040;       /* původní medium-gray */
    
    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Times New Roman', Times, serif;
    --font-size-base: 1.0625rem;
    --font-size-small: 0.875rem;
    --font-size-large: 1.25rem;
    --font-size-h1: clamp(3rem, 8vw, 5.5rem);
    --font-size-h2: clamp(2rem, 5vw, 3.5rem);
    --font-size-h3: clamp(1.5rem, 3vw, 2rem);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-base: 1.6;
    --line-height-tight: 1.1;
    --letter-spacing-wide: 0.3em;
    --letter-spacing-medium: 0.2em;
    --letter-spacing-small: 0.05em;
    
    /* ===== SPACING ===== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 5rem;
    --spacing-xxxl: 8rem;
    
    --section-padding: 8rem 0;
    --section-padding-mobile: 5rem 1rem;
    --section-padding-small: 4rem 0.75rem;
    
    /* ===== BORDERS & RADIUS ===== */
    --border-radius-sm: 12px;
    --border-radius-md: 16px;
    --border-radius-lg: 20px;
    --border-radius-xl: 24px;
    --border-radius-circle: 50%;
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.6s ease;
    
    /* ===== CONTAINER WIDTHS ===== */
    --container-sm: 700px;
    --container-md: 800px;
    --container-lg: 900px;
    --container-xl: 1200px;
    --container-max-width: 1200px;
    
    /* ===== Z-INDEX ===== */
    --z-index-base: 1;
    --z-index-above: 2;
    --z-index-high: 10;
}

h1, h2, h3, h4 {
  font-family: 'Times New Roman', Times, serif;
}

body, p, a, button, input, textarea {
  font-family: 'Calibri', 'Trebuchet MS', sans-serif;
}

/* RESET & BASE */
body {
    background: var(--black) !important;
    color: var(--text-light) !important;
    font-family: var(--font-primary) !important;
    line-height: var(--line-height-base);
}

.entry-content {
    padding: 0 !important;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    color: var(--white) !important;
    font-weight: var(--font-weight-light) !important;
}

h1 {
    font-size: var(--font-size-h1) !important;
    line-height: var(--line-height-tight) !important;
    letter-spacing: -0.02em !important;
}

h2 {
    font-size: var(--font-size-h2) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: var(--spacing-sm) !important;
}

h3 {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-regular) !important;
    margin-bottom: calc(var(--spacing-sm) * 0.75) !important;
}

/* TIMELINE HEADERS - zlatou barvou #d4af37 a centrováno */
.timeline-content h3 {
    color: var(--accent) !important;
    margin-bottom: var(--spacing-sm) !important;
    font-size: 1.8rem !important;
    text-align: center !important;
}

.timeline-content p {
    text-align: center !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* HERO SECTION */
.hero-section {
    margin: 0 !important;
    padding: 0 !important;
}

.hero-cover {
    position: relative !important;
    overflow: hidden !important;
}

.hero-cover .wp-block-cover__inner-container {
    max-width: var(--container-lg) !important;
    margin: 0 auto !important;
    padding: var(--spacing-lg) !important;
    animation: fadeInUp 1s ease-out;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: var(--border-radius-lg) !important;
}

.hero-subtitle {
    font-size: var(--font-size-large) !important;
    color: var(--accent-light) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    margin-bottom: var(--spacing-md) !important;
    font-weight: var(--font-weight-medium) !important;
}

.hero-title {
    font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
}

.hero-text {
    font-size: 1.375rem !important;
    color: var(--text-light) !important;
    max-width: 600px !important;
    margin: 0 auto var(--spacing-xl) !important;
    line-height: 1.7 !important;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* SECTIONS - s BÍLÝMI ČARAMI mezi sekcemi */
.section-intro,
.section-timeline,
.section-outputs,
.section-gallery,
.section-cta {
    padding: var(--section-padding) !important;
    position: relative !important;
}

/* Bílá čára NAD každou sekcí (kromě první) */
.section-intro,
.section-timeline,
.section-outputs,
.section-gallery,
.section-cta {
    border-top: var(--border-width-thin) solid rgba(255, 255, 255, 0.15) !important;
}

/* První sekce (hero) nemá čáru nad sebou */
.hero-section + .section-intro {
    border-top: none !important;
}

/* Čára i pod poslední sekcí */
.section-cta {
    border-bottom: var(--border-width-thin) solid rgba(255, 255, 255, 0.15) !important;
}

/* Pozadí sekcí - černé s jemnými zlatými tóny */
.section-intro {
    background: linear-gradient(160deg, var(--black) 0%, #0a0800 50%, var(--black) 100%) !important;
}

.section-timeline.section-dark {
    background: linear-gradient(180deg, var(--black) 0%, #0a0500 50%, var(--black) 100%) !important;
}

.section-outputs {
    background: linear-gradient(160deg, var(--black) 0%, #050300 60%, var(--black) 100%) !important;
}

.section-gallery.section-dark {
    background: linear-gradient(180deg, var(--black) 0%, #0a0300 50%, var(--black) 100%) !important;
}

.section-cta {
    background: linear-gradient(160deg, var(--black) 0%, #080500 60%, var(--black) 100%) !important;
}

.section-header {
    text-align: center !important;
    max-width: var(--container-sm) !important;
    margin: 0 auto var(--spacing-xxl) !important;
}

.section-tag {
    font-size: var(--font-size-small) !important;
    color: var(--accent-light) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-medium) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: var(--spacing-sm) !important;
    display: block !important;
}

/* INTRO SECTION */
.intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--spacing-xxl) !important;
    align-items: center !important;
    max-width: var(--container-xl) !important;
    margin: 0 auto !important;
    padding: 0 var(--spacing-lg) !important;
}

/* FOTKY BEZ OHRANIČENÍ A BEZ SHADOW */
.intro-image img {
    border-radius: var(--border-radius-xl) !important;
    width: 100% !important;
    transition: transform var(--transition-slow) !important;
    object-position: center 30% !important;
    display: block !important;
    /* box-shadow: odstraněno */
}

.intro-image:hover img {
    transform: scale(1.05) !important;
}

.intro-content {
    text-align: left !important;
}

.intro-content h2 {
    margin-bottom: var(--spacing-md) !important;
}

.intro-content p {
    margin-bottom: var(--spacing-md) !important;
    font-size: 1.125rem !important;
}

/* TIMELINE - s #d4af37 na kruhy a čáru */
.timeline {
    max-width: var(--container-lg) !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 0 var(--spacing-lg) !important;
}

.timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--border-width-medium) !important;
    background: linear-gradient(to bottom, var(--accent), var(--accent-light), var(--accent)) !important;
    transform: translateX(-50%) !important;
}

.timeline-item {
    display: flex !important;
    gap: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xxl) !important;
    position: relative !important;
    align-items: center !important;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse !important;
}

/* KRUHY - #d4af37 - BEZ SHADOW */
.timeline-number {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    background: var(--accent) !important;
    border-radius: var(--border-radius-circle) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--black) !important;
    z-index: var(--z-index-above) !important;
    margin: 0 !important;
    top: 0 !important;
    margin-top: -30px !important;
    /* box-shadow: odstraněno */
}

.timeline-content {
    flex: 1 !important;
    padding: var(--spacing-xl) !important;
    border-radius: var(--border-radius-lg) !important;
    position: relative !important;
    background: var(--black-soft) !important;
    border: var(--border-width-thin) solid rgba(169, 178, 218, 0.2) !important;
    transition: border-color var(--transition-fast) !important;
    text-align: center !important;
}

.timeline-content:hover {
    border-color: var(--accent) !important;
    /* box-shadow: odstraněno */
}

/* OUTPUTS - karty - ROZTAŽENÉ DO ŠÍŘKY */
.outputs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-lg) !important;
    max-width: var(--container-xl) !important;
    margin: 0 auto !important;
    padding: 0 var(--spacing-lg) !important;
}

.output-card {
    padding: var(--spacing-xl) !important;
    border-radius: var(--border-radius-xl) !important;
    text-align: center !important;
    transition: transform var(--transition-medium), border-color var(--transition-fast) !important;
    background: var(--black-soft) !important;
    border: var(--border-width-thin) solid rgba(169, 178, 218, 0.2) !important;
}

.output-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--accent) !important;
    /* box-shadow: odstraněno */
}

.output-icon {
    font-size: 3.5rem !important;
    margin-bottom: var(--spacing-md) !important;
    display: block !important;
    color: var(--accent) !important;
}

.output-highlight {
    font-size: 2.5rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--accent-light) !important;
    margin: var(--spacing-md) 0 !important;
    display: block !important;
}

/* GALLERY - FOTKY BEZ OHRANIČENÍ */
.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--spacing-md) !important;
    list-style: none !important;
    max-width: var(--container-xl) !important;
    margin: 0 auto !important;
    padding: 0 var(--spacing-lg) !important;
}

.gallery-grid .gallery-item {
    position: relative !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
}

.gallery-grid .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-slow) !important;
}

.gallery-grid .gallery-item:hover img {
    transform: scale(1.1) !important;
}

.gallery-grid .gallery-item figcaption {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent) !important;
    opacity: 0 !important;
    transition: opacity var(--transition-medium) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: var(--spacing-md) !important;
    color: var(--accent-light) !important;
    font-size: 0.9rem !important;
    font-weight: var(--font-weight-medium) !important;
}

.gallery-grid .gallery-item:hover figcaption {
    opacity: 1 !important;
}

/* GALLERY BUTTON - UPRAVENÝ HOVER (vybarví se zlatou) */
.gallery-button-container {
    margin-top: var(--spacing-xl) !important;
    text-align: center !important;
}

.gallery-button-container .wp-block-button__link {
    background: var(--black) !important;
    color: var(--accent) !important;
    border: var(--border-width-thin) solid var(--accent) !important;
    padding: 0.8rem 2.5rem !important;
    border-radius: var(--border-radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-medium) !important;
    font-size: 0.9rem !important;
    transition: all var(--transition-fast) !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.gallery-button-container .wp-block-button__link:hover {
    background: var(--accent) !important;
    color: var(--black) !important;
    border-color: var(--accent) !important;
}

/* CTA SECTION */
.cta {
    background: var(--black-light) !important;
    border-radius: 32px !important;
    padding: 6rem 4rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-light)) !important;
}

.cta h2 {
    margin-bottom: 1.5rem !important;
}

.cta-text {
    font-size: 1.25rem !important;
    color: var(--text-light) !important;
    max-width: 600px !important;
    margin: 0 auto 3rem !important;
}

.cta-buttons {
    gap: 1.5rem !important;
}

.cta-buttons .wp-block-button {
    margin: 0 !important;
}

.cta-buttons .wp-block-button__link {
    padding: 1.125rem 2.5rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
}

.btn-primary .wp-block-button__link {
    background: var(--accent) !important;
    color: var(--black) !important;
    border: none !important;
}

.btn-secondary .wp-block-button__link {
    background: transparent !important;
    color: var(--white) !important;
    border: 2px solid var(--white) !important;
}

.btn-secondary .wp-block-button__link:hover {
    background: var(--white) !important;
    color: var(--black) !important;
}

/* RESPONSIVE - KARTY ROZTAŽENÉ DO ŠÍŘKY */
@media (max-width: 1024px) {
    .intro-grid {
        gap: var(--spacing-xl) !important;
    }

    .outputs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .section-intro,
    .section-timeline,
    .section-outputs,
    .section-gallery,
    .section-cta {
        padding: var(--section-padding-mobile) !important;
    }

    /* INTRO - FOTKA NAHOŘE, TEXT POD NÍ, VŠE CENTROVANÉ */
    .intro-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
        text-align: center !important;
    }
    
    .intro-content {
        text-align: center !important;
    }
    
    .intro-content h2,
    .intro-content p {
        text-align: center !important;
    }
    
    .intro-image {
        order: 1 !important;
    }
    
    .intro-content {
        order: 2 !important;
    }
    
    .intro-image img {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .hero-subtitle {
        font-size: var(--font-size-base) !important;
        letter-spacing: var(--letter-spacing-medium) !important;
    }

    .hero-text {
        font-size: 1.125rem !important;
    }

    .cta {
        padding: 4rem 2rem !important;
    }

    .cta-buttons {
        flex-direction: column !important;
    }

    .cta-buttons .wp-block-button {
        width: 100% !important;
    }

    .outputs-grid {
        grid-template-columns: 1fr !important;          /* jen jeden sloupec */
        gap: var(--spacing-md) !important;
        max-width: 100% !important;                      /* plná šířka */
        width: 100% !important;
        padding: 0 var(--spacing-sm) !important;         /* jen malý odstup od krajů */
    }

    .outputs-grid .output-card {
        padding: var(--spacing-lg) var(--spacing-md) !important;  /* zmenšení svislého paddingu */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .output-icon {
        font-size: 2.8rem !important;                    /* o něco menší ikona */
        margin-bottom: var(--spacing-sm) !important;
    }


    .output-highlight {
        font-size: 2rem !important;                       /* menší zvýrazněné číslo */
        margin: var(--spacing-sm) 0 !important;
    }

        /* Text v kartách může být o fous menší, aby se vešel */
    .output-card p {
        font-size: 1rem !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }
    
    .section-header {
        text-align: center !important;
    }
    
    .section-tag {
        text-align: center !important;
    }
}

/* TIMELINE CENTROVANÁ NA MOBILU */
@media (max-width: 640px) {
    .timeline {
        padding: 0 var(--spacing-md) !important;
    }
    
    .timeline::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .timeline-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 4rem !important;  /* Mezera mezi kartami */
        width: 100% !important;
        position: relative !important;
        /* Žádný margin-top */
    }
    
    .timeline-item:last-child {
        margin-bottom: 0 !important;
    }
    
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }
    
    .timeline-number {
        position: absolute !important;  /* ABSOLUTNĚ */
        left: 50% !important;
        top: 0 !important;
        transform: translate(-50%, -50%) !important;  /* Posun o polovinu nahoru */
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .timeline-content {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;  /* Žádný záporný margin */
        padding: 35px var(--spacing-lg) var(--spacing-lg) !important;  /* 35px = místo pro kruh */
        text-align: center !important;
        background: var(--black-soft) !important;
        border: var(--border-width-thin) solid rgba(212, 175, 55, 0.2) !important;
        border-radius: var(--border-radius-lg) !important;
    }
    
    .timeline-content h3,
    .timeline-content p {
        text-align: center !important;
    }
}

/* Extra malé telefony */
@media (max-width: 480px) {
    .section-intro,
    .section-timeline,
    .section-outputs,
    .section-gallery,
    .section-cta {
        padding: var(--section-padding-small) !important;
    }
    
    .timeline {
        padding: 0 var(--spacing-sm) !important;
    }
    
    .timeline-content {
        padding: var(--spacing-md) !important;
        max-width: 100% !important;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm) !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    .gallery-button-container .wp-block-button__link {
        width: 100% !important;
        max-width: 280px !important;
    }
    
    .cta {
        padding: var(--spacing-lg) !important;
    }
    
    .cta h2 {
        font-size: 1.8rem !important;
    }
    
    .outputs-grid {
        max-width: 100% !important;
        padding: 0 var(--spacing-xs) !important; 
    }
    
    .outputs-grid .output-card {
        padding: var(--spacing-md) var(--spacing-sm) !important;  /* ještě nižší karty */
    }
    
    .output-icon {
        font-size: 2.5rem !important;
    }
    
    .output-highlight {
         font-size: 1.8rem !important;
    }
}

/* OPRAVA ČÁRY A ODSTUPŮ - PŘIDEJ NA KONEC SOUBORU */

/* Zajistí, že CTA sekce je opravdu full-width */
.section-cta {
    width: 100vw !important;
    max-width: 100% !important;
    margin-left: calc(-50vw + 50%) !important;  /* vytáhne to do celé šířky */
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
    border-bottom: var(--border-width-thin) solid rgba(255, 255, 255, 0.15) !important;
}

/* Oprava odsazení pod gallery buttonem */
.gallery-button-container {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;  /* přidá odsazení DOLE */
}

/* Pokud je CTA hned pod tím, přidáme větší rozestup */
.section-gallery {
    padding-bottom: var(--spacing-xxl) !important;  /* zvýší paddingu dole */
}

/* Nebo můžeš přidat margin před CTA */
.section-cta {
    margin-top: var(--spacing-lg) !important;
}

/* ===== OPRAVA GALERIE - JEDNA FOTKA POD SEBOU ===== */
@media (max-width: 768px) {
    .wp-block-gallery.has-nested-images.gallery-grid-custom {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }
    
    .wp-block-gallery.has-nested-images.gallery-grid-custom .wp-block-image {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .wp-block-gallery.has-nested-images.gallery-grid-custom {
        gap: var(--spacing-sm) !important;
    }
}