/* dns-blog.css: the /blog/ listing.
   DRAFT - pending designer sign-off. Loaded through pageStyles. */

/* The header bar shares the masthead's color here, so it gets a hairline edge. */
.dns-header__bar { box-shadow: inset 0 0 0 1px var(--dns-color-line-inverse); }

.dns-masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(env(safe-area-inset-top, 0px) + 114px) 48px;
  background: var(--dns-color-blue-dark);
  color: var(--dns-color-text-inverse);
}
.dns-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--dns-color-blue-dark) 18%, color-mix(in srgb, var(--dns-color-blue-dark) 55%, transparent) 52%, transparent 80%);
}
.dns-masthead__rings {
  position: absolute;
  z-index: -2;
  right: -55%;
  top: 30%;
  width: min(1250px, 120vw);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  translate: 0 -50%;
  -webkit-mask-image: radial-gradient(closest-side, var(--dns-color-ink) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, var(--dns-color-ink) 62%, transparent 100%);
}
.dns-masthead__title {
  margin: 0;
  color: inherit;
  font-size: var(--dns-fluid-masthead);
  line-height: .9;
  white-space: nowrap;
}
.dns-masthead__sub { margin: 16px 0 0; color: var(--dns-color-inverse-soft); }

.dns-recent { padding-block: clamp(64px, 8vw, 112px) 0; }
.dns-recent__label { margin: 0 0 clamp(24px, 3vw, 40px); font-size: var(--dns-fluid-label); }

.dns-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.dns-feature .dns-thumb { aspect-ratio: 16 / 10; }
.dns-feature .dns-thumb__big { max-width: 8em; font-size: var(--dns-fluid-tile-lg); }
.dns-feature__text { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.dns-feature__meta { display: flex; align-items: center; gap: 12px; }
.dns-feature__new {
  color: var(--dns-color-blue-accent);
  font-size: var(--dns-text-label);
  font-weight: var(--dns-weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dns-feature__title { margin: 0; font-size: var(--dns-fluid-heading); line-height: 1.12; text-wrap: balance; }
.dns-feature__excerpt { margin: 0; max-width: 32em; }
.dns-feature:hover .dns-feature__title { color: var(--dns-color-text-link-hover); }

.dns-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--dns-color-line);
}
.dns-pager__status { font-size: var(--dns-text-sm); color: var(--dns-color-text-secondary); }

@media (min-width: 768px) {
  .dns-masthead { padding-block: calc(env(safe-area-inset-top, 0px) + 96px + clamp(72px, 10vw, 150px)) clamp(64px, 8vw, 112px); }
  .dns-masthead__rings { right: max(-460px, -32vw); top: 50%; }
}

@media (min-width: 1280px) {
  .dns-feature { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .dns-masthead__rings { animation: dns-breathe 9s ease-in-out infinite; }
  .dns-feature__title { transition: color .3s ease; }
}