/*
 * Editor's Pick [mtr_editors_pick]
 * technologyreview.com 홈 "Features"(highlightsSection)와 동일한 레이아웃·간격·색 변수 구조.
 * rem·60rem/82rem 브레이크포인트는 해당 사이트 크리티컬 CSS와 동일 스케일.
 */

.mtr-hl {
  --mtr-hl-bg: #001f2f;
  /* --mtr-hl-highlight: #b0c4de; */
  --mtr-hl-highlight: #f5abe1;
  --mtr-hl-title: #f5abe1;
  --mtr-hl-muted: #bfb8c4;
  --mtr-hl-tag-fg: rgba(8, 9, 12, 0.75);
  --mtr-hl-shadow-end: color-mix(in srgb, var(--mtr-hl-bg) 82%, #000);
  /* 부모(.container)보다 배경만 양쪽으로 살짝 넓힐 폭 */
  --mtr-hl-bleed: 3.7rem;
  /* 베이스 색 + 대각 하이라이트/섀도로 살짝 입체감 (관리자 지정 배경 위에 동일 비율 적용) */
  --mtr-hl-bg-filled:
    linear-gradient(
      168deg,
      rgba(120, 197, 232, 0.2) 0%,
      rgba(120, 197, 232, 0.1) 28%,
      transparent 52%,
      rgba(0, 11, 20, 0.58) 100%
    ),
    var(--mtr-hl-bg);
  color: var(--mtr-hl-muted);
}

.mtr-hl__container {
  margin: 2.5rem auto;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

@media (min-width: 82rem) {
  .mtr-hl__container {
    margin-bottom: 3.75rem;
    margin-top: 3.75rem;
  }
}

/*
 * 피처드 배경: .container 콘텐츠 폭보다 양쪽으로 var(--mtr-hl-bleed)만큼만 넓게.
 */
.mtr-hl__featured {
  position: relative;
  background: var(--mtr-hl-bg-filled);
  margin-left: calc(-1 * var(--mtr-hl-bleed));
  margin-right: calc(-1 * var(--mtr-hl-bleed));
  padding-left: var(--mtr-hl-bleed);
  padding-right: var(--mtr-hl-bleed);
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

@media (min-width: 60rem) {
  .mtr-hl__featured {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__featured {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

.mtr-hl__featured.mtr-hl__featured--noImage {
  padding-top: 5rem;
}

@media (min-width: 82rem) {
  .mtr-hl__featured.mtr-hl__featured--noImage {
    padding-top: 7.5rem;
  }
}

.mtr-hl__featuredImage {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mtr-hl__ratio {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.mtr-hl__ratio--hero {
  margin-bottom: 0;
}

.mtr-hl__ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtr-hl__ratioPh {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

/* 아이콘: 이미지 하단에 겹침 */
.mtr-hl__sectionIcon {
  height: 3.75rem;
  width: 3.75rem;
  margin-top: -2.5rem;
  position: absolute;
  left: var(--mtr-hl-bleed);
  color: var(--mtr-hl-highlight);
}

@media (min-width: 82rem) {
  .mtr-hl__sectionIcon {
    height: 4.625rem;
    width: 4.625rem;
    margin-top: -3.75rem;
  }
}

.mtr-hl__sectionIcon svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: mtr-hl-section-icon-rotate 18s linear infinite;
}

.mtr-hl__sectionIcon path {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .mtr-hl__sectionIcon svg {
    animation: none;
  }
}

@keyframes mtr-hl-section-icon-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 메인: 모바일 세로 → 데스크 Features | 스토리 33/67 */
.mtr-hl__main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 2.125rem;
  padding-top: 4rem;
}

@media (min-width: 60rem) {
  .mtr-hl__main {
    flex-direction: row;
    padding-bottom: 0;
    padding-top: 1.875rem;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__main {
    padding-top: 2.5rem;
  }
}

.mtr-hl__featured.mtr-hl__featured--noImage .mtr-hl__main {
  padding-top: 1.875rem;
}

@media (min-width: 82rem) {
  .mtr-hl__featured.mtr-hl__featured--noImage .mtr-hl__main {
    padding-top: 2.5rem;
  }
}

.mtr-hl__sectionTitle {
  margin: 0;
  color: var(--mtr-hl-title);
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 900;
  line-height: 2.75rem;
  letter-spacing: -0.04em;
}

@media (min-width: 82rem) {
  .mtr-hl__sectionTitle {
    font-size: 3.875rem;
    line-height: 4rem;
  }
}

@media (min-width: 60rem) {
  .mtr-hl__sectionTitle {
    padding: 0 0 2.5rem;
    width: calc(33% - 2.5rem);
    flex-shrink: 0;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__sectionTitle {
    padding: 0 0 2.5rem;
  }
}

.mtr-hl__featuredStory {
  margin: 0;
  width: 100%;
}

@media (min-width: 60rem) {
  .mtr-hl__featuredStory {
    width: 67%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__featuredStory {
    width: calc(67% - 2.5rem);
  }
}

/* ----- 피처드 대형 카드 (noPadding) ----- */
.mtr-hl__story--large {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

.mtr-hl__story--large .mtr-hl__storyBody {
  width: 100%;
}

.mtr-hl__eyebrowWrap {
  margin-bottom: 1rem;
}

.mtr-hl__story--large .mtr-hl__eyebrowWrap {
  margin-bottom: 1rem;
}

.mtr-hl__eyebrow {
  margin: 0;
}

.mtr-hl__eyebrow--light {
  display: block;
}

.mtr-hl__eyebrow--light .mtr-hl__tag,
.mtr-hl__eyebrow--light .mtr-hl__eyebrowTopic,
.mtr-hl__eyebrow--light .mtr-hl__eyebrowTime {
  display: inline-block;
  margin-right: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
  vertical-align: baseline;
}

.mtr-hl__eyebrow--light .mtr-hl__tag {
  background: var(--mtr-hl-highlight);
  color: var(--mtr-hl-tag-fg);
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.mtr-hl__eyebrow--light .mtr-hl__eyebrowTopic,
.mtr-hl__eyebrow--light .mtr-hl__eyebrowTime {
  color: var(--mtr-hl-muted);
}

.mtr-hl__eyebrow--light a.mtr-hl__eyebrowTopic {
  color: var(--mtr-hl-muted);
  text-decoration: none;
}

.mtr-hl__eyebrow--light a.mtr-hl__eyebrowTopic:hover {
  text-decoration: underline;
}

.mtr-hl__hed {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.mtr-hl__hed a {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}

.mtr-hl__hed--hero {
  color: var(--mtr-hl-title);
  font-size: 1.375rem;
  line-height: 1.5rem;
  padding: 0.125rem 0;
  margin: -0.125rem 0;
}

@media (min-width: 82rem) {
  .mtr-hl__hed--hero {
    font-size: 1.625rem;
    line-height: 1.75rem;
  }
}

.mtr-hl__dek {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: var(--mtr-hl-muted);
}

.mtr-hl__dek p {
  margin: 0;
}

.mtr-hl__featured .mtr-hl__dek p {
  color: var(--mtr-hl-muted);
}

.mtr-hl__featuredStory a.mtr-hl__dek--hero {
  display: block;
  text-decoration: none;
  color: var(--mtr-hl-muted);
}

.mtr-hl__featuredStory a.mtr-hl__dek--hero:hover,
.mtr-hl__featuredStory a.mtr-hl__dek--hero:focus,
.mtr-hl__featuredStory a.mtr-hl__dek--hero:visited {
  text-decoration: none;
  color: var(--mtr-hl-muted);
}

@media (min-width: 60rem) {
  .mtr-hl__dek--hero {
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-top: 0.75rem;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__dek--hero {
    margin-top: 1rem;
  }
}

/* featured: secondary(가로 카드) 대비 타입 한 단계 위 */
.mtr-hl__featured .mtr-hl__eyebrow--light .mtr-hl__tag,
.mtr-hl__featured .mtr-hl__eyebrow--light .mtr-hl__eyebrowTopic,
.mtr-hl__featured .mtr-hl__eyebrow--light .mtr-hl__eyebrowTime {
  font-size: 1.0625rem;
  line-height: 1.4375rem;
}

.mtr-hl__featured .mtr-hl__eyebrow--light .mtr-hl__tag {
  font-size: 1rem;
}

.mtr-hl__featured .mtr-hl__hed--hero {
  font-size: 1.5rem;
  line-height: 1.625rem;
}

@media (min-width: 82rem) {
  .mtr-hl__featured .mtr-hl__hed--hero {
    font-size: 1.875rem;
    line-height: 2rem;
  }
}

.mtr-hl__featured .mtr-hl__featuredStory a.mtr-hl__dek--hero {
  font-size: 1.0625rem;
  line-height: 1.5rem;
}

@media (min-width: 60rem) {
  .mtr-hl__featured .mtr-hl__dek--hero {
    font-size: 1.1875rem;
    line-height: 1.625rem;
  }
}

/* ----- moreStories ----- */
.mtr-hl__moreStories {
  --mtr-hl-edge: #f1f1f1;
  /* 모바일: 가로 카드·카드 래퍼 보더 — 밝은 배경에서도 잘 보이는 회색 */
  --mtr-hl-edge-mobile: #c5c8d0;
  /* 모바일 세로 스택: 카드 사이 gap과 동일 (secondary ↔ 첫 카드 간격에도 사용) */
  --mtr-hl-cards-stack-gap: 1.25rem;
  margin-top: 0;
}

@media (max-width: 59.99rem) {
  .mtr-hl__moreStories .mtr-hl__secondary + .mtr-hl__cards {
    margin-top: var(--mtr-hl-cards-stack-gap);
  }

  /* 모바일 보더색: 짧은 셀렉터보다 우선하도록 긴 체인 + #content */
  #content
    .mtr-hl
    > section.mtr-hl__container
    > div.mtr-hl__moreStories
    > div.mtr-hl__secondary
    > div.mtr-hl__story.mtr-hl__story--horizontal,
  .mtr-hl
    > section.mtr-hl__container
    > div.mtr-hl__moreStories
    > div.mtr-hl__secondary
    > div.mtr-hl__story.mtr-hl__story--horizontal {
    border-color: var(--mtr-hl-edge-mobile);
  }

  #content
    .mtr-hl
    > section.mtr-hl__container
    > div.mtr-hl__moreStories
    > div.mtr-hl__cards
    > div,
  .mtr-hl
    > section.mtr-hl__container
    > div.mtr-hl__moreStories
    > div.mtr-hl__cards
    > div {
    border-color: var(--mtr-hl-edge-mobile);
  }
}

.mtr-hl__moreStories .mtr-hl__story.mtr-hl__story--horizontal {
  border: 1px solid var(--mtr-hl-edge);
}

/* 데스크톱: 가로 카드 아래에 카드 열이 붙을 때 하단 보더 제거(2px 방지). 모바일은 전면 보더 유지 */
@media (min-width: 60rem) {
  .mtr-hl__secondary:has(+ .mtr-hl__cards)
    .mtr-hl__story.mtr-hl__story--horizontal {
    border-bottom-width: 0;
  }
}

.mtr-hl__moreStories .mtr-hl__cards > div {
  border: 1px solid var(--mtr-hl-edge);
}

@media (min-width: 60rem) {
  .mtr-hl__moreStories .mtr-hl__cards > div ~ div {
    margin-left: -1px;
  }
}

/* TR 홈 eyebrow 스타일: 작은 사각형 + 포인트(강조)색 — https://www.technologyreview.com/ */
.mtr-hl__moreStories .mtr-hl__titleBullet {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--mtr-hl-highlight);
  border-radius: 1px;
}

.mtr-hl__moreStories .mtr-hl__story--horizontal .mtr-hl__eyebrow--withBullet,
.mtr-hl__moreStories .mtr-hl__story--small .mtr-hl__eyebrow--withBullet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mtr-hl__moreStories
  .mtr-hl__story--horizontal
  .mtr-hl__eyebrow--withBullet
  .mtr-hl__titleBullet,
.mtr-hl__moreStories
  .mtr-hl__story--small
  .mtr-hl__eyebrow--withBullet
  .mtr-hl__titleBullet {
  margin-top: 0;
}

.mtr-hl__secondary {
  margin: 1.25rem 0;
  position: relative;
  z-index: 0;
}

@media (min-width: 60rem) {
  .mtr-hl__secondary {
    margin: 0;
  }
}

@media (min-width: 82rem) {
  .mtr-hl__secondary::before {
    background: var(--mtr-hl-shadow-end);
    content: "";
    display: block;
    height: 50%;
    left: calc(-1 * var(--mtr-hl-bleed));
    right: calc(-1 * var(--mtr-hl-bleed));
    position: absolute;
    top: 0;
    z-index: -1;
  }
}

/* 가로 카드 (row-reverse, 이미지 오른쪽) */
.mtr-hl__story--horizontal {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 2.5rem;
  width: 100%;
  gap: 0;
}

@media (min-width: 60rem) {
  .mtr-hl__story--horizontal {
    flex-direction: row-reverse;
    align-items: center;
    padding: 2.5rem;
  }
}

.mtr-hl__story--horizontal .mtr-hl__storyImg {
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 60rem) {
  .mtr-hl__story--horizontal .mtr-hl__storyImg {
    align-self: center;
    margin-bottom: 0;
    min-width: 50%;
    flex: 0 1 50%;
  }
}

.mtr-hl__story--horizontal .mtr-hl__ratio {
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
  height: auto;
}

.mtr-hl__story--horizontal .mtr-hl__storyBody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

@media (min-width: 60rem) {
  .mtr-hl__story--horizontal .mtr-hl__storyBody {
    min-width: 50%;
    flex: 0 1 50%;
    padding-right: 2.5rem;
  }
}

.mtr-hl__fig {
  margin: 0;
}

.mtr-hl__story--horizontal .mtr-hl__hed--md {
  color: #08090c;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

/* article.post-item.archive-loop-item .col-left h3.entry-title > a — common.css h3 기준 */
.mtr-hl__moreStories
  .mtr-hl__secondary
  .mtr-hl__storyBody
  > h3.mtr-hl__hed--md {
  font-size: 1.375em;
  line-height: 1.5em;
  letter-spacing: -0.06em;
  font-weight: 700;
  font-family: futura-pt, "Noto Sans KR", sans-serif;
  margin: 0 0 0.5em;
  color: #040000;
}

.mtr-hl__moreStories
  .mtr-hl__secondary
  .mtr-hl__storyBody
  > h3.mtr-hl__hed--md
  a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.mtr-hl__story--horizontal .mtr-hl__dek {
  color: #08090c;
  opacity: 0.75;
  margin-top: 0.75rem;
}

@media (min-width: 82rem) {
  .mtr-hl__story--horizontal .mtr-hl__dek {
    margin-top: 1rem;
  }
}

.mtr-hl__secondary .mtr-hl__story--horizontal a.mtr-hl__dek {
  display: block;
  text-decoration: none;
  color: #08090c;
  opacity: 0.75;
}

.mtr-hl__secondary .mtr-hl__story--horizontal a.mtr-hl__dek:hover,
.mtr-hl__secondary .mtr-hl__story--horizontal a.mtr-hl__dek:focus,
.mtr-hl__secondary .mtr-hl__story--horizontal a.mtr-hl__dek:visited {
  text-decoration: none;
  color: #08090c;
  opacity: 0.75;
}

.mtr-hl__eyebrow--dark {
  font-size: 0.85em;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.mtr-hl__eyebrow--dark a {
  color: #08090c;
  text-decoration: none;
  opacity: 0.85;
}

.mtr-hl__eyebrow--dark a:hover {
  text-decoration: underline;
}

/* ----- 4열 스트라이프 카드 ----- */
.mtr-hl__cards {
  display: flex;
  flex-direction: column;
  gap: var(--mtr-hl-cards-stack-gap, 1.25rem);
}

.mtr-hl__cards > div > .mtr-hl__story--small {
  background: #fff;
}

@media (min-width: 60rem) {
  .mtr-hl__cards {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    background-color: #ebecf0;
  }

  .mtr-hl__cards > div {
    flex-basis: 25%;
    flex-grow: 1;
    min-width: 0;
  }

  .mtr-hl__cards > div:nth-of-type(4n + 1) > .mtr-hl__story--small {
    background: hsla(0, 0%, 100%, 0.8);
  }

  .mtr-hl__cards > div:nth-of-type(4n + 2) > .mtr-hl__story--small {
    background: hsla(0, 0%, 100%, 0.6);
  }

  .mtr-hl__cards > div:nth-of-type(4n + 3) > .mtr-hl__story--small {
    background: hsla(0, 0%, 100%, 0.4);
  }

  .mtr-hl__cards > div:nth-of-type(4n + 4) > .mtr-hl__story--small {
    background: hsla(0, 0%, 100%, 0.2);
  }

  .mtr-hl__cards > div > .mtr-hl__story--small {
    height: 100%;
  }
}

.mtr-hl__story--small {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 2.5rem;
  width: 100%;
}

@media (min-width: 60rem) {
  .mtr-hl__story--small {
    padding: 2.5rem;
  }
}

.mtr-hl__story--small .mtr-hl__storyImg {
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 60rem) {
  .mtr-hl__story--small .mtr-hl__storyImg {
    margin-bottom: 1.5rem;
  }
}

.mtr-hl__story--small .mtr-hl__ratio {
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
}

.mtr-hl__hed--sm {
  color: #08090c;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.mtr-hl__story--small .mtr-hl__storyBody {
  width: 100%;
}