/* public/assets/css/map-about.css */

/* --- 1. ANIMACE RECENZÍ (homepage má vlastní styly v homepage.css) --- */
.reviews-slider-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Efekt mizení na krajích */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 10px 0; /* Prostor pro stíny */
}

.review-card-mini {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px;
    width: 240px; /* Pevná šířka karty */
    flex-shrink: 0; /* Důležité: aby se nezmenšovala */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    font-size: 0.85rem;
    line-height: 1.4;
}

.review-card-mini .rc-top {
    font-size: 0.8rem;
    margin-bottom: 8px;
    color: var(--fl-text-dark);
    display: flex;
    align-items: center;
}

.review-card-mini p {
    margin: 0;
    color: var(--fl-text-muted);
    font-style: italic;
}


/* --- 2. ABOUT SECTION (PREMIUM LOOK) --- */
.section-about-premium {
    padding: 120px 0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    position: relative;
}

.about-bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

.bg-green-soft { background-color: rgba(0, 155, 58, 0.08); }
.fw-black { font-weight: 900; }

.about-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.05);
}
.stat-item-modern { display: flex; align-items: center; }
.stat-icon-wrapper {
    width: 50px; height: 50px; background: var(--fl-green-rich-gradient);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; margin-right: 15px; box-shadow: 0 8px 16px rgba(0, 155, 58, 0.2);
}
.stat-number {
    font-family: var(--font-tech); font-weight: 700; font-size: 1.8rem;
    line-height: 1; color: var(--fl-dark-deep);
}
.stat-label {
    font-size: 0.8rem; color: var(--fl-text-muted); font-weight: 600; text-transform: uppercase;
}

.btn-brand-gradient {
    background: var(--fl-green-rich-gradient); color: #fff; border: none;
}
.btn-brand-gradient:hover {
    color: #fff; box-shadow: 0 10px 20px rgba(0, 155, 58, 0.3) !important;
}
.lift-on-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lift-on-hover:hover { transform: translateY(-3px); }

/* Image Stack */
.about-image-stack { position: relative; z-index: 10; padding: 20px; }
.stack-main-image-wrapper {
    position: relative; z-index: 5; border-radius: 30px; overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); transform: rotate(-2deg);
    transition: all 0.5s ease;
}
.about-image-stack:hover .stack-main-image-wrapper { transform: rotate(0deg) scale(1.01); }
.stack-main-image { width: 100%; height: auto; display: block; }

.stack-decoration-dots {
    position: absolute; top: -20px; right: -20px; width: 150px; height: 150px;
    background-image: radial-gradient(var(--fl-green-primary) 20%, transparent 20%);
    background-size: 15px 15px; opacity: 0.15; z-index: 1; border-radius: 50%;
}

.stack-overlay-card {
    position: absolute; bottom: 0px; left: 0px; background: #fff;
    padding: 25px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    z-index: 10; max-width: 240px; border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}


/* --- 3. MAPY (TERMINAL TEASER & MODAL) --- */
.section-terminal-teaser {
    padding: 80px 0; background: #fff; position: relative; overflow: hidden;
}
.map-teaser-card {
    background: #050811; border-radius: 24px; padding: 3rem;
    position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 155, 58, 0.25);
    display: flex; align-items: center; min-height: 400px;
    border: 1px solid rgba(0, 155, 58, 0.2);
}
.map-teaser-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; transition: transform 0.8s ease;
}
.map-teaser-card:hover .map-teaser-bg { transform: scale(1.05); }
.map-teaser-content { position: relative; z-index: 2; max-width: 600px; }
.map-teaser-content h2, .map-teaser-content p {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); color: #fff !important;
}
.btn-map-open {
    background: var(--fl-green-primary); color: white; border: none; padding: 16px 32px;
    border-radius: 50px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(0, 155, 58, 0.4);
}
.btn-map-open:hover {
    background: var(--fl-green-dark); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 155, 58, 0.5); color: white;
}

/* Modal Map */
.modal-map-body { display: flex; flex-direction: row; height: 80vh; background: #f8fafc; overflow: hidden; }
.terminal-map-pan-panel {
    flex-grow: 1; position: relative; overflow: auto; cursor: grab;
    background: #e2e8f0; display: flex; align-items: center; justify-content: center;
}
.terminal-map-pan-panel:active { cursor: grabbing; }
.full-terminal-map { display: block; max-width: none; height: auto; }
.map-sidebar {
    width: 280px; background: #fff; border-left: 1px solid #e2e8f0;
    overflow-y: auto; flex-shrink: 0; z-index: 20; box-shadow: -5px 0 20px rgba(0,0,0,0.05);
}
.sidebar-title {
    font-weight: 800; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 1rem;
}
.btn-map-nav {
    text-align: left; padding: 12px 16px; border-radius: 10px; font-weight: 600;
    color: #1e293b; border: 1px solid transparent; transition: all 0.2s;
    background: #f8fafc; margin-bottom: 8px;
}
.btn-map-nav:hover { background: #e2e8f0; color: var(--fl-text-dark); }
.btn-map-nav.active { background: var(--fl-green-primary); color: white; box-shadow: 0 4px 10px rgba(0, 155, 58, 0.3); }
.sidebar-divider { margin: 1.5rem 0; opacity: 0.1; }
.legend-list { list-style: none; padding: 0; margin: 0; }
.legend-list li {
    display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; color: #475569; font-weight: 500;
}
.map-pin {
    position: absolute; width: 40px; height: 40px; background: var(--fl-green-primary);
    border: 3px solid white; border-radius: 50%; color: white; display: flex;
    align-items: center; justify-content: center; font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); cursor: pointer; transform: translate(-50%, -50%);
    transition: transform 0.2s; z-index: 10;
}
.map-pin:hover { transform: translate(-50%, -50%) scale(1.2); background: #050811; z-index: 20; }
.map-tooltip {
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
    background: white; padding: 15px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 250px; text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s;
    pointer-events: none; z-index: 30;
}
.map-pin:hover .map-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-10px); }
.mt-title { font-weight: 800; color: var(--fl-dark-deep); margin-bottom: 5px; display: block; }
.mt-desc { font-size: 0.85rem; color: #64748b; line-height: 1.4; }

/* Modal specific styles */
.modal-img-wrapper { position: relative; overflow: hidden; }
.hover-scale { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.modal-img-wrapper:hover .hover-scale { transform: scale(1.05); }

.info-list-check { list-style: none; padding: 0; margin: 0; }
.info-list-check li { position: relative; padding-left: 30px; margin-bottom: 12px; color: #475569; font-size: 0.95rem; }
.info-list-check li::before {
    content: '\F26A'; font-family: 'bootstrap-icons'; position: absolute;
    left: 0; top: 2px; color: var(--fl-green-primary); font-weight: bold;
}

.info-list-dot { list-style: none; padding: 0; }
.info-list-dot li { position: relative; padding-left: 20px; margin-bottom: 10px; color: #334155; }
.info-list-dot li::before {
    content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
    background: var(--fl-green-primary); border-radius: 50%;
}

.hover-shadow:hover {
    transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    border-color: var(--fl-green-primary) !important;
}
.transition-all { transition: all 0.3s ease; }
.btn-white { background-color: #fff; }
.btn-white:hover { background-color: #f8f9fa; }
.btn-hover-green:hover { background-color: var(--fl-green-primary) !important; color: white !important; border-color: var(--fl-green-primary) !important; }
.btn-hover-green:hover i { color: white !important; }

/* Modal Header Fix */
.modal-header.sticky-top { z-index: 1020; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* Responzivita Mapy */
@media (max-width: 991px) {
    .section-about-premium { padding: 80px 0; }
    .about-stats-grid { grid-template-columns: 1fr; gap: 25px; }
    .about-image-stack { margin-top: 50px; padding: 0; }
    .stack-main-image-wrapper { transform: rotate(0); }
    .stack-overlay-card { bottom: -30px; left: 20px; }

    .modal-map-body { flex-direction: column; }
    .map-sidebar { width: 100%; height: auto; max-height: 300px; border-left: none; border-top: 1px solid #e2e8f0; order: 2; }
    .terminal-map-pan-panel { height: 50vh; order: 1; }
}