/* =========================================================

   ZÁKLADNÍ NASTAVENÍ

========================================================= */



:root {

    --color-background: #080808;

    --color-background-light: #101010;

    --color-surface: #161616;

    --color-surface-light: #202020;

    --color-primary: #d4af37;

    --color-primary-light: #f0ce61;

    --color-text: #ffffff;

    --color-text-muted: #b6b6b6;

    --color-border: rgba(255, 255, 255, 0.1);

    --color-overlay: rgba(0, 0, 0, 0.64);



    --font-primary: "Montserrat", sans-serif;



    --container-width: 1200px;

    --header-height: 94px;



    --radius-small: 8px;

    --radius-medium: 16px;

    --radius-large: 26px;



    --shadow-small: 0 10px 30px rgba(0, 0, 0, 0.25);

    --shadow-large: 0 25px 70px rgba(0, 0, 0, 0.45);



    --transition-fast: 0.2s ease;

    --transition-normal: 0.35s ease;

    --transition-slow: 0.6s ease;

}





/* =========================================================

   RESET

========================================================= */



*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    scroll-padding-top: var(--header-height);

}



body {

    min-height: 100vh;

    overflow-x: hidden;

    font-family: var(--font-primary);

    color: var(--color-text);

    background: var(--color-background);

    line-height: 1.6;

}



body.menu-open,

body.lightbox-open {

    overflow: hidden;

}



img {

    display: block;

    max-width: 100%;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

textarea,

select {

    font: inherit;

}



button {

    color: inherit;

}



ul,

ol {

    list-style: none;

}



::selection {

    color: #000000;

    background: var(--color-primary);

}





/* =========================================================

   SPOLEČNÉ PRVKY

========================================================= */



.container {

    width: min(calc(100% - 40px), var(--container-width));

    margin-inline: auto;

}



.section {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

}



.section--dark {

    background:

        radial-gradient(

            circle at 15% 15%,

            rgba(212, 175, 55, 0.05),

            transparent 30%

        ),

        var(--color-background-light);

}



.section-heading {

    position: relative;

    margin-bottom: 55px;

}



.section-heading--center {

    max-width: 760px;

    margin-right: auto;

    margin-bottom: 65px;

    margin-left: auto;

    text-align: center;

}



.section-heading__eyebrow {

    margin-bottom: 12px;

    color: var(--color-primary);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}



.section-heading__title {

    font-size: clamp(2.2rem, 5vw, 4.5rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.04em;

}



.section-heading__line {

    display: block;

    width: 76px;

    height: 3px;

    margin-top: 24px;

    background: var(--color-primary);

}



.section-heading--center .section-heading__line {

    margin-right: auto;

    margin-left: auto;

}



.section-action {

    margin-top: 50px;

    text-align: center;

}





/* =========================================================

   TLAČÍTKA

========================================================= */



.button {

    position: relative;

    display: inline-flex;

    min-height: 54px;

    padding: 14px 28px;

    overflow: hidden;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 1px solid transparent;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:

        color var(--transition-normal),

        background-color var(--transition-normal),

        border-color var(--transition-normal),

        transform var(--transition-normal),

        box-shadow var(--transition-normal);

}



.button:hover {

    transform: translateY(-3px);

}



.button--primary {

    color: #080808;

    background: var(--color-primary);

    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.2);

}



.button--primary:hover {

    background: var(--color-primary-light);

    box-shadow: 0 20px 55px rgba(212, 175, 55, 0.3);

}



.button--secondary {

    color: var(--color-text);

    border-color: rgba(255, 255, 255, 0.35);

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(10px);

}



.button--secondary:hover {

    color: #000000;

    border-color: var(--color-text);

    background: var(--color-text);

}



.button--outline {

    color: var(--color-primary);

    border-color: var(--color-primary);

    background: transparent;

}



.button--outline:hover {

    color: #000000;

    background: var(--color-primary);

}



.button__icon {

    font-size: 1rem;

}





/* =========================================================

   NAČÍTACÍ OBRAZOVKA

========================================================= */



.page-loader {

    position: fixed;

    z-index: 9999;

    inset: 0;

    display: grid;

    place-items: center;

    background: #050505;

    transition:

        opacity 0.6s ease,

        visibility 0.6s ease;

}



.page-loader.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



.page-loader__content {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.page-loader__logo {

    width: 190px;

    max-height: 90px;

    object-fit: contain;

    filter: brightness(1.1);

}



.page-loader__line {

    position: relative;

    width: 180px;

    height: 2px;

    margin-top: 24px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.12);

}



.page-loader__line::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--color-primary);

    animation: loaderLine 1.3s ease-in-out infinite;

}



@keyframes loaderLine {

    0% {

        left: -100%;

    }



    50% {

        left: 0;

    }



    100% {

        left: 100%;

    }

}





/* =========================================================

   HLAVIČKA A NAVIGACE

========================================================= */



.header {

    position: fixed;

    z-index: 1000;

    top: 0;

    left: 0;

    width: 100%;

    border-bottom: 1px solid transparent;

    transition:

        background-color var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);

}



.header.is-scrolled {

    border-bottom-color: var(--color-border);

    background: rgba(5, 5, 5, 0.86);

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(18px);

}



.navbar {

    min-height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}



.navbar__logo {

    position: relative;

    z-index: 1002;

    display: inline-flex;

    align-items: center;

}



.navbar__logo img {

    width: 160px;

    height: 68px;

    object-fit: contain;

    transition:

        width var(--transition-normal),

        height var(--transition-normal),

        transform var(--transition-normal);

}



.navbar__logo:hover img {

    transform: scale(1.04);

}



.header.is-scrolled .navbar__logo img {

    width: 138px;

    height: 58px;

}



.navbar__menu {

    display: flex;

    align-items: center;

    gap: 30px;

}



.navbar__link {

    position: relative;

    display: inline-flex;

    padding: 12px 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transition: color var(--transition-fast);

}



.navbar__link::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 5px;

    left: 0;

    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);

    transform-origin: right;

    transition: transform var(--transition-normal);

}



.navbar__link:hover,

.navbar__link.active {

    color: var(--color-text);

}



.navbar__link:hover::after,

.navbar__link.active::after {

    transform: scaleX(1);

    transform-origin: left;

}



.menu-toggle {

    position: relative;

    z-index: 1002;

    display: none;

    width: 48px;

    height: 48px;

    padding: 0;

    border: 1px solid var(--color-border);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.3);

    cursor: pointer;

}



.menu-toggle__line {

    position: absolute;

    left: 13px;

    width: 20px;

    height: 2px;

    background: var(--color-text);

    transition:

        top var(--transition-normal),

        transform var(--transition-normal),

        opacity var(--transition-normal);

}



.menu-toggle__line:nth-child(1) {

    top: 16px;

}



.menu-toggle__line:nth-child(2) {

    top: 22px;

}



.menu-toggle__line:nth-child(3) {

    top: 28px;

}



.menu-toggle.is-active .menu-toggle__line:nth-child(1) {

    top: 22px;

    transform: rotate(45deg);

}



.menu-toggle.is-active .menu-toggle__line:nth-child(2) {

    opacity: 0;

}



.menu-toggle.is-active .menu-toggle__line:nth-child(3) {

    top: 22px;

    transform: rotate(-45deg);

}





/* =========================================================

   HERO

========================================================= */



.hero {

    position: relative;

    min-height: 100svh;

    display: flex;

    overflow: hidden;

    align-items: center;

    justify-content: center;

    isolation: isolate;

}



.hero__background {

    position: absolute;

    z-index: -4;

    inset: -28px;

    background-image: url("../images/pozadi.jpeg");

    background-position: center;

    background-size: cover;

    filter: blur(5px);

    transform: scale(1.05);

}



.hero__overlay {

    position: absolute;

    z-index: -3;

    inset: 0;

    background:

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.68) 0%,

            rgba(0, 0, 0, 0.34) 42%,

            rgba(0, 0, 0, 0.78) 100%

        ),

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.68) 0%,

            rgba(0, 0, 0, 0.16) 50%,

            rgba(0, 0, 0, 0.68) 100%

        );

}



.hero__noise {

    position: absolute;

    z-index: -2;

    inset: 0;

    opacity: 0.16;

    background-image:

        radial-gradient(

            rgba(255, 255, 255, 0.5) 0.6px,

            transparent 0.6px

        );

    background-size: 5px 5px;

    pointer-events: none;

}



.hero::after {

    content: "";

    position: absolute;

    z-index: -1;

    right: 0;

    bottom: 0;

    left: 0;

    height: 35%;

    background: linear-gradient(

        to bottom,

        transparent,

        var(--color-background)

    );

}



.hero__content {

    padding-top: var(--header-height);

    text-align: center;

}



.hero__eyebrow {

    margin-bottom: 12px;

    color: var(--color-primary);

    font-size: 0.83rem;

    font-weight: 700;

    letter-spacing: 0.36em;

    text-transform: uppercase;

}



.hero__title {

    font-size: clamp(4.5rem, 12vw, 10rem);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.075em;

    text-shadow: 0 10px 45px rgba(0, 0, 0, 0.55);

}



.hero__subtitle {

    margin-top: 28px;

    color: rgba(255, 255, 255, 0.9);

    font-size: clamp(1.05rem, 2.6vw, 1.55rem);

    font-weight: 400;

    letter-spacing: 0.05em;

}



.hero__buttons {

    margin-top: 42px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 16px;

}



.hero__scroll {

    position: absolute;

    bottom: 28px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    transform: translateX(-50%);

}



.hero__scroll-text {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}



.hero__scroll-arrow {

    color: var(--color-primary);

    font-size: 1.3rem;

    animation: scrollArrow 1.8s ease-in-out infinite;

}



@keyframes scrollArrow {

    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(7px);

    }

}





/* =========================================================

   O KAPELE

========================================================= */



.about {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 80px;

}



.about__image-wrapper {

    position: relative;

}



.about__image-wrapper::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: 30px;

    right: -30px;

    width: 75%;

    height: 80%;

    border-radius: var(--radius-large);

    background: rgba(212, 175, 55, 0.1);

    filter: blur(20px);

}



.about__image {

    width: 100%;

    height: 610px;

    border-radius: var(--radius-large);

    object-fit: cover;

    object-position: center;

    box-shadow: var(--shadow-large);

}



.about__image-border {    position: absolute;

    z-index: -1;

    top: 22px;

    left: 22px;

    width: 100%;

    height: 100%;

    border: 1px solid rgba(212, 175, 55, 0.5);

    border-radius: var(--radius-large);

}



.about__badge {

    position: absolute;

    right: -25px;

    bottom: 35px;

    min-width: 175px;

    padding: 22px 25px;

    border: 1px solid rgba(212, 175, 55, 0.3);

    border-radius: var(--radius-medium);

    background: rgba(8, 8, 8, 0.92);

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(15px);

}



.about__badge span {

    display: block;

    color: var(--color-text-muted);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}



.about__badge strong {

    display: block;

    margin-top: 4px;

    color: var(--color-primary);

    font-size: 1.7rem;

    line-height: 1.1;

}



.about__content {

    position: relative;

}



.about__title {

    margin-bottom: 24px;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.3;

}



.about__content p {

    margin-bottom: 20px;

    color: var(--color-text-muted);

    font-size: 1rem;

    line-height: 1.9;

}



.about__content strong {

    color: var(--color-text);

}



.about__statistics {

    margin-top: 38px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.statistic {

    padding: 18px 0 18px 20px;

    border-left: 2px solid var(--color-primary);

}



.statistic__number {

    display: block;

    color: var(--color-primary);

    font-size: 1.8rem;

    font-weight: 800;

    line-height: 1;

}



.statistic__label {

    display: block;

    margin-top: 8px;

    color: var(--color-text-muted);

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}





/* =========================================================

   KONCERTY

========================================================= */



.concerts {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.concert-card {

    position: relative;

    display: grid;

    grid-template-columns: 145px minmax(0, 1fr) 130px;

    overflow: hidden;

    align-items: stretch;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.025);

    transition:

        transform var(--transition-normal),

        border-color var(--transition-normal),

        background-color var(--transition-normal),

        box-shadow var(--transition-normal);

}



.concert-card:hover {

    border-color: rgba(212, 175, 55, 0.35);

    background: rgba(255, 255, 255, 0.045);

    box-shadow: var(--shadow-small);

    transform: translateY(-4px);

}



.concert-card__date {

    display: flex;

    padding: 20px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-right: 1px solid var(--color-border);

    background: rgba(212, 175, 55, 0.06);

    text-align: center;

}



.concert-card__date strong {

    color: var(--color-primary);

    font-size: 3rem;

    font-weight: 800;

    line-height: 1;

}



.concert-card__date span {

    margin-top: 7px;

    color: var(--color-text-muted);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}



.concert-card__content {

    padding: 28px 35px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.concert-card__title {

    font-size: 1.45rem;

    font-weight: 700;

}



.concert-card__details {

    margin-top: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px 22px;

    color: var(--color-text-muted);

    font-size: 0.88rem;

}



.concert-card__detail {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}



.concert-card__detail-icon {

    color: var(--color-primary);

}



.concert-card__button {

    display: flex;

    align-items: center;

    justify-content: center;

    border-left: 1px solid var(--color-border);

    color: var(--color-primary);

    font-size: 1.5rem;

    transition:

        color var(--transition-normal),

        background-color var(--transition-normal);

}



.concert-card:hover .concert-card__button {

    color: #000000;

    background: var(--color-primary);

}





/* =========================================================

   TYPY AKCÍ

========================================================= */



.event-grid {

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 18px;

}



.event-card {

    position: relative;

    min-height: 300px;

    padding: 30px 24px;

    display: flex;

    overflow: hidden;

    flex-direction: column;

    justify-content: flex-end;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background:

        linear-gradient(

            180deg,

            rgba(255, 255, 255, 0.04),

            rgba(255, 255, 255, 0.015)

        );

    transition:

        transform var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);

}



.event-card::before {

    content: "";

    position: absolute;

    top: -50px;

    right: -50px;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.08);

    filter: blur(15px);

    transition: transform var(--transition-slow);

}



.event-card:hover {

    border-color: rgba(212, 175, 55, 0.4);

    box-shadow: var(--shadow-small);

    transform: translateY(-7px);

}



.event-card:hover::before {

    transform: scale(1.5);

}



.event-card__icon {

    position: relative;

    z-index: 1;

    width: 58px;

    height: 58px;

    margin-bottom: auto;

    display: grid;

    place-items: center;

    border: 1px solid rgba(212, 175, 55, 0.25);

    border-radius: 50%;

    color: var(--color-primary);

    background: rgba(212, 175, 55, 0.06);

    font-size: 1.45rem;

}



.event-card__title {

    position: relative;

    z-index: 1;

    margin-top: 40px;

    font-size: 1.3rem;

    line-height: 1.25;

}



.event-card__text {

    position: relative;

    z-index: 1;

    margin-top: 10px;

    color: var(--color-text-muted);

    font-size: 0.86rem;

    line-height: 1.65;

}





/* =========================================================

   GALERIE

========================================================= */



.gallery {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-auto-rows: 240px;

    gap: 14px;

}



.gallery__item {

    position: relative;

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    cursor: pointer;

}



.gallery__item--large {

    grid-column: span 2;

    grid-row: span 2;

}



.gallery__item--wide {

    grid-column: span 2;

}



.gallery__item--tall {

    grid-row: span 2;

}



.gallery__image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 0.7s ease,

        filter 0.7s ease;

}



.gallery__overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 24px;

    background: linear-gradient(

        to top,

        rgba(0, 0, 0, 0.82),

        transparent 60%

    );

    opacity: 0;

    transition: opacity var(--transition-normal);

}



.gallery__item:hover .gallery__image {

    transform: scale(1.06);

    filter: brightness(0.8);

}



.gallery__item:hover .gallery__overlay {

    opacity: 1;

}



.gallery__caption {

    font-size: 0.85rem;

    font-weight: 600;

}



.gallery__zoom {

    width: 42px;

    height: 42px;

    display: grid;

    flex: 0 0 auto;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    font-size: 1.2rem;

}





/* =========================================================

   REZERVACE

========================================================= */



.reservation-section {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    background:

        radial-gradient(

            circle at 85% 50%,

            rgba(212, 175, 55, 0.09),

            transparent 32%

        ),

        var(--color-background);

}



.reservation {

    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);

    gap: 70px;

    padding: 65px;

    overflow: hidden;

    align-items: center;

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: var(--radius-large);

    background:

        linear-gradient(

            135deg,

            rgba(255, 255, 255, 0.045),

            rgba(255, 255, 255, 0.015)

        );

    box-shadow: var(--shadow-large);

}



.reservation::before {

    content: "";

    position: absolute;

    top: -130px;

    right: -130px;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.08);

    filter: blur(20px);

}



.reservation__content {

    position: relative;

    z-index: 1;

}



.reservation__eyebrow {

    margin-bottom: 14px;

    color: var(--color-primary);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

}



.reservation__title {

    max-width: 700px;

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.04em;

}



.reservation__text {

    max-width: 680px;

    margin-top: 25px;

    color: var(--color-text-muted);

    font-size: 1rem;

    line-height: 1.85;

}



.reservation__actions {

    margin-top: 34px;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}



.reservation__contacts {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.contact-item {

    display: flex;

    padding: 22px;

    align-items: center;

    gap: 18px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background: rgba(0, 0, 0, 0.24);

    transition:

        transform var(--transition-normal),

        border-color var(--transition-normal),

        background-color var(--transition-normal);

}



.contact-item:hover {

    border-color: rgba(212, 175, 55, 0.4);

    background: rgba(212, 175, 55, 0.05);

    transform: translateX(-5px);

}



.contact-item__icon {

    width: 54px;

    height: 54px;

    display: grid;

    flex: 0 0 auto;

    place-items: center;

    border-radius: 50%;

    color: var(--color-primary);

    background: rgba(212, 175, 55, 0.09);

    font-size: 1.25rem;

}



.contact-item__content span {

    display: block;

    margin-bottom: 3px;

    color: var(--color-text-muted);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.contact-item__content strong {

    font-size: 0.92rem;

    font-weight: 700;

}





/* =========================================================

   KONTAKT

========================================================= */



.contact {

    display: grid;

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: center;

    gap: 80px;

}



.contact__content p {

    margin-bottom: 20px;

    color: var(--color-text-muted);

    line-height: 1.85;

}



.contact__links {

    margin-top: 35px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.contact__link {

    display: flex;

    padding: 18px 20px;

    align-items: center;

    gap: 16px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.02);

    transition:

        border-color var(--transition-normal),

        background-color var(--transition-normal),

        transform var(--transition-normal);

}



.contact__link:hover {

    border-color: rgba(212, 175, 55, 0.4);

    background: rgba(212, 175, 55, 0.05);

    transform: translateX(5px);

}



.contact__link-icon {

    width: 48px;

    height: 48px;

    display: grid;

    flex: 0 0 auto;

    place-items: center;

    border-radius: 50%;

    color: var(--color-primary);

    background: rgba(212, 175, 55, 0.08);

}



.contact__link-content span {

    display: block;

    color: var(--color-text-muted);

    font-size: 0.67rem;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.contact__link-content strong {

    display: block;

    margin-top: 2px;

    font-size: 0.9rem;

}



.contact__image-wrapper {

    position: relative;

    min-height: 590px;

    overflow: hidden;

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-large);

}



.contact__image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.contact__image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.1),

            rgba(0, 0, 0, 0.78)

        );

}



.contact__image-content {

    position: absolute;

    right: 40px;

    bottom: 40px;

    left: 40px;

}



.contact__image-content img {

    width: 180px;

    max-height: 80px;

    object-fit: contain;

}



.contact__image-content p {

    max-width: 420px;

    margin-top: 18px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 1.1rem;

    font-weight: 600;

}





/* =========================================================

   PATIČKA

========================================================= */



.footer {

    padding: 38px 0;

    border-top: 1px solid var(--color-border);

    background: #050505;

}



.footer__container {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

}



.footer__logo {

    justify-self: start;

}



.footer__logo img {

    width: 110px;

    max-height: 48px;

    object-fit: contain;

}



.footer__content {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: var(--color-text-muted);

    font-size: 0.72rem;

    text-align: center;

}



.footer__separator {

    color: rgba(255, 255, 255, 0.25);

}



.footer__email {

    justify-self: end;

    color: var(--color-text-muted);

    font-size: 0.72rem;

    transition: color var(--transition-fast);

}



.footer__email:hover {

    color: var(--color-primary);

}





/* =========================================================

   LIGHTBOX

========================================================= */



.lightbox {

    position: fixed;

    z-index: 10000;

    inset: 0;

    display: flex;

    padding: 80px;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.95);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity var(--transition-normal),

        visibility var(--transition-normal);

}



.lightbox.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.lightbox__content {

    position: relative;

    width: 100%;

    height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



.lightbox__image {

    max-width: 100%;

    max-height: 100%;

    border-radius: var(--radius-small);

    object-fit: contain;

    box-shadow: var(--shadow-large);

}



.lightbox__close,

.lightbox__navigation {

    position: absolute;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    color: var(--color-text);

    background: rgba(0, 0, 0, 0.45);

    cursor: pointer;

    transition:

        color var(--transition-normal),

        background-color var(--transition-normal),

        border-color var(--transition-normal),

        transform var(--transition-normal);

}



.lightbox__close:hover,

.lightbox__navigation:hover {

    color: #000000;

    border-color: var(--color-primary);

    background: var(--color-primary);

}



.lightbox__close {

    z-index: 2;

    top: 22px;

    right: 22px;

    width: 52px;

    height: 52px;

    font-size: 1.5rem;

}



.lightbox__navigation {

    z-index: 2;

    top: 50%;

    width: 58px;

    height: 58px;

    font-size: 1.5rem;

    transform: translateY(-50%);

}



.lightbox__navigation:hover {

    transform: translateY(-50%) scale(1.06);

}



.lightbox__navigation--previous {

    left: 22px;

}



.lightbox__navigation--next {

    right: 22px;

}



.lightbox__caption {

    position: absolute;

    bottom: 18px;

    left: 50%;

    max-width: 80%;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.78rem;

    text-align: center;

    transform: translateX(-50%);

}





/* =========================================================

   TLAČÍTKO NAHORU

========================================================= */



.scroll-top {

    position: fixed;

    z-index: 900;

    right: 24px;

    bottom: 24px;

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(212, 175, 55, 0.35);

    border-radius: 50%;

    color: #000000;

    background: var(--color-primary);

    box-shadow: var(--shadow-small);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition:

        opacity var(--transition-normal),

        visibility var(--transition-normal),

        transform var(--transition-normal),

        background-color var(--transition-normal);

}



.scroll-top:hover {

    background: var(--color-primary-light);

    transform: translateY(-3px);

}



.scroll-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}





/* =========================================================

   ANIMACE PŘI SCROLLOVÁNÍ

========================================================= */



.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;

}



.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}





/* =========================================================

   PŘÍSTUPNOST

========================================================= */



:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 4px;

}



button:focus:not(:focus-visible),

a:focus:not(:focus-visible) {

    outline: none;

}





/* =========================================================

   SCROLLBAR

========================================================= */



::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #080808;

}



::-webkit-scrollbar-thumb {

    border: 2px solid #080808;

    border-radius: 999px;

    background: #3c3c3c;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary);

}





/* =========================================================

   POPTÁVKOVÝ FORMULÁŘ

========================================================= */



body.inquiry-open {

    overflow: hidden;

}



.inquiry-modal {

    position: fixed;

    z-index: 10000;

    inset: 0;

    display: flex;

    padding: 24px;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity var(--transition-normal),

        visibility var(--transition-normal);

}



.inquiry-modal.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.inquiry-modal__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.86);

    backdrop-filter: blur(8px);

}



.inquiry-modal__dialog {

    position: relative;

    z-index: 1;

    width: min(920px, 100%);

    max-height: calc(100svh - 48px);

    padding: 42px;

    overflow-y: auto;

    border: 1px solid rgba(212, 175, 55, 0.28);

    border-radius: var(--radius-large);

    background:

        radial-gradient(

            circle at 90% 0%,

            rgba(212, 175, 55, 0.1),

            transparent 28%

        ),

        #101010;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);

}



.inquiry-modal__close {

    position: sticky;

    z-index: 3;

    top: 0;

    float: right;

    width: 46px;

    height: 46px;

    margin: -18px -18px 0 20px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    color: var(--color-text);

    background: rgba(8, 8, 8, 0.92);

    font-size: 1.6rem;

    line-height: 1;

    cursor: pointer;

    transition:

        color var(--transition-normal),

        border-color var(--transition-normal),

        background-color var(--transition-normal),

        transform var(--transition-normal);

}



.inquiry-modal__close:hover {

    color: #000000;

    border-color: var(--color-primary);

    background: var(--color-primary);

    transform: rotate(90deg);

}



.inquiry-modal__eyebrow {

    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

}



.inquiry-modal__title {

    max-width: 720px;

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.04em;

}



.inquiry-modal__intro {

    max-width: 720px;

    margin-top: 18px;

    color: var(--color-text-muted);

    font-size: 0.95rem;

    line-height: 1.8;

}



.inquiry-form {

    margin-top: 35px;

}



.inquiry-form__section {

    margin-bottom: 22px;

    padding: 24px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.018);

}



.inquiry-form__section legend {

    padding: 0 10px;

    color: var(--color-primary);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.inquiry-form__grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

}



.inquiry-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.inquiry-field--full {

    grid-column: 1 / -1;

}



.inquiry-field label {

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.78rem;

    font-weight: 700;

}



.inquiry-field label span {

    color: var(--color-primary);

}



.inquiry-field input,

.inquiry-field select,

.inquiry-field textarea {

    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 12px;

    color: var(--color-text);

    background: #0b0b0b;

    outline: none;

    transition:

        border-color var(--transition-fast),

        box-shadow var(--transition-fast),

        background-color var(--transition-fast);

}



.inquiry-field input,

.inquiry-field select {

    min-height: 50px;

    padding: 0 15px;

}



.inquiry-field textarea {

    min-height: 120px;

    padding: 14px 15px;

    resize: vertical;

}



.inquiry-field input::placeholder,

.inquiry-field textarea::placeholder {

    color: #777777;

}



.inquiry-field input:focus,

.inquiry-field select:focus,

.inquiry-field textarea:focus {

    border-color: var(--color-primary);

    background: #0e0e0e;

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);

}



.inquiry-field select option {

    color: #ffffff;

    background: #111111;

}



.inquiry-form__note {

    margin: 4px 0 22px;

    color: var(--color-text-muted);

    font-size: 0.78rem;

    line-height: 1.7;

}



.inquiry-form__submit {

    min-width: 250px;

}





/* =========================================================

   ORIENTAČNÍ CENÍK

========================================================= */



.pricing-section {

    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(212, 175, 55, 0.08),

            transparent 34%

        ),

        var(--color-background);

}



.pricing__intro {

    max-width: 780px;

    margin: 28px auto 0;

    color: var(--color-text-muted);

    font-size: 1rem;

    line-height: 1.85;

}



.pricing-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;

}



.pricing-card {

    position: relative;

    display: flex;

    min-height: 100%;

    padding: 36px 32px;

    flex-direction: column;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-large);

    background: linear-gradient(

        180deg,

        rgba(255, 255, 255, 0.045),

        rgba(255, 255, 255, 0.018)

    );

    box-shadow: var(--shadow-small);

    transition:

        transform var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);

}



.pricing-card:hover {

    border-color: rgba(212, 175, 55, 0.45);

    transform: translateY(-7px);

    box-shadow: var(--shadow-large);

}



.pricing-card--featured {

    border-color: rgba(212, 175, 55, 0.5);

    background: linear-gradient(

        180deg,

        rgba(212, 175, 55, 0.09),

        rgba(255, 255, 255, 0.018)

    );

}



.pricing-card__badge {

    position: absolute;

    top: 20px;

    right: 20px;

    padding: 7px 10px;

    border-radius: 999px;

    color: #080808;

    background: var(--color-primary);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



.pricing-card__eyebrow {

    min-height: 38px;

    padding-right: 85px;

    color: var(--color-primary);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    line-height: 1.55;

    text-transform: uppercase;

}



.pricing-card:not(.pricing-card--featured) .pricing-card__eyebrow {

    padding-right: 0;

}



.pricing-card__title {

    margin-top: 14px;

    font-size: 1.55rem;

    line-height: 1.25;

}



.pricing-card__price {

    margin: 26px 0 30px;

    color: var(--color-primary);

    font-size: clamp(2rem, 3.2vw, 2.8rem);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.04em;

}



.pricing-card__price span {

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.pricing-card__price--text {

    font-size: clamp(1.8rem, 2.8vw, 2.35rem);

}



.pricing-card__note {

    margin-top: -15px;

    margin-bottom: 24px;

    color: var(--color-text-muted);

    font-size: 0.9rem;

}



.pricing-card__detail {

    padding-top: 22px;

    border-top: 1px solid var(--color-border);

}



.pricing-card__detail + .pricing-card__detail {

    margin-top: 22px;

}



.pricing-card__detail h4 {

    margin-bottom: 9px;

    color: var(--color-text);

    font-size: 0.76rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.pricing-card__detail p {

    color: var(--color-text-muted);

    font-size: 0.9rem;

    line-height: 1.75;

}



.pricing-card__detail--muted h4 {

    color: var(--color-primary);

}





/* =========================================================

   CENÍK – DŮLEŽITÉ INFORMACE

========================================================= */



.pricing-info {

    margin-top: 42px;

    padding: 42px;

    border: 1px solid rgba(212, 175, 55, 0.22);

    border-radius: var(--radius-large);

    background: rgba(212, 175, 55, 0.045);

}



.pricing-info__heading {

    margin-bottom: 30px;

}



.pricing-info__heading h3 {

    font-size: clamp(1.7rem, 3vw, 2.35rem);

}



.pricing-info__grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

}



.pricing-info__item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

}



.pricing-info__icon {

    width: 48px;

    height: 48px;

    display: grid;

    flex: 0 0 auto;

    place-items: center;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.12);

    font-size: 1.2rem;

}



.pricing-info__item h4 {

    margin-bottom: 8px;

    font-size: 0.95rem;

}



.pricing-info__item p {

    color: var(--color-text-muted);

    font-size: 0.88rem;

    line-height: 1.75;

}



.pricing-info__item strong {

    color: var(--color-primary-light);

}





/* =========================================================

   CENÍK – TLAČÍTKO POPTÁVKY

========================================================= */



.pricing__action {

    margin-top: 38px;

    text-align: center;

}



/* TEST-VITTU-12345 */



/* VITTU – sjednocená galerie 2026 */

.gallery-page { padding: calc(var(--header-height) + 72px) 0 100px; min-height: 100vh; }

.gallery-page__heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }

.gallery-page__heading .section-heading__line { margin-inline: auto; }

.gallery-page__title { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.12; }

.gallery-page__description { margin-top: 22px; color: var(--color-text-muted); }

.gallery-page__grid, .gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; grid-auto-rows: auto; }

.gallery-page__item, .gallery__item { position: relative; display: block; min-width: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 1px solid rgba(212,175,55,.24); border-radius: 16px; background: #141414; cursor: pointer; grid-column: auto !important; grid-row: auto !important; }

.gallery-page__item img, .gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }

.gallery-page__item:hover img, .gallery__item:hover img { transform: scale(1.05); }

.gallery-page__item:focus-visible, .gallery__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.gallery-page__item .gallery__overlay, .gallery__item .gallery__overlay { pointer-events: none; }

.gallery-page__item:hover .gallery__overlay, .gallery-page__item:focus-visible .gallery__overlay, .gallery__item:hover .gallery__overlay, .gallery__item:focus-visible .gallery__overlay { opacity: 1; }

.gallery__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); font-size: 22px; }

.gallery__label { font-size: .8rem; font-weight: 600; }

@media (max-width: 900px) { .gallery-page__grid, .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } }

@media (max-width: 600px) { .gallery-page { padding: calc(var(--header-height) + 35px) 0 65px; } .gallery-page__grid, .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .gallery-page__item, .gallery__item { aspect-ratio: 3 / 4; border-radius: 10px; } .gallery__overlay { padding: 10px; } .gallery__label { display: none; } }

@media (max-width: 360px) { .gallery-page__grid, .gallery { grid-template-columns: minmax(0,1fr); } .gallery-page__item, .gallery__item { aspect-ratio: 4 / 3; } }