/* TownHub Child 1.11.7 – portrait-safe landscape article covers and compact 1+3 feature cards.
   Limited to homepage previews and /makaleler. Single article hero is intentionally unchanged. */

/* Featured images keep a common 16:9 frame, regardless of their original ratio. */
.dt-site :is(.dt-articles-archive .dt-archive-inner, .dt-home-main .dt-content-split)
  .dt-content-picture {
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* The test articles include doctor portrait illustrations reused as featured images.
   Don't zoom into the middle of a tall portrait and chop off the face. Instead,
   put an unobtrusive blurred enlargement behind the original, fully visible image. */
.dt-site :is(.dt-articles-archive .dt-archive-inner, .dt-home-main .dt-content-split)
  .dt-content-picture.dt-article-cover-portrait {
  background: #e6f4f7;
}
.dt-site :is(.dt-articles-archive .dt-archive-inner, .dt-home-main .dt-content-split)
  .dt-content-picture.dt-article-cover-portrait::before {
  content: "";
  position: absolute;
  inset: -13%;
  z-index: 0;
  background-image: var(--dt-portrait-backdrop, none);
  background-position: center 23%;
  background-size: cover;
  filter: blur(17px);
  opacity: .38;
  transform: scale(1.05);
  pointer-events: none;
}
.dt-site :is(.dt-articles-archive .dt-archive-inner, .dt-home-main .dt-content-split)
  .dt-content-picture.dt-article-cover-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(246, 251, 252, .20);
  pointer-events: none;
}
.dt-site :is(.dt-articles-archive .dt-archive-inner, .dt-home-main .dt-content-split)
  .dt-content-picture.dt-article-cover-portrait > img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 4px;
  box-sizing: border-box;
}

/* Editorial 1 large + 3 small layout: match the outer edges while keeping the
   text/author group together. The big empty void above the author disappears. */
@media (min-width: 961px) {
  .dt-site .dt-articles-archive .dt-feature-side {
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .dt-site .dt-articles-archive .dt-feature-small > .dt-content-card {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: clamp(10px, 1vw, 15px);
    align-items: center;
    min-height: 0;
    padding: 10px;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-picture {
    width: 100%;
    aspect-ratio: 16/9;
    align-self: center;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-body {
    height: auto;
    min-height: 0;
    align-self: center;
    justify-content: center;
    gap: 4px;
    padding: 0 2px 0 0;
  }
  .dt-site .dt-articles-archive .dt-feature-small h3 {
    margin: 1px 0 2px;
    line-height: 1.4;
    font-size: clamp(12px, .92vw, 15px);
    -webkit-line-clamp: 3;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-body > p {
    margin: 3px 0 0;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-author {
    margin-top: 8px !important;
    padding-top: 7px !important;
    border-top: 1px solid #edf2f5;
    gap: 4px;
    align-items: center;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-author strong {
    font-size: 10px;
    line-height: 1.35;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-author time {
    font-size: 10px;
  }
}

/* Tablet & mobile: keep the supporting articles horizontal, not huge stacked
   portrait blocks. Height is content-driven here (no equal-row constraints). */
@media (max-width: 960px) {
  .dt-site .dt-articles-archive .dt-feature-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 12px;
    height: auto;
  }
  .dt-site .dt-articles-archive .dt-feature-small {
    min-height: 0;
    height: auto;
  }
  .dt-site .dt-articles-archive .dt-feature-small > .dt-content-card {
    display: grid;
    grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 10px;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-picture {
    min-height: 0;
    aspect-ratio: 16/9;
    height: auto !important;
    align-self: center;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-body {
    padding: 0;
    min-height: 0;
    height: auto;
    align-self: center;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-author {
    margin: 8px 0 0;
  }
}
@media (max-width: 420px) {
  .dt-site .dt-articles-archive .dt-feature-small > .dt-content-card {
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }
  .dt-site .dt-articles-archive .dt-feature-small h3 {
    font-size: 12px;
    line-height: 1.38;
  }
  .dt-site .dt-articles-archive .dt-feature-small .dt-content-author time {
    font-size: 9px;
  }
}