/* ============================================================
   weather.css
   Media item "Widget de Tempo" (ver media/weather-widget.js) — ícone +
   linha divisória + cidade/temperatura, dentro de uma caixa com fundo
   próprio (cor sólida ou gradiente) e cantos arredondados.

   Os tamanhos aqui são os de REFERÊNCIA (1200x366): o JS reduz tudo
   proporcionalmente via ResizeObserver quando o widget é menor (ver
   weather-widget.js: wireResponsiveScale). Ficam no CSS para evitar
   "flash" com o tamanho errado antes do 1º cálculo.

   Cor de fundo, raio e cores do texto/linha vêm inline (configuráveis no
   painel, ver panels/weather-panel.js).

   Cópia gémea desta folha existe em js/core/export-html.js (EXPORT_CSS) —
   mantida em sincronia manualmente (sem build step, convenção geral do
   projeto).
   ============================================================ */

.weather-widget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    /* O fundo abraça só o conteúdo (ícone + textos), com uma folga à
       volta — nunca estica para o bloco todo (pedido explícito do
       utilizador). O padding é escalado a par do resto pelo
       ResizeObserver (ver weather-widget.js: wireResponsiveScale). */
    padding: 20px;
    /* width/height/flex fixos ao conteúdo — o wrapper .media-item nasce
       sempre com maxWidth/maxHeight:100% (ver media-model.js), que em
       conjunto com um filho flexível esticava o widget para o bloco todo
       e fazia o padding "desaparecer" visualmente (bug real reportado no
       ficheiro exportado). */
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    flex: 0 0 auto;
    align-self: center;
    /* min-width:max-content (não 0): garante que o widget nunca é
       espremido abaixo do seu conteúdo natural pelo max-width:100% do
       .media-item pai — era isso que fazia a coluna de texto encolher e
       o nome da cidade transbordar sobre o padding direito. */
    min-width: -moz-max-content;
    min-width: max-content;
    min-height: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* SEM overflow:hidden — cortava o texto de cidades longas (ex:
       "ALBERGARIA-A-VELHA") e destruía o padding/cantos arredondados
       desse lado (bug real reportado). O widget cresce com o conteúdo;
       se não couber no bloco, a escala reduz a fonte (ver
       weather-widget.js: applyScale), nunca corta. */
    font-family: 'Outfit', sans-serif;
}

.weather-widget.hidden {
    display: none;
}

.weather-widget .weather-widget-icon {
    /* Tamanho real vem do JS, proporcional à fonte da temperatura (ver
       weather-widget.js: setSizes) — aqui só o estado inicial. */
    flex-shrink: 0;
    object-fit: contain;
    display: none;
}

/* align-self:center (não stretch): com stretch + max-height a linha
   crescia a partir do TOPO e era cortada em baixo, ficando visivelmente
   desalinhada do centro (bug real reportado). A altura real vem do JS
   (proporcional à fonte, ver weather-widget.js: setSizes). */
.weather-widget .weather-widget-line {
    width: 3px;
    align-self: center;
    flex-shrink: 0;
}

/* flex-shrink:0 na coluna do texto: quando o conteúdo natural do widget
   excede a largura disponível do bloco (nome de cidade comprido), o
   flexbox encolhe o único filho flexível — esta coluna — e o texto, que
   nunca quebra linha (nowrap), transborda para fora dela, invadindo
   exatamente o espaço do padding direito. Com shrink:0 a coluna nunca
   encolhe abaixo do seu conteúdo, e o padding fica sempre igual dos dois
   lados, seja qual for o nome (bug real reportado, ex: "ALFANDEGA DA FÉ"
   vs "LISBOA"). Se não couber no bloco, quem reduz é a escala de fonte
   (ver weather-widget.js: applyScale), nunca o padding. */
.weather-widget .weather-widget-info {
    flex-shrink: 0;
}

/* min-width:fit-content é ESSENCIAL: sem isto a coluna encolhia à
   largura da TEMPERATURA (texto curto) e o nome da cidade (nowrap)
   transbordava para fora da caixa, comendo o padding direito — nomes
   curtos pareciam bem, nomes longos ficavam colados à borda (bug real
   reportado, ex: "ALFANDEGA DA FÉ"). Com fit-content, a coluna cresce
   sempre até ao filho MAIS LARGO, e o padding fica igual dos dois lados
   seja qual for o nome. */
.weather-widget .weather-widget-info {
    display: flex;
    flex-direction: column;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

/* Tamanhos de fonte vêm do JS (configuráveis no painel, ver
   weather-widget.js: setSizes) — aqui só o que não é configurável.
   SEM overflow/text-overflow: o nome da cidade nunca é truncado com
   "..." — se for longo, o widget cresce; se não couber no bloco, a
   escala reduz a fonte (ver weather-widget.js: applyScale). */
.weather-widget .weather-widget-city {
    text-transform: uppercase;
    white-space: nowrap;
}

.weather-widget .weather-widget-temp {
    white-space: nowrap;
}

/* Bloco de Produtos do Widget de Tempo (ver weather-model.js:
   productsBlockId/findWeatherProductsOwner) — bloco PRÓPRIO e
   independente do bloco do widget, mostra sempre o PRODUTO ATIVO
   (imagem/vídeo) a ocupar o espaço todo do bloco, mesmo padrão do
   Scratch/Drag & Drop como media item. */
.weather-products-block {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.weather-products-block.hidden {
    display: none;
}
.weather-products-block .weather-product-media {
    display: block;
    width: 100%;
    height: 100%;
    /* contain (não cover): a imagem/vídeo tem de aparecer SEMPRE
       INTEIRA dentro do bloco, mesmo que sobre espaço vazio dos lados —
       pedido explícito do utilizador: "a imagem aparece sempre toda
       dentro do bloco, seja mais pequena que ele" (cover cortava as
       pontas quando o aspect-ratio do ficheiro não batia com o do
       bloco, bug real reportado com fotos de produtos reais). */
    object-fit: contain;
}

/* Placeholder do editor quando nenhum produto ativo tem ficheiro
   carregado, ou nenhuma condição se cumpre — nunca aparece no export
   (lá o bloco fica mesmo vazio). */
.weather-products-block-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
}

/* Ficam sempre escondidos — só guardam os data-attributes que o
   runtime de export lê para escolher o produto ativo (ver
   WEATHER_SCRIPT_HTML em export-html.js: paintProducts). */
.weather-product-source {
    display: none;
}