.mod-weathernearby {
  width: 100%;
  text-align: center;
}

.mod-weathernearby__heading {
  font-weight: 700;
  margin-bottom: .5rem;
}

/*
  We intentionally reuse the component's tile classes (weather-tile*) so the
  module looks like the native "Kachel 1".
  These rules only handle layout/anchoring and are fully scoped.
*/
.mod-weathernearby .weather-tiles.mod-weathernearby__tiles {
  /*
    Robust layout:
    Some views/templates apply flex/nowrap/inline rules to shared classes like
    `.weather-tiles`. Force a view-agnostic grid so tiles never collapse into
    a single line or get affected by parent container quirks.
  */
  /*
    Always render as a vertical list.
    Some views/templates override `.weather-tiles` (sometimes with !important)
    to behave like a single-line flex/inline row. We counter this with:
    - higher specificity (module scope + both classes)
    - !important on the critical properties
  */
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row;
  gap: .75rem;
  align-items: stretch;
  justify-items: center;
  width: 100%;
  white-space: normal !important;
}

/* Ensure direct children are block-level and full-width even if other CSS targets anchors */
.mod-weathernearby .weather-tiles.mod-weathernearby__tiles > a.mod-weathernearby__tileLink {
  display: block !important;
  width: 100% !important;
}

.mod-weathernearby__tileLink {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  min-width: 0;
}

.mod-weathernearby__tileLink:hover {
  text-decoration: none;
}

/* Slightly larger typography for place + day + date */
.mod-weathernearby__place strong{font-size:1.18em; line-height:1.2;}
.mod-weathernearby .weather-tile__label strong{font-size:1.12em; line-height:1.2;}
.mod-weathernearby .weather-tile__date strong{font-size:1.06em; line-height:1.2;}

@media (max-width: 520px) {
  .mod-weathernearby__tiles {
    gap: .6rem;
  }
}

.mod-weathernearby__place{margin-bottom:.15rem;}

/* Force centering even if the component's tile CSS uses flex/left alignment */
.mod-weathernearby .weather-tile__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mod-weathernearby .weather-tile__label,
.mod-weathernearby .weather-tile__date {
  text-align: center;
}

.mod-weathernearby .weather-tile__values {
  text-align: center;
}

.mod-weathernearby .weather-info-tile-row {
  justify-content: center;
}

.mod-weathernearby .weather-info-row__lines {
  text-align: center;
}
/* Center the weather icon even if component CSS floats/aligns it */
.mod-weathernearby .weather-tile__icon{
  width: 100%;
  float: none !important;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .35rem 0;
}
.mod-weathernearby .weather-tile__icon img{
  display: block;
  margin: 0 auto;
}


/* Nearby: show Tmax then Tmin compact on one line (no overflow) */
.weather-tile__tempsline{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
  width:100%;
}
.weather-tile__tempsline .weather-tempbadge{
  flex:0 1 auto;
  width:auto;
  max-width:calc(50% - 6px);
  box-sizing:border-box;
  justify-content:center;
  padding:3px 6px;
  border-radius:10px;
}