/* ===== Featured Hero ===== */
.hero-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  background: var(--dark);
  border: 1px solid var(--dark-2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color .3s ease;
}
@media (min-width: 640px) { .hero-featured { padding: 2rem; } }
@media (min-width: 1024px) { .hero-featured { grid-template-columns: 7fr 5fr; } }
.hero-featured:hover { border-color: var(--accent); }

.hero-featured__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
}
/* Doubled selector: beats Elementor's `.elementor img { height: auto }`,
   which otherwise shrinks this to its natural aspect ratio. */
.hero-featured .hero-featured__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform .5s ease;
}
@media (min-width: 640px) { .hero-featured .hero-featured__media img { height: 440px; } }
.hero-featured__media:hover img { transform: scale(1.03); }

.hero-featured__body { display: flex; flex-direction: column; gap: 1rem; }
.hero-featured__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-on-dark);
}
.hero-featured__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-on-dark);
}
@media (min-width: 640px) { .hero-featured__title { font-size: 1.9rem; } }
@media (min-width: 1024px) { .hero-featured__title { font-size: 2.3rem; } }
.hero-featured__title a { transition: color .2s ease; }
.hero-featured__title a:hover { color: #fff; }
.hero-featured__excerpt {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--border);
}
.hero-featured__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--dark-2);
}
.hero-featured__author { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Doubled selector: Elementor's img reset also zeroes border-radius and border,
   which would render this circular avatar as a plain square. */
.hero-featured .hero-featured__author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--dark-2);
}
.hero-featured__author span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-on-dark);
}

/* ===== Home category section ===== */
.home-section { margin-top: 3rem; }
.home-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}
.home-section__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
@media (min-width: 640px) { .home-section__title { font-size: 1.6rem; } }
.home-section__viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  transition: color .2s ease;
  white-space: nowrap;
}
.home-section__viewall:hover { color: var(--accent-hover); }

/* 4-column variant used by the Fashion row */
@media (min-width: 640px) { .bento-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bento-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Stacked pair of small cards occupying a single bento column */
.bento-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  grid-column: span 1;
}
.bento-stack > .article-card { flex: 1; }

/* ===== Small card ===== */
.article-card-small { min-height: 175px; }
@media (min-width: 640px) { .article-card-small { min-height: 195px; } }
.article-card-small--tall { min-height: 260px; }
@media (min-width: 640px) { .article-card-small--tall { min-height: 290px; } }

.article-card__scrim--tight { padding: 0.9rem; gap: 0.3rem; }
.article-card-small__title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.article-card-small:hover .article-card-small__title { color: #F4CAD3; }
.article-card__scrim--tight .article-card__footer { padding-top: 0.35rem; }
.article-card__scrim--tight .article-card__footer span { font-size: 0.62rem; }

/* Editor-only placeholder when a category has no posts */
.iim-widget-empty {
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  background: var(--surface);
}