/* =================================================================
   Stations list page (the theme's "band" portfolio list)
   ================================================================= */

/* ---------------- Page headers ---------------- */
.page_header_stations { background-image: url(../images/stations-header-bg.jpg); }
/* both of these are night / sunset shots, so the navy scrim over them is
   lighter than the site default of .6 to keep the station readable */
.page_header.page_header_stations:before { background-color: rgba(6,18,49,.40); }

/* ---------------- Station detail headers ---------------- */
.page_header_st_chegutu { background-image: url(../images/st-chegutu-header.jpg); }
.page_header.page_header_st_chegutu:before { background-color: rgba(6,18,49,.45); }
.page_header_st_collen-bawn { background-image: url(../images/st-collen-bawn-header.jpg); }
.page_header.page_header_st_collen-bawn:before { background-color: rgba(6,18,49,.45); }
.page_header_st_masvingo { background-image: url(../images/st-masvingo-header.jpg); }
.page_header.page_header_st_masvingo:before { background-color: rgba(6,18,49,.45); }
.page_header_st_gwanda { background-image: url(../images/st-gwanda-header.jpg); }
.page_header.page_header_st_gwanda:before { background-color: rgba(6,18,49,.45); }
.page_header_st_redcliff { background-image: url(../images/st-redcliff-header.jpg); }
.page_header.page_header_st_redcliff:before { background-color: rgba(6,18,49,.45); }

/* ---------------------------------------------------------------
   The list
   --------------------------------------------------------------- */
.sec_stations { background-color: var(--bg_color); }
.stn_sp_top { height: 70px; }
.stn_sp_bot { height: 120px; }

.stn_item { display: flex; flex-flow: row; align-items: stretch; }
.stn_item + .stn_item { margin-top: 30px; }

.stn_thumb {
  position: relative; flex: 0 0 49.03%; max-width: 49.03%;
  aspect-ratio: 890 / 664;          /* the theme's thumb crop drives the band height */
  overflow: hidden; margin-bottom: 0;
}
.stn_thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.stn_thumb .stn_mask {
  content: ''; position: absolute; z-index: 4; inset: 0;
  background-color: rgba(6,18,49,.5); opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.stn_thumb .stn_link { position: absolute; z-index: 5; inset: 0; }
.stn_item:hover .stn_mask { opacity: 1; }
.stn_item:hover .stn_thumb img { transform: scale(1.04); }

/* When the WebGL waves effect takes over the thumb it draws the picture itself
   (see assets/js/image-waves.js), so the CSS fallback hover is switched off -
   like the reference, hovering then only ripples the image. */
.stn_thumb.has_waves .gea_waves_canvas {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block;
}
.stn_thumb.has_waves { overflow: visible; }
.stn_item:hover .stn_thumb.has_waves img { transform: none; }
.stn_thumb.has_waves + .stn_mask,
.stn_thumb.has_waves .stn_mask { display: none; }

.stn_info {
  box-sizing: border-box;
  flex: 0 0 45.74%; max-width: 45.74%;
  align-self: center;
  display: flex; flex-direction: column; justify-content: center;
  padding: 54.4px 0 64.6px 66.3px;
}
.stn_cat {
  display: block; width: 100%;
  font-family: Outfit, sans-serif; font-size: 14px; line-height: 25px; font-weight: 500;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text_dark);
  margin-top: 5.6px;
}
.stn_title {
  font-family: Outfit, sans-serif; font-size: 47px; line-height: 48px; font-weight: 500;
  letter-spacing: -1.4px; margin: 12px 0 27px;
}
.stn_title a { color: var(--text_dark); }
.stn_title a:hover { color: var(--text_dark); }
.stn_desc { font-size: 17px; line-height: 28.05px; color: var(--text); margin: 0 0 15px; }
.stn_desc p { margin: 0; }

/* The theme pushes the button down with a percentage margin and pulls the box
   back up with the matching negative one - that is what produces the airy gap
   above "Read More" and keeps the text block optically centred. */
.stn_btn {
  display: flex; align-items: center; align-self: flex-start;
  font-family: Outfit, sans-serif; font-size: 15px; line-height: 21px; font-weight: 500;
  letter-spacing: 0; padding: 0; background-color: transparent;
  color: var(--text_dark);
  margin: 15% 0 -15%;
}
.stn_btn:hover { color: var(--text_dark); }
.stn_arrow {
  display: inline-block; position: relative; overflow: hidden;
  width: 39px; height: 17px; line-height: 20px; margin-left: 15px;
  transition: width .4s ease, margin-left .4s ease;
}
.stn_arrow:before {
  content: '\ea04'; font-family: fontello; font-size: 11px; font-weight: 400; line-height: 20px;
  position: absolute; top: -1px; right: 2px; display: block;
  color: var(--text_dark); transition: color .4s ease;
}
.stn_btn:hover .stn_arrow { width: 59px; margin-left: 35px; }
.stn_btn:hover .stn_arrow:before { color: var(--text_link); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .stn_sp_top { height: 40px; }
  .stn_sp_bot { height: 90px; }

  .stn_thumb { flex-basis: 49.0%; max-width: 49.0%; }
  .stn_info { flex-basis: 47.84%; max-width: 47.84%; padding: 37.4px 0 47.6px 49.3px; }
  .stn_title { font-size: 38px; line-height: 40px; letter-spacing: -1.1px; margin: 10px 0 20px; }
  .stn_btn { margin: 30px 0 0; }
}

@media (max-width: 1023px) {
  .stn_sp_bot { height: 80px; }
  .stn_thumb { flex-basis: 49.06%; max-width: 49.06%; align-self: center; }
  .stn_info { flex-basis: 46.61%; max-width: 46.61%; padding: 0 0 0 34px; }
  .stn_title { font-size: 32px; line-height: 34px; letter-spacing: -1px; margin: 8px 0 16px; }
  .stn_desc { font-size: 16px; line-height: 26px; }
  .stn_btn { margin: 20px 0 0; }
}

@media (max-width: 767px) {
  .stn_sp_top { height: 30px; }
  .stn_sp_bot { height: 60px; }

  .stn_item { flex-direction: column; }
  .stn_thumb, .stn_info { flex-basis: auto; max-width: 100%; width: 100%; }
  .stn_info { padding: 22.4px 0 16px; align-self: stretch; }
  .stn_title { font-size: 26px; line-height: 30px; letter-spacing: -.8px; margin: 8px 0 14px; }
  .stn_btn { margin: 18px 0 0; }
}