@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800;900&display=swap');

/* Refinamento visual para aproximar a tela da arte de referência aprovada. */
.layout-broadcast{
  font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  background:#0c71b8 url('/assets/broadcast-bg.svg') center/cover fixed no-repeat!important;
}
.layout-broadcast .page{padding:30px 30px 0!important}
.layout-broadcast header{height:108px!important;flex:0 0 108px!important;margin:0 20px 16px!important}
.layout-broadcast h1{
  font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif!important;
  font-size:58px!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  line-height:.96!important;
  text-shadow:0 2px 3px rgba(0,24,55,.2)!important;
}
.layout-broadcast .forecast-label{font-size:23px!important;font-weight:500!important;color:#78c8ee!important;letter-spacing:.03em!important}
.layout-broadcast .source{font-size:18px!important;font-weight:400!important;padding-top:28px!important}

.layout-broadcast .main-city{
  height:430px!important;
  min-height:430px!important;
  border-radius:32px!important;
  margin-bottom:22px!important;
  background:linear-gradient(100deg,#031b3d 0%,#062c60 44%,#073d7b 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(3,32,67,.24)!important;
}
.layout-broadcast .broadcast-main-grid{grid-template-columns:32% 27% 16% 25%!important}
.layout-broadcast .broadcast-place{padding:48px 0 0 48px!important;height:76%!important}
.layout-broadcast .broadcast-city{
  font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif!important;
  font-size:80px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  line-height:.92!important;
}
.layout-broadcast .broadcast-state{font-size:33px!important;font-weight:400!important;color:#b5d7ea!important;margin-top:16px!important}
.layout-broadcast .broadcast-now{margin-top:44px!important;border-left:3px solid #17aaf2!important;padding-left:18px!important}
.layout-broadcast .broadcast-now span{font-size:19px!important;font-weight:700!important;color:#20b3ff!important}
.layout-broadcast .broadcast-now strong{font-size:31px!important;font-weight:500!important}

.layout-broadcast .broadcast-visual{overflow:visible!important}
.layout-broadcast .broadcast-visual:after{width:320px!important;height:86px!important;bottom:54px!important;opacity:.8}
.layout-broadcast .broadcast-weather{width:355px;height:270px;filter:drop-shadow(0 18px 20px rgba(0,10,35,.34));overflow:visible}
.layout-broadcast .broadcast-weather svg{display:block;width:100%;height:100%;overflow:visible}
.layout-broadcast .broadcast-weather.compact{width:135px;height:100px;filter:drop-shadow(0 9px 9px rgba(8,39,73,.25))}
.layout-broadcast .bw-cloud-group{transform-origin:160px 130px;animation:bwCloudFloat 6s ease-in-out infinite}
.layout-broadcast .bw-rain line{stroke:#2baaf4;stroke-width:4.8;stroke-linecap:round;animation:bwRain 1.15s linear infinite}
.layout-broadcast .broadcast-weather.compact .bw-rain line{stroke-width:5.5}
.layout-broadcast .bw-rain line:nth-child(2){animation-delay:-.3s}.layout-broadcast .bw-rain line:nth-child(3){animation-delay:-.65s}.layout-broadcast .bw-rain line:nth-child(4){animation-delay:-.15s}.layout-broadcast .bw-rain line:nth-child(5){animation-delay:-.75s}.layout-broadcast .bw-rain line:nth-child(6){animation-delay:-.48s}
.layout-broadcast .bw-lightning{filter:drop-shadow(0 0 8px #fff58b);animation:bwFlash 2.4s ease-in-out infinite}
.layout-broadcast .bw-fog line{stroke:rgba(225,244,255,.9);stroke-width:8;stroke-linecap:round;animation:bwFog 4s ease-in-out infinite}
.layout-broadcast .bw-sun{transform-origin:center;animation:bwSun 4s ease-in-out infinite}
@keyframes bwCloudFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-6px)}}
@keyframes bwRain{0%{transform:translateY(-7px);opacity:.15}20%{opacity:1}100%{transform:translateY(14px);opacity:.2}}
@keyframes bwFlash{0%,74%,100%{opacity:.35}78%,82%{opacity:1}80%,86%{opacity:.45}}
@keyframes bwFog{0%,100%{transform:translateX(-5px);opacity:.6}50%{transform:translateX(7px);opacity:1}}
@keyframes bwSun{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.layout-broadcast .broadcast-temp{font-family:"Roboto Condensed",sans-serif!important;font-size:138px!important;font-weight:300!important;letter-spacing:-.055em!important}
.layout-broadcast .broadcast-feels{font-size:20px!important;font-weight:500!important;color:#7dcdf2!important}
.layout-broadcast .broadcast-feels strong{font-size:33px!important;font-weight:500!important}
.layout-broadcast .broadcast-metrics{padding:20px 36px 18px 30px!important;column-gap:26px!important}
.layout-broadcast .broadcast-metric span{font-size:16px!important;font-weight:700!important}
.layout-broadcast .broadcast-metric strong{font-size:34px!important;font-weight:500!important}
.layout-broadcast .broadcast-metric svg{width:42px!important;height:42px!important}
.layout-broadcast .metric-wind strong{font-size:31px!important}

.layout-broadcast .region-section{margin:0 16px!important}
.layout-broadcast .section-title{
  color:#d5ecf8!important;
  text-shadow:0 1px 2px rgba(4,48,86,.35)!important;
  font-family:"Roboto Condensed",sans-serif!important;
  font-size:24px!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
  margin:0 0 12px 10px!important;
}
.layout-broadcast .cities{gap:14px!important}
.layout-broadcast .city-card.broadcast-card{
  height:255px!important;
  min-height:255px!important;
  border-radius:24px!important;
  padding:24px 22px 18px!important;
  grid-template-rows:74px 1fr!important;
  background:linear-gradient(155deg,#fff 0%,#f6fbfe 58%,#e8f2f8 100%)!important;
}
.layout-broadcast .city-card-name{font-family:"Roboto Condensed",sans-serif!important;font-size:29px!important;font-weight:700!important;letter-spacing:-.01em!important}
.layout-broadcast .broadcast-card-state{font-size:20px!important;font-weight:400!important;margin-top:7px!important}
.layout-broadcast .city-card-temp{font-family:"Roboto Condensed",sans-serif!important;font-size:62px!important;font-weight:400!important;color:#0c59a6!important}
.layout-broadcast .broadcast-card-body{grid-template-columns:1fr 145px!important}
.layout-broadcast .city-card-range{font-size:23px!important;font-weight:600!important}
.layout-broadcast .city-card-rain{font-size:21px!important;font-weight:400!important;color:#0c4f9d!important}
.layout-broadcast .city-card .broadcast-weather.compact{justify-self:end;align-self:end;margin-right:-2px;margin-bottom:-2px}

.layout-broadcast .broadcast-footer{
  height:70px!important;flex:0 0 70px!important;margin:24px -30px 0!important;padding:0 48px!important;
  background:linear-gradient(90deg,#0b4c98 0%,#0b5aa7 54%,#073e80 100%)!important;
  font-size:21px!important;font-weight:400!important;color:#d8edf9!important;
}
.layout-broadcast .calendar-mark{font-size:27px!important;color:#8dd4f5!important}

@media(max-height:900px) and (min-width:1251px){
 .layout-broadcast .page{padding-top:20px!important}
 .layout-broadcast header{height:90px!important;flex-basis:90px!important;margin-bottom:10px!important}
 .layout-broadcast h1{font-size:48px!important}.layout-broadcast .forecast-label{font-size:19px!important}.layout-broadcast .source{padding-top:20px!important}
 .layout-broadcast .main-city{height:355px!important;min-height:355px!important;margin-bottom:14px!important}
 .layout-broadcast .broadcast-place{padding-top:34px!important}.layout-broadcast .broadcast-city{font-size:65px!important}.layout-broadcast .broadcast-state{font-size:27px!important}.layout-broadcast .broadcast-now{margin-top:28px!important}
 .layout-broadcast .broadcast-weather{width:300px;height:220px}.layout-broadcast .broadcast-temp{font-size:112px!important}
 .layout-broadcast .section-title{font-size:20px!important;margin-bottom:8px!important}
 .layout-broadcast .city-card.broadcast-card{height:188px!important;min-height:188px!important;padding:16px 18px 12px!important;grid-template-rows:58px 1fr!important}.layout-broadcast .city-card-name{font-size:24px!important}.layout-broadcast .broadcast-card-state{font-size:16px!important}.layout-broadcast .city-card-temp{font-size:48px!important}.layout-broadcast .city-card-range{font-size:18px!important}.layout-broadcast .city-card-rain{font-size:16px!important}.layout-broadcast .broadcast-weather.compact{width:112px;height:82px}
 .layout-broadcast .broadcast-footer{height:48px!important;flex-basis:48px!important;margin-top:10px!important;font-size:17px!important}
}