/*
Theme Name: Modulo Theme
Theme URI: https://modulo.events
Author: Modulo
Description: Custom Architectural Event Rental Theme
Version: 2.0
*/

/* --- 1. RESET & VARIABLES --- */
:root {
    --bg-dark: #080808; 
    --bg-light: #F2F2F2; 
    --bg-warm-light: #F8F8F8; /* Light Grey for Partners */
    --bg-rose: #EBCBCB; 
    --bg-dark-rose: #261C1C;
    
    --text-white: #FFFFFF;
    --text-grey: #888888;
    --text-dark: #111111;
    
    --line-dark: rgba(255, 255, 255, 0.15);
    --line-light: rgba(0, 0, 0, 0.12);
    
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --ease-elegant: cubic-bezier(0.25, 1, 0.5, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

img { display: block; width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* --- 2. LANGUAGE SWITCHER --- */
[lang="en"] { display: none; }
body.english-mode [lang="sr"] { display: none; }
body.english-mode [lang="en"] { display: inline; }
body.english-mode div[lang="en"], 
body.english-mode p[lang="en"], 
body.english-mode h1[lang="en"], 
body.english-mode h2[lang="en"], 
body.english-mode h3[lang="en"],
body.english-mode h4[lang="en"],
body.english-mode ul[lang="en"] { display: block; }

/* --- 3. UTILITIES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; }

h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.02em; }
h1 { font-size: 4.5rem; line-height: 1.1; font-weight: 200; margin-bottom: 30px; }
h1 .bold { font-weight: 500; color: var(--bg-rose); }
h2 { font-size: 3rem; font-weight: 300; margin-bottom: 20px; }
h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: 10px; }

.eyebrow {
    font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 20px; display: block;
    color: var(--bg-rose);
}

.tilted-o { display: inline-block; transform: rotate(15deg) translateY(5px); margin-right: 2px; }

/* --- 4. ANIMATED LINES --- */
.arch-line { position: absolute; background-color: rgba(255,255,255,0.05); z-index: 0; overflow: hidden; }
.arch-line::after { content: ''; position: absolute; display: block; background-color: rgba(255,255,255,0.3); opacity: 0; }
.line-v { width: 1px; height: 100%; top: 0; }
.line-v::after { width: 100%; height: 20%; top: -20%; left: 0; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent); animation: travelDown 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; opacity: 1; }
.line-h { width: 100%; height: 1px; left: 0; }
.line-h::after { width: 20%; height: 100%; left: -20%; top: 0; background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent); animation: travelRight 5s cubic-bezier(0.4, 0, 0.2, 1) infinite 1s; opacity: 1; }
@keyframes travelDown { 0% { top: -20%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes travelRight { 0% { left: -20%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.blueprints .arch-line { background-color: rgba(0,0,0,0.05); }
.blueprints .line-v::after { background: linear-gradient(to bottom, transparent, #000, transparent); }

.line-dot { position: absolute; width: 12px; height: 12px; background-color: var(--bg-rose); border-radius: 50%; z-index: 1; opacity: 0; transform: scale(0.5); transition: opacity 0.6s ease 0.5s, transform 0.6s var(--ease-elegant) 0.5s; }
.in-view .line-dot { opacity: 1; transform: scale(1); }

.content-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease 0.4s, transform 1s var(--ease-elegant) 0.4s; }
.in-view .content-reveal { opacity: 1; transform: translateY(0); }

/* --- 5. HEADER --- */
header { padding: 25px 0; position: fixed; width: 100%; top: 0; z-index: 100; background: rgba(8, 8, 8, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-dark); }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 24px; width: auto; display: block; } 
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-links a { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: #aaa; }
.nav-links a:hover { color: var(--bg-rose); }

.lang-switcher { cursor: pointer; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 30px; color: #aaa; border: 1px solid rgba(255,255,255,0.2); padding: 8px 12px; transition: 0.3s; }
.lang-switcher:hover { color: #fff; border-color: #fff; }
.lang-switcher span.active { color: var(--bg-rose); }

.hamburger { display: none; cursor: pointer; z-index: 101; }
.hamburger span { display: block; width: 25px; height: 2px; background: #fff; margin: 5px 0; transition: 0.3s; }

.mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-dark); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.3s; }
.mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; margin-bottom: 30px; text-transform: uppercase; font-weight: 300; }

/* --- 6. HERO --- */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 80px; position: relative; overflow: hidden; }
.hero-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; width: 100%; height: 100%; align-items: center; position: relative; z-index: 2; }
.hero-text { padding-right: 60px; }
.hero-text p { font-size: 1.1rem; color: var(--text-grey); max-width: 450px; margin-bottom: 40px; padding-left: 20px; border-left: 1px solid var(--bg-rose); }
.hero-img-wrap { height: 70vh; width: 100%; position: relative; }
.hero-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); opacity: 0.7; transition: all 0.8s ease; }
.hero:hover .hero-img { opacity: 1; filter: grayscale(0%) contrast(1); }
.hero .line-v { left: 54.5%; } 
.hero .line-h { bottom: 0; } 
.hero .line-dot { top: auto; bottom: -6px; left: 54.5%; margin-left: -6px; }

/* --- 7. BUTTONS --- */
.btn-outline { display: inline-block; border: 1px solid rgba(255,255,255,0.3); padding: 14px 30px; font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; margin-top: 30px; position: relative; z-index: 2; }
.btn-outline:hover { background: var(--bg-rose); border-color: var(--bg-rose); color: var(--text-dark); }
.btn-dark { display: inline-block; background: var(--text-dark); color: #fff; padding: 14px 30px; font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; margin-top: 30px; position: relative; z-index: 2; }
.btn-dark:hover { background: transparent; border: 1px solid var(--text-dark); color: var(--text-dark); }

/* --- 8. CATEGORIES (Minimal Icons) --- */
.categories { border-bottom: 1px solid var(--line-dark); }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); background-color: var(--line-dark); gap: 1px; border-top: 1px solid var(--line-dark); }
a.cat-item { display: block; background-color: var(--bg-dark); padding: 80px 20px; text-align: center; transition: 0.3s; cursor: pointer; color: var(--text-white) !important; }
a.cat-item:hover { background-color: #0f0f0f; }
.cat-item svg { width: 32px; height: 32px; stroke: #FFFFFF !important; stroke-width: 1px; fill: none !important; margin-bottom: 25px; transition: 0.3s; }
a.cat-item:hover svg { stroke: var(--bg-rose) !important; }
.cat-item h4 { color: #888; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: 0.3s; }
a.cat-item:hover h4 { color: #fff; }

/* --- 9. BLUEPRINTS --- */
.blueprints { padding: 140px 0; position: relative; }
.blueprints .line-v { left: 0; }
.blueprint-item { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 140px; align-items: center; position: relative; z-index: 2; }
.blueprint-item:nth-child(even) { direction: rtl; }
.blueprint-item:nth-child(even) .col-text { direction: ltr; padding-left: 60px; }
.bp-img-wrap { height: 500px; position: relative; overflow: hidden; }
.bp-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.9); transition: all 0.8s ease; }
.blueprint-item:hover .bp-img { filter: grayscale(0%) brightness(1); transform: scale(1.02); }
.bp-list { margin: 30px 0; border-top: 1px solid var(--line-dark); padding-top: 20px; }
.bp-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: #888; }
.bp-list li span { color: #fff; font-weight: 500; }
.link-text { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; border-bottom: 1px solid var(--bg-rose); padding-bottom: 5px; }
.link-text:hover { color: var(--bg-rose); }

/* --- 10. PRODUCTS --- */
.products { background-color: var(--bg-light); color: var(--text-dark); padding: 120px 0; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); background-color: rgba(0,0,0,0.1); gap: 1px; border: 1px solid rgba(0,0,0,0.1); }
.product-card { background-color: var(--bg-light); padding: 40px 30px; transition: 0.3s; text-align: left; display: flex; flex-direction: column; height: 100%; }
.product-card:hover { background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); z-index: 2; position: relative;}
.p-img-wrap { height: 220px; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; }
.p-img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(100%); transition: all 0.6s ease; }
.product-card:hover .p-img { transform: scale(1.05); filter: grayscale(0%); }
.product-details { flex-grow: 1; display: flex; flex-direction: column; }
.product-card h4 { font-size: 1rem; margin-bottom: 5px; font-weight: 700; text-transform: uppercase; color: var(--text-dark); letter-spacing: 0.05em; }
.product-card .price { font-size: 0.9rem; color: #666; font-weight: 500; margin-bottom: 15px; }
.product-purpose { font-size: 0.75rem; color: #777; margin-bottom: 15px; display: flex; align-items: flex-start; line-height: 1.4; }
.accent-dot-small { width: 6px; height: 6px; background-color: var(--bg-rose); border-radius: 50%; margin-right: 8px; flex-shrink: 0; margin-top: 5px; }
details { width: 100%; margin-top: auto; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px; }
details summary { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; list-style: none; color: var(--text-dark); outline: none; display: flex; justify-content: space-between; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-weight: 400; }
details[open] summary::after { content: '-'; }
.product-specs { font-size: 0.8rem; color: #555; line-height: 1.6; padding: 15px 0; margin-bottom: 20px; }
.btn-add { width: 100%; background: var(--text-dark); color: #fff; border: 1px solid var(--text-dark); padding: 12px; font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; cursor: pointer; transition: 0.3s; display: block; text-align: center; margin-top: 10px; }
.btn-add:hover { background: var(--bg-rose); border-color: var(--bg-rose); color: var(--text-dark); }
.btn-add.added { background: var(--bg-rose); border-color: var(--bg-rose); color: var(--text-dark); cursor: default; }

/* --- 11. PARTNERS (Light Grey) --- */
.partners { background-color: var(--bg-warm-light); color: var(--text-dark); padding: 100px 0; border-top: none; }
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.partners-img-wrap { height: 450px; overflow: hidden; position: relative; }
.partners-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.5s ease; }
.partners:hover .partners-img { filter: grayscale(0%); transform: scale(1.02); }
.partners-content { text-align: left; }
.partners h2 { font-size: 2.5rem; margin-bottom: 20px; font-weight: 300; color: var(--text-dark); }
.partners p { font-size: 1rem; opacity: 0.8; margin-bottom: 40px; color: #555; max-width: 450px; }
.btn-partner { display: inline-block; background: transparent; color: var(--text-dark); border: 1px solid var(--text-dark); padding: 14px 30px; font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; transition: 0.3s; }
.btn-partner:hover { background: var(--text-dark); color: #fff; }

/* --- 12. AI FORM --- */
.ai-section { padding: 140px 0; border-top: 1px solid var(--line-dark); position: relative; background: var(--bg-dark); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; z-index: 2;}
.minimal-input, .minimal-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid #333; padding: 20px 0; color: #fff; font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 30px; transition: 0.3s; }
.minimal-textarea { resize: none; font-family: var(--font-body); }
.minimal-input:focus, .minimal-textarea:focus { border-color: var(--bg-rose); }
.input-label { display: block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #666; font-weight: 700; margin-bottom: 10px; }

/* --- 13. AI RESULT (BLENDED STYLE) --- */
.ai-result-wrapper { margin-top: 60px; opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease forwards; border-top: 1px solid var(--line-dark); padding-top: 40px; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.ai-result-box { background: transparent; color: var(--text-white); padding: 0; border: none; font-family: var(--font-body); }
.ai-header { margin-bottom: 30px; }
.ai-label { font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; color: var(--bg-rose); display: block; margin-bottom: 20px; }
.ai-body { font-size: 1.1rem; line-height: 1.8; color: var(--text-white); font-weight: 300; white-space: pre-wrap; margin-bottom: 40px; }
.ai-body strong { color: #fff; font-weight: 600; border-bottom: 1px solid var(--line-dark); }
.ai-footer { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.ai-contact-btn { display: inline-block; border: 1px solid rgba(255,255,255,0.3); padding: 14px 30px; font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--text-white); background: transparent; transition: 0.3s; text-decoration: none; }
.ai-contact-btn:hover { background: var(--bg-rose); border-color: var(--bg-rose); color: var(--text-dark); }
.ai-partner-link { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-grey); text-decoration: none; transition: 0.3s; font-weight: 600; }
.ai-partner-link:hover { color: var(--bg-rose); }

/* --- 14. FOOTER --- */
footer { background-color: var(--bg-rose); color: var(--text-dark); padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; }
.footer-links a { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.footer-logo img { filter: invert(1); }

/* --- 15. MOBILE --- */
@media (max-width: 900px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.2rem; }
    .arch-line { display: none !important; }
    .line-dot { display: none !important; }
    
    .hero-content { grid-template-columns: 1fr; }
    .hero-text { padding-right: 0; }
    .hero-img-wrap { height: 40vh; margin-top: 40px; }
    
    /* Categories - Compact on Mobile */
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    a.cat-item { padding: 40px 10px; }
    .cat-item svg { width: 28px; height: 28px; margin-bottom: 15px; } 
    .cat-item h4 { font-size: 0.7rem; }

    .form-grid { grid-template-columns: 1fr; }
    
    /* Products - 2 Columns */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
    .product-card { padding: 20px 10px; } 
    .p-img-wrap { height: 130px; margin-bottom: 15px; }
    .product-purpose { display: none; } 
    .product-specs { padding: 10px 0; margin-bottom: 10px; }
    
    .blueprint-item, .blueprint-item:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
    .col-text { padding-left: 0 !important; }
    
    /* Partners Mobile - Stacked */
    .partners-grid { grid-template-columns: 1fr; gap: 30px; }
    .partners-img-wrap { height: 250px; order: -1; }
    .partners-content { text-align: left; padding: 0 10px; }

    .nav-links { display: none; }
    .hamburger { display: block; }
    .manifesto .line-h, .manifesto .line-dot { top: 170px; }
    
    .mobile-menu .lang-switcher { margin-left: 0; margin-top: 20px; color: #fff; border-color: #fff; }
}