/* /assets/css/pages/_blog.css */

/* --- Spremenljivke za pastelne barve kartic na blog strani --- */
:root {
  --blog-card-bg-1: #eaf0f4; /* Svetlo modra */
  --blog-card-border-1: #6A8DAA;

  --blog-card-bg-2: #f8eaf0; /* Svetlo roza/vijolična */
  --blog-card-border-2: #B46A8E;

  --blog-card-bg-3: #eaf3f1; /* Svetlo zelena */
  --blog-card-border-3: #5E8B7E;

  --blog-card-bg-4: #f9f5ea; /* Svetlo bež/rumena */
  --blog-card-border-4: #C2A370;
}

/* --- Prilagoditev mreže za blog stran --- */
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    align-items: stretch; 
  }
}

/* --- Stili za nove, pastelne blog kartice --- */
.blog-feature-card {
  /* Osnovna struktura in pozicioniranje */
  position: relative; /* Nujno za absolutno pozicioniranje gumba */
  display: flex; 
  align-items: center;     /* Vertikalno centrira vsebinski blok (besedilo) */
  text-align: center;
  min-height: 480px;       /* Povečana višina za daljše besedilo */
  
  /* Povečan notranji odmik, posebej na dnu, da se besedilo ne prekriva z gumbom */
  padding: var(--spacing-l) 1.5rem 6rem 1.5rem; 

  border-radius: 10px;
  
  /* Videz */
  color: var(--color-text);
  box-shadow: var(--shadow-light);
  border-top: 5px solid;
  
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.blog-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

/* Specifične barve ozadja in zgornjega roba za vsako kartico */
.blog-feature-card.card-color-1 { background-color: var(--blog-card-bg-1); border-color: var(--blog-card-border-1); }
.blog-feature-card.card-color-2 { background-color: var(--blog-card-bg-2); border-color: var(--blog-card-border-2); }
.blog-feature-card.card-color-3 { background-color: var(--blog-card-bg-3); border-color: var(--blog-card-border-3); }
.blog-feature-card.card-color-4 { background-color: var(--blog-card-bg-4); border-color: var(--blog-card-border-4); }

/* Ovojni link znotraj kartice - sedaj samo za besedilo */
.blog-feature-card .card-link-wrapper {
  color: inherit;
  text-decoration: none;
}

/* Naslov znotraj kartice, ki deluje kot glavni tekstovni blok */
.blog-feature-card .blog-card-title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0; /* Odstranimo vse odmike, ker za poravnavo skrbi flexbox */
}

/* Link "Preberi več" je absolutno pozicioniran */
.blog-feature-card .blog-card-link {
  /* Pozicioniranje */
  position: absolute;
  bottom: var(--spacing-l); /* Fiksni odmik od dna kartice */
  left: 50%;
  transform: translateX(-50%); /* Horizontalno centriranje */

  /* Videz */
  color: var(--color-text);
  font-weight: 600;
  padding: var(--spacing-s) var(--spacing-l);
  border: 2px solid var(--color-text);
  border-radius: 50px;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Hover efekt, ki se ujema z barvo zgornjega roba kartice */
.blog-feature-card.card-color-1 .blog-card-link:hover { background-color: var(--blog-card-border-1); color: var(--color-white); border-color: var(--blog-card-border-1); }
.blog-feature-card.card-color-2 .blog-card-link:hover { background-color: var(--blog-card-border-2); color: var(--color-white); border-color: var(--blog-card-border-2); }
.blog-feature-card.card-color-3 .blog-card-link:hover { background-color: var(--blog-card-border-3); color: var(--color-white); border-color: var(--blog-card-border-3); }
.blog-feature-card.card-color-4 .blog-card-link:hover { background-color: var(--blog-card-border-4); color: var(--color-white); border-color: var(--blog-card-border-4); }

/* Odstranimo podčrtovanje, ki ga je imel stari stil */
.blog-feature-card .blog-card-link::after {
  display: none;
}