/* WOC editorial presentation overrides: layout rules based on visual measurement,
   kept separate from legacy CSS until old selectors are consolidated. */

/* WordPress dimension attributes must not force a portrait 769px image into a 307px card. */
.card-media {min-width:0;overflow:hidden}
.card-media>img,
.card-media .ph {display:block;width:100%;height:auto!important;aspect-ratio:16/9;object-fit:cover;object-position:center}
.card-feature .card-media>img {aspect-ratio:16/9}
.card-compact .card-media>img,.card-compact .ph {height:82px!important;aspect-ratio:auto;object-fit:cover}
.card-archive .card-media>img,.card-archive .ph {height:100px!important;aspect-ratio:auto}
.card .card-copy{min-width:0}
.card .card-copy h3{overflow-wrap:normal;word-break:normal;hyphens:auto}
.card .card-copy>p {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cards-grid.layout-feature.count-5 {grid-auto-rows:auto;align-items:start}
.cards-grid.layout-feature.count-5 .card:nth-child(4) .card-media>img,
.cards-grid.layout-feature.count-5 .card:nth-child(5) .card-media>img {height:128px!important;aspect-ratio:auto}
.cards-grid.layout-normal .card-standard .card-media>img {aspect-ratio:16/9}
.card-feature h3{font-size:clamp(27px,2.2vw,33px)}
.card-standard h3{font-size:clamp(19px,1.45vw,22px)}
.cards-grid.layout-feature.count-3>.card-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:20px}
.cards-grid.layout-feature.count-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-grid.layout-feature.count-3>.card-feature .card-media>img{height:auto!important;aspect-ratio:16/9}
.archive-grid .card-media>img{height:100px!important}

/* Multimedia must have a genuine image+caption editorial lead, not a stretched split-grid. */
.multimedia-section{padding-bottom:32px}
.multimedia-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,.76fr);gap:26px;align-items:start}
.media-lead{display:block;min-width:0}
.media-lead>a{display:block;max-width:100%;overflow:hidden}
.media-lead-img{display:block;width:100%;height:auto!important;max-height:460px;aspect-ratio:16/9;object-fit:cover;object-position:center}
.media-lead-copy{padding:16px 0 0}
.media-lead-copy h3{font-size:clamp(26px,2.2vw,32px);line-height:1.07;margin:7px 0 10px}
.media-lead-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45}
.media-rail{padding-left:20px;min-width:0}
.media-rail-card{grid-template-columns:112px minmax(0,1fr);gap:12px;padding:10px 0}
.media-rail-card h3{font-size:17px;line-height:1.14;margin:4px 0 5px}
.media-rail-img{width:112px;height:82px!important;aspect-ratio:4/3;object-fit:cover}
.media-lead .meta,.media-rail .meta{font-size:10px}

/* The economy topic links now sit below the edition, not in a long empty 290px sidebar. */
.economy-topic-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0 20px;border-bottom:1px solid var(--line);font-size:11px}
.economy-topic-strip strong{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.economy-topic-strip a{padding:6px 10px;background:var(--soft);border:1px solid var(--line);font-weight:750}
.economy-topic-strip a:hover{border-color:var(--red);color:var(--red)}

/* Better hierarchy while keeping the panda WOC logo. */
.brand-row-pro .brand-logo img{max-width:330px}
.brand-edition strong{font-size:clamp(25px,2.1vw,32px)}
.brand-metrics .brand-cta{white-space:nowrap}
.cta-mobile{display:none}
.lead-copy h1{font-size:clamp(34px,3.1vw,45px);line-height:1.015}
.lead-copy p{font-size:17px;line-height:1.45}

/* Bring the actual rich Weibo WordPress presentation along, not the placeholder. */
.article-body .woc-weibo-embed{max-width:720px;width:100%;padding:0;overflow:hidden;background:#fff;border:1px solid #e0e4e8;border-radius:14px;box-shadow:0 4px 18px rgba(24,35,48,.07)}
.article-body .woc-weibo-header{display:flex;align-items:center;gap:10px}
.article-body .woc-weibo-text{font-size:14px;font-family:system-ui,sans-serif;line-height:1.55}
.article-body .woc-weibo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.article-body .woc-weibo-gallery a{display:block;min-width:0;overflow:hidden}
.article-body .woc-weibo-gallery img{display:block;width:100%;height:150px!important;aspect-ratio:1/1;object-fit:cover}
.article-body .woc-weibo-video>img{display:block;width:100%;height:auto!important;max-height:360px;object-fit:contain}

/* X embed loads after user approval; native preview with robust fallback. */
.woc-x-card{max-width:670px;border:1px solid #d7dfe6;border-left:4px solid #173e65;border-radius:9px;padding:17px 20px;margin:22px 0;background:#f8fafb;font-family:system-ui,sans-serif;font-size:13px}
.woc-x-card .woc-x-source{display:flex;justify-content:space-between;gap:8px;font-weight:850;color:#111;margin-bottom:10px}
.woc-x-card p{font-family:system-ui,sans-serif!important;font-size:13px!important;color:#4c5863;margin:0 0 12px}
.woc-x-card .woc-x-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.woc-x-card button{cursor:pointer;border:0;background:#16364f;color:#fff;border-radius:5px;padding:9px 14px;font-size:12px;font-weight:850}
.woc-x-card a{font-size:12px;color:#12528f;font-weight:800;text-decoration:underline}
.woc-x-card .woc-x-target:not(:empty){margin-top:10px}
.woc-x-card.is-rendered{padding:0;border:0;background:transparent}
.woc-x-card.is-rendered .woc-x-intro{display:none}

/* Avoid huge card text disparities. */
.archive-grid .card-standard .card-copy>p{display:none}
.section-support-grid .card-standard .card-copy>p{display:-webkit-box;-webkit-line-clamp:2}

/* Normalize image width/height attributes in other editorial contexts. */
.section-primary-img,.section-stream-img,.topic-lead-img,.search-result-image img{height:auto;object-fit:cover}
.section-primary-img{aspect-ratio:16/10}
.section-stream-img{height:138px}
.topic-lead-img{aspect-ratio:16/9}
.search-result-image img{height:118px}

@media(max-width:1100px){
  .multimedia-grid{grid-template-columns:1fr}
  .media-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-left:0}
  .media-rail-card{display:grid;grid-template-columns:112px 1fr}
}
@media(max-width:780px){
  .cta-desktop{display:none}.cta-mobile{display:inline}
  .brand-metrics .brand-cta{min-width:auto;padding:9px 12px}
  .brand-row-pro .brand-logo{max-width:210px}
  .brand-row-pro .brand-logo img{width:100%;max-width:210px}
  .lead-copy h1{font-size:clamp(30px,8vw,35px);line-height:1.07}
  .lead-copy p{font-size:16px}
  .cards-grid.layout-feature.count-3>.card-feature{display:block}
  .cards-grid.layout-feature.count-3{grid-template-columns:1fr}
  .multimedia-grid,.media-rail{grid-template-columns:1fr}
  .media-rail-card{grid-template-columns:110px 1fr}
  .media-rail-img{width:110px;height:78px!important}
  .article-body .woc-weibo-gallery img{height:105px!important}
  .economy-topic-strip{align-items:flex-start}
}


/* Last-row horizontal promos: photo must fill its column, not leave a grey letterbox. */
.cards-grid.layout-feature.count-5>.card:nth-child(n+4){align-items:stretch}
.cards-grid.layout-feature.count-5>.card:nth-child(n+4)>.card-media,
.cards-grid.layout-feature.count-4>.card:nth-child(4)>.card-media{
  align-self:stretch;min-height:170px;height:100%;background:transparent
}
.cards-grid.layout-feature.count-5>.card:nth-child(n+4)>.card-media>img,
.cards-grid.layout-feature.count-4>.card:nth-child(4)>.card-media>img{
  display:block;width:100%;height:100%!important;max-height:260px;aspect-ratio:auto;object-fit:cover
}
.cards-grid.layout-feature.count-5>.card:nth-child(n+4)>.card-copy,
.cards-grid.layout-feature.count-4>.card:nth-child(4)>.card-copy{align-self:start}
@media(max-width:780px){
  .cards-grid.layout-feature.count-5>.card:nth-child(n+4)>.card-media,
  .cards-grid.layout-feature.count-4>.card:nth-child(4)>.card-media{min-height:0;height:auto}
  .cards-grid.layout-feature.count-5>.card:nth-child(n+4)>.card-media>img,
  .cards-grid.layout-feature.count-4>.card:nth-child(4)>.card-media>img{height:auto!important;max-height:none;aspect-ratio:16/9}
}


/* Gallery tiles inherit square geometry from the WOC Weibo plugin: remove letterboxing. */
.article-body .woc-weibo-gallery a{aspect-ratio:1/1;min-height:0;position:relative;overflow:hidden;background:#edf0f2}
.article-body .woc-weibo-gallery img{width:100%;height:100%!important;aspect-ratio:1/1;object-fit:cover;object-position:center}
@media(max-width:780px){
  .article-body .woc-weibo-gallery img{height:100%!important}
}


/* A stronger editorial masthead: WOC's own navy section navigation, panda remains primary. */
@media(min-width:781px){
  .site-header .main-nav{position:relative;background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);border-top:0;color:#fff}
  .site-header .main-nav a{color:#fff}
  .site-header .main-nav a:hover{color:#fff;background:#233c54}
  .site-header .main-nav .nav-home{color:#ff6e7d}
}


/* Visual QA round 2: sufficient contrast and no short-image letterboxes. */
.brand-metrics .brand-cta span{font-size:11px;color:#fff!important;letter-spacing:0;text-transform:none;margin:0;font-weight:850}
.card-compact>.card-media{height:82px;align-self:start;min-height:0;background:transparent}
.card-compact>.card-media>img,.card-compact>.card-media>.ph{height:82px!important;width:100%;display:block;object-fit:cover}
@media(max-width:480px){
  .card-compact>.card-media,.card-compact>.card-media>img{height:72px!important}
}