/* ------------------------------------------------------------------------
  Journals Catalog (product listing)
  ------------------------------------------------------------------------ */
.catalog{ padding:32px; max-width:1260px; margin:0 auto }
.catalog__header{ display:flex; align-items:center; gap:12px; margin-bottom:18px }
.catalog__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:24px }
@media (max-width: 1100px){ .catalog__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .catalog__grid{ grid-template-columns: 1fr } }

.card{
  background:var(--panel); border:1px solid var(--soft-2); border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04); position:relative;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; /* keep consistent bottom alignment */
}
.card:hover{ border-color: rgba(0,0,0,.12) }
.card__media{ 
  aspect-ratio: 1.477;
  background: #fff; 
  border-bottom: 1px solid var(--soft-2); 
  position: relative; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__media iframe{ 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block; 
  z-index: 1; 
  transition: transform .28s ease;
  object-fit: cover;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none; /* Allow clicks to pass through to parent */
}
.card__media:hover iframe, .card__media:focus-within iframe{ 
  transform: scale(1.02);
}
.media__reveal{ position:absolute; inset:0; padding:16px; display:flex; flex-direction:column; gap:10px; z-index:0; background:linear-gradient(90deg, #fff 0%, #fff 80%, rgba(255,255,255,0) 100%) }
.reveal__title{ margin-left: 52%; font-weight:800; font-size:14px; color:var(--ink) }
.reveal__features{ margin-left: 52%; padding-left:18px; color:var(--ink) }
.reveal__features li{ font-size:12px; margin:4px 0; list-style: disc }
.reveal__cta{ margin-left:52%; margin-top:2px; display:flex; justify-content:center }

/* Catalog-specific CTA styling uses brand focus or per-card --cta */
.catalog .btn--primary{
  background: var(--cta, var(--focus));
  border-color: transparent;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.catalog .btn--primary:hover{ filter:brightness(.95) }
.catalog .btn--primary:active{ filter:brightness(.9) }
.card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.card__title{ font-weight:800 }
.card__offer{ font-size:13px; color:var(--ink); font-weight:600 }
.card__blurb{ font-size:12px; color:var(--muted) }
.features{ margin:6px 0; padding-left:18px; color:var(--ink) }
.features li{ font-size:12px; margin:4px 0; list-style: disc }
.card__meta{ color:var(--muted); font-size:12px }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px }
.badge{
  display:inline-block; padding:.22rem .5rem; border-radius:999px;
  background:var(--soft); border:1px solid var(--soft-2); color:var(--ink);
  font-size:12px; font-weight:600;
}
.card__cta{ align-self:center }
.card__bottom{ margin-top:auto; display:flex; flex-direction:column; gap:10px }
.card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px }
.price{ font-weight:800 }
.price--stack .price__row{ display:flex; align-items:center; gap:10px }
.price__compare{ color:var(--muted); text-decoration: line-through }
.price__current{ color:var(--ink) }
.price__badge{ display:inline-block; padding:.18rem .5rem; border-radius:8px; background:#c1121f; color:#fff; font-weight:800; font-size:12px }
.price__list{ color:var(--muted); font-weight:600; margin-top:4px }
.rating{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px;}
.stars{ color:#f2b01e; letter-spacing:1px }
.ship{ font-size:12px; margin-top:-4px }

/* Mobile-only inline CTA; hide on larger screens */
.cta-inline-mobile{ display:none }
@media (max-width: 940px){
  .cta-inline-mobile{ display:block; margin-top:8px; text-align:center }
  /* hide hover reveal CTA on small screens to avoid duplication */
  .reveal__cta{ display:none }
}

/* Hover-reveal details */
/* Removed hover-reveal details for better UX */