/* ============================================
   FONTS
   ============================================ */
@font-face {
    font-family: 'Futura PT';
    src: url('../fonts/fonnts.com-Futura_PT_Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Magistral';
    src: url('../fonts/fonnts.com-Magistral_Extra_Bold_Italic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

/* ============================================
   BASE
   ============================================ */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Futura PT', sans-serif; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Magistral', sans-serif; font-weight: 800; font-style: italic; letter-spacing: 0.025em; }
p, span, a, li, input, textarea, select, button { font-family: 'Futura PT', sans-serif; }

.font-futura { font-family: 'Futura PT', sans-serif !important; }
.font-magistral { font-family: 'Magistral', sans-serif !important; font-weight: 800; font-style: italic; letter-spacing: 0.025em; }

/* ============================================
   COLORS (custom)
   ============================================ */
.text-magenta { color: #C31681; }
.bg-magenta { background-color: #C31681; }
.border-magenta { border-color: #C31681; }

/* ============================================
   NAV - hover & custom breakpoints
   ============================================ */
.site-nav {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 100%);
}
.nav-phone { font-size: clamp(10px, 3vw, 16px); transition: opacity 0.3s; }
.nav-phone:hover { opacity: 0.9; }
.nav-social { transition: border-color 0.3s, color 0.3s; }
.nav-social:hover { border-color: #C31681; color: #C31681; }

@media (min-width: 375px) {
    .nav-logo img { width: 85px; }
    .nav-actions { gap: 0.5rem; }
    .nav-phone { padding: 0.5rem 0.75rem; }
    .nav-social { width: 2rem; height: 2rem; }
}
@media (min-width: 425px) {
    .nav-logo img { width: 130px; }
    .nav-phone { padding: 0.5rem 1rem; }
}

/* ============================================
   HERO - child selectors, gradients, transitions
   ============================================ */
.hero-bg > img {
    position: absolute; width: 75%; height: auto;
    top: 0%; left: 50%; transform: translate(-50%, -50%);
}
.hero-bg > img:first-child { transform: translate(-50%, -50%); transform-origin: center; }
.hero-gradient {
    background: none;
}
.hero-text-container { padding: clamp(120px, 22vh, 320px) 40px 48px; }
@media (min-width: 1800px) and (max-height: 1100px) { .hero-text-container { padding-top: 420px; } }

.hero-slide-content { transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; }
.hero-slide-content.fade-out { opacity: 0; transform: translateY(20px); }
.hero-slide-content.fade-in { opacity: 1; transform: translateY(0); }
.hero-background-image { transition: opacity 0.8s ease-in-out; }
.hero-background-image.fade-out { opacity: 0; }
.hero-background-image.fade-in { opacity: 1; }

@media (min-width: 640px) {
    .hero-bg > img { top:0; left:0; width:100%; height:100%; object-fit:cover; transform:none; object-position:center 60px; }
    .hero-bg > img:first-child { transform: scale(0.75); object-position: center 60px; }
    .hero-gradient { background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%); }
}
@media (min-width: 768px) {
    .hero-bg > img:first-child { transform: scale(0.75); }
}
@media (min-width: 1024px) {
    .hero-bg > img:first-child { transform: scale(0.78); object-position: center -100px; }
}

/* ============================================
   SERVICES - hover, overlay gradient
   ============================================ */
.services-card-overlay {
    background: none;
}
.services-card-btn { transition: opacity 0.3s ease; }
.services-card-btn:hover { opacity: 0.9; }

/* ============================================
   REZERVACE - checked states, pseudo-elements
   ============================================ */
.rezervace-vehicle input[type="radio"] { display: none; }
.rezervace-radio {
    width: 18px; height: 18px; border-radius: 9999px; position: relative;
    border: 2px solid #555; transition: border-color 0.2s;
}
.rezervace-vehicle input[type="radio"]:checked ~ .rezervace-radio { border-color: #C31681; }
.rezervace-vehicle input[type="radio"]:checked ~ .rezervace-radio::after {
    content: ''; position: absolute; border-radius: 9999px;
    top: 3px; left: 3px; width: 8px; height: 8px; background-color: #C31681;
}
.rezervace-vehicle-icon {
    filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(4500%) hue-rotate(310deg) brightness(95%) contrast(100%);
}
.rezervace-service input[type="checkbox"] { display: none; }
.rezervace-checkbox {
    width: 18px; height: 18px; border-radius: 9999px; flex-shrink: 0; position: relative;
    border: 2px solid #555; transition: border-color 0.2s;
}
.rezervace-service input[type="checkbox"]:checked ~ .rezervace-checkbox,
.rezervace-service:has(input[type="checkbox"]:checked) .rezervace-checkbox { border-color: #C31681; }
.rezervace-service input[type="checkbox"]:checked ~ .rezervace-checkbox::after,
.rezervace-service:has(input[type="checkbox"]:checked) .rezervace-checkbox::after {
    content: ''; position: absolute; border-radius: 9999px;
    top: 3px; left: 3px; width: 8px; height: 8px; background-color: #C31681;
}
.rezervace-textarea::placeholder { color: #888; font-size: 17px; }
.rezervace-textarea:focus { outline: none; border-color: #C31681; }

/* ============================================
   KONTAKT - checked, focus, hover
   ============================================ */
.kontakt-input::placeholder { color: #888; }
.kontakt-input:focus { outline: none; border-color: #C31681; }
.kontakt-consent input[type="checkbox"] { display: none; }
.kontakt-consent input[type="checkbox"]:checked ~ .rezervace-checkbox,
.kontakt-consent:has(input[type="checkbox"]:checked) .rezervace-checkbox { border-color: #C31681; }
.kontakt-consent input[type="checkbox"]:checked ~ .rezervace-checkbox::after,
.kontakt-consent:has(input[type="checkbox"]:checked) .rezervace-checkbox::after {
    content: ''; position: absolute; border-radius: 9999px;
    top: 3px; left: 3px; width: 8px; height: 8px; background-color: #C31681;
}
.kontakt-submit { transition: opacity 0.3s ease; }
.kontakt-submit:hover { opacity: 0.9; }
.kontakt-send-icon {
    filter: brightness(0) saturate(100%) invert(97%) sepia(5%) saturate(500%) hue-rotate(280deg) brightness(103%) contrast(96%);
}

/* ============================================
   SECTION LABELS - pseudo-elements
   ============================================ */
.section-label span::after {
    content: ''; position: absolute; left: -15px; bottom: 0; width: 50%; height: 3px; background-color: #C31681;
}
.section-label span::before {
    content: ''; position: absolute; left: -15px; bottom: 0; width: 3px; height: 18px; background-color: #C31681;
}

/* ============================================
   PORTFOLIO / REVIEWS - hover states, transitions
   ============================================ */
.portfolio-hover-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(6px);
}
.portfolio-overlay { transition: background-color 0.5s ease; }
.portfolio-item:hover .portfolio-image { filter: brightness(0.5); transition: filter 0.3s ease; }
.portfolio-item:hover .portfolio-overlay { background-color: rgba(0,0,0,0.2); }
.portfolio-item:hover .portfolio-hover-content,
.portfolio-item.is-active .portfolio-hover-content {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.portfolio-item.is-active .portfolio-overlay { background-color: rgba(0,0,0,0.25); }

/* ============================================
   MAP
   ============================================ */
.map-section iframe { filter: brightness(0.35); }

/* ============================================
   FOOTER - hover
   ============================================ */
.footer-phone { transition: color 0.2s; }
.footer-phone:hover { color: white; }
.footer-social-link { transition: border-color 0.2s, color 0.2s; }
.footer-social-link:hover { border-color: #C31681; color: #C31681; }

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {

    .hero-background-image { display: none; }

    /* Hero – smaller padding & text on mobile */
    .hero-content-padding {
        padding: 160px 20px 40px !important;
    }
    .hero-slide-content h1 {
        font-size: 32px !important;
    }
    .hero-slide-content .font-magistral {
        font-size: 20px !important;
    }
    .hero-slide-content p {
        text-align: left;
        font-size: 16px !important;
    }
    #uvod {
        min-height: auto !important;
        height: auto !important;
    }

    /* Info bar – no negative margin, stack nicely */
    #uvod + section {
        margin-top: 0 !important;
        padding: 1.5rem 1rem !important;
    }
    #uvod + section .max-w-\[1500px\] {
        gap: 1.25rem !important;
    }
    #uvod + section img.shrink-0 {
        width: 40px !important;
        height: 40px !important;
    }
    #uvod + section h3 {
        font-size: 17px !important;
    }
    #uvod + section p, #uvod + section span.font-futura {
        font-size: 14px !important;
    }

    /* Services – smaller cards on mobile */
    #sluzby .relative.flex.overflow-hidden {
        min-height: 500px !important;
    }
    #sluzby h3 {
        font-size: 22px !important;
        margin-bottom: 1.5rem !important;
    }
    #sluzby ul li {
        font-size: 15px !important;
    }
    #sluzby p.italic {
        font-size: 22px !important;
        margin-bottom: 1.5rem !important;
    }
    #sluzby a.services-card-btn {
        font-size: 14px !important;
        padding: 12px 28px !important;
    }

    /* Rezervace – vehicle icons smaller */
    .rezervace-vehicle-icon {
        width: 80px !important;
        height: 50px !important;
    }
    #rezervace {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #extra-pozadavky {
        margin-top: 1.5rem !important;
    }

    /* Footer – stack & center, fix visibility */
    #kontakt {
        margin-top: 0 !important;
        position: relative !important;
    }
    #kontakt > div:first-child {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }
    #kontakt > div:first-child > div {
        align-items: center !important;
    }
    #kontakt > div:first-child > div:first-child {
        gap: 30px !important;
    }
    .footer-social-link {
        width: 40px !important;
        height: 40px !important;
    }

    /* Nav logo on mobile */
    .nav-logo img {
        width: 75px !important;
    }

    /* Mapa – odsazení od recenzí, no negative margin */
    .map-section {
        margin-top: 2.5rem !important;
    }
    .map-section iframe {
        height: 250px !important;
    }

    /* === RECENZE NA MOBILU – karty pod sebou, text vždy viditelný === */
    .portfolio-slider {
        overflow: visible !important;
        padding: 0 1rem !important;
    }
    .portfolio-track {
        flex-direction: column !important;
        gap: 2.5rem !important;
        max-height: none !important;
    }
    .portfolio-item {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        aspect-ratio: unset !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .portfolio-item .portfolio-image {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        filter: none !important;
        transition: none !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    .portfolio-item .portfolio-overlay {
        display: none !important;
    }
    .portfolio-item .portfolio-hover-content {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        background-color: #1c1c1c !important;
        padding: 1rem 1rem 1.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        inset: unset !important;
    }
    /* Hvězdičky – z absolute na statické */
    .portfolio-item .portfolio-hover-content > .absolute {
        position: static !important;
        margin-bottom: 0.5rem;
        justify-content: flex-start !important;
    }
    /* Avatar řádek – zruš záporný margin z inline stylu */
    .portfolio-item .portfolio-hover-content > .flex {
        margin-left: 0 !important;
    }
    .portfolio-item .portfolio-hover-content p {
        font-size: 15px !important;
    }
}

@media (min-width: 2560px) {
    .hero-content-padding {
        padding-top: 420px !important;
        padding-left: 18px !important;
    }
    /* Hero text bigger at 2K */
    .hero-slide-content h1 {
        font-size: 70px !important;
    }
    .hero-slide-content .font-magistral {
        font-size: 38px !important;
    }
    .hero-slide-content p {
        font-size: 24px !important;
    }
    /* max-w 1750px at 2K */
    .max-w-\[1500px\] {
        max-width: 1750px !important;
    }
    /* Infobar keeps 1700px */
    #uvod + section .max-w-\[1500px\] {
        max-width: 1700px !important;
    }
    /* Infobar at 2K */
    #uvod + section {
        margin-top: -218px !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    #uvod + section img.shrink-0 {
        width: 77px !important;
        height: 77px !important;
    }
    #uvod + section h3 {
        font-size: 33px !important;
    }
    #uvod + section p, #uvod + section span.font-futura {
        font-size: 25px !important;
        white-space: nowrap;
    }
    .infobar-divider {
        display: block !important;
        height: 70px !important;
        width: 2px !important;
    }
    /* Services at 2K */
    #sluzby .section-title {
        font-size: 3.5rem !important;
    }
    #sluzby h3 {
        font-size: 48px !important;
    }
    #sluzby span.font-magistral {
        font-size: 46px !important;
    }
    #sluzby ul li {
        font-size: 22px !important;
    }
    #sluzby ul li img {
        width: 28px !important;
        height: 28px !important;
    }
    #sluzby p.font-magistral, #sluzby p.italic {
        font-size: 42px !important;
    }
    #sluzby a.services-card-btn {
        font-size: 20px !important;
        padding: 20px 56px !important;
    }
    /* Footer at 2K */
    #kontakt > div:first-child {
        max-width: 1800px !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        gap: 4rem !important;
    }
    .site-nav > div {
        max-width: 1800px !important;
    }
    #kontakt p {
        font-size: 19px !important;
    }
    #kontakt a.footer-phone {
        font-size: 30px !important;
    }
    #kontakt .footer-social-link {
        width: 58px !important;
        height: 58px !important;
    }
    #kontakt .footer-social-link i {
        font-size: 22px !important;
    }
    /* Rezervace at 2K */
    #rezervace .section-title {
        font-size: 3.5rem !important;
    }
    #rezervace h3 {
        font-size: 34px !important;
    }
    #rezervace h3 span.text-magenta {
        font-size: 40px !important;
    }
    #rezervace p {
        font-size: 22px !important;
    }
    #rezervace label.rezervace-service {
        font-size: 22px !important;
    }
    #rezervace label.rezervace-vehicle span.font-futura {
        font-size: 22px !important;
    }
    /* Vehicle icons: bigger and closer together */
    #rezervace .rezervace-vehicle-icon {
        width: 160px !important;
        height: 102px !important;
    }
    #rezervace .grid-cols-3 {
        gap: 4px !important;
    }
    /* Form inputs bigger */
    #rezervace .kontakt-input {
        font-size: 20px !important;
        padding: 18px 22px !important;
    }
    #rezervace .rezervace-textarea {
        font-size: 20px !important;
    }
    #rezervace button[type="submit"] {
        font-size: 22px !important;
        padding: 20px 50px !important;
    }
    /* Extra požadavky shift left */
    #extra-pozadavky {
        margin-left: -2rem !important;
    }
}

/* Portfolio desktop – smaller strip, still edge-to-edge */
@media (min-width: 769px) {
    .portfolio-track {
        max-height: 420px;
        overflow: hidden;
    }
    .portfolio-item {
        overflow: hidden;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .hero-slide-content h1 {
        font-size: 56px !important;
    }
    .hero-slide-content .font-magistral {
        font-size: 30px !important;
    }
    .hero-slide-content p {
        font-size: 18px !important;
    }
    .max-w-\[1500px\] {
        max-width: 1400px !important;
    }
    .max-w-\[1380px\], .max-w-\[1900px\] {
        max-width: 1900px !important;
    }
    .hero-content-padding {
        padding-left: 18px !important;
    }
    .hero-background-image {
        object-position: center -65px !important;
    }
    /* Infobar smaller at Full HD */
    #uvod + section {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    #uvod + section img.shrink-0 {
        width: 56px !important;
        height: 56px !important;
    }
    #uvod + section h3 {
        font-size: 22px !important;
    }
    #uvod + section p, #uvod + section span.font-futura {
        font-size: 16px !important;
        white-space: nowrap;
    }
    .infobar-divider {
        display: block !important;
        height: 80px !important;
        width: 2px !important;
    }
}