/* all button design */
.custom-button {
    display: inline-block;
    font-size: 18px; 
    font-weight: 549; 
    color: #000000; 
    background-color: #A37E2D; 
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; 
    padding: 8px 25px;
}

.custom-button:hover {
    background-color: #ffffff; 
    color: #7DA908; 
    border: 2px solid #7DA908; 
}















/* main wrapper */
.site-wrap{
  max-width:1200px;
  padding-top: 30px;
  margin:0 auto;
}

/* visually hidden heading (for semantics) */
.sr-only{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Grid for cards */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:28px;
}

/* Responsive breakpoints */
@media (max-width:1100px){
  .cards-grid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width:820px){
  .cards-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:520px){
  .cards-grid{grid-template-columns: 1fr}
}

/* Card */
.card{
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 380px; /* match screenshot card height */
}

/* Image at top with rounded top corners */
.card-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}

/* Card body */
.card-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

/* Title & excerpt */
.card-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#161616;
}

.card-excerpt{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
  flex:1; /* push button to bottom */
}

/* Button */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  align-self:flex-start;
  box-shadow:0 2px 0 rgba(0,0,0,0.06);
  transition:background .15s ease, transform .06s ease;
  font-weight:600;
}
.btn:hover{ background: var(--accent-dark); transform: translateY(-1px); }

/* Slight shadowed panel effect (small border like screenshot) */
.card::after{
  content: "";
  position: absolute;
}

/* Full article page styles */
.single-article .full-article{
  background: var(--card-bg);
  padding: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

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

.single-article .full-article h1{
  margin:20px;
  font-size:28px;
}

.article-content{
  padding: 0 20px 30px 20px;
  color:var(--muted);
  line-height:1.7;
  font-size:16px;
}

.article-actions{
  padding:0 20px 30px 20px;
}

/* Small polish for overall spacing */
.card + .card { margin-top: 0; }

/* If you want the look of the screenshot background shadow under each card */
.cards-grid .card{
  position:relative;
  border: 1px solid rgba(0,0,0,0.02);
}

/* make buttons slightly larger on small screens */
@media (max-width:420px){
  .btn{ padding:12px 18px; }
}