/* Frontend grid & card */
.gf-lp-wrap {
  display: grid;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width:768px){ .gf-lp-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gf-lp-item {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gf-lp-media {
  position: relative;
  display: block;
  background: #f3f4f6;
  overflow: hidden;
  height: 220px;
}
@media (min-width:768px){ .gf-lp-media { height: 260px; } }
@media (min-width:1024px){ .gf-lp-media { height: 300px; } }

.gf-lp-media img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.gf-lp-badge {
  position: absolute; top: 10px; left: 10px;
  background: #4aa9e2; color:#fff;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.gf-lp-body {
  padding: 1rem;
  display: flex; flex-direction: column;
}

/* Title (4-line clamp, consistent min-height) */
.gf-lp-title {
  margin: 0 0 .75rem;
  font-size: 19px; font-weight: 700; color: #3c4e65 !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
@media (min-width:768px){ .gf-lp-title { min-height: calc(4 * 1.35em); } }
.gf-lp-title a { color: #3c4e65 !important; text-decoration: none; }

/* Excerpt (7-line clamp; line-height 24px; consistent min-height) */
.gf-lp-content-excerpt {
  color: #4b5563; margin: 0 0 1rem; line-height: 24px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
@media (min-width:768px){ .gf-lp-content-excerpt { min-height: 168px; } } /* 7 * 24px */

/* Button */
.gf-lp-button {
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.25rem; border-radius: 25px; text-decoration: none;
  background-color: #4aa9e2; margin-top: auto;
  font-size: 14px; font-weight: 700; text-align: center; height: 45px;
}
@media (min-width:768px){ .gf-lp-button { max-width: 170px; } }
.gf-lp-button,
.gf-lp-button:link,
.gf-lp-button:visited,
.gf-lp-button:hover,
.gf-lp-button:focus,
.gf-lp-button:active { color: #FFF !important; }
.gf-lp-button:hover, .gf-lp-button:focus { opacity: .9; }

/* Utility used in admin pages */
.hidden { display: none !important; }
.bf-readonly { background: #f8fafc; color: #111; }


/* Ken Burns effect for card images (stronger so it's noticeable) */
.gf-lp-media {
  overflow: hidden;
}

.gf-lp-media img {
  will-change: transform;
  transform-origin: center center;
  animation: bf-kenburns 20s ease-in-out infinite alternate;
  animation-fill-mode: both;
}

/* Alternate direction per card */
.gf-lp-item:nth-child(2n) .gf-lp-media img {
  animation-name: bf-kenburns-alt;
}

@keyframes bf-kenburns {
  0%   { transform: translate(-50%, -50%) scale(1.02); }
  100% { transform: translate(calc(-50% - 30px), calc(-50% - 30px)) scale(1.15); }
}

@keyframes bf-kenburns-alt {
  0%   { transform: translate(-50%, -50%) scale(1.02); }
  100% { transform: translate(calc(-50% + 30px), calc(-50% + 30px)) scale(1.15); }
}

/* Pause when user hovers/focuses */
.gf-lp-media:hover img,
.gf-lp-media:focus img {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gf-lp-media img {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Slight specificity bump */
.gf-lp-item .gf-lp-media img {
  animation: bf-kenburns 20s ease-in-out infinite alternate;
}

/* Publish date badge (top-right), visible only on hover/focus */
.gf-lp-date-badge{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(17,24,39,.85); /* dark slate */
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
  z-index:2;
}

.gf-lp-media:hover .gf-lp-date-badge,
.gf-lp-media:focus .gf-lp-date-badge{
  opacity:1;
  transform:translateY(0);
}