@import url("./ksdh-common.css");

.department-detail-title {
  margin: 0;
  padding: calc(14 * var(--design-unit)) calc(24 * var(--design-unit));
  color: #fff;
  font-size: calc(30 * var(--design-unit));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background: #0a4aa4;
}

.department-cover {
  width: 100%;
  aspect-ratio: 750 / 380;
  object-fit: cover;
}

.department-intro {
  padding: calc(28 * var(--design-unit)) calc(46 * var(--design-unit)) calc(26 * var(--design-unit));
  color: #444;
  font-size: calc(21 * var(--design-unit));
  line-height: 1.9;
  text-align: justify;
}

.department-intro p {
  margin: 0;
  text-indent: 2em;
}

.department-intro p + p {
  margin-top: calc(10 * var(--design-unit));
}

.department-block {
  padding: 0 calc(46 * var(--design-unit)) calc(42 * var(--design-unit));
}

.department-block__title {
  position: relative;
  margin: 0 0 calc(22 * var(--design-unit));
  padding-bottom: calc(8 * var(--design-unit));
  color: #222;
  font-size: calc(28 * var(--design-unit));
  font-weight: 700;
  line-height: 1.2;
}

.department-block__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(150 * var(--design-unit));
  height: calc(4 * var(--design-unit));
  background: linear-gradient(90deg, #0a4aa4 0%, rgba(10, 74, 164, .56) 54%, rgba(10, 74, 164, 0) 100%);
}

.department-doctors {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(28 * var(--design-unit));
}

.department-doctors__nav {
  position: absolute;
  top: 50%;
  width: calc(46 * var(--design-unit));
  height: calc(46 * var(--design-unit));
  border-radius: 50%;
  background: rgba(219, 219, 219, .86);
  transform: translateY(-50%);
}

.department-doctors__nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(12 * var(--design-unit));
  height: calc(12 * var(--design-unit));
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.department-doctors__nav--prev {
  left: calc(-34 * var(--design-unit));
}

.department-doctors__nav--prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}

.department-doctors__nav--next {
  right: calc(-34 * var(--design-unit));
}

.department-doctors__nav--next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

.department-doctor {
  position: relative;
  display: block;
  overflow: hidden;
  background: #d5d5d5;
}

.department-doctor img {
  width: 100%;
  aspect-ratio: 160 / 210;
  object-fit: cover;
  object-position: center bottom;
}

.department-doctor__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(10 * var(--design-unit)) calc(8 * var(--design-unit));
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 74, 164, 0) 0%, rgba(10, 74, 164, .88) 100%);
}

.department-doctor__meta strong,
.department-doctor__meta span {
  display: block;
}

.department-doctor__meta strong {
  font-size: calc(19 * var(--design-unit));
}

.department-doctor__meta span {
  margin-top: calc(4 * var(--design-unit));
  font-size: calc(16 * var(--design-unit));
}

.department-news {
  margin: 0;
  padding: calc(20 * var(--design-unit)) calc(34 * var(--design-unit));
  list-style: none;
  background: #fff;
  box-shadow: 0 calc(8 * var(--design-unit)) calc(22 * var(--design-unit)) rgba(0, 0, 0, .08);
}

.department-news li {
  padding: calc(20 * var(--design-unit)) 0;
}

.department-news li + li {
  border-top: 1px dashed #d8d8d8;
}

.department-news time {
  display: block;
  color: #7d7d7d;
  font-size: calc(16 * var(--design-unit));
  line-height: 1.1;
}

.department-news time strong {
  margin-right: calc(2 * var(--design-unit));
  font-size: calc(22 * var(--design-unit));
}

.department-news a {
  display: block;
  margin-top: calc(8 * var(--design-unit));
  color: #4b4b4b;
  font-size: calc(20 * var(--design-unit));
  line-height: 1.55;
}

.department-doctor:focus-visible,
.department-doctors__nav:focus-visible,
.department-news a:focus-visible {
  outline: 2px solid #ffb347;
  outline-offset: 2px;
}

@media (max-width: 340px) {
  .department-doctors {
    grid-template-columns: 1fr;
  }

  .department-doctors__nav {
    display: none;
  }
}