/* SINGLE */
.meme-single {
  width: 100%;
}

/* image */
.meme-single-img {
  width: 100%;
  height: 82vh;
  overflow: hidden;
}

.meme-single-img img {
  width: 100%;
  height: 82vh;
  object-fit: cover;
  display: block;
}

/* button */
.read-more-btn {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-top: 2px solid black;
  padding-top: 0.5rem;
  letter-spacing: 0.05em;
}

/* ------------------------- */
/* MEME CARD GRID & CARD */
/* ------------------------- */

/* Grid for all memes */
.meme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* thin cards */
  gap: 2rem;
  width: 100%;
}

/* Card container */
.meme-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border: none;       /* no border */
}

/* Image wrapper */
.meme-card .card-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  object-fit: cover;
}

/* Image inside card */
.meme-card .card-image img {
  width: auto;   /* full width */
  max-width: 100%;
  height: auto;      /* keep aspect ratio */
  object-fit: contain; /* no cropping * /* preserve aspect ratio, no cropping */
  display: block;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); /* optional hover zoom */
}

/* Hover zoom (optional) */
.meme-card:hover .card-image img {
  transform: scale(1.05);
}

/* Content area (optional spacing) */
.card-content {
  padding: 4px 0;
  text-align: center;
}





.article-img-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-bottom: 3px solid black;
}

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

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 0;        /* 🔥 controls thinness */
  margin: 0;
}

.read-more-text {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;    /* slightly smaller */
  letter-spacing: 0.05em;
  line-height: 1;        /* 🔥 removes extra vertical space */
  margin-top: -9px;
}

/* -------------------------
   BUTTON SYSTEM
------------------------- */

.test-btn{
  display:inline-block;
  padding:10px 16px;
  border:3px solid black;
  background:white;
  color:black;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow:4px 4px 0 black;
  transition:all .15s ease;
  font-family:inherit;
}

.test-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 black;
}

.test-btn:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 black;
}

/* variants */
.test-btn.yellow{
  background:#ffff00;
}

.test-btn.ghost{
  background:white;
}

/* -------------------------
   MEME ACTIONS
------------------------- */

/* container for button */
.meme-actions{
  display:flex;
  justify-content:flex-end;  /* keep button on the right */
  margin-top:20px;           /* space above button from content */
  padding-right: 16px;       /* space from right edge of card */
  padding-bottom: 16px;      /* space from bottom of card */
}

/* spacing if multiple buttons in the container */
.meme-actions .test-btn {
  margin-left:10px;          /* space between buttons if more than one */
}