@layer components {

/*
 * blog.css
 * Resources page — editorial blog layout
 */

/* ─── IMAGE PLACEHOLDER ───────────────────────── */
.res-img {
  border: var(--outline);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: color-mix(in srgb, var(--tint, var(--primary)) 10%, var(--white));
}
.res-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,26,46,.055) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.res-img > svg {
  position: relative;
  z-index: 1;
  opacity: 0.35;
  color: var(--tint, var(--primary));
}

/* ─── CATEGORY TAG ────────────────────────────── */
.res-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tint, var(--primary));
  background: color-mix(in srgb, var(--tint, var(--primary)) 10%, var(--white));
  border: 1.5px solid color-mix(in srgb, var(--tint, var(--primary)) 28%, var(--white));
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
/* Category label rendered as an internal link → its category page */
a.res-cat {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
a.res-cat:hover {
  background: color-mix(in srgb, var(--tint, var(--primary)) 22%, var(--white));
  border-color: color-mix(in srgb, var(--tint, var(--primary)) 45%, var(--white));
}
/* Image + title are the article links; keep card title styling on the inner <a> */
.res-article-img-link,
.res-featured-img-link { display: block; }
.res-featured-img-link { height: 100%; }
.res-article-title a,
.res-featured-title a { color: inherit; text-decoration: none; transition: color 0.15s; }
.res-article-title a:hover,
.res-featured-title a:hover { color: var(--primary); }

/* ─── AUTHOR AVATAR ───────────────────────────── */
.res-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 2px 2px 0 var(--black);
}

/* ─── TRENDING CARDS ──────────────────────────── */
.res-trending-card {
  background: var(--white);
  border: var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.25s;
  cursor: pointer;
}

.res-trending-img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 0;
  border-bottom: var(--outline);
}

/* ─── FILTER PILLS ────────────────────────────── */
.res-pill {
  padding: 7px 18px;
  border-radius: 30px;
  border: var(--outline);
  font-size: 12px;
  font-weight: 700;
  background: var(--gray);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 2px 2px 0 var(--black);
  font-family: inherit;
}
.res-pill:hover:not(.pill-deselected),
.res-pill.active {
  background: var(--black);
  color: var(--white);
  box-shadow: 2px 2px 0 var(--primary);
}

/* ─── ARTICLE CARDS ───────────────────────────── */
/* The grid stretches each <a class="res-article-link"> to the row's
   tallest item. height:100% on link + card lets the article fill that
   stretched space, so every card in a row ends the same height
   regardless of title / excerpt length. The body inside already uses
   `flex-1 flex flex-col` (Tailwind) and the excerpt has `flex: 1`, so
   the author/date row anchors at the bottom of each card. */
.res-article-link { height: 100%; }
.res-article-card {
  background: var(--gray);
  border: var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--black);
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.res-article-img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 0;
  border-bottom: var(--outline);
  object-fit: cover;
  display: block;
}

/* Hero/intro band on /resources */
.res-hero-band {
  padding: 56px 0 48px;
  border-bottom: 2.5px solid var(--black);
}
.res-hero-band h1 {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 12px;
}
.res-hero-band p {
  font-size: 20px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 600px;
}

/* Featured article (single large card on the blog listing) */
.res-featured-wrap { padding: 48px 0 0; }
.res-featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--gray);
  border: var(--outline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--black);
  transition: all 0.25s;
}
.res-featured-card:hover {
  transform: translate(-2px, -4px);
  box-shadow: 8px 10px 0 var(--black);
}
.res-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: var(--outline);
  display: block;
  min-height: 320px;
}
.res-featured-body { padding: 32px 32px 32px 0; }
.res-featured-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--black);
  margin: 10px 0 14px;
}
.res-featured-excerpt {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 20px;
}
@media (max-width: 760px) {
  .res-hero-band h1 { font-size: 34px; }
  .res-hero-band p  { font-size: 16px; }
  .res-featured-card { grid-template-columns: 1fr; gap: 0; }
  .res-featured-img  { border-right: none; border-bottom: var(--outline); min-height: 200px; }
  .res-featured-body { padding: 24px; }
  .res-featured-title { font-size: 22px; }
}

/* All-articles grid section */
.res-feed-band { padding: 64px 0 80px; }
.res-feed-band h2 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--black);
  margin-bottom: 36px;
}
@media (max-width: 760px) {
  .res-feed-band h2 { font-size: 26px; }
}
.res-article-excerpt {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Hard cap as a fallback: line-height 1.7 × 2 lines = 3.4em.
     overflow:hidden clips anything past that even if -webkit-line-clamp
     misbehaves under the parent's flex layout. */
  max-height: calc(1.7em * 2);
  flex: 0 0 auto;
  margin-bottom: 18px;
}
/* Bottom row (author + date) anchors to the bottom of the card body
   now that the excerpt is fixed-height (was previously using flex:1
   on the excerpt to push meta down). */
.res-article-meta { margin-top: auto; }
.res-article-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--black);
}

/* ─── COLLECTIONS ─────────────────────────────── */
.res-collection-card {
  background: var(--white);
  border: var(--outline);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--black);
  overflow: hidden;
  transition: all 0.25s;
  cursor: pointer;
}

.res-collection-head {
  padding: 28px;
  background: color-mix(in srgb, var(--tint, var(--primary)) 7%, var(--white));
  border-bottom: var(--outline);
}
.res-collection-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tint, var(--primary)) 14%, var(--white));
  box-shadow: 2px 2px 0 var(--black);
  margin-bottom: 16px;
  color: var(--tint, var(--primary));
}
.res-collection-more {
  font-size: 12px;
  font-weight: 800;
  color: var(--tint, var(--primary));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.res-col-story:last-child { border-bottom: none; }
.res-col-thumb {
  width: 60px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Newsletter ── */
.res-nl-input { flex: 1; padding: 13px 18px; border: var(--outline); border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 500; background: var(--gray); color: var(--text); box-shadow: 3px 3px 0 var(--black); transition: all .2s; outline: none; }
.res-nl-input::placeholder { color: var(--gray-3); }
.res-nl-input:focus { background: var(--white); box-shadow: 3px 3px 0 var(--primary); border-color: var(--primary); }
@media (max-width: 580px) { .res-nl-form { flex-direction: column; } }

/* ─── GRID LAYOUTS (base columns — overridden by breakpoints below) ─── */
.res-hero-inner       { grid-template-columns: 1fr 460px; }
.res-trending-grid    { grid-template-columns: repeat(4, 1fr); }
.res-articles-grid    { grid-template-columns: repeat(3, 1fr); }
.res-collections-grid { grid-template-columns: repeat(2, 1fr); }

/* ─── RESPONSIVE ──────────────────────────────── */
@media (max-width: 900px) {
  .res-hero-inner       { grid-template-columns: 1fr; gap: 36px; }
  .res-hero-title       { font-size: 32px; }
  .res-hero-img         { max-width: 480px; }
  .res-trending-grid    { grid-template-columns: repeat(2, 1fr); }
  .res-articles-grid    { grid-template-columns: repeat(2, 1fr); }
  .res-collections-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .res-trending-grid { grid-template-columns: 1fr; }
  .res-articles-grid { grid-template-columns: 1fr; }
  .res-feed-top      { flex-direction: column; align-items: flex-start; }
  .res-hero-title    { font-size: 26px; }
}
} /* end @layer components */