/* ==========================================================================
   DW WiFi · blog.css · the Blog and news index (BLOG piece owns this file)
   Card BASE styles live in site.css section 15, because the same card renders
   under every post. Everything here is scoped to the index (.blog-*, .feature)
   and only adjusts the cards inside .blog-grid.
   ========================================================================== */

/* 1 Intro ------------------------------------------------------------------ */
/* The H1 is the shell's inner-page scale (no font rules here, coherence pass). */
.blog-top { padding-top: var(--hero-top); }
.blog-intro {
  display: grid;
  gap: .85rem clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.blog-intro .lead { max-width: 38rem; }
@media (min-width: 900px) {
  .blog-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  /* first line of the lead sits level with the H1's cap height */
  .blog-intro .lead { padding-top: .55rem; }
}
@media (max-width: 719px) {
  .lead-more { display: none; }
}


/* 2 Featured news stage ---------------------------------------------------- */
/* The picture is real material: Dave's own cnMaestro account listing the three
   XE3-4s from the install, with Cambium's render of the unit floating over it.
   Under 1280px: a 2:1 strip on top, the text below on the same deep navy.
   From 1280px (the container is at its full 1200px): one stage, the headline in
   the quiet navy on the left. Narrower stages are taller than the composite's
   2.46:1, so cover-scaling would slide the screenshot under the text. */
.feature {
  position: relative;
  isolation: isolate;
  margin-top: clamp(1rem, .3rem + 2.8vw, 3rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #051629; /* the composite's own bottom tone, so the melt is seamless */
  color: var(--white);
  box-shadow: 0 30px 80px -40px rgba(7, 27, 49, .55);
}
.feature-media { display: block; position: relative; color: inherit; }
.feature-media picture { display: block; height: 100%; }
.feature-media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12%;
  background: linear-gradient(180deg, rgba(5, 22, 41, 0) 0%, #051629 100%);
  pointer-events: none;
}
/* says what the picture is; sits in the empty navy at the strip's top left */
.feature-caption {
  position: absolute;
  z-index: 2;
  top: .8rem;
  left: .95rem;
  max-width: 44%;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--fog);
  pointer-events: none;
}
.cap-long { display: none; }

.feature-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem clamp(1.15rem, .8rem + 1.5vw, 2.5rem) 1.15rem;
}
.feature-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.feature-title {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.feature-link { color: inherit; text-decoration: none; }
/* the title link covers the text column; the picture is a second, unfocusable
   link to the same post, so the whole stage is one click target for a pointer */
.feature-link::after { content: ""; position: absolute; inset: 0; }
.feature:hover .feature-link { text-decoration: underline; text-decoration-color: var(--lime-500); text-decoration-thickness: 3px; text-underline-offset: .14em; }
.feature-link:focus-visible { outline: none; }
.feature:has(.feature-link:focus-visible) { outline: 3px solid var(--lime-500); outline-offset: 3px; }
.feature-excerpt { color: var(--fog); font-size: var(--fs-body); line-height: 1.55; max-width: 32rem; }
.feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .5rem;
  font-size: .9375rem;
  color: var(--fog);
}
.feature-meta strong { color: var(--white); font-weight: 600; }
.feature-meta time { font-family: var(--font-mono); font-weight: 500; font-size: .94em; font-variant-numeric: tabular-nums slashed-zero; }
.feature-sep { color: rgba(185, 198, 212, .6); }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: .3rem; }
.feature-cta { pointer-events: none; }
.feature:hover .feature-cta { background: var(--mist); }
.feature:hover .feature-cta .icon-arrow { transform: translateX(3px); }
.feature-more { position: relative; z-index: 2; color: var(--white); }
.feature-more:hover { text-decoration-color: var(--lime-500); }

/* phones: the whole card ends inside the first screen, the guide list peeking
   in under it. Two-line dek, short byline, one action. */
@media (max-width: 719px) {
  .feature-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem;
  }
  .feature-meta { font-size: .875rem; }
  .feature-role, .feature-more { display: none; }
}
@media (min-width: 720px) {
  .feature-caption { font-size: .8125rem; }
  .cap-long { display: inline; }
  .feature-body { padding-top: 1.1rem; padding-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); gap: .9rem; }
}
@media (min-width: 1280px) {
  .feature {
    display: flex;
    align-items: center;
    min-height: clamp(29rem, 21rem + 9vw, 31.5rem);
  }
  .feature-media { position: absolute; inset: 0; z-index: -1; }
  .feature-media img { height: 100%; aspect-ratio: auto; object-position: 100% 50%; }
  /* a quiet scrim over the empty left of the stage, for text contrast only */
  .feature-media::after { inset: 0; height: auto; background: linear-gradient(90deg, rgba(6, 25, 49, .5) 0%, rgba(6, 25, 49, .15) 40%, rgba(6, 25, 49, 0) 52%); }
  .feature-caption { top: auto; left: auto; right: 1.75rem; bottom: 1.2rem; max-width: 34rem; text-align: right; }
  .feature-body {
    width: min(36rem, 47%);
    padding: 3rem 1.5rem 3rem clamp(2.5rem, .4rem + 3vw, 4.5rem);
    gap: 1.05rem;
  }
  .feature-excerpt { max-width: 30rem; }
}


/* 3 Guides list: head + topic filter -------------------------------------- */
.blog-list { padding-block: clamp(2.25rem, .6rem + 6.6vw, 8rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.blog-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .85rem 2rem;
  margin-bottom: clamp(1.5rem, 1.1rem + 2vw, 3rem);
}
.blog-list-title { display: grid; gap: .4rem; }
.blog-count { font-size: var(--fs-ui); color: var(--fg-muted); }
.blog-filter { max-width: 100%; }
.blog-filter[hidden] { display: none; }
.blog-filter .pill { font-size: .9rem; padding-inline: 1rem; }
.pill-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .35rem;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
}
.pill[aria-pressed="true"] .pill-n { background: rgba(255, 255, 255, .16); color: var(--white); }
@media (max-width: 719px) {
  /* pills scroll sideways inside their own row, flush to the screen edges; the
     edge that has more topics behind it fades out, so the row reads as a row */
  .blog-filter {
    max-width: none;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .blog-filter .pill { font-size: .875rem; padding-inline: .9rem; gap: .4rem; }
  .blog-filter.more-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
  }
  .blog-filter.more-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem);
    mask-image: linear-gradient(90deg, transparent, #000 3rem);
  }
  .blog-filter.more-start.more-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 4rem), transparent);
  }
}


/* 4 Cards on the index ------------------------------------------------------ */
/* Desktop: the two newest guides lead at half width, the rest run three across,
   so 11 guides fill 1 + 3 rows with no orphan. Filtering drops the lead row.
   Pictures: real DW material (survey photo, TamoGraph, Chanalyzer, cnMaestro)
   on the survey, troubleshooting and channels guides; the navy still lifes only
   on the abstract explainers (assets/img/blog-index/card-<slug>-*.webp). */
.blog-grid { gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid:not(.is-filtered) > .post-card:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .blog-grid > .post-card { grid-column: span 2; }
  .blog-grid:not(.is-filtered) > .post-card:first-child,
  .blog-grid:not(.is-filtered) > .post-card:nth-child(2) { grid-column: span 3; }
}
.blog-grid .post-card-title { font-size: clamp(1.1875rem, 1.12rem + .25vw, 1.3125rem); line-height: 1.24; }

/* lead cards (two newest) */
@media (min-width: 1000px) {
  .blog-grid:not(.is-filtered) > .post-card:nth-child(-n+2) .post-card-title { font-size: clamp(1.5rem, 1.1rem + .8vw, 1.875rem); line-height: 1.15; letter-spacing: -0.015em; }
  .blog-grid:not(.is-filtered) > .post-card:nth-child(-n+2) .post-card-excerpt { font-size: 1rem; -webkit-line-clamp: 2; }
}
/* tablet: the newest guide runs as a wide horizontal card */
@media (min-width: 720px) and (max-width: 999px) {
  .blog-grid:not(.is-filtered) > .post-card:first-child .post-card-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .blog-grid:not(.is-filtered) > .post-card:first-child .post-card-media { aspect-ratio: auto; height: 100%; min-height: 18rem; }
  .blog-grid:not(.is-filtered) > .post-card:first-child .post-card-title { font-size: 1.5rem; line-height: 1.18; }
}
/* phones: a tighter card so more of the set fits each screen */
@media (max-width: 719px) {
  .blog-grid .post-card-title { font-size: 1.1875rem; line-height: 1.25; }
  .blog-grid .post-card-excerpt { -webkit-line-clamp: 2; }
}

/* filter transition: cards that come back fade up (motion only) */
.blog-grid > .post-card.is-entering { opacity: 0; transform: translate3d(0, 12px, 0); }
.blog-grid > .post-card.is-entering-run { transition: opacity .38s var(--ease-out), transform .38s var(--ease-out); }
.blog-empty { padding: 2rem 0; color: var(--fg-muted); }


/* 5 Closing CTA -------------------------------------------------------------- */
.blog-cta { padding-bottom: clamp(3.5rem, 2rem + 6vw, 8rem); }
.blog-cta .cta-band { position: relative; overflow: hidden; isolation: isolate; }
.blog-cta .cta-band::after {
  /* the logo's five attenuation loops, faint, bleeding off the right edge */
  content: "";
  position: absolute;
  z-index: -1;
  right: -4%;
  top: 50%;
  width: min(26rem, 55%);
  aspect-ratio: 737 / 697;
  transform: translateY(-50%);
  background: url("../img/shared/dw-loops.webp") center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
@media (max-width: 899px) {
  .blog-cta .cta-band::after { top: auto; bottom: -18%; right: -22%; transform: none; width: 70%; opacity: .1; }
}


/* 6 Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .feature:hover .feature-cta .icon-arrow { transform: none; }
  .blog-grid > .post-card.is-entering { opacity: 1; transform: none; }
}