/* ------------------- Font generali ------------------- */
body { 
    font-family: 'Lora', serif; 
    margin:0; 
    padding:0; 
    line-height:1.6; 
    background:#f9f9f9; 
}
h2, h3 { 
    font-family: 'Playfair Display', serif; 
}

/* ------------------- Header ------------------- */
header {
    background: linear-gradient(to bottom, rgba(44,62,80,0.9), rgba(44,62,80,0.8));
    padding:20px;
    color:#fff;
}

/* Contenitore interno header: logo + testo */
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1000px;
    margin:auto;
    flex-wrap:wrap; /* per mobile */
}

/* Logo a sinistra */
.logo {
    flex:0 0 auto;
    padding:5px 10px;
    background: rgba(245,240,225,0.9); /* sfondo beige semi-trasparente */
    border-radius:10px;
}
.logo-img {
    max-width:200px; /* leggermente più grande */
    height:auto;
    display:block;
}

/* Testo centrale */
.header-text {
    flex:1 1 auto;
    text-align:center;
}
.header-text p {
    font-size:1.5em; /* più grande */
    margin:0;
    font-weight:700;
}

/* ------------------- Navbar ------------------- */
nav { 
    text-align:center; 
    background: rgba(52,73,94,0.9); 
    position:sticky; 
    top:0; 
    z-index:10; 
}
nav a { 
    color:#fff; 
    text-decoration:none; 
    padding:15px 20px; 
    display:inline-block; 
}
nav a:hover { 
    background:#1abc9c; 
}

/* ------------------- Hero ------------------- */
#hero {
    height:400px;
    background-image: url('images/hero.jpg'); /* inserisci la tua foto */
    background-position:center;
    background-size:cover;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
}
#hero::before {
    content:'';
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-color: rgba(0,0,0,0.3); /* overlay leggermente scuro */
    z-index:1;
}
.hero-content { 
    position:relative; 
    z-index:2; 
    max-width:800px; 
    padding:20px; 
}
#hero h2 { 
    font-size:2em; 
    margin-bottom:20px; 
    color:white; 
    text-shadow:2px 2px 8px rgba(0,0,0,0.7); 
}
#hero .cta { 
    margin:5px; 
    padding:12px 25px; 
    font-size:1em; 
    border-radius:8px; 
    background-color:#1abc9c; 
    color:white; 
    text-decoration:none; 
    transition: transform 0.3s, background-color 0.3s; 
}
#hero .cta:hover { 
    background-color:#16a085; 
    transform:scale(1.05); 
}

/* ------------------- Sezioni ------------------- */
section { 
    padding:40px 20px; 
    max-width:1000px; 
    margin:auto; 
}
.apartments, .book-section { 
    display:flex; 
    flex-wrap:wrap; 
    gap:20px; 
    justify-content:center; 
}
.card { 
    background:#fff; 
    padding:20px; 
    border-radius:10px; 
    width:300px; 
    box-shadow:0 0 10px rgba(0,0,0,0.1); 
}
.card img { 
    width:100%; 
    border-radius:5px; 
}
#chi-siamo img, #percorsi img { 
    width:100%; 
    border-radius:10px; 
    margin-top:20px; 
}
blockquote { 
    font-style:italic; 
    color:#2c3e50; 
    border-left:4px solid #1abc9c; 
    padding-left:15px; 
    margin:15px 0; 
}

/* ------------------- Footer ------------------- */
footer { 
    background:#34495e; 
    color:#fff; 
    text-align:center; 
    padding:20px; 
    margin-top:40px; 
}

/* ------------------- Responsive mobile ------------------- */
@media (max-width: 768px){
    /* Header */
    .header-inner { flex-direction:column; align-items:center; }
    .logo-img { max-width:150px; margin-bottom:10px; }
    .header-text p { font-size:1.3em; }

    /* Navbar */
    nav a { display:block; padding:10px 0; }

    /* Hero */
    #hero { height:300px; }
    #hero h2 { font-size:1.5em; }

    /* Cards */
    .apartments, .book-section { flex-direction:column; gap:15px; }
    .card { width:100%; }
}

@media (max-width: 480px){
    .logo-img { max-width:120px; }
    .header-text p { font-size:1.1em; }
    #hero { height:250px; }
    #hero h2 { font-size:1.3em; }
    .cta { padding:10px 20px; font-size:0.9em; }
}