/* Kumma Kalenteri: hyväksytty kellohuone otsikon taustana. */
.visual-calendar .calendar-hero {
  display:grid;
  align-items:center;
  min-height:clamp(230px,24vw,360px);
  padding-block:48px;
  box-sizing:border-box;
  background-color:var(--night);
  background-image:
    linear-gradient(180deg,rgba(20,35,42,.18) 0%,rgba(20,35,42,.24) 55%,#18282f 100%),
    linear-gradient(90deg,rgba(20,35,42,.12),rgba(20,35,42,.28) 50%,rgba(20,35,42,.12)),
    url('/images/kumma-kalenteri-kellohuone-v86.webp');
  background-size:cover;
  background-position:center;
}
.visual-calendar .calendar-hero .calendar-heading {
  justify-content:center;
  margin:0;
  font-size:clamp(2.15rem,5vw,4.5rem);
  line-height:1.15;
  text-align:center;
  text-shadow:0 2px 16px rgba(10,20,26,.85);
}
.visual-calendar .calendar-hero + .calendar-page {
  padding-top:clamp(20px,3vw,40px);
}
@media (max-width:580px) {
  .visual-calendar .calendar-hero {
    min-height:230px;
    background-position:16% center;
  }
  .visual-calendar .calendar-hero .calendar-heading { gap:12px; }
  .visual-calendar .calendar-hero .calendar-heading > span {
    flex:0 1 auto;
    width:min-content;
    max-width:calc(100% - 39px);
  }
  .visual-calendar .calendar-hero .calendar-heading > .visual-icon {
    width:27px;
    height:27px;
  }
}
@media print {
  .visual-calendar .calendar-hero { background:none; min-height:0; padding-block:24px; }
  .visual-calendar .calendar-hero .calendar-heading { color:#000; text-shadow:none; }
}