/* ==========================================================================
   Blog Images — Category Gradient Image System v4.0
   "Friendly Precision" — Gauss brand blue anchored

   Each category gets a rich multi-stop gradient with radial overlay,
   line-art SVG icon at 15% opacity, and diagonal-line texture at 4%.

   Brand anchors:
   Blue #1050A0 | Cyan #3FA4E5 | Ink #0F172A
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE IMAGE CONTAINER
   -------------------------------------------------------------------------- */

.blog-img {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: inherit;
  overflow: hidden;
  width: 100%;
  isolation: isolate;
  transition: filter 0.5s ease;
}

.blog-img--hero {
  aspect-ratio: 21 / 9;
}

/* --------------------------------------------------------------------------
   2. CATEGORY GRADIENTS — Gauss-anchored palettes
   -------------------------------------------------------------------------- */

/* Fundamentals — deep blue #1050A0 -> medium blue #1558A0 -> cyan #3FA4E5 */
.blog-img--fundamentals {
  background:
    radial-gradient(
      circle at 30% 40%,
      rgba(63, 164, 229, 0.35) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #1050A0 0%,
      #1558A0 40%,
      #3FA4E5 100%
    );
}

/* Budgeting — teal #047857 -> emerald #10B981 -> mint #6EE7B7 */
.blog-img--budgeting {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(110, 231, 183, 0.30) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #047857 0%,
      #10B981 40%,
      #6EE7B7 100%
    );
}

/* Technology — blue #1558A0 -> cyan #3FA4E5 -> light cyan #7DD3FC */
.blog-img--technology {
  background:
    radial-gradient(
      circle at 40% 60%,
      rgba(125, 211, 252, 0.30) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #1558A0 0%,
      #3FA4E5 40%,
      #7DD3FC 100%
    );
}

/* Savings — deep blue #1E3A5F -> blue #2563EB -> sky #60A5FA */
.blog-img--savings {
  background:
    radial-gradient(
      circle at 60% 40%,
      rgba(96, 165, 250, 0.30) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #1E3A5F 0%,
      #2563EB 40%,
      #60A5FA 100%
    );
}

/* Investing — purple #5B21B6 -> violet #7C3AED -> lavender #A78BFA */
.blog-img--investing {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(167, 139, 250, 0.30) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #5B21B6 0%,
      #7C3AED 40%,
      #A78BFA 100%
    );
}

/* Lifestyle — rose #BE185D -> pink #EC4899 -> light pink #F9A8D4 */
.blog-img--lifestyle {
  background:
    radial-gradient(
      circle at 35% 65%,
      rgba(249, 168, 212, 0.30) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #BE185D 0%,
      #EC4899 40%,
      #F9A8D4 100%
    );
}

/* --------------------------------------------------------------------------
   3. SVG ICON OVERLAYS — ::before pseudo-element
   White line-art icons at 15% opacity
   -------------------------------------------------------------------------- */

.blog-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
  opacity: 0.15;
  pointer-events: none;
}

/* Fundamentals — shield (trust, foundation) */
.blog-img--fundamentals::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 6L10 16v16c0 14 10 22 22 26 12-4 22-12 22-26V16L32 6z'/%3E%3Cpath d='M24 32l6 6 12-14'/%3E%3Cpath d='M32 6v52'/%3E%3Cpath d='M10 16h44'/%3E%3C/svg%3E");
}

/* Budgeting — pie chart (allocation, planning) */
.blog-img--budgeting::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='34' r='22'/%3E%3Cpath d='M32 12v22'/%3E%3Cpath d='M32 34l16 14'/%3E%3Cpath d='M32 34L14 26'/%3E%3Ccircle cx='32' cy='34' r='8'/%3E%3C/svg%3E");
}

/* Technology — chip (innovation, digital) */
.blog-img--technology::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='32' height='32' rx='4'/%3E%3Crect x='22' y='22' width='20' height='20' rx='2'/%3E%3Cpath d='M24 16v-6'/%3E%3Cpath d='M32 16v-6'/%3E%3Cpath d='M40 16v-6'/%3E%3Cpath d='M24 48v6'/%3E%3Cpath d='M32 48v6'/%3E%3Cpath d='M40 48v6'/%3E%3Cpath d='M16 24h-6'/%3E%3Cpath d='M16 32h-6'/%3E%3Cpath d='M16 40h-6'/%3E%3Cpath d='M48 24h6'/%3E%3Cpath d='M48 32h6'/%3E%3Cpath d='M48 40h6'/%3E%3C/svg%3E");
}

/* Savings — piggy bank (saving, accumulation) */
.blog-img--savings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='32' cy='34' rx='20' ry='16'/%3E%3Cpath d='M26 18c0-4 3-8 8-8s6 4 6 6'/%3E%3Cpath d='M12 30c-3 0-5 2-5 4s2 4 5 4'/%3E%3Cpath d='M22 50l-3 6'/%3E%3Cpath d='M42 50l3 6'/%3E%3Ccircle cx='38' cy='30' r='2'/%3E%3Cpath d='M44 24c4 2 8 6 8 10'/%3E%3C/svg%3E");
}

/* Investing — chart (growth, markets) */
.blog-img--investing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 52h48'/%3E%3Cpath d='M8 52V12'/%3E%3Cpath d='M16 42l10-12 8 6 14-20'/%3E%3Cpolyline points='42 16 48 16 48 22'/%3E%3Crect x='14' y='42' width='6' height='10' rx='1'/%3E%3Crect x='24' y='34' width='6' height='18' rx='1'/%3E%3Crect x='34' y='28' width='6' height='24' rx='1'/%3E%3Crect x='44' y='22' width='6' height='30' rx='1'/%3E%3C/svg%3E");
}

/* Lifestyle — compass (direction, balance) */
.blog-img--lifestyle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Cpolygon points='26 38 22 22 38 26 42 42' fill='white' fill-opacity='0.1'/%3E%3Cpolygon points='26 38 38 26 32 32'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3Cpath d='M32 8v4'/%3E%3Cpath d='M32 52v4'/%3E%3Cpath d='M8 32h4'/%3E%3Cpath d='M52 32h4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. TEXTURE OVERLAY — ::after pseudo-element
   Diagonal thin lines at 4% opacity for editorial feel
   -------------------------------------------------------------------------- */

.blog-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 7px,
    rgba(255, 255, 255, 1) 7px,
    rgba(255, 255, 255, 1) 8px
  );
}

/* --------------------------------------------------------------------------
   5. HOVER EFFECTS — simple brightness
   -------------------------------------------------------------------------- */

.blog-img:hover {
  filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   6. SIZE VARIANTS
   -------------------------------------------------------------------------- */

/* Grid cards — default */
.blog-img--sm {
  width: 100%;
}

/* Featured post — wider presence */
.blog-img--lg {
  width: 100%;
  aspect-ratio: 2 / 1;
}

/* Full-width hero — defined above with aspect-ratio: 21/9 */

/* Thumbnail — compact square */
.blog-img--thumb {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  flex-shrink: 0;
}

.blog-img--thumb::before {
  background-size: 55%;
}