/*
 * CYC Ride UI141 R38U
 * 1. A-T large advertisement panels: blue chrome and local-life heading.
 * 2. Compact commute-weather layout requested on 2026-07-24.
 *
 * Advertisement media dimensions, 4:3 ratio, object-fit, playback timing and
 * click targets remain owned by the existing R38T/R40 runtime.
 */

/* batch4b：A/G/H 內縮規則移除——三框都已移入獨立白板（.passenger-ad-board），
 * 水平內距由板統一提供（15px），選擇器已無匹配對象。 */

/* The solid border plus the outside ring reads as one thick blue frame while
 * preserving the existing ad canvas and preventing any new image crop. */
html body.ui141-ads-20-page .ui141-ad-frame[data-ad-placement] {
  --cyc-r38u-frame-blue: #0b66e4;
  --cyc-r38u-frame-radius: clamp(18px, 4.8vw, 26px);
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  margin-top: var(--cyc-ad-frame-mt, clamp(42px, 8vw, 50px)) !important;
  margin-bottom: var(--cyc-ad-frame-mb, 15px) !important;
  border: 2px solid var(--cyc-r38u-frame-blue) !important;
  border-radius: var(--cyc-r38u-frame-radius) !important;
  box-shadow:
    0 0 0 3px var(--cyc-r38u-frame-blue),
    0 12px 26px rgba(20, 71, 128, .12) !important;
}

/* The fixed text is owned by Ride. The optional suffix is populated only from
 * Ads public-config placementLabels[A-T] and is intentionally blank otherwise. */
html body.ui141-ads-20-page .ui141-ad-frame[data-ad-placement]::before {
  content: "在地生活｜" attr(data-cyc-placement-label);
  position: absolute;
  left: -2px;
  bottom: calc(100% + 10px);
  z-index: 6;
  display: block;
  width: calc(100% + 4px);
  min-width: 0;
  padding: 0 3px;
  box-sizing: border-box;
  overflow: hidden;
  color: #154d86;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 950;
  line-height: 1.28;
  letter-spacing: .01em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* The frame itself must allow the heading to sit above it, so clipping stays on
 * the existing link/media surface instead. */
html body.ui141-ads-20-page .ui141-ad-frame[data-ad-placement] > .ui141-ad-link {
  border-radius: calc(var(--cyc-r38u-frame-radius) - 3px) !important;
  overflow: hidden !important;
}

html body.ui141-ads-20-page .ui141-ad-frame.ui141-ad-empty-state[data-ad-placement] {
  margin-top: clamp(42px, 8vw, 50px) !important;
  margin-bottom: 15px !important;
  border-color: var(--cyc-r38u-frame-blue) !important;
  border-style: solid !important;
}

/* Weather (batch3w): compact card keeps icon/place/temp/condition, a single
 * rain-probability line, three 44px location buttons and a one-line source note. */
html body.passenger-ui66-beauty #commuteWeatherCard {
  gap: 5px 10px !important;
  padding: 8px 11px !important;
}

html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-main {
  gap: 7px !important;
}

html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 25px !important;
  border-radius: 11px !important;
}

html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-tabs {
  gap: 5px !important;
  align-items: stretch !important;
}

html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-source {
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 10px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #5a708c !important;
}

@media (max-width: 560px) {
  html body.passenger-ui66-beauty #commuteWeatherCard {
    gap: 5px !important;
    padding: 6px 9px !important;
  }

  html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-details {
    line-height: 1.3 !important;
  }

  html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-notice {
    padding: 4px 7px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 360px) {
  html body.passenger-ui66-beauty #commuteWeatherCard .commute-weather-source {
    font-size: 9px !important;
  }
}