/* =================================================================
   Service detail page
   (loads after style.css + about.css and re-uses their chrome:
    page header, scroll chevron, buttons, footer)
   ================================================================= */

/* ---------------- Page title header ---------------- */
.page_header_sd_bulk      { background-image: url(../images/sd-bulk-header.jpg); }
.page_header_sd_retail    { background-image: url(../images/sd-retail-header.jpg); }
/* these two headers carry a subject that has to stay readable, so the navy scrim
   over them is lighter than the site default of .6 */
.page_header.page_header_sd_bulk:before   { background-color: rgba(6,18,49,.35); }
.page_header.page_header_sd_retail:before { background-color: rgba(6,18,49,.45); }
.page_header_sd_transport { background-image: url(../images/sd-transport-header.jpg); }
.page_header_sd_stations  { background-image: url(../images/sd-stations-header.jpg); }

/* ---------------- Shell ---------------- */
.sec_sd { background-color: #FFFFFF; }
.sd_wrap { padding: 121px 0 126px; }

.sd_article { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; }

/* ---------------- Left column ---------------- */
.sd_content { width: 63.02%; }

.sd_featured { position: relative; overflow: hidden; }
.sd_featured img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.sd_body { margin-top: 33px; }
.sd_h3 {
  font-family: Outfit, sans-serif; font-size: 35px; line-height: 38px; font-weight: 500;
  letter-spacing: -1px; color: var(--text_dark); margin: 0 0 24.5px;
}
.sd_body p { font-size: 17px; line-height: 28.05px; color: var(--text); margin: 0 0 26.69px; }
.sd_body p:last-child { margin-bottom: 0; }

.sd_gallery { display: flex; flex-wrap: wrap; gap: 8.5px; margin: 0 0 21px; }
.sd_gallery figure { margin: 0; }
.sd_gallery_half { width: calc(50% - 4.25px); }
.sd_gallery_full { width: 100%; }
.sd_gallery img {
  width: 100%; aspect-ratio: 1.341 / 1; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.sd_gallery figure { overflow: hidden; }
.sd_gallery figure:hover img { transform: scale(1.04); }

/* ---------------- Right column (sticky details) ---------------- */
.sd_details {
  width: 36.98%; padding-left: 51px;
  /* clear the 115px sticky header so the subtitle is never hidden behind it */
  position: sticky; top: 145px;
}
.sd_subtitle {
  font-family: Outfit, sans-serif; font-size: 32.98px; line-height: 35.62px; font-weight: 500;
  letter-spacing: -.5px; color: var(--text_dark); margin: -4px 0 26px;
}
.sd_desc p { font-size: 17px; line-height: 28.05px; color: var(--text); margin: 0; }

.sd_details_list { padding-top: 35px; }
.sd_details_item { display: flex; flex-wrap: wrap; font-size: 17.85px; line-height: 28.05px; }
.sd_details_item + .sd_details_item { margin-top: 11px; }
.sd_details_item_title {
  flex: 0 0 127.9px; padding-right: 17.85px; box-sizing: border-box;
  font-weight: 700; color: var(--text_dark);
}
.sd_details_item_value { flex: 1 1 0; min-width: 0; color: var(--text); }

.sd_share { margin-top: 32.3px; }
.sd_share a {
  display: inline-block; width: 23.2px; height: 28.85px; line-height: 28.85px;
  font-size: 17px; color: var(--text_link); margin: 0 35px 15px 0;
  transition: color .3s ease;
}
.sd_share a:last-child { margin-right: 0; }
.sd_share a:hover { color: var(--text_hover); }
.sd_share a:before { margin: 0; width: auto; }

/* ---------------- Mirrored variant: details on the left ---------------- */
.sd_article_left .sd_details { padding-left: 0; padding-right: 51px; order: 1; }
.sd_article_left .sd_content { order: 2; }

/* the station hero keeps its natural aspect rather than being cropped square */
.sd_featured_natural img { aspect-ratio: auto; height: auto; }

/* ---------------- Prev / next ---------------- */
.sd_nav { display: flex; justify-content: space-between; align-items: center; margin-top: 85px; }
.sd_nav a {
  position: relative; display: inline-block;
  font-family: Outfit, sans-serif; font-size: 16px; line-height: 28.05px; font-weight: 500;
  color: var(--text_dark); transition: color .3s ease;
}
.sd_nav a:hover { color: var(--text_link); }
.sd_nav_prev a:before,
.sd_nav_next a:after {
  font-family: fontello; font-size: 12px; display: inline-block; vertical-align: middle;
  position: relative; transition: transform .3s ease;
}
.sd_nav_prev a:before { content: '\ea07'; margin-right: 12px; }
.sd_nav_next a:after  { content: '\e9a4'; margin-left: 12px; }
.sd_nav_prev a:hover:before { transform: translateX(-5px); }
.sd_nav_next a:hover:after  { transform: translateX(5px); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .sd_wrap { padding: 90px 0; }
  .sd_details { top: 30px; }          /* the fixed header is not rendered below 1280 */
  .sd_h3 { font-size: 30px; line-height: 33px; letter-spacing: -.8px; margin-bottom: 20px; }
  .sd_body { margin-top: 24px; }
  .sd_nav { margin-top: 43px; }
}

@media (max-width: 1023px) {
  .sd_wrap { padding: 80px 0; }
  .sd_content { width: 60.03%; }
  .sd_details { width: 39.97%; padding-left: 30px; top: 30px; }
  .sd_article_left .sd_details { padding-left: 0; padding-right: 30px; }
  .sd_subtitle { font-size: 24px; line-height: 26px; margin-bottom: 20px; }
  .sd_details_item { font-size: 16px; }
  .sd_details_item_title { flex-basis: 110px; padding-right: 12px; }
}

@media (max-width: 767px) {
  .sd_wrap { padding: 60px 0; }
  .sd_content, .sd_details { width: 100%; }
  .sd_details,
  .sd_article_left .sd_details {
    order: 1; padding: 0 0 32px; position: static; top: auto;
  }
  .sd_content, .sd_article_left .sd_content { order: 2; }
  .sd_subtitle { font-size: 26px; line-height: 30px; margin: 0 0 18px; }
  .sd_details_item { font-size: 17px; }
  .sd_details_item_title { flex-basis: 128px; padding-right: 16px; }
  .sd_nav { margin-top: 25px; }
}

@media (max-width: 479px) {
  .sd_h3 { font-size: 26px; line-height: 30px; }
  .sd_subtitle { font-size: 24px; line-height: 28px; }
  .sd_details_item_title { flex: 0 0 100%; padding-right: 0; }
  .sd_details_item_value { flex: 0 0 100%; }
  .sd_share a { margin-right: 26px; }
  .sd_nav a { font-size: 15px; }
}