/* ==========================================================================
   1. CORE RESET & TAILWIND REPLACEMENTS (Esențial pentru layout)
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #111827; /* text-gray-900 */
    -webkit-font-smoothing: antialiased;
}

/* Utilitare de structură */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

@media (min-width: 768px) {
    .md\:my-12 { margin-top: 3rem; margin-bottom: 3rem; }
    .md\:mb-20 { margin-bottom: 5rem; }
    .md\:p-12 { padding: 3rem; }
}

/* Tipografie */
.text-5xl { font-size: 3rem; line-height: 1; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.font-extrabold { font-weight: 800; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.italic { font-style: italic; }
.text-gray-900 { color: #111827; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-500 { color: #6b7280; }
.text-indigo-600 { color: #4f46e5; }
.leading-relaxed { line-height: 1.625; }

/* Grid System */
.grid { display: grid; width: 100%; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-8 { gap: 2rem; }
.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Pe mobil: o singură coloană (deasupra) */
    gap: 2rem;
    align-items: center;
    width: 100%;
}

@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* Pe desktop: două coloane (lângă) */
    }
    
    /* Forțăm ordinea dacă ai folosit clasele md-order */
    .md-order-1 { order: 1 !important; }
    .md-order-2 { order: 2 !important; }
}
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Componente (Cards & Borders) */
section { background-color: white; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.border-t { border-top: 1px solid #e5e7eb; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ==========================================================================
   2. WHEEL & VIDEO (Reparat pentru orientare orizontală)
   ========================================================================== */
.wheel-container {
    position: relative;
    width: 85vw;
    height: 85vw;
    max-width: 500px;
    max-height: 500px;
    aspect-ratio: 1 / 1;
    margin: 2rem auto;
    display: block; 
    overflow: visible; 
}

.rim {
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 10px solid #000000;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.menu-item {
    position: absolute;
    top: 0; 
    left: 0;
    margin: 0;
    width: 75px; /* Mărime mobil */
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    visibility: visible !important;
    
    /* LINIA MAGICĂ: translate-ul din JS + rotația inversă */
    /* Folosim o singură declarație transform pentru a nu se suprascrie */
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--wheel-rotation, 0deg)));
    
    /* Tranziție doar pentru transform, utilă la hint-ul de 15 grade */
    transition: transform 0.1s linear; 
}

@media (min-width: 768px) {
    .menu-item {
        width: 110px;
        height: 110px;
    }
}

#center-logo {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 8rem; 
    height: 8rem;
    transform: translate(-50%, -50%); 
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    /* Logo-ul central va primi rotația inversă direct din JS pe element.style */
}

.menu-image-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center;
    border-radius: 50%; 
    z-index: 5; 
}

.menu-text-wrapper { 
    position: relative; 
    z-index: 8; 
    background: rgba(0,0,0,0.7); 
    color: white; 
    padding: 6px 12px; 
    border-radius: 9999px; 
    opacity: 0; 
    transition: 0.3s; 
    text-align: center;
    pointer-events: none; /* Să nu interfereze cu click-ul pe bulină */
}

.menu-item:hover .menu-text-wrapper { 
    opacity: 1; 
}

.spoke, .spoke-thick { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform-origin: center top; 
    background-color: #6b7280; 
}
.spoke { width: 2.5px; z-index: 3; }
.spoke-thick { width: 5px; z-index: 2; }

/* Video & Images */
.story-image { width: 100%; height: 250px; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-green {
    display: inline-block; background-color: #16a34a; color: white !important;
    padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 700;
    text-decoration: none; transition: background 0.3s;
}
.btn-green:hover { background-color: #15803d; }

/* Footer specific */
footer { width: 100%; clear: both; background: white; border-top: 1px solid #e5e7eb; padding: 2rem 0; margin-top: 3rem; }

.site-body { background-color: #f3f4f6; display: flex; flex-direction: column; align-items: center; padding: 1rem; font-family: sans-serif; }
.main-content { width: 100%; max-width: 1150px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.header-section { text-align: center; margin: 3rem 0; }
.main-title { font-size: 3rem; font-weight: 800; color: #111827; }
.main-subtitle { color: #4b5563; margin-top: 0.75rem; font-size: 1.25rem; font-style: italic; }

.story-section { width: 100%; background: white; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); margin-bottom: 3rem; box-sizing: border-box; }
.grid-container { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.border-t { border-top: 1px solid #e5e7eb; padding-top: 2rem; }

.text-block { display: flex; flex-direction: column; gap: 1rem; }
.p-bold { font-weight: bold; font-size: 1.125rem; line-height: 1.6; }
.h3-bold { font-size: 1.25rem; font-weight: bold; color: #1f2937; }
.p-highlight { font-weight: 600; color: #4f46e5; }
.btn-wrapper { padding-top: 1rem; }

@media (min-width: 768px) {
    .grid-container { grid-template-columns: 1fr 1fr; }
    .md-order-1 { order: 1; }
    .md-order-2 { order: 2; }
    .story-section { padding: 3rem; }
}

.video-container { display: block; width: 100%; max-width: 300px; margin: 0 auto; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s; }
.video-container:hover { transform: scale(1.05); }
.lazy-video { width: 100%; height: auto; display: block; }
.section-divider { margin: 3rem 0 2rem; text-align: center; }
.section-title { font-size: 1.875rem; font-weight: 800; color: #111827; }
.footer-note { border-top: 1px solid #e5e7eb; margin-top: 1.5rem; padding-top: 1rem; font-size: 0.875rem; color: #6b7280; font-style: italic; }