/* Acabamento do modo Meteorologia TV. Mantem intacta a arte meteorologica. */
body.layout-broadcast{
  position:relative;
  overflow:hidden;
  background:#0b6fae url('/assets/broadcast-bg.svg') center/cover fixed no-repeat!important;
}
body.layout-broadcast::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,31,74,.16) 0%,transparent 30%),
    radial-gradient(ellipse at 50% 72%,rgba(255,255,255,.12),transparent 45%);
}
body.layout-broadcast::after{
  content:"";
  position:fixed;
  z-index:0;
  left:0;
  right:0;
  bottom:0;
  height:24vh;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(3,79,139,.14) 100%);
}
.layout-broadcast .page{position:relative;z-index:1}

/* Contraste e profundidade do painel principal para TV. */
.layout-broadcast .main-city{
  border:1px solid rgba(118,190,231,.22)!important;
  background:
    radial-gradient(ellipse at 45% 42%,rgba(16,83,153,.34),transparent 39%),
    linear-gradient(104deg,#02172f 0%,#052958 44%,#063b77 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -24px 70px rgba(0,15,43,.2),
    0 14px 34px rgba(0,42,84,.28)!important;
}
.layout-broadcast .broadcast-place{padding-left:58px!important}
.layout-broadcast .broadcast-metrics{padding-right:46px!important}

/* Cards: mais area interna, sem elementos grudados nas extremidades. */
.layout-broadcast .city-card.broadcast-card{
  position:relative;
  grid-template-rows:76px minmax(0,1fr)!important;
  padding:26px 28px 24px!important;
  box-shadow:0 10px 26px rgba(8,72,118,.15),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.layout-broadcast .broadcast-card-head{
  height:76px;
  align-items:flex-start!important;
  gap:18px;
}
.layout-broadcast .broadcast-card-head>div:first-child{
  min-width:0;
  padding-top:2px;
}
.layout-broadcast .city-card-name{
  line-height:1!important;
  margin:0!important;
}
.layout-broadcast .broadcast-card-state{
  line-height:1.08!important;
  margin-top:8px!important;
}
.layout-broadcast .city-card-temp{
  align-self:flex-start!important;
  min-width:80px;
  text-align:right;
  line-height:.86!important;
  padding-top:1px;
  margin-right:2px;
}
.layout-broadcast .broadcast-card-body{
  position:relative;
  height:100%;
  min-height:0;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 132px!important;
  column-gap:14px!important;
  align-items:end!important;
}
.layout-broadcast .city-card-bottom{
  align-self:end!important;
  justify-self:start;
  padding:0 0 6px!important;
  margin:0!important;
}
.layout-broadcast .city-card-range{
  margin-bottom:7px!important;
}
.layout-broadcast .city-card-range,
.layout-broadcast .city-card-rain{line-height:1.08!important}
.layout-broadcast .city-card .broadcast-weather.compact{
  width:118px!important;
  height:90px!important;
  align-self:end!important;
  justify-self:end!important;
  margin:0 8px 5px 0!important;
  transform:none!important;
}

/* Titulo regional no mesmo tom luminoso da referencia. */
.layout-broadcast .region-section{margin-left:20px!important;margin-right:20px!important}
.layout-broadcast .section-title{
  color:#bfe8fb!important;
  text-shadow:0 1px 3px rgba(0,45,85,.48)!important;
  margin-left:8px!important;
  margin-bottom:14px!important;
}

/* Rodape e cabecalho ganham a mesma respiracao visual da referencia. */
.layout-broadcast header{margin-left:28px!important;margin-right:28px!important}
.layout-broadcast .source{margin-right:4px}
.layout-broadcast .broadcast-footer{padding-left:58px!important}

@media(max-height:900px) and (min-width:1251px){
  .layout-broadcast .broadcast-place{padding-left:44px!important}
  .layout-broadcast .broadcast-metrics{padding-right:34px!important}
  .layout-broadcast .city-card.broadcast-card{
    grid-template-rows:58px minmax(0,1fr)!important;
    padding:17px 22px 15px!important;
  }
  .layout-broadcast .broadcast-card-head{height:58px;gap:12px}
  .layout-broadcast .city-card-temp{min-width:66px;margin-right:0}
  .layout-broadcast .broadcast-card-body{grid-template-columns:minmax(0,1fr) 106px!important;column-gap:10px!important}
  .layout-broadcast .city-card-bottom{padding-bottom:3px!important}
  .layout-broadcast .city-card-range{margin-bottom:4px!important}
  .layout-broadcast .city-card .broadcast-weather.compact{
    width:96px!important;
    height:74px!important;
    margin:0 6px 3px 0!important;
  }
  .layout-broadcast .section-title{margin-bottom:9px!important}
}