/* css/main.css */
@import "reset.css";

/* ==== VARIABLES ==== */
:root{
  --clr-bg:      #0f0f12;
  --clr-primary:#d4af37;      /* gold */
  --clr-accent: #ff6b6b;      /* coral */
  --clr-text:   #f5f5f5;
  --clr-muted:  #b0b0b0;
  --ff-sans:    'Inter', system-ui, sans-serif;
  --ff-serif:   'Playfair Display', serif;
  --radius:     .75rem;
  --gap:        2rem;
  --max-w:      1200px;
}

/* ==== BASE ==== */
html{
  scroll-behavior:smooth;
  font-size:16px;
}
body{
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:var(--ff-sans);
  line-height:1.6;
}
a{
  color:var(--clr-primary);
  text-decoration:none;
  transition:color .3s;
}
a:hover{color:var(--clr-accent);}

/* ==== TYPOGRAPHY ==== */
h1,h2,h3{
  font-family:var(--ff-serif);
  margin-bottom:.75rem;
  line-height:1.2;
}
h1{font-size:2.8rem;}
h2{font-size:2.2rem;}
h3{font-size:1.6rem;}
p,ul,ol,blockquote,table{
  margin-bottom:1rem;
}
blockquote{
  font-style:italic;
  border-left:4px solid var(--clr-primary);
  padding-left:1rem;
  color:var(--clr-muted);
}

/* ==== LAYOUT ==== */
.container{
  width:90%;
  max-width:var(--max-w);
  margin:auto;
  padding:2rem 0;
}
header,footer{
  background:rgba(0,0,0,.4);
  padding:1.5rem 0;
}
nav ul{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
nav a{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ==== GRID / FLEX ==== */
.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ==== IMAGES ==== */
img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  transition:transform .4s;
}
img:hover{transform:scale(1.03);}

/* ==== BUTTONS ==== */
.btn{
  display:inline-block;
  background:var(--clr-primary);
  color:#000;
  padding:.75rem 1.5rem;
  border-radius:50px;
  font-weight:600;
  transition:background .3s;
}
.btn:hover{background:var(--clr-accent);}

/* ==== FORMS ==== */
form{
  max-width:500px;
  margin:auto;
}
label{
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
}
input,textarea{
  width:100%;
  padding:.75rem;
  border-radius:var(--radius);
  background:#222;
  border:1px solid #444;
  color:var(--clr-text);
  margin-bottom:1rem;
}
button{
  background:var(--clr-primary);
  color:#000;
  border:none;
  padding:.75rem 1.5rem;
  border-radius:50px;
  cursor:pointer;
  font-weight:600;
}
button:hover{background:var(--clr-accent);}

/* ==== TABLES ==== */
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:.75rem;
  text-align:left;
  border-bottom:1px solid #444;
}
th{background:rgba(212,175,55,.2);}

/* ==== SPECIFIC COMPONENTS ==== */
.hero{
  position:relative;
  min-height:80vh;
  background:url('../image1.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  text-align:center;
  color:#fff;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.9));
}
.hero > *{
  position:relative;
  z-index:1;
}
.hero h1{font-size:3.5rem; margin-bottom:1rem;}
.hero p{font-size:1.25rem;}

/* Gallery */
.gallery-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}

/* Testimonials */
.testimonial{
  background:rgba(255,255,255,.05);
  padding:1.5rem;
  border-radius:var(--radius);
  font-style:italic;
}
.testimonial::before{
  content:"“";
  font-size:4rem;
  color:var(--clr-primary);
  line-height:0;
}

/* FAQ */
details{
  background:rgba(255,255,255,.05);
  margin-bottom:.5rem;
  border-radius:var(--radius);
  overflow:hidden;
}
summary{
  padding:1rem;
  cursor:pointer;
  font-weight:600;
  background:rgba(212,175,55,.2);
}
details[open] summary{
  background:var(--clr-primary);
  color:#000;
}
details p{
  padding:1rem;
}

/* Footer */
footer{
  text-align:center;
  font-size:.9rem;
  color:var(--clr-muted);
}