/*
  Magazine cover on exclusive-features-details hero (.info1).
  master.css sets .blog__details-top .info1 { flex-basis: 220px } — too small;
  we widen only when .exclusive-magazine-thumb is present.
*/

/* Widen the third column so the cover can actually grow */
/* Desktop / tablet row: master uses flex-basis:220px on .info1 — override from 769px up */
@media (min-width: 769px) {
  .blog__details-top .wrapper > .info1.exclusive-magazine-thumb {
    flex-basis: min(260px, 24vw);
    min-width: min(260px, 24vw);
    max-width: min(260px, 24vw);
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center;
  }
}

@media (min-width: 1200px) {
  .blog__details-top .wrapper > .info1.exclusive-magazine-thumb {
    flex-basis: min(275px, 20vw);
    min-width: min(275px, 20vw);
    max-width: min(275px, 20vw);
  }
}

.blog__details-top .exclusive-magazine-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

.blog__details-top .exclusive-magazine-thumb__link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform 0.3s ease;
}

.blog__details-top .exclusive-magazine-thumb__link:hover {
  transform: translateY(-4px);
}

/* “Spine” + depth behind the cover */
.blog__details-top .exclusive-magazine-thumb__frame {
  position: absolute;
  inset: 0;
  right: 6%;
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(
    90deg,
    #d8d0dc 0%,
    #ece8ef 18%,
    #f5f2f7 45%,
    #e8e2ec 100%
  );
  box-shadow:
    inset -2px 0 4px rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateX(-8px) scale(0.98);
  z-index: 0;
}

.blog__details-top .exclusive-magazine-thumb__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(440px, 54vh);
  margin: 0 auto;
  border-radius: 3px 11px 11px 3px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    10px 16px 36px -6px rgba(25, 12, 35, 0.28);
  object-fit: contain;
  object-position: center top;
  background: #fff;
}

.blog__details-top .exclusive-magazine-thumb__link:hover .exclusive-magazine-thumb__img {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    14px 22px 44px -8px rgba(25, 12, 35, 0.32);
}

@media (max-width: 991px) {
  .blog__details-top .exclusive-magazine-thumb__link {
    max-width: min(240px, 72vw);
    margin: 0.5rem auto 0;
  }

  .blog__details-top .exclusive-magazine-thumb__img {
    max-height: min(360px, 52vh);
  }
}