/* ---------------------------------------------------------
   MODEL GRID CARDS – shared across themes
   --------------------------------------------------------- */

.model-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  /* card background / border come from theme-woodland.css (.card) */
  transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}

/* Mild hover lift */
.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
}

/* Thumbnail wrapper keeps aspect ratio for stable layout (LCP) */
.model-card .model-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-top-left-radius: 0.85rem;
  border-top-right-radius: 0.85rem;
  background: #000;
}

/* Image fills wrapper; actual size optimised by src */
.model-card .model-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LIVE / HD badges */
.model-card .badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Body spacing / text sizes */
.model-card .card-body {
  padding: 0.55rem 0.7rem 0.75rem;
}

.model-card .card-body h2.h6 {
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.model-card .card-body .text-muted {
  font-size: 0.76rem;
}

.model-card .card-body .text-warning {
  font-size: 0.78rem;
}

/* Tag badges inside cards */
.model-card .badge.bg-secondary-subtle {
  border-radius: 999px;
  padding-inline: 0.5rem;
}

/* Small screens – a bit more spacing between cards */
@media (max-width: 576px) {
  .index-grid .model-card {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8);
  }
}
/* =========================================================
   4:3 thumbs with letterbox/pillarbox (no HTML changes)
   - container is always 4/3
   - image uses object-fit: contain (keeps full image visible)
   - empty space is filled with theme-ish background
========================================================= */

/* Tune these to your theme */
:root{
  --thumb-fill: rgba(10, 40, 28, 0.92);   /* main bar color */
  --thumb-fill2: rgba(6, 24, 17, 0.92);   /* darker edge */
}

/* ✅ INDEX "model cards" (your <a class="model-thumb"> ... <img class="card-img-top">) */
.model-thumb{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;

  /* bars / background */
  background:
    linear-gradient(90deg, var(--thumb-fill2), var(--thumb-fill), var(--thumb-fill2));
}

/* Make the image fill the 4:3 box but KEEP aspect */
.model-thumb > img.card-img-top{
  width: 100% !important;
  height: 100% !important;
  display: block;

  /* key part: no cropping, only bars when needed */
  object-fit: contain;
  object-position: center;

  /* avoid odd stretching from bootstrap defaults */
  max-width: none;
}

/* If you also have "no thumb" fallback divs */
.model-thumb .ratio{
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* =========================================================
   ✅ Similar videos cards (if you want them identical)
   Your similar-videos.php uses <img class="card-img-top"> too.
   We only apply when the card is inside the similar block wrapper.
========================================================= */

.similar-videos .sv-thumb,
.similar-videos a.sv-thumb,
.similar-videos .card > a.d-block.position-relative{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background:
    linear-gradient(90deg, var(--thumb-fill2), var(--thumb-fill), var(--thumb-fill2));
}

.similar-videos img.card-img-top{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  object-position: center;
  max-width: none;
}

/* =========================================================
   Optional: make bars slightly “soft” with inner vignette
   (looks closer to your second screenshot)
========================================================= */

.model-thumb::after,
.similar-videos .card > a.d-block.position-relative::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
}