/* ==========================================================================
   DENTALINS — BLOG EDITORIAL (blog-card.css)
   Editorial / Magazine layout: 1 large featured post (left) +
   2 horizontal secondary posts (right stack).
   BEM: .blog-editorial  __stack
        .blog-card  --featured  --secondary
        __image-link  __image  __overlay  __body  __category
        __meta  __meta-item  __meta-dot  __title  __excerpt  __link
   ========================================================================== */


/* ======================================================================
   1. EDITORIAL WRAPPER — asymmetric 2-column grid
   ====================================================================== */

.blog-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .blog-editorial {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-6);
    align-items: stretch;
  }
}


/* ======================================================================
   2. SECONDARY STACK — right column: two cards, equal height
   ====================================================================== */

.blog-editorial__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .blog-editorial__stack {
    gap: var(--space-6);
  }

  .blog-editorial__stack .blog-card--secondary {
    flex: 1;          /* share available height equally */
    min-height: 0;    /* allow shrink */
  }
}


/* ======================================================================
   3. BASE CARD RESET
   ====================================================================== */

.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  display: flex;
}


/* ======================================================================
   4. FEATURED CARD — image fills entire card, text overlay on bottom
   ====================================================================== */

.blog-card--featured {
  flex-direction: column;
  min-height: 440px;
}

@media (min-width: 768px) {
  .blog-card--featured {
    min-height: 520px;
    height: 100%;
  }
}

/* Stretch image-link to fill card */
.blog-card--featured .blog-card__image-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.blog-card--featured .blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card--featured:hover .blog-card__image {
  transform: scale(1.04);
}

/* Multi-layer gradient: dark at bottom for legibility, slight top vignette */
.blog-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(11, 29, 58, 0.15) 0%,
      rgba(11, 29, 58, 0.00) 35%,
      rgba(11, 29, 58, 0.55) 65%,
      rgba(11, 29, 58, 0.92) 100%
    );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.blog-card--featured:hover::after {
  opacity: 0.88;
}

/* Overlay content sits above gradient */
.blog-card--featured .blog-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6) var(--space-6) var(--space-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .blog-card--featured .blog-card__overlay {
    padding: var(--space-8) var(--space-8) var(--space-10);
  }
}

/* Featured title */
.blog-card--featured .blog-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: 0;
  letter-spacing: var(--tracking-tight);
}

.blog-card--featured .blog-card__title a {
  color: var(--color-neutral-0);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card--featured:hover .blog-card__title a {
  color: var(--color-primary-300);
}

@media (min-width: 1024px) {
  .blog-card--featured .blog-card__title {
    font-size: var(--text-3xl);
  }
}

/* Featured excerpt */
.blog-card--featured .blog-card__excerpt {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--leading-relaxed);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .blog-card--featured .blog-card__excerpt {
    font-size: var(--text-base);
  }
}

/* Meta on featured */
.blog-card--featured .blog-card__meta {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
}

/* Read link on featured */
.blog-card--featured .blog-card__link {
  margin-top: var(--space-1);
  color: var(--color-primary-300);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.blog-card--featured:hover .blog-card__link {
  color: var(--color-primary-200);
  gap: var(--space-3);
}

.blog-card--featured .blog-card__link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.blog-card--featured:hover .blog-card__link svg {
  transform: translateX(4px);
}


/* ======================================================================
   5. SECONDARY CARD — horizontal: image left, content right
   ====================================================================== */

.blog-card--secondary {
  flex-direction: row;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease;
}

.blog-card--secondary:hover {
  border-color: rgba(5, 160, 214, 0.22);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(5, 160, 214, 0.10);
}

/* Image container — fixed width left column */
.blog-card--secondary .blog-card__image-link {
  flex-shrink: 0;
  width: 38%;
  display: block;
  overflow: hidden;
  border-radius: 0;
}

@media (min-width: 1024px) {
  .blog-card--secondary .blog-card__image-link {
    width: 42%;
  }
}

.blog-card--secondary .blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card--secondary:hover .blog-card__image {
  transform: scale(1.06);
}

/* Body — right column */
.blog-card--secondary .blog-card__body {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  min-width: 0;
}

@media (min-width: 1024px) {
  .blog-card--secondary .blog-card__body {
    padding: var(--space-5) var(--space-6);
  }
}

/* Secondary title */
.blog-card--secondary .blog-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card--secondary .blog-card__title a {
  color: var(--color-neutral-0);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card--secondary:hover .blog-card__title a {
  color: var(--color-primary-300);
}

@media (min-width: 1024px) {
  .blog-card--secondary .blog-card__title {
    font-size: var(--text-md);
  }
}

/* Secondary read link */
.blog-card--secondary .blog-card__link {
  color: var(--color-primary-400);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: gap 0.2s ease, color 0.2s ease;
  margin-top: auto;
  padding-top: var(--space-2);
}

.blog-card--secondary:hover .blog-card__link {
  color: var(--color-primary-300);
  gap: var(--space-2);
}

.blog-card--secondary .blog-card__link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.blog-card--secondary:hover .blog-card__link svg {
  transform: translateX(3px);
}

/* Secondary meta */
.blog-card--secondary .blog-card__meta {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}


/* ======================================================================
   6. SHARED — category badge, meta, meta-dot
   ====================================================================== */

.blog-card__category {
  display: inline-block;
  padding: 3px var(--space-3);
  background: rgba(5, 160, 214, 0.18);
  color: var(--color-primary-300);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid rgba(5, 160, 214, 0.22);
}

/* Featured: category inside overlay */
.blog-card--featured .blog-card__category {
  align-self: flex-start;
  margin-bottom: var(--space-1);
}

/* Secondary: sit above meta */
.blog-card--secondary .blog-card__category {
  align-self: flex-start;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-card__meta-item {
  font-size: inherit;
  color: inherit;
}

.blog-card__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}


/* ======================================================================
   7. SCROLL REVEAL — staggered fade-up
   ====================================================================== */

.blog-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--transition-reveal),
    transform var(--transition-reveal);
}

.blog-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}