@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --blue:#0e54a4;
  --blue-dark:#073568;
  --sky:#eaf5ff;
  --gold:#d99b2b;
  --text:#15324f;
  --muted:#607487;
  --paper:#fff;
  --line:rgba(18,67,110,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:"DM Sans",Arial,sans-serif;
  line-height:1.65
}
img{display:block;width:100%}
a{color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1rem clamp(1.25rem,5vw,5rem);
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  font:700 1.45rem "Playfair Display",Georgia,serif
}
.brand small{
  display:block;
  color:var(--gold);
  font:600 .72rem "DM Sans",Arial,sans-serif;
  letter-spacing:.04em
}
.brand-mark{
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  color:white;
  background:var(--blue);
  border-radius:50%
}
nav{display:flex;gap:1.5rem}
nav a{
  text-decoration:none;
  font-size:.83rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
nav a:hover{color:var(--blue)}

.hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  padding:clamp(3rem,7vw,7rem);
  background:url("images/hero-grekland.jpg") center/cover no-repeat
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,43,88,.92) 0%,rgba(4,43,88,.63) 43%,rgba(4,43,88,.08) 75%)
}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:650px;
  color:white
}
.eyebrow{
  margin:0 0 .75rem;
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}
h1,h2,h3{
  margin-top:0;
  font-family:"Playfair Display",Georgia,serif;
  line-height:1.12
}
h1{
  margin-bottom:1.3rem;
  font-size:clamp(3.2rem,6vw,6rem)
}
.hero-copy>p:not(.eyebrow){
  max-width:580px;
  margin-bottom:2rem;
  font-size:1.1rem
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.button{
  display:inline-block;
  padding:.95rem 1.35rem;
  border:1px solid white;
  border-radius:.4rem;
  text-decoration:none;
  font-weight:700
}
.primary{background:var(--blue);border-color:var(--blue)}
.secondary{background:rgba(255,255,255,.06)}

.highlights{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0 clamp(1.25rem,5vw,5rem);
  border-bottom:1px solid var(--line)
}
.highlights article{
  padding:2.5rem;
  text-align:center;
  border-right:1px solid var(--line)
}
.highlights article:last-child{border-right:0}
.highlights span{font-size:2rem}
.highlights h2{margin:.5rem 0;font-size:1.35rem}
.highlights p{margin:0;color:var(--muted)}

.content-section,.destination-section,.travel-tips{
  padding:clamp(4rem,8vw,8rem) clamp(1.25rem,5vw,5rem)
}
.section-heading{
  max-width:850px;
  margin-bottom:2.6rem
}
.section-heading h2{
  margin-bottom:0;
  font-size:clamp(2.4rem,5vw,4.7rem)
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}
.card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:.65rem;
  background:white;
  box-shadow:0 18px 55px rgba(21,50,79,.1)
}
.card img{height:250px;object-fit:cover}
.card-body{padding:1.5rem}
.tag{
  margin:0 0 .45rem;
  color:var(--blue);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}
.card h3{margin-bottom:.65rem;font-size:1.55rem}
.card-body>p:last-child{margin-bottom:0;color:var(--muted)}

.destination-section{background:var(--sky)}
.destination-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}
.destination-grid a{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:1.4rem;
  border:1px solid rgba(14,84,164,.16);
  border-radius:.5rem;
  background:white;
  text-decoration:none
}
.destination-grid a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,84,164,.12)}
.destination-grid strong{color:var(--blue);font:700 1.35rem "Playfair Display",Georgia,serif}
.destination-grid span{color:var(--muted)}

.travel-tips{background:#fff}
.tips-copy{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.3rem
}
.tips-copy p{
  margin:0;
  padding:1.5rem;
  border-top:3px solid var(--gold);
  background:#f8fbfe
}
.tips-copy a{
  color:var(--blue);
  font-weight:700;
  text-underline-offset:3px
}

footer{
  padding:4rem 1.5rem;
  color:white;
  background:linear-gradient(135deg,#063462,#0e54a4);
  text-align:center
}
.footer-brand{
  font:700 2rem "Playfair Display",Georgia,serif
}
.sale{
  margin:.8rem 0 .2rem;
  font-size:1.45rem;
  font-weight:700
}
footer p{margin:.2rem 0}
footer a{color:#ffd377;font-weight:700}

@media(max-width:900px){
  nav{display:none}
  .highlights,.card-grid,.destination-grid,.tips-copy{grid-template-columns:1fr}
  .highlights article{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  h1{font-size:3.2rem}
  .hero{padding:4rem 1.3rem}
  .content-section,.destination-section,.travel-tips{padding:4rem 1.2rem}
  .card img{height:220px}
}