/*
 * Loaded globally and targets the "/technical" routes and listings.
 */
.technical-hero {
  --technical-hero-background-color: #f6f6f6;
  --technical-hero-border-color: #d6d6d6;
  --technical-hero-text-color: #acdcff;
  --technical-hero-accent-color: #C93A7A;
  --page-hero-background-color: var(--technical-hero-background-color);
  --page-hero-border-color: var(--technical-hero-border-color);
  --page-hero-text-color: var(--technical-hero-text-color);
  --page-hero-accent-color: var(--technical-hero-accent-color);
  --page-hero-shadow-color: #000;
}
.technical-more-button,
.technical-footer-creative {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  background: #0d75b9;
  color: #fff;
  border-radius: 4px;
  font-family: 'Newsreader';
  font-weight: bold;
  text-decoration: none;
  font-size: 1.05em;
  padding: 0.9em 1.25em;
  box-shadow: 0.15em 0.2em 0 rgba(0, 0, 0, 0.08);
}
.technical-more-button:hover,
.technical-footer-creative:hover {
  background: #005BFF;
  color: #fff;
}
.technical-topics {
  display: flex;
  justify-content: center;
  gap: 2.2em;
  padding: 1.5em 4%;
  background: #efefef;
  border-bottom: 1px solid #d7d7d7;
  box-shadow: 0 1px 0 #fff inset;
}
.technical-topic {
  color: #4b525b;
  font-family: 'Newsreader';
  font-weight: bold;
  text-decoration: none;
  padding: 0.55em 0;
  border-bottom: 3px solid transparent;
}
.technical-topic:hover,
.technical-topic-active {
  color: #0d75b9;
  border-bottom-color: #0073bb;
}
.technical-featured,
.technical-latest,
.technical-more {
  width: 88%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.technical-featured {
  padding: 3.5em 0 2.5em;
}
.technical-section-header {
  font-size: 1.3em;
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin-bottom: 1.5em;
}
.technical-section-header:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #cfcfcf;
}
.technical-section-header h2 {
  color: #23262b;
  font-size: 1.35em;
  letter-spacing: 0;
  margin: 0;
}
.technical-section-header h2 span {
  margin-right: 0.45em;
}
.technical-featured-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25em;
}
.technical-featured-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.08);
}
.technical-featured-thumb {
  display: block;
  background: #333;
  line-height: 0;
  height: 0;
  overflow: hidden;
  padding-bottom: 56%;
}
.technical-featured-thumb img {
  width: 100%;
  height: auto;
  opacity: 0.96;
  transition: opacity .25s ease-in-out;
}
.technical-featured-thumb:hover img {
  opacity: 0.75;
}
.technical-featured-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25em;
}
.technical-featured-body h3 {
  font-size: 1.3em;
  line-height: 1.2;
  margin-bottom: 0.75em;
}
.technical-featured-body h3 a {
  color: #23262b;
  text-decoration: none;
}
.technical-featured-body h3 a:hover {
  color: #000;
  text-decoration: underline;
}
.technical-featured-body p {
  color: #49515b;
  font-size: 1.05em;
  line-height: 1.6;
  margin: 0 0 1.8em;
}
.technical-featured-meta {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: auto;
  color: #5c646f;
}
.technical-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.technical-featured-meta span + span:before {
  content: "•";
  margin-right: 1em;
  color: #777;
}
.technical-featured-meta a {
  margin-left: auto;
  color: #0073bb;
  text-decoration: none;
  font-size: 1.6em;
  line-height: 1;
}
.technical-latest {
  padding: 0 0 2.5em;
}
.technical-list {
  overflow: hidden;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  background: #f8f8f8;
  box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.04);
}
.technical-latest-item {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr) auto 32px;
  gap: 1.3em;
  align-items: center;
  padding: 1.05em 1.5em;
  border-top: 1px solid #dcdcdc;
}
.technical-latest-item:first-child {
  border-top: 0;
}
.technical-latest-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 56px;
  overflow: hidden;
  color: #fff;
  background: #bbb;
  font-size: 1.6em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}
.technical-latest-thumb:hover {
  color: #fff;
  background: #aaa;
}
.technical-latest-thumb img {
  display: block;
  width: 75px;
  aspect-ratio: 450 / 336;
  height: auto;
  object-fit: cover;
  opacity: 0.96;
  transition: opacity .25s ease-in-out;
}
.technical-latest-thumb:hover img {
  opacity: 0.75;
}
.technical-latest-copy h3 {
  font-size: 1em;
  margin: 0 0 0.2em;
  line-height: 1.25;
}
.technical-latest-copy h3 a {
  color: #222;
  text-decoration: none;
}
.technical-latest-copy h3 a:hover {
  color: #000;
  text-decoration: underline;
}
.technical-latest-copy p {
  color: #4c5662;
  margin: 0;
}
.technical-latest-meta {
  display: grid;
  grid-template-columns: repeat(2, 7.5em);
  gap: 0.8em;
  color: #4f5965;
  white-space: nowrap;
}
.technical-latest-arrow {
  color: #0073bb;
  text-decoration: none;
  font-size: 1.4em;
  line-height: 1;
}
.technical-latest-arrow:hover {
  color: #005BFF;
}
.technical-more {
  display: flex;
  align-items: center;
  gap: 1.6em;
  box-sizing: border-box;
  margin-top: 1.4em;
  margin-bottom: 3.5em;
  padding: 1.8em 2em;
  background: #e8f2f8;
  border: 1px solid #d3e3ee;
  border-radius: 5px;
}
.technical-more-archive {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.technical-more-link {
  text-decoration: none;
  padding: 1em;
  padding-inline-start: 0;
}
.technical-more-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d75b9;
  color: #fff;
  border-radius: 6px;
  font-size: 2.2em;
}
.technical-more-copy {
  flex: 1;
}
.technical-more-copy h2 {
  color: #23262b;
  font-size: 1.45em;
  margin: 0 0 0.3em;
}
.technical-more-copy h1 {
  color: #23262b;
  font-size: 1.45em;
  margin: 0;
}
.technical-more-button {
  color: #0d75b9;
  background: transparent;
  border: 1px solid #0d75b9;
  box-shadow: none;
}
.technical-more-button:hover {
  background: #0d75b9;
}
.technical-footer-creative {
  justify-self: end;
  background: #C93A7A;
  color: #fff !important;
}
.technical-footer-creative:hover {
  background: #a9245d;
  text-decoration: none !important;
}
@media screen and (max-width:767px) {
  .technical-topics {
    justify-content: flex-start;
    gap: 1.4em;
    overflow-x: auto;
    padding: 1em 6%;
  }
  .technical-topic {
    white-space: nowrap;
  }
  .technical-featured,
  .technical-latest,
  .technical-more,
  .technical-footer-nav {
    width: 90%;
  }
  .technical-featured-list {
    grid-template-columns: 1fr;
  }
  .technical-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7em;
  }
  .technical-section-header:after {
    width: 100%;
    flex: none;
  }
  .technical-latest-item {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 0.9em;
  }
  .technical-latest-meta {
    grid-column: 2 / 3;
    grid-template-columns: repeat(2, 6.8em);
    font-size: 0.9em;
  }
  .technical-latest-arrow {
    display: none;
  }
  .technical-more {
    align-items: flex-start;
    flex-direction: column;
  }
  .technical-more-button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .technical-footer-nav {
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
  .technical-footer-creative {
    justify-self: start;
  }
}
@media screen and (min-width:768px) and (max-width:1150px) {
  .technical-featured-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .technical-latest-item {
    grid-template-columns: 75px minmax(0, 1fr);
  }
  .technical-latest-meta {
    grid-column: 2 / 3;
    grid-template-columns: repeat(2, 7.2em);
    font-size: 0.95em;
  }
  .technical-latest-arrow {
    display: none;
  }
}