/* Fotografia ao lado do cabeçalho e do texto de abertura de cada capítulo: título em duas linhas à esquerda, foto à direita
   (sem moldura, só a legenda com o crédito) e o resto do capítulo (gráficos, etc.) a toda a largura por baixo. */
section:has(> .intro-foto) { display: grid; grid-template-columns: minmax(0, 44rem) minmax(300px, 1fr); column-gap: 2.5rem; align-items: start; }
section:has(> .intro-foto) > * { grid-column: 1 / -1; }
section:has(> .intro-foto) > .sec-head { grid-column: 1; grid-row: 1; }
section:has(> .intro-foto) > .sec-head h2 { max-width: 17em; text-wrap: balance; }
section:has(> .intro-foto) > .intro-foto { display: contents; }
section > .intro-foto > .prose { grid-column: 1; grid-row: 2; min-width: 0; }
section > .intro-foto > .foto { grid-column: 2; grid-row: 1 / span 2; align-self: start; max-width: 600px; }
html body figure.foto { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; }
html body figure.foto img { display: block; width: 100%; height: auto; aspect-ratio: var(--proporcao, 3 / 2); object-fit: cover; border-radius: 16px; background: #e8e3d8; }
html body figure.foto figcaption { margin-top: .6rem; color: #66716a; font-size: .78rem; line-height: 1.45; }
html body figure.foto .credito { display: block; margin-top: .15rem; color: #7d8a80; font-size: .72rem; }
html body figure.foto a { color: inherit; }
@media (max-width: 900px) {
    section:has(> .intro-foto) { display: block; }
    section:has(> .intro-foto) > .sec-head h2 { max-width: none; }
    section > .intro-foto { display: block !important; }
    figure.foto { margin-top: 1.2rem; }
}

/* Fotografia ao lado de um bloco (espaço <div data-foto-slot>): bloco à esquerda, foto à direita; no telemóvel, em coluna. */
.foto-ao-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 600px); column-gap: 2.5rem; align-items: start; }
.foto-ao-lado > [data-foto-slot] { min-width: 0; }
.foto-ao-lado > [data-foto-slot]:empty { display: none; }
.hub-bridge.foto-ao-lado { grid-template-columns: minmax(0, 1fr) minmax(260px, 480px); align-items: center; }
.hub-bridge.foto-ao-lado .hub-bridge-texto { min-width: 0; }
.lista-com-fotos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 500px); column-gap: 3rem; align-items: start; }
.fotos-coluna { display: grid; gap: 1.6rem; min-width: 0; }
.fotos-coluna > [data-foto-slot]:empty { display: none; }
@media (max-width: 900px) {
    .foto-ao-lado, .hub-bridge.foto-ao-lado, .lista-com-fotos { display: block; }
    .foto-ao-lado > [data-foto-slot], .fotos-coluna { margin-top: 1.4rem; }
}
/* Com foto ao lado, o cartão do Observatório da Terra ocupa a coluna do texto (como antes, ~46rem) em vez de metade dela. */
.foto-ao-lado .agri-report.terra-cartoes .findings { grid-template-columns: minmax(0, 46rem); }

/* Relatório da Mongólia: foto redonda do cabeçalho (só com crédito) e fotos ao lado dos números e do dzud. */
html body.mongolia-report[data-hero-theme] .bio-banner-hero .water-hero-image { background-image: url('/images/mongolia/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body.mongolia-report .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.mongolia-report .hub-orientation { border-top: 0 !important; }
.foto-credito-solo { margin: 0; color: #7d8a80; font-size: .72rem; line-height: 1.4; }
.foto-credito-solo .credito { display: inline; }
.foto-credito-solo a { color: inherit; }
.mongolia-report .scale-overview { grid-template-columns: minmax(0, 1fr); }
.scale-overview article.com-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); gap: 1.5rem 2.5rem; align-items: center; }
.scale-overview article.com-foto .texto { min-width: 0; }
.scale-overview article.com-foto [data-foto-slot]:empty { display: none; }
@media (max-width: 900px) { .scale-overview article.com-foto { display: block; } .scale-overview article.com-foto [data-foto-slot] { margin-top: 1rem; } html body.mongolia-report .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.mongolia-report .hub-orientation { border-top: 0 !important; } }

/* Mongólia: texto dos cartões um pouco maior e gráficos simples no estilo do Observatório. */
.mongolia-report .scale-overview article small { font-size: .82rem; }
.mongolia-report .scale-overview article strong { font-size: 1.7rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.mongolia-report .scale-overview article p { font-size: 1.06rem; line-height: 1.7; }
.mg-grafico { display: grid; gap: .95rem; margin-top: 1.4rem; }
.mg-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: baseline; }
.mg-linha span { color: var(--ink, #1f2a24); font-size: .92rem; font-weight: 600; }
.mg-linha b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.mg-linha i { grid-column: 1 / -1; display: block; height: 11px; border-radius: 99px; background: rgba(0, 0, 0, .07); position: relative; overflow: hidden; }
.mg-linha i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 99px; background: #a4553b; }
.mg-linha:nth-child(2) i::after { background: #c98b4c; }
.mongolia-report .scale-overview article .mg-nota { margin: 0; color: #6b776f; font-size: .78rem; line-height: 1.5; }
.mg-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.mg-numeros > div { display: grid; gap: .3rem; align-content: start; padding: .9rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.mg-numeros b { font-size: 1.35rem; letter-spacing: -.02em; color: #8a5a2b; }
.mg-numeros span { color: #66716a; font-size: .8rem; line-height: 1.4; }
@media (max-width: 900px) { .mg-numeros { grid-template-columns: 1fr; } }

/* Relatório do Douro: mesmas regras da Mongólia (foto redonda com crédito, cartões com foto, texto maior). */
html body.douro-report[data-hero-theme] .bio-banner-hero .water-hero-image { background-image: url('/images/douro/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body.douro-report .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.douro-report .hub-orientation { border-top: 0 !important; }
.douro-report .scale-overview { grid-template-columns: minmax(0, 1fr); }
.douro-report .scale-overview article small { font-size: .82rem; }
.douro-report .scale-overview article strong { font-size: 1.7rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.douro-report .scale-overview article p { font-size: 1.06rem; line-height: 1.7; }
@media (max-width: 900px) { .douro-report .hero-credito { position: static; text-align: left; margin-top: 1rem; } }

/* Relatório «Depois de 1,5 °C»: mesmas regras da Mongólia e do Douro. */
html body.climate-overshoot-report[data-hero-theme] .bio-banner-hero .observatory-visual { background-image: url('/images/clima15/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body.climate-overshoot-report .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.climate-overshoot-report .hub-orientation { border-top: 0 !important; }
.climate-overshoot-report .scale-overview { grid-template-columns: minmax(0, 1fr); }
.climate-overshoot-report .scale-overview article small { font-size: .82rem; }
.climate-overshoot-report .scale-overview article strong { font-size: 1.7rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.climate-overshoot-report .scale-overview article p { font-size: 1.06rem; line-height: 1.7; }
.climate-overshoot-report .mg-linha:nth-child(1) i::after { background: #c98b4c; }
.climate-overshoot-report .mg-linha:nth-child(2) i::after { background: #a43a32; }
@media (max-width: 900px) { .climate-overshoot-report .hero-credito { position: static; text-align: left; margin-top: 1rem; } }

/* Produção agrícola: foto redonda do cabeçalho com o crédito alinhado por baixo. */
html body[data-hero-theme] #main .bio-banner-hero > .field-mark, html body[data-hero-theme] .field-mark { background-image: url('/images/producao-agricola/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body .hero > .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
@media (max-width: 900px) { html body .hero + .hero-reading-bridge, html body .hero ~ .hero-reading-bridge { margin-top: 4.4rem; } }

/* Observatório da Terra e A teia: foto redonda do cabeçalho; o crédito entra na grelha, por baixo do círculo. */
html body.pagina-terra-foto .observatory-visual:not(.bioweb-visual), html body .observatory-hero .observatory-visual:not(.bioweb-visual) { background-image: url('/images/observatorio-terra/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body .observatory-hero .observatory-visual.bioweb-visual { background-image: url('/images/bioweb/hero.webp') !important; background-size: cover !important; background-position: center !important; }
html body .observatory-hero > .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.observatory-hero > .hero-credito:empty { display: none; }


/* Nota de leitura por baixo do cabeçalho: deixa livre o canto direito, onde fica o crédito da foto redonda. */
@media (min-width: 901px) { html body .bio-hero-followup .hero-guide, html body .bio-hero-followup .hero-guide p { max-width: calc(100% - 25rem) !important; } html body .observatory-hero > .hero-credito { width: 23rem; } }
@media (max-width: 900px) { html body .bio-hero-followup { padding-top: 4.4rem !important; margin-top: 0 !important; } html body .bio-hero-followup .hero-guide { margin-top: 4.4rem !important; } }

/* Telemóvel: o capítulo volta a uma só coluna (título a toda a largura, depois o texto e a foto). */
@media (max-width: 900px) {
    html body section:has(> .intro-foto) { display: block !important; }
    html body section:has(> .intro-foto) > .sec-head { display: block !important; width: 100% !important; max-width: none !important; }
    html body section:has(> .intro-foto) > .sec-head h2 { max-width: none !important; width: 100% !important; font-size: clamp(1.3rem, 5.6vw, 1.75rem); line-height: 1.14; text-wrap: balance; }
    html body section:has(> .intro-foto) > .intro-foto { display: block !important; }
    html body section:has(> .intro-foto) .intro-foto > .prose, html body section:has(> .intro-foto) .intro-foto > .foto { grid-column: auto; grid-row: auto; max-width: none; }
}

/* Aviação: foto redonda do cabeçalho (satélite sobre Portugal), com o crédito por baixo; a cena fica à esquerda da imagem. */
html body.aviacao-report[data-hero-theme] .bio-banner-hero .observatory-visual { background-image: url('/images/aviacao/hero.webp') !important; background-size: cover !important; background-position: 22% 50% !important; }
html body.aviacao-report .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }
.aviacao-report .hub-orientation { border-top: 0 !important; }

/* Ambiente construído e Moda e têxteis: foto redonda do cabeçalho (só com crédito, alinhado por baixo). */
html body.ambiente-report[data-hero-theme] .bio-banner-hero .observatory-visual { background-image: url('/images/ambiente-construido/hero.webp') !important; background-size: cover !important; background-position: 50% 40% !important; }
html body.moda-report[data-hero-theme] .bio-banner-hero .observatory-visual { background-image: url('/images/moda-texteis/hero.webp') !important; background-size: cover !important; background-position: 55% 50% !important; }
html body:is(.ambiente-report, .moda-report) .hero-credito { position: absolute; right: 0; bottom: -1.3rem; margin: 0; width: min(40rem, 100%); text-align: right; z-index: 2; }