/* Base styles for .rounded-image moved out of inline CSS */
.rounded-image{
  border-radius:30px;
  overflow:hidden;
  background:#111;
  min-height:350px;
  max-height:500px;
}

.rounded-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blog-section .section-title{
  margin-bottom:30px;
  text-align:center;
}

.blog-grid{
  display:grid;
  grid-template-columns:minmax(0,620px);
  justify-content:center;
  gap:20px;
  align-items:stretch;
}

.blog-card{
  display:flex;
  width:100%;
  min-width:0;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(216,177,90,.35);
  border-radius:18px;
  background:#111;
  box-shadow:0 16px 38px rgba(0,0,0,.35);
}

.blog-card__link{
  display:flex;
  flex:1;
  width:100%;
  height:100%;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}

.blog-card{
  transition:transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(0,0,0,.48);
}

.blog-card:focus-within{
  outline:2px solid #d8b15a;
  outline-offset:3px;
}

.blog-card__image{
  position:relative;
  height:185px;
  flex:0 0 auto;
  background:#1b1b1b;
}

.blog-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

.blog-card__category{
  position:absolute;
  top:16px;
  left:16px;
  padding:7px 12px;
  border-radius:999px;
  background:#d8b15a;
  color:#17130a;
  font-size:10px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.blog-card__content{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:20px 18px 16px;
}

.blog-card__content h3{
  margin:0 0 12px;
  color:#f2e4c6;
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  font-weight:500;
  line-height:1.15;
}

.blog-card__content p{
  color:#c9c9c9;
  font-size:13px;
  line-height:1.75;
}

.blog-card__meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#d8b15a;
  font-size:9px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

@media (max-width:900px){
  .blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .blog-card{
    grid-column:1 / -1;
    width:min(100%,620px);
    justify-self:center;
  }
  .blog-card__image{ height:245px; }
}

@media (max-width:600px){
  .blog-grid{ grid-template-columns:minmax(0,1fr); }
  .blog-card{ grid-column:auto; }
  .blog-card__image{ height:190px; }
  .blog-card__content{ padding:20px 18px 16px; }
  .blog-card__content h3{ font-size:27px; }
  .blog-card__meta{ font-size:9px; }
}

/* Smooth scrolling and header offset for anchored sections */
:root{
  --header-offset: 80px; /* default desktop offset */
}

html{
  scroll-behavior: smooth;
}

/* Apply safe scroll offset to sections that can be targeted by anchors */
section[id],
main section[id],
div[id] {
  scroll-margin-top: var(--header-offset);
}

/* Contact list icons in footer */
.contact-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:inherit;
  margin:6px 0;
  font-size:15px;
}

.contact-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-block;
  color:#d8b15a;
}

.contact-item a{
  color:inherit;
  text-decoration:none;
}

.contact-item a:hover,
.contact-item:hover{
  color:#dbb37c;
}

/* Center the contact section in the footer */
#contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:8px 0;
}

/* Back to top button styles */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:22px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#d8b15a;
  color:#1b1b1b;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
  z-index:9999;
}

.back-to-top.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.back-to-top svg{ width:24px; height:24px; color:#ffffff; }

@media (max-width:600px){
  .back-to-top{ right:12px; bottom:18px; width:44px; height:44px; }
}