/* RESET */

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

/* BODY */

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:white;
color:#222;
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0ea5e9;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}


.menu-container {
  margin-left: auto;   /* pushes menus to the right */
  display: flex;
  gap: 20px;           /* space between Ig & Contact */
}

.menu {
  text-decoration: none;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
}
/* PAGE CONTAINER */

.container{
max-width:1200px;
margin:auto;
padding:50px 20px;
}

.hero {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;

}

.hero img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0)
  );
  color: white;
}

.page-title {
  font-size: 42px;
  font-weight: 600; /* not too blocky */
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
  color: white;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* FILTER BUTTONS */

.filter-bar{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:25px;
margin-top:25px;
margin-left:25px;
}

.filter-btn{

border:1px solid #ddd;
background:white;
padding:8px 16px;
border-radius:999px;
font-size:14px;
cursor:pointer;
transition:all .2s ease;
}

.filter-btn:hover{
background:#222;
color:white;
border-color:#222;
}

/* GRID */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 300px));
  justify-content:start;
  gap:26px;
  margin-left: 25px;
}

.blog-card{
  display:block;
  position:relative;
  height:240px;
  width:100%; /* 👈 important */
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:#ddd;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  text-decoration:none;
  color:inherit;
}

.blog-card img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}

.blog-card:hover img{
transform:scale(1.05);
}

/* SOFT PHOTO GRADIENT */

.overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:18px;
background:linear-gradient(
to top,
rgba(0,0,0,0.40),
rgba(0,0,0,0.18),
rgba(0,0,0,0)
);
color:white;
}

/* TAG */

.tag{
font-size:12px;
letter-spacing:.6px;
opacity:.9;
margin-bottom:6px;
}

/* TITLE */

.overlay h3{
font-size:18px;
font-weight:600;
line-height:1.3;
}

/* MOBILE */

@media (max-width:768px){

.hero {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;

}

.navbar{
padding:16px 20px;
}

.page-title{
font-size:28px;
}

.blog-card{
height:200px;
}

/* buttons smaller */
    .filter-btn {
        font-size: 11px;
        padding: 4px 8px;
        margin:0;
        justify-self: start;
    }

}