/*
Theme Name: Maldivoff Studio
Theme URI: http://maldivoffclub.ru
Author: Maldivoff Club
Author URI: http://maldivoffclub.ru
Description: Стильный шаблон на основе дизайна AI Studio с интеграцией галереи Maldivoff Club.
Version: 1.0
text-domain: maldivoff-studio
*/

:root {
    --gold: #C5A059;
    /* Цвет из вашего лого */
    --dark: #0F141A;
    /* Глубокий океан */
    --sand: #F9F8F4;
    /* Светлый фон */
    --text: #333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--sand);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
.serif {
    font-family: 'Cormorant Garamond', serif;
}

/* HEADER */
header.site-header {
    position: fixed;
    width: 100%;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: 0.3s;
    mix-blend-mode: difference;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

nav.main-nav a {
    color: white;
    text-decoration: none;
    margin-left: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* HERO SECTION */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
    /* Ensure gallery doesn't spill out */
    background-color: var(--dark);
    /* Fallback */
    background-size: cover;
    background-position: center;
}

/* Ensure global gallery styles usually work, but here we force full height/width for the background layer */
.hero .hero-background .grok-gallery-wrapper,
.hero .hero-background .gallery-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
}

/* Hide the gallery thumbnails in the Hero if desirable, or keep them. 
   User request: "Gallery should be background". Ideally thumbs are hidden or at bottom. 
   If Swiper is full screen, thumbs (if configured) will be at bottom. 
   We leave them as is for now, but ensure z-index is lower than overlay. 
*/

.hero::after {
    /* We don't need this pseudo-element anymore if we use the .hero-background div with its own overlay */
    content: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    /* Above gallery (z-index 1 or 0) */
    max-width: 800px;
    animation: fadeIn 2s ease;
    padding: 20px;
    /* Add padding for mobile safety */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Improve readability over images */
}

.hero h1 {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 20px;
    font-style: italic;
}

.sub-hero {
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: var(--gold);
}

.btn {
    padding: 15px 40px;
    border: 1px solid var(--gold);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
    font-size: 12px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    /* Slight bg for contrast */
}

.btn:hover {
    background: var(--gold);
    color: var(--dark);
}

/* ABOUT */
.about {
    padding: 100px 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.watermark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 8rem;
    color: rgba(0, 0, 0, 0.05);
    line-height: 0.8;
    position: absolute;
    left: -50px;
    z-index: 0;
    pointer-events: none;
}

.about-text {
    z-index: 1;
    position: relative;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: var(--dark);
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
}

/* GALLERY (MASONRY) */
.gallery-section {
    padding: 50px;
    background: white;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.5rem;
    color: var(--dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: 300px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    filter: grayscale(20%);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.gallery-item:nth-child(2) {
    grid-row: span 2;
}

.gallery-item:nth-child(5) {
    grid-column: span 2;
}

/* LOCATIONS */
.locations {
    padding: 100px 50px;
    background: var(--dark);
    color: white;
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.loc-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.loc-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--gold);
}

.loc-card p {
    opacity: 0.7;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.loc-link {
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}

/* FOOTER */
footer.site-footer {
    text-align: center;
    padding: 80px 20px;
    background: #0a0e12;
    color: #555;
    font-size: 12px;
    letter-spacing: 1px;
}

.footer-logo {
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .about {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 3rem;
    }

    header.site-header {
        padding: 20px;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.8);
    }

    nav.main-nav {
        margin-top: 20px;
    }

    nav.main-nav a {
        margin: 0 10px;
    }
}

/* WordPress Core Alignments */
.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}