/**
 * UR Blog Section Pro v1.6 - APP-LIKE BRANDING + PWA READY
 * Professional navigation, chips-based filters, branded dynamic content
 */

.urb-blog {
  /* Brand Colors - App-Like */
  --accent: #dc2626;
  --accent-25: rgba(220, 38, 38, 0.25);
  --accent-15: rgba(220, 38, 38, 0.15);
  --accent-10: rgba(220, 38, 38, 0.10);
  --accent-12: rgba(220, 38, 38, 0.12);
  --accent-18: rgba(220, 38, 38, 0.18);
  
  /* Chips System - Professional Glass */
  --chip-bg: rgba(255, 255, 255, 0.65);
  --chip-border: rgba(0, 0, 0, 0.08);
  --chip-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  --chip-hover-shadow: 0 10px 26px var(--accent-15), 0 6px 18px rgba(0, 0, 0, 0.10);
  
  /* Typography - System Font Stack */
  --ink: #0f172a;
  --muted: #475569;
  --text-light: rgba(17, 17, 17, 0.96);
  
  /* Layout & Spacing */
  --radius: 10px;
  --chip-radius: 10px;
  --pad: 6px 10px;
  --gap: 8px;
  --icon-size: 18px;
  
  /* Typography Scale */
  --h2: clamp(20px, 1.8vw, 28px);
  --title: clamp(14px, 1.2vw, 16px);
  --desc: 13.5px;
  --chip-text: 13.5px;
  --tag: 12px;
  
  /* Animation */
  --bezier: cubic-bezier(0.22, 0.7, 0.23, 1);
  --lift: translateY(-2px) scale(1.015);
  --press: translateY(0) scale(0.995);
  
  background: transparent;
  padding: 14px 16px 20px;
}

@media (prefers-color-scheme: dark) {
  .urb-blog {
    --chip-bg: rgba(20, 22, 30, 0.60);
    --chip-border: rgba(255, 255, 255, 0.12);
    --chip-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    --ink: #e5e7eb;
    --muted: #a3a3a3;
  }
}

/* ===== LAYOUT STRUCTURE ===== */
.urb-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== FORCED HTML TYPOGRAPHY (v1.3) - OVERRIDE ELEMENTOR ===== */

/* Section titles - exact HTML match */
.urb-title,
.urb-branded-title,
.urb-blog .urb-title,
.urb-blog .urb-branded-title {
  margin: 0 0 8px !important;
  font-size: var(--h2) !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Subtitles - exact HTML match */
.urb-subtitle,
.urb-branded-subtitle,
.urb-blog .urb-subtitle,
.urb-blog .urb-branded-subtitle {
  margin: 0 0 14px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  max-width: 600px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* POST TITLES - EXACT HTML TYPOGRAPHY MATCH */
.urb-post-title,
.urb-post-title a,
.urb-post-title a:visited,
.urb-post-title a:hover,
.urb-post-title a:focus,
.urb-branded-post-title,
.urb-branded-post-title a,
.urb-branded-post-title a:visited,
.urb-branded-post-title a:hover,
.urb-branded-post-title a:focus,
.urb-blog .urb-post-title,
.urb-blog .urb-post-title a,
.urb-blog .urb-post-title a:visited,
.urb-blog .urb-post-title a:hover,
.urb-blog .urb-post-title a:focus {
  margin: 0 !important;
  font-size: var(--title) !important; /* clamp(14px,1.2vw,16px) from HTML */
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.urb-post-title a:hover,
.urb-branded-post-title a:hover,
.urb-blog .urb-post-title a:hover {
  color: var(--accent) !important;
}

/* ROW TITLES (Mobile) - EXACT HTML MATCH */
.urb-row-title,
.urb-branded-row-title,
.urb-blog .urb-row-title,
.urb-blog .urb-branded-row-title {
  margin: 0 !important;
  font-size: 14.5px !important; /* exact from HTML */
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* POST DESCRIPTIONS - EXACT HTML MATCH */
.urb-post-desc,
.urb-branded-desc,
.urb-blog .urb-post-desc,
.urb-blog .urb-branded-desc {
  font-size: var(--desc) !important; /* 13.5px from HTML */
  color: var(--muted) !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.45em * 3) !important;
}

/* ROW DESCRIPTIONS (Mobile) - EXACT HTML MATCH */
.urb-row-desc,
.urb-branded-row-desc,
.urb-blog .urb-row-desc,
.urb-blog .urb-branded-row-desc {
  font-size: 13px !important; /* exact from HTML */
  color: var(--muted) !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* TAGS - EXACT HTML MATCH */
.urb-post-tag,
.urb-branded-tag,
.urb-blog .urb-post-tag,
.urb-blog .urb-branded-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  font-size: var(--tag) !important; /* 12px from HTML */
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: var(--accent) !important;
  background: linear-gradient(to bottom, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03)) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.30) !important;
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* ROW TAGS (Mobile) - EXACT HTML MATCH */
.urb-row-tag,
.urb-branded-row-tag,
.urb-blog .urb-row-tag,
.urb-blog .urb-branded-row-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  font-size: 11.5px !important; /* exact from HTML */
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: var(--accent) !important;
  background: linear-gradient(to bottom, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03)) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.30) !important;
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* ROW META - EXACT HTML MATCH */
.urb-row-meta,
.urb-branded-meta,
.urb-blog .urb-row-meta,
.urb-blog .urb-branded-meta {
  font-size: 12px !important; /* exact from HTML */
  color: var(--muted) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* BUTTONS - EXACT HTML MATCH */
.urb-more,
.urb-more:visited,
.urb-more:hover,
.urb-more:focus,
.urb-branded-button,
.urb-branded-button:visited,
.urb-branded-button:hover,
.urb-branded-button:focus,
.urb-blog .urb-more,
.urb-blog .urb-more:visited,
.urb-blog .urb-more:hover,
.urb-blog .urb-more:focus {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  font-size: 14px !important;
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #b91c1c !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  text-transform: none !important;
  font-style: normal !important;
  cursor: pointer !important;
}

/* OVERRIDE ALL ELEMENTOR GLOBAL STYLES - COMPREHENSIVE */
.elementor-widget-ur-blog-section,
.elementor-widget-ur-blog-section *,
.elementor-widget-ur-blog-page,
.elementor-widget-ur-blog-page *,
.urb-blog,
.urb-blog *,
.urb-auto-applied,
.urb-auto-applied *,
.urb-section-mode,
.urb-section-mode *,
.urb-blog-page,
.urb-blog-page * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Ensure no Elementor typography overrides */
.elementor-widget-ur-blog-section .urb-post-title,
.elementor-widget-ur-blog-section .urb-post-title *,
.elementor-widget-ur-blog-page .urb-post-title,
.elementor-widget-ur-blog-page .urb-post-title *,
.elementor-widget-ur-blog-section .urb-row-title,
.elementor-widget-ur-blog-section .urb-row-title *,
.elementor-widget-ur-blog-page .urb-row-title,
.elementor-widget-ur-blog-page .urb-row-title * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  font-style: inherit !important;
  text-decoration: inherit !important;
}

/* Force widget container styles */
.elementor-widget-ur-blog-section .elementor-widget-container,
.elementor-widget-ur-blog-page .elementor-widget-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Specific Elementor overrides */
.elementor-widget-ur-blog-section h1,
.elementor-widget-ur-blog-section h2,
.elementor-widget-ur-blog-section h3,
.elementor-widget-ur-blog-section h4,
.elementor-widget-ur-blog-section h5,
.elementor-widget-ur-blog-section h6,
.elementor-widget-ur-blog-page h1,
.elementor-widget-ur-blog-page h2,
.elementor-widget-ur-blog-page h3,
.elementor-widget-ur-blog-page h4,
.elementor-widget-ur-blog-page h5,
.elementor-widget-ur-blog-page h6 {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
}

/* Override Elementor paragraph styles */
.elementor-widget-ur-blog-section p,
.elementor-widget-ur-blog-page p {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: inherit !important;
}

/* Override Elementor link styles */
.elementor-widget-ur-blog-section a,
.elementor-widget-ur-blog-page a {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;
}

/* ===== CHIPS-BASED FILTERS (v1.6) - APP-LIKE PROFESSIONAL ===== */
.urb-filters,
.urb-app-filters {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding: 16px 0;
  animation: fadeUp 0.45s var(--bezier) both 0.15s;
}

.urb-filter-group,
.urb-branded-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--chip-border);
  box-shadow: var(--chip-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* App-like filter pills */
.urb-filter-button,
.urb-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s var(--bezier);
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.urb-filter-button svg,
.urb-filter-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.2s var(--bezier);
}

.urb-filter-button:hover,
.urb-filter-pill:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--accent);
  transform: translateY(-1px);
}

.urb-filter-button.active,
.urb-filter-pill.active {
  background: var(--accent);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.urb-filter-button.active::before,
.urb-filter-pill.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: urb-pill-shine 2s infinite;
}

@keyframes urb-pill-shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Branded select dropdown */
.urb-filter-select,
.urb-branded-select {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s var(--bezier);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--chip-shadow);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  min-width: 160px;
}

.urb-filter-select:hover,
.urb-branded-select:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--accent-12);
  transform: translateY(-1px);
}

.urb-filter-select:focus,
.urb-branded-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-12);
}

/* Mobile filter adjustments */
@media (max-width: 640px) {
  .urb-filters,
  .urb-app-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .urb-filter-group,
  .urb-branded-filters {
    justify-content: center;
  }
  
  .urb-filter-select,
  .urb-branded-select {
    width: 100%;
    min-width: auto;
  }
}

/* ===== DESKTOP GRID ===== */
.urb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 880px) {
  .urb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .urb-grid {
    display: none;
  }
}

.urb-post-card {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  box-shadow: var(--chip-shadow);
  overflow: hidden;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--bezier), box-shadow 0.22s var(--bezier), border-color 0.22s var(--bezier), filter 0.22s var(--bezier);
  animation: urb-fade 0.45s var(--bezier) both;
  position: relative;
  isolation: isolate;
  text-decoration: none !important;
}

.urb-post-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.36) 52%, transparent 72%);
  transform: translateX(-35%);
  opacity: 0;
  transition: transform 0.7s var(--bezier), opacity 0.25s var(--bezier);
  mix-blend-mode: screen;
}

.urb-post-card:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 12px 26px var(--accent-12), var(--chip-shadow);
  filter: saturate(1.03);
}

.urb-post-card:hover::after {
  opacity: 1;
  transform: translateX(115%);
}

/* ===== MEDIA (1:1 square on desktop) - ENHANCED FIX v1.4 ===== */
.urb-post-media,
.urb-perfect-square {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
  overflow: hidden;
  /* Force perfect square with explicit dimensions */
  width: 100%;
  height: auto;
  min-height: 200px; /* Fallback for browsers without aspect-ratio support */
}

/* Enhanced image fitting - v1.4 FIX */
.urb-post-media img,
.urb-cover-image,
.urb-perfect-square img,
.urb-perfect-square .urb-cover-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.3s var(--bezier);
  /* Force absolute positioning for perfect fit */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Prevent any margin/padding issues */
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper rendering */
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Hover effects */
.urb-post-card:hover .urb-post-media img,
.urb-post-card:hover .urb-cover-image,
.urb-branded-card:hover .urb-perfect-square img,
.urb-branded-card:hover .urb-perfect-square .urb-cover-image {
  transform: scale(1.05);
}

/* Ensure container maintains aspect ratio */
.urb-post-media::before,
.urb-perfect-square::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%; /* 1:1 aspect ratio fallback */
  position: relative;
}

/* Modern browsers with aspect-ratio support */
@supports (aspect-ratio: 1 / 1) {
  .urb-post-media::before,
  .urb-perfect-square::before {
    display: none;
  }
}

/* ===== PLAY BADGE ===== */
.urb-play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(220, 38, 38, 0.95);
  color: #fff;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: transform 0.18s var(--bezier), filter 0.18s var(--bezier), box-shadow 0.18s var(--bezier);
}

.urb-play-badge svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.urb-play-badge::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(220, 38, 38, 0.35);
  animation: urb-ping 1.6s infinite;
  opacity: 0.8;
}

.urb-post-card:hover .urb-play-badge,
.urb-post-row:hover .urb-play-badge {
  transform: translate(-50%, -50%) scale(1.04);
}

@keyframes urb-ping {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* ===== POST BODY ===== */
.urb-post-body {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.urb-post-title {
  margin: 0;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: var(--title);
  font-weight: 900;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.urb-post-card:hover .urb-post-title {
  color: var(--accent) !important;
}

.urb-post-desc {
  font-size: var(--desc);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 3);
  margin: 0;
}

.urb-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.urb-post-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  padding: 4px 8px;
  font-size: var(--tag);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--accent) !important;
  background: linear-gradient(to bottom, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
  border: 1.5px solid rgba(220, 38, 38, 0.30);
  border-radius: 999px;
  text-decoration: none !important;
}

.urb-post-tag svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* ===== MOBILE LIST (app-like rows with circular media) ===== */
.urb-list {
  display: none;
  gap: 10px;
}

@media (max-width: 640px) {
  .urb-list {
    display: grid;
  }
}

.urb-post-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none !important;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  box-shadow: var(--chip-shadow);
  padding: 10px;
  color: var(--ink) !important;
  transition: transform 0.18s var(--bezier), box-shadow 0.18s var(--bezier), border-color 0.18s var(--bezier), filter 0.18s var(--bezier);
  position: relative;
  isolation: isolate;
}

.urb-post-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.30) 52%, transparent 72%);
  transform: translateX(-35%);
  opacity: 0;
  transition: transform 0.6s var(--bezier), opacity 0.22s var(--bezier);
  mix-blend-mode: screen;
}

.urb-post-row:hover {
  transform: translateY(-1px);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 10px 20px var(--accent-12);
}

.urb-post-row:hover::after {
  opacity: 1;
  transform: translateX(115%);
}

.urb-row-media,
.urb-perfect-circle {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
}

/* Enhanced circular image fitting - v1.4 FIX */
.urb-row-media img,
.urb-perfect-circle img,
.urb-perfect-circle .urb-cover-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  /* Force perfect circular cover */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Prevent any margin/padding issues */
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper circular rendering */
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: inherit;
}

.urb-row-media .urb-play-badge {
  width: 30px;
  height: 30px;
}

.urb-row-media .urb-play-badge::after {
  inset: -5px;
}

@media (max-width: 420px) {
  .urb-row-media {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
  }
  .urb-row-media .urb-play-badge {
    width: 28px;
    height: 28px;
  }
}

.urb-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.urb-row-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.urb-row-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.urb-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.urb-row-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  padding: 3px 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--accent) !important;
  background: linear-gradient(to bottom, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
  border: 1.5px solid rgba(220, 38, 38, 0.30);
  border-radius: 999px;
}

.urb-row-more {
  color: var(--accent) !important;
  background: transparent;
  border-style: dashed;
}

.urb-row-desc {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.urb-row-chevron {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  transition: transform 0.16s var(--bezier);
}

.urb-post-row:hover .urb-row-chevron {
  transform: translateX(2px);
}

/* ===== SKELETONS ===== */
.urb-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
  .urb-skeleton {
    background: rgba(255, 255, 255, 0.08);
  }
}

.urb-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: urb-shimmer 1.2s infinite;
}

@keyframes urb-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ===== VIEW ALL / LOAD MORE BUTTON ===== */
.urb-cta {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.urb-more,
.urb-more:visited,
.urb-more:hover,
.urb-more:focus {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 14px;
  background: #dc2626;
  color: #fff !important;
  border: 1px solid #b91c1c;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.26);
  transition: transform 0.2s var(--bezier), box-shadow 0.2s var(--bezier), filter 0.2s var(--bezier);
  cursor: pointer;
}

.urb-more:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 14px 28px var(--accent-18);
}

.urb-more svg {
  width: 16px;
  height: 16px;
  stroke: #fff !important;
  fill: none;
  stroke-width: 2;
}

.urb-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ===== LOADING STATES ===== */
.urb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--muted);
}

.urb-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--chip-border);
  border-top: 2px solid var(--accent);
  border-radius: 50%;
  animation: urb-spin 1s linear infinite;
}

@keyframes urb-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== ANIMATIONS ===== */
@keyframes urb-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .urb-post-card,
  .urb-post-card::after,
  .urb-post-row,
  .urb-post-row::after,
  .urb-more,
  .urb-play-badge::after,
  .urb-skeleton::before {
    transition: none;
    animation: none;
  }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 480px) {
  .urb-blog {
    padding: 12px 14px 18px;
  }
  
  .urb-filters {
    gap: 8px;
  }
  
  .urb-filter-select,
  .urb-filter-button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ===== ELEMENTOR INTEGRATION ===== */
.elementor-widget-ur-blog-section .urb-blog,
.elementor-widget-ur-blog-page .urb-blog {
  margin: 0;
}

/* ===== PROFESSIONAL BREADCRUMBS (v1.6) - CHIPS STYLE ===== */
.urb-breadcrumbs {
  margin-bottom: 20px;
  padding: 0;
}

.urb-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--chip-text);
  animation: fadeUp 0.45s var(--bezier) both;
}

.urb-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* Chip-style breadcrumb links */
.urb-breadcrumb-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  box-shadow: var(--chip-shadow);
  color: var(--text-light) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: var(--chip-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  transition: transform 0.28s var(--bezier), box-shadow 0.28s var(--bezier), 
              border-color 0.28s var(--bezier), filter 0.28s var(--bezier);
  overflow: hidden;
  outline: 0;
}

/* Sheen effect on breadcrumb links */
.urb-breadcrumb-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-35%);
  opacity: 0;
  transition: transform 0.7s var(--bezier), opacity 0.25s var(--bezier);
  mix-blend-mode: screen;
}

.urb-breadcrumb-link:hover {
  transform: var(--lift);
  border-color: var(--accent-25);
  box-shadow: var(--chip-hover-shadow);
  filter: saturate(1.04);
  color: var(--accent) !important;
}

.urb-breadcrumb-link:hover::before {
  opacity: 1;
  transform: translateX(115%);
}

.urb-breadcrumb-link:active {
  transform: var(--press);
}

.urb-breadcrumb-link:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-10), var(--chip-hover-shadow);
  border-color: var(--accent-25);
}

/* Current breadcrumb - highlighted chip */
.urb-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad);
  background: linear-gradient(135deg, var(--accent-15), var(--accent-10));
  border: 1px solid var(--accent-25);
  border-radius: var(--chip-radius);
  box-shadow: var(--chip-shadow);
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: var(--chip-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
}

/* Chip-style separator */
.urb-breadcrumb-separator {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: opacity 0.2s var(--bezier);
}

/* ===== DYNAMIC PAGE HEADER (v1.5) ===== */
.urb-page-header {
  margin-bottom: 20px;
}

.urb-dynamic-title {
  position: relative;
}

.urb-tag-page .urb-dynamic-title,
.urb-category-page .urb-dynamic-title {
  background: linear-gradient(135deg, var(--ink), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.urb-dynamic-subtitle {
  max-width: 700px;
  line-height: 1.6;
}

/* ===== PROFESSIONAL PAGE BADGES (v1.6) - CHIPS STYLE ===== */
.urb-page-meta {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-top: 16px;
  flex-wrap: wrap;
  animation: fadeUp 0.45s var(--bezier) both 0.1s;
}

.urb-page-type-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad);
  border-radius: var(--chip-radius);
  font-size: var(--chip-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  box-shadow: var(--chip-shadow);
  transition: transform 0.28s var(--bezier), box-shadow 0.28s var(--bezier);
  overflow: hidden;
}

/* Sheen effect on badges */
.urb-page-type-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: translateX(-35%);
  opacity: 0;
  transition: transform 0.7s var(--bezier), opacity 0.25s var(--bezier);
  mix-blend-mode: screen;
}

.urb-page-type-badge:hover {
  transform: var(--lift);
  box-shadow: var(--chip-hover-shadow);
}

.urb-page-type-badge:hover::before {
  opacity: 1;
  transform: translateX(115%);
}

.urb-tag-badge {
  background: linear-gradient(135deg, var(--accent-15), var(--accent-10));
  color: var(--accent) !important;
  border: 1px solid var(--accent-25);
}

.urb-category-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.urb-page-type-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.urb-post-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted) !important;
  font-family: inherit !important;
}

/* ===== PAGE TYPE SPECIFIC STYLING (v1.5) ===== */
.urb-tag-page .urb-filters {
  border-top: 2px solid rgba(220, 38, 38, 0.1);
  padding-top: 20px;
}

.urb-category-page .urb-filters {
  border-top: 2px solid rgba(59, 130, 246, 0.1);
  padding-top: 20px;
}

.urb-author-page .urb-page-header {
  text-align: center;
  padding: 20px 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
  border-radius: var(--radius);
  margin-bottom: 30px;
}

/* ===== RESPONSIVE BREADCRUMBS (v1.5) ===== */
@media (max-width: 640px) {
  .urb-breadcrumb-list {
    font-size: 12px;
  }
  
  .urb-breadcrumb-separator {
    width: 10px;
    height: 10px;
  }
  
  .urb-page-meta {
    justify-content: center;
  }
  
  .urb-page-type-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* ===== BLOG PAGE SPECIFIC ===== */
.urb-blog-page .urb-grid {
  margin-bottom: 20px;
}

.urb-blog-page .urb-no-posts {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 16px;
}

.urb-blog-page .urb-no-posts svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ===== AUTO-APPLIED BLOG PAGE (v1.1) ===== */
.urb-auto-applied {
  margin: 20px 0;
}

.urb-branded-title {
  background: linear-gradient(135deg, var(--ink), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.urb-branded-subtitle {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--muted);
  font-weight: 500;
}

/* Enhanced post styling for auto-applied */
.urb-branded-card,
.urb-branded-row {
  position: relative;
}

.urb-branded-card::before,
.urb-branded-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, var(--accent), transparent, var(--accent));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s var(--bezier);
}

.urb-branded-card:hover::before,
.urb-branded-row:hover::before {
  opacity: 0.1;
}

.urb-branded-post-title,
.urb-branded-row-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.urb-branded-desc,
.urb-branded-row-desc {
  color: var(--muted);
  line-height: 1.5;
}

.urb-branded-tag,
.urb-branded-row-tag {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
  border: 1px solid rgba(220, 38, 38, 0.2);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.urb-branded-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.urb-branded-button {
  background: linear-gradient(135deg, var(--accent), #b91c1c);
  border: none;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 13px;
}

.urb-branded-button:hover {
  background: linear-gradient(135deg, #b91c1c, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}

.urb-branded-chevron {
  stroke: var(--accent);
  opacity: 0.7;
}