/* V37 — Complete writing-cover display system
   Keeps every writing cover fully visible, regardless of its source aspect ratio. */
.home-writing-media,
.home-writing-media-v25,
.writing-cover,
.writing-feature-media,
.writing-grid-media,
.article-cover-frame {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(238,236,230,.92)),
    #eeece6;
}

.home-writing-media,
.home-writing-media-v25,
.writing-cover,
.writing-grid-media {
  aspect-ratio: 16 / 9;
}

.home-writing-media img,
.home-writing-media-v25 img,
.writing-cover img,
.writing-feature-media img,
.writing-grid-media img,
.article-cover-frame > img,
.article-cover-wrap > img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: transparent !important;
}

.home-writing-card:hover .home-writing-media img,
.home-writing-card-v25:hover .home-writing-media-v25 img,
.writing-card:hover .writing-cover img,
.writing-feature-card:hover .writing-feature-media img,
.writing-grid-card:hover .writing-grid-media img {
  transform: none !important;
}

/* Archive feature cover has a flexible column, so center the complete artwork. */
.writing-feature-media {
  display: grid !important;
  place-items: center;
}

/* Article cover always uses one predictable cinematic frame. */
.article-cover-frame {
  aspect-ratio: 16 / 9;
}

@media (max-width: 720px) {
  .home-writing-media,
  .home-writing-media-v25,
  .writing-cover,
  .writing-grid-media,
  .article-cover-frame {
    aspect-ratio: 16 / 9;
  }
}

/* V38 — Featured writing cover composition
   The highlighted cover uses the entire card instead of being squeezed into a
   nearly-square side column. The original artwork stays complete while a soft
   duplicate fills any unused space behind it. */
.page-writings .writing-feature-media .writing-feature-backdrop,
.page-writings .writing-feature-media .writing-feature-image {
  position: absolute;
  inset: 0;
  display: block;
}

.page-writings .writing-feature-media .writing-feature-backdrop {
  z-index: 0;
  width: calc(100% + 48px) !important;
  height: calc(100% + 48px) !important;
  inset: -24px;
  object-fit: cover !important;
  filter: blur(24px) saturate(.72);
  opacity: .2;
  transform: scale(1.06) !important;
}

.page-writings .writing-feature-media .writing-feature-image {
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (min-width: 761px) {
  .page-writings .writing-feature-card {
    position: relative;
    isolation: isolate;
    display: block;
    min-height: clamp(430px, 44vw, 570px);
    overflow: hidden;
    background: #f3f0e8;
  }

  .page-writings .writing-feature-media {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    background: #f3f0e8;
  }

  .page-writings .writing-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to left,
      rgba(247,246,242,.99) 0%,
      rgba(247,246,242,.97) 34%,
      rgba(247,246,242,.86) 48%,
      rgba(247,246,242,.34) 65%,
      rgba(247,246,242,0) 82%
    );
  }

  .page-writings .writing-feature-content {
    position: relative;
    z-index: 2;
    width: min(56%, 650px);
    min-height: clamp(430px, 44vw, 570px);
    margin-left: auto;
    padding: clamp(34px, 4.2vw, 62px);
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .page-writings .writing-feature-card {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .page-writings .writing-feature-media {
    position: relative !important;
    inset: auto;
    order: 0;
    width: 100%;
    height: auto;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .page-writings .writing-feature-media .writing-feature-image {
    object-position: center !important;
  }

  .page-writings .writing-feature-content {
    width: auto;
    min-height: 0;
    margin: 0;
  }
}

/* Product Design v49 — automatic visual families without cropping source art. */
.page-writings .writing-feature-media{background:linear-gradient(145deg,#f7edb8,#ebe4ef)}
.page-writings .writing-grid-card:nth-child(3n+1) .writing-grid-media,
.home33-writing-card:nth-child(3n+1) .home33-writing-media{background:linear-gradient(145deg,#f7f1c9,#ece9df)}
.page-writings .writing-grid-card:nth-child(3n+2) .writing-grid-media,
.home33-writing-card:nth-child(3n+2) .home33-writing-media{background:linear-gradient(145deg,#eee7f2,#f7f3e9)}
.page-writings .writing-grid-card:nth-child(3n) .writing-grid-media,
.home33-writing-card:nth-child(3n) .home33-writing-media{background:linear-gradient(145deg,#e7ece8,#f4efd9)}
.learning-card:nth-child(3n+1) .learning-card-cover{background:linear-gradient(145deg,#f5eebd,#eee9de)}
.learning-card:nth-child(3n+2) .learning-card-cover{background:linear-gradient(145deg,#ece3f1,#f3efe6)}
.learning-card:nth-child(3n) .learning-card-cover{background:linear-gradient(145deg,#e6eee9,#f1ecd8)}