/* Optimizare reset */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

:root {
  --bg: #181C2D;
  --bg-soft: #6B4748;
  --panel: #6B4748;
  --text: #f5f5f5;
  --muted: #bababa;
  --accent: #181C2D;
  --accent-strong: #181C2D;
  --border: #181C2D;
}

* { box-sizing: border-box; border-radius: 0 !important; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 95%; display: block; object-fit: cover; }

.container { width: min(1120px, calc(100% - 1.25rem)); margin: 0 auto; }

/* Header & Nav */
.site-header { position: sticky; top: 0; z-index: 10; background: #6B4748; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; font-family: 'Montserrat', sans-serif; text-transform: uppercase; }
.brand-logo { width: 50px; height: 50px; object-fit: contain; }
.nav-links { display: flex; gap: 1rem; }
.nav-links a { color: var(--muted); padding: 0.35rem 0.6rem; }
.nav-links a.active, .nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.08); }

/* Typography */
h1, h2, h3 { line-height: 1.2; margin-top: 0; font-family: 'Montserrat', sans-serif; font-weight: 400; }
h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); color: #181C2D; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #181C2D; }

/* dōTERRA Section - Independență imagine/text */
.doterra-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 768px) { .doterra-gallery-grid { grid-template-columns: 1fr; } }

.doterra-card { 
    display: block; 
    background: transparent; 
    border: none; 
    overflow: visible; 
}

/* Imagine fixă în card */
.doterra-card img { 
    width: 95%; 
    height: 320px; 
    object-fit: cover; 
    display: block; 
    transition: transform .35s ease; 
}
.doterra-card:hover img { transform: scale(1.03); }

.doterra-card-body { 
    border: 1px solid #4d3737; 
    border-top: none; 
    background: transparent; 
    padding: 60px 30px 40px; 
    text-align: center; 
}
.doterra-card-body h3 { color: #ffffff; font-size: 2rem; }
.doterra-card-body p { margin: 25px 0; color: #ffffff; font-size: 1rem; line-height: 1.8; }

/* Butoane */
.doterra-button {
  display: inline-block;
  margin: 0 auto;
  padding: 14px 38px;
  border: 1px solid #d48337;
  color: #d48337;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Montserrat', sans-serif;
  transition: .3s;
}
.doterra-button:hover { background: #d48337; color: #fff; }

/* Restul secțiunilor (Hero, Carduri, Footer) păstrate conform structurii tale */
/* Modificări pentru layout-ul general și carduri */
.hero-section { padding: 4.5rem 0 3rem; }

.feature-card, .info-card, .album-card, .album-page-card { 
    background: var(--panel); 
    border: 1px solid var(--border); 
    padding: 1.2rem; 
}

/* Stilul specific pentru layout-ul orizontal al album-card */
.album-card {
    display: flex;
    align-items: center; /* Aliniere verticală */
    gap: 1.5rem;         /* Spațiere între imagine și text */
    text-decoration: none;
    color: inherit;
}

/* Asigurăm imaginea mai mică și controlată */
.album-card img {
    width: 120px;        /* Poți ajusta valoarea aici */
    height: 120px;
    object-fit: cover;
    border-radius: 4px;  /* Opțional, pentru un aspect mai fin */
    flex-shrink: 0;      /* Menține dimensiunea imaginii fixă */
}

.album-card-body {
    flex: 1;             /* Textul ocupă spațiul rămas */
}

/* Footer-ul rămâne neschimbat */
.site-footer { 
    border-top: 1px solid var(--border); 
    padding: 1.25rem 0 2rem; 
    text-align: center; 
    color: var(--muted); 
}

/* Optimizare imagini pentru mobil */
@media (max-width: 620px) {
    .doterra-card img { 
        height: 200px !important; /* Reducem înălțimea pentru mobil */
    }
    
    .doterra-card-body {
        padding: 20px 15px !important; /* Reducem și padding-ul pentru a economisi spațiu */
    }
    
    .doterra-card-body h3 {
        font-size: 1.5rem !important; /* Micșorăm puțin și titlul pe mobil */
    }
}

/* Corecție pentru imaginea din secțiunea Hero */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrează imaginea */
    max-width: 550px;    /* Limitează lățimea cardului */
    margin: 0 auto;      /* Centrează tot cardul în grid */
}
/* Mărirea distanței dintre imagine și text în feature-card */
.feature-card-body {
    margin-top: 20px; /* Crește această valoare (ex: 30px sau 40px) pentru a împinge textul și mai jos */
    padding-top: 15px; /* Spațiu suplimentar în interiorul cardului */
}

.feature-card img {
    height: 500px;       /* Setează o înălțime fixă */
    width: 95%;         /* Se adaptează la lățimea cardului de 500px */
    object-fit: cover;
}

/* Ajustare pentru ecranul desktop (Hero Grid) */
@media (min-width: 981px) {
    .hero-grid {
        grid-template-columns: 1fr 450px; /* Imaginea ocupă mai puțin spațiu față de text */
        gap: 4rem;
    }
}

/* Adăugare umbră pentru imaginea din carusel */
.feature-card img {
    height: 450px;
    width: 95%;
    object-fit: cover;
    /* Umbra: deplasare orizontală, verticală, blur, răspândire și culoare */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); 
    border-radius: 8px; /* Opțional: margini ușor rotunjite pentru un aspect mai fin */
}

/* Stil de bază pentru toate butoanele sociale */
.btn-social {
    padding: 6px 30px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff !important; /* Text alb */
    border-radius: 5px;       /* Colțuri ușor rotunjite */
    transition: opacity 0.3s ease;
    display: inline-block;
}

/* Efect de hover pentru a vedea că butonul este activ */
.btn-social:hover {
    opacity: 0.8;
}

/* Culoarea specifică Facebook */
.btn-social.facebook {
    background-color: #4267B2;
}

/* Culoarea specifică WhatsApp */
.btn-social.whatsapp {
    background-color: #19ab05;
}