/*

Project:       CPMA Interim Website CSS
Author:        Dmitri Bekasov
Version:       260115 (January 15, 2026)
Notes:         Home Page Specific Styles

*/

/* Slider */

.ct-slider {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex-flow: column nowrap;
  min-width: 100%;
  align-items: center;
  background-color: var(--pigment--tint-2);
  padding-block: var(--spacing--gap-3);
  background-image: var(--ui--banner-waves--light);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
:root[data-theme="dark"] .ct-slider {
  background-image: var(--ui--banner-waves--dark);
}
@media screen and (max-width: 120rem) {
  .ct-slider {
    padding-block: 0;
  }
}
.ct-slide--block {
  position: relative;
  align-items: center;
  justify-content: center;
  grid-area: 1 / 1;
  height: clamp(22.5rem, 100vw / 3 + 10rem, 40rem);
  transition: opacity var(--motion--slower);
  opacity: 0;
  z-index: 0;
}
/* First slide is always visible for smooth transition after the last slide */
.ct-slide--block:first-child {
  opacity: 1;
}
/* Active slide becomes visible and is placed above all other slides */
.ct-slide--block.active {
  opacity: 1;
  z-index: 1;
}
.ct-slide--block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 120rem);
  height: 100%;
  border-radius: 0.125rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.ct-slide--block[data-bg="advancing-podiatric-medicine"]::before{
  background-image: url('/assets/images/content/hero--canada-trail-runner.jpg');
}
.ct-slide--block[data-bg="what-is-podiatric-medicine"]::before{
  background-image: url('/assets/images/content/hero--foot-joint-pain.jpg');
}
.ct-slide--block[data-bg="career-in-podiatric-medicine"]::before{
  background-image: url('/assets/images/content/hero--nurse-with-patient.jpg');
}
.ct-slide--block[data-bg="seal-of-approval"]::before{
  background-image: url('/assets/images/content/hero--closeup-jogger-foot.jpg');
}
.ct-slide--block[data-bg="supporting-professionals"]::before{
  background-image: url('/assets/images/content/hero--canada-flag-doctor.jpg');
}
@media screen and (max-width: 37.5rem) {
  .ct-slider {
    background-image: none;
  }
  .ct-slide--block {
    height: 44rem;
    flex-flow: column nowrap;
    overflow: hidden;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .ct-slide--block::before {
    display: block;
    position: relative;
    height: clamp(12rem, 60vw, 22.5rem);
    flex: 0 0 auto;
  }
  .ct-slide--block .module--standard {
    padding-block: var(--spacing--gap-2) var(--spacing--gap-6);
    background-color: var(--pigment--constant-teal);
    background-image: var(--ui--banner-waves--hero);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    height: 100%;
  }
  .ct-slide--block .module--standard::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 1.5rem;
    background-image: var(--ui--hero-wave);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: -1.5rem;
    left: 0;
  }
}
@media screen and (max-width: 20rem) {
  .ct-slide--block::before {
    width: 100%;
    height: 12rem;
  }
}
.ct-slide--block * {
  z-index: 2;
}
.ct-slide--block .ft-hero,
.ct-slide--block .ft-lead-compact {
  color: var(--pigment--constant-white);
}
.ct-slide--block .ct-text {
  margin-top: 0.5lh;
}
.ct-slide--block .ct-button {
  margin-top: var(--spacing--gap-3);
  border: none;
}
.ct-slide--credit {
  position: absolute;
  bottom: 0.5rem;
  right: max(0.5rem, (100vw - 120rem) / 2 + 0.5rem);
  display: block;
  padding-inline: 0.5rem;
  background-color: var(--pigment--tint-4);
  opacity: 0.5;
  border-radius: 0.125rem;
}
.ct-slide--credit-text {
  color: var(--pigment--shade-6);
}

/* Slider Controls */

.ct-slide--control {
  position: absolute;
  z-index: 99;
  display: block;
  content: "";
  top: 50%;
  transform: translateY(-50%) translateX(0);
  width: 2rem;
  height: 2rem;
  background-color: var(--pigment--tint-2);
  opacity: 0.8;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity var(--motion--standard), background-color var(--motion--standard);
}
.ct-slide--control span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.ct-slide--control span::after {
  position: absolute;
  display: block;
  content: "";
  top: 0.5rem;
  left: 0.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--pigment--ink-obsidian);
  transition: background-color var(--motion--standard);
  width: 1rem;
  height: 1rem;
}
.ct-slide--control:hover,
.ct-slide--control:focus-visible {
  background-color: var(--pigment--tint-0);
  opacity: 1;
}
.ct-slide--control:hover span::after,
.ct-slide--control:focus-visible span::after {
  background-color: var(--pigment--ink-tanzanite);
}
.ct-slide--control.prev span::after {
  -webkit-mask-image: var(--icon-16--arrow-left);
  mask-image: var(--icon-16--arrow-left);
}
.ct-slide--control.next span::after {
  -webkit-mask-image: var(--icon-16--arrow-right);
  mask-image: var(--icon-16--arrow-right);
}
.ct-slide--control.prev {
  left: calc(((100vw - 120rem) / 2) + 2rem);
}
.ct-slide--control.next {
  right: calc(((100vw - 120rem) / 2) + 2rem);
}
@media screen and (max-width: 120rem) {
  .ct-slide--control.prev {
    left: 2rem;
  }
  .ct-slide--control.next {
    right: 2rem;
  }
}
@media screen and (max-width: 90rem) {
  .ct-slide--control.prev {
    left: calc(var(--spacing--fluid-tablet) / 2);
    transform: translateY(-50%) translateX(-50%);
  }
  .ct-slide--control.next {
    right: calc(var(--spacing--fluid-tablet) / 2);
    transform: translateY(-50%) translateX(50%);
  }
}
@media screen and (max-width: 37.5rem) {
  .ct-slide--control {
    top: 2rem;
  }
  .ct-slide--control.prev {
    left: calc(var(--spacing--fluid-mobile) + 1rem);
  }
  .ct-slide--control.next {
    right: calc(var(--spacing--fluid-mobile) + 1rem);
  }
}

/* Content */

.three-resources .col--1-of-3 {
  display: flex;
  flex-direction: column;
}
.three-resources .col--1-of-3 .ct-block {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}