/* ==========================================================================
   Blog Improvements — Typography & Layout
   Follows Material Design 3 & Ant Design spacing/scale principles
   Dark-mode first, light-mode via body.light-mode overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS CUSTOM PROPERTIES (local overrides)
   -------------------------------------------------------------------------- */
:root {
  --blog-max-prose:    72ch;       /* ~720px ideal reading width */
  --blog-gap-section:  2.5rem;     /* 40px between article sections */
  --blog-gap-heading:  0.75rem;    /* 12px between heading and body */
  --blog-body-size:    1.0625rem;  /* 17px body text (optimal for screen) */
  --blog-body-lh:      1.8;        /* WCAG-recommended line-height for prose */
  --blog-h2-size:      1.375rem;   /* 22px in-article h2 */
  --blog-h3-size:      1.125rem;   /* 18px in-article h3 */
  --blog-meta-color:   rgba(255,255,255,0.45);
  --blog-card-border:  rgba(255,255,255,0.07);
  --blog-card-hover:   rgba(255,0,92,0.06);
  --blog-thumb-size:   96px;
  --blog-img-aspect:   16 / 9;
}

/* ==========================================================================
   1. BLOG LISTING PAGE — Card grid
   ========================================================================== */

/* Override main wrapper to enable grid on wider screens */
.main_category_wrapp {
  display: flex !important;
  flex-direction: column !important;
}

/* --- Product / Article Cards --- */
.product_link {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr var(--blog-thumb-size) !important;
  grid-template-areas: "content thumb" !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.5rem 1rem !important;
  border-bottom: 1px solid var(--blog-card-border) !important;
  border-top: 0 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  overflow: hidden !important;
}
.product_link:first-of-type {
  border-top: 1px solid var(--blog-card-border) !important;
}
.product_link:hover {
  background: var(--blog-card-hover) !important;
  border-bottom-color: rgba(255, 0, 92, 0.2) !important;
}

/* Content column */
.product_content {
  grid-area: content !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
  width: 100% !important;
  text-decoration: none !important;
}

/* Thumbnail column */
.product_img {
  grid-area: thumb !important;
  position: static !important;
  display: block !important;
  width: var(--blog-thumb-size) !important;
  height: var(--blog-thumb-size) !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: grayscale(20%) contrast(105%) !important;
  flex-shrink: 0 !important;
  transition: filter 0.25s ease, opacity 0.25s ease !important;
}
.product_link:hover .product_img {
  filter: grayscale(0%) contrast(108%) !important;
  opacity: 0.95 !important;
}

/* Article title — remove all-caps for better readability */
.product_link .sub_text {
  font-size: 0.9375rem !important;  /* 15px */
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.45 !important;
  color: var(--text-1, #f2f0f2) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Article description */
.product_link .text-white.grey {
  font-size: 0.8125rem !important;  /* 13px */
  color: var(--text-muted, rgba(255,255,255,0.5)) !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Date / meta line */
.footer-social-btm-link-r {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.3rem !important;
}
.product_link .text-link-footer {
  font-size: 0.6875rem !important; /* 11px */
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 0, 92, 0.7) !important;
  font-weight: 500 !important;
}
.footer-arrow-icon {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.5 !important;
}

/* Inner layout fixes */
.frame-21 {
  gap: 0.25rem !important;
}
.frame-19 {
  padding: 0 !important;
}
.footer-social-btm-parent.no-padding {
  padding: 0 !important;
  gap: 0.25rem !important;
}

/* Section header for blog categories */
.main_category_wrapp .container-lg {
  padding-bottom: 1rem !important;
}

/* ==========================================================================
   2. ARTICLE PAGES — Old-style layout (.text-blog, .text-block-8, .heading-17)
   ========================================================================== */

/* Constrain prose width for readability */
.text-blog {
  max-width: var(--blog-max-prose) !important;
  padding-bottom: var(--blog-gap-section) !important;
}

/* In-article section headings — h2 */
.heading-17 {
  font-size: var(--blog-h2-size) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: var(--text-1, #f2f0f2) !important; /* was: all red — changed to white */
  margin-bottom: var(--blog-gap-heading) !important;
  padding-top: 0.5rem !important;
  border-left: 3px solid var(--highlight, #ff005c) !important;
  padding-left: 0.875rem !important;
}

/* Body text blocks */
.text-block-8 {
  font-size: var(--blog-body-size) !important;
  line-height: var(--blog-body-lh) !important;
  color: var(--text-body, #cac8ca) !important;
  max-width: var(--blog-max-prose) !important;
}

/* Article hero image */
.photo_blog {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.photo_blog .image-9 {
  border: 1px solid var(--blog-card-border) !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.photo_blog._2photo {
  gap: 1rem !important;
}
.photo_blog._2photo .image,
.photo_blog._2photo .image-2 {
  border: 1px solid var(--blog-card-border) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: auto !important;
}

/* ==========================================================================
   3. ARTICLE PAGES — New UUI-style layout (.uui-text-rich-text)
   ========================================================================== */

/* Rich text prose container */
.uui-text-rich-text {
  font-size: var(--blog-body-size) !important;
  line-height: var(--blog-body-lh) !important;
  max-width: var(--blog-max-prose) !important;
}

.uui-text-rich-text h2 {
  font-size: var(--blog-h2-size) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--text-1, #f2f0f2) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.625rem !important;
  border-left: 3px solid var(--highlight, #ff005c) !important;
  padding-left: 0.875rem !important;
}

.uui-text-rich-text h3 {
  font-size: var(--blog-h3-size) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.82) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.uui-text-rich-text h4,
.uui-text-rich-text h5 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.72) !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.375rem !important;
}

.uui-text-rich-text p {
  margin-bottom: 1.125rem !important;
  color: var(--text-body, #cac8ca) !important;
}

.uui-text-rich-text li {
  line-height: 1.7 !important;
  margin-bottom: 0.35rem !important;
  color: var(--text-body, #cac8ca) !important;
}

.uui-text-rich-text ul,
.uui-text-rich-text ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1.25rem !important;
}

.uui-text-rich-text strong {
  color: var(--text-2, #d0ced0) !important;
  font-weight: 700 !important;
}

.uui-text-rich-text blockquote {
  border-left: 3px solid var(--highlight, #ff005c) !important;
  margin-left: 0 !important;
  padding: 0.75rem 1rem !important;
  color: rgba(255,255,255,0.6) !important;
  font-style: italic !important;
  background: rgba(255, 0, 92, 0.04) !important;
}

/* Main article heading */
.uui-heading-large {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Article date meta */
.uui-blogpost05_date {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 0, 92, 0.8) !important;
}
.uui-text-size-medium {
  font-size: 0.75rem !important;
  color: var(--blog-meta-color) !important;
}

/* ==========================================================================
   4. READING TIME BADGE — Improve visibility
   ========================================================================== */

.blog-rt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.6875rem !important;  /* 11px — up from 9.6px */
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0.3rem 0.65rem !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  width: fit-content !important;
}

/* ==========================================================================
   5. RELATED ARTICLES — Better cards
   ========================================================================== */

.related-articles {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
}

.related-articles__grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
}

.related-card {
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 1rem 1.125rem !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.related-card:hover {
  border-color: rgba(255,0,92,0.35) !important;
  background: rgba(255,0,92,0.04) !important;
}

.related-card__title {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.88) !important;
}
.related-card__desc {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.42) !important;
  margin-top: 0.25rem !important;
}

/* ==========================================================================
   6. SHARE BAR — Minor improvements
   ========================================================================== */

.share-bar {
  gap: 0.625rem !important;
  flex-wrap: wrap !important;
}
.share-bar__link {
  font-size: 0.6875rem !important;
  padding: 0.45rem 1rem !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: color 0.18s, border-color 0.18s, background 0.18s !important;
}
.share-bar__link:hover {
  background: rgba(255,0,92,0.06) !important;
  color: #ff005c !important;
  border-color: rgba(255,0,92,0.35) !important;
}

/* ==========================================================================
   7. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --blog-body-size:  1rem;
    --blog-h2-size:    1.25rem;
    --blog-gap-section: 2rem;
    --blog-thumb-size: 72px;
  }

  .product_link {
    grid-template-columns: 1fr !important;
    grid-template-areas: "content" !important;
    padding: 1.25rem 0.75rem !important;
  }
  .product_img {
    display: none !important;
  }

  .uui-text-rich-text h2 {
    font-size: 1.25rem !important;
  }

  .photo_blog._2photo {
    flex-direction: column !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --blog-thumb-size: 80px;
  }
}

@media (min-width: 1280px) {
  :root {
    --blog-thumb-size: 112px;
  }
  .product_link {
    padding: 1.75rem 1.5rem !important;
  }
}

/* ==========================================================================
   8. LIGHT MODE OVERRIDES
   ========================================================================== */

body.light-mode {
  --blog-meta-color:   rgba(0,0,0,0.42);
  --blog-card-border:  rgba(0,0,0,0.08);
  --blog-card-hover:   rgba(232,0,79,0.04);
}

body.light-mode .product_link .sub_text {
  color: #0a0909 !important;
}
body.light-mode .product_link .text-white.grey {
  color: #5a5757 !important;
}
body.light-mode .product_link .text-link-footer {
  color: rgba(232,0,79,0.75) !important;
}
body.light-mode .product_link:hover {
  background: rgba(232,0,79,0.035) !important;
  border-bottom-color: rgba(232,0,79,0.18) !important;
}

body.light-mode .heading-17 {
  color: #1a1818 !important;
  border-left-color: #e8004f !important;
}
body.light-mode .text-block-8 {
  color: #302e2e !important;
}

body.light-mode .uui-text-rich-text h2 {
  color: #0a0909 !important;
  border-left-color: #e8004f !important;
}
body.light-mode .uui-text-rich-text h3 {
  color: rgba(0,0,0,0.78) !important;
}
body.light-mode .uui-text-rich-text p,
body.light-mode .uui-text-rich-text li {
  color: #302e2e !important;
}
body.light-mode .uui-text-rich-text strong {
  color: #1a1818 !important;
}
body.light-mode .uui-text-rich-text blockquote {
  color: rgba(0,0,0,0.58) !important;
  border-left-color: #e8004f !important;
  background: rgba(232,0,79,0.035) !important;
}
body.light-mode .uui-heading-large {
  color: #0a0909 !important;
}
body.light-mode .uui-blogpost05_date {
  color: #e8004f !important;
}
body.light-mode .uui-text-size-medium {
  color: rgba(0,0,0,0.45) !important;
}

body.light-mode .blog-rt-badge {
  color: rgba(0,0,0,0.45) !important;
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.light-mode .related-card {
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .related-card:hover {
  border-color: rgba(232,0,79,0.3) !important;
  background: rgba(232,0,79,0.035) !important;
}
body.light-mode .related-card__title {
  color: rgba(0,0,0,0.85) !important;
}
body.light-mode .related-card__desc {
  color: rgba(0,0,0,0.42) !important;
}

body.light-mode .photo_blog .image-9,
body.light-mode .photo_blog._2photo .image,
body.light-mode .photo_blog._2photo .image-2 {
  border-color: rgba(0,0,0,0.08) !important;
}

body.light-mode .share-bar__link {
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .share-bar__link:hover {
  border-color: rgba(232,0,79,0.35) !important;
  color: #e8004f !important;
  background: rgba(232,0,79,0.04) !important;
}