/* =========================================================================
   Insights Details Page Styles
   Using VW (Viewport Width) for fluid 1:1 scaling from 1440px Figma design
   ========================================================================= */

/* For Desktop (Web screens) - Fluid scaling based on 1440px */
@media (min-width: 768px) {

  /* --- Hero Section --- */
  .insights-details-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
  }

  .insights-details-hero-bg {
    position: absolute;
    top: 0;
    left: -1.5972vw;
    /* -23/1440 */
    width: 102.7778vw;
    /* 1480/1440 */
    height: 100%;
    background: linear-gradient(135.16deg, #000000 -4.05%, rgba(0, 0, 0, 0) 75.07%), url('../assets/images/insightdetailsherp.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 0 !important;
  }

  .insights-details-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding-left: 4.4444vw;
    /* 64/1440 */
    gap: 1.2917vw;
    /* 33px gap between title and meta */
  }

  .insights-details-hero-content::before {
    content: '';
    flex: 511;
    /* Proportionate top space per Figma */
  }

  .insights-details-hero-content::after {
    content: '';
    flex: 134;
    /* Proportionate bottom space per Figma */
  }

  .insights-details-hero-title-container {
    position: static;
    max-width: 58.3333vw;
    /* Keeps dynamic post titles wrapping within the hero column instead of stretching full-width */
  }

  .insights-details-hero-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.6528vw;
    /* 67/1440 */
    line-height: 4.7917vw;
    /* 69/1440 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

  .insights-details-hero-meta {
    position: static;
    padding-left: 0.9028vw;
    /* 13/1440 */
    display: flex;
    align-items: center;
    gap: 1.1111vw;
    /* 16/1440 */
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 0.4167vw;
    /* 6/1440 */
  }

  .meta-item span {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 2.0139vw;
    /* 29/1440 */
    letter-spacing: 0.01em;
    color: #FFA726;
  }

  .meta-item i {
    color: #FFA726;
    font-size: 1.3889vw;
    /* 20/1440 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .meta-calendar-icon {
    width: 1.3889vw;
    /* 20/1440 */
    height: 1.3889vw;
    /* 20/1440 */
    object-fit: cover !important;
  }

  /* --- Details Body Section --- */
  .insights-details-section {
    width: 100%;
    background: #F4F5F5;
    padding-top: 3.472vw;
    /* Reduced from 85/1440 gap between hero and content */
    padding-bottom: 0;
    display: flex;
    justify-content: center;
  }

  .insights-details-container {
    width: 95.9028vw;
    /* 1381/1440 */
    max-width: 1381px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0 !important;
  }

  .insights-details-content {
    padding: 0 5.5556vw;
    /* 80/1440 horizontal padding only */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0 !important;
  }

  .insights-details-body {
    width: 100%;
    max-width: 84.7917vw;
    /* 1221/1440 - Figma node 1867-2252 width */
    display: flex;
    flex-direction: column;
    gap: 2.7777vw;
    /* Reduced from 75px to 40/1440 */
    margin-top: 0 !important;
  }

  .insights-details-paragraph {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    /* 18/1440 */
    line-height: 2.0089vw;
    /* 38/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: 0 !important;
  }

  .insights-details-subtitle {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    /* 45/1440 */
    line-height: 3.4722vw;
    /* 50/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    width: 49.9305vw;
    /* 719/1440 */
    margin: 0;
  }

  .insights-details-list {
    width: 57.4305vw;
    /* 827/1440 */
    margin: 0;
    margin-left: 4.4583vw;
    /* Indent by 57px (167px total from screen edge) */
    padding-left: 2.0833vw;
    /* 30/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    /* 18/1440 */
    line-height: 2.5167vw;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    list-style-type: none;
  }

  .insights-details-list li {
    position: relative;
  }

  .insights-details-list li::before {
    content: '•';
    position: absolute;
    left: -1.9333vw;
    /* 12/1440 - tighten gap to match Figma */
    color: #000000;
  }

  /* Generic tags produced by the native WordPress editor (the_content()) -
     mirrors the .insights-details-paragraph/-subtitle/-list rules above so
     anything an editor types is styled automatically, with no special
     classes required. */
  .insights-details-body p {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    line-height: 2.0089vw;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    line-height: 3.4722vw;
    letter-spacing: 0.01em;
    color: #000000;
    max-width: 49.9305vw;
    margin: 0;
  }

  .insights-details-body ul,
  .insights-details-body ol {
    width: 57.4305vw;
    margin: 0;
    margin-left: 4.4583vw;
    padding-left: 2.0833vw;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 300;
    font-size: 1.29vw;
    line-height: 2.5167vw;
    letter-spacing: 0.01em;
    color: #000000;
    list-style-type: none;
  }

  .insights-details-body ul li,
  .insights-details-body ol li {
    position: relative;
  }

  .insights-details-body ul li::before,
  .insights-details-body ol li::before {
    content: '•';
    position: absolute;
    left: -1.9333vw;
    color: #000000;
  }

  .insights-details-body img,
  .insights-details-body figure {
    width: 100%;
    max-width: 89.5833vw;
    height: auto;
    border-radius: 4px;
    margin: 0 auto;
    display: block;
  }

  .insights-details-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3.777vw;
    /* Reduced from 86/1440 gap from the list above */
    padding-bottom: 4vw;
    /* Reduced from 80/1440 */
  }

  .insights-details-full-image {
    width: 89.5833vw;
    /* 1290/1440 */
    height: 43.75vw;
    /* 630/1440 */
    border-radius: 1.4583vw;
    /* 21/1440 */
    object-fit: cover;
  }

  /* --- Related Insights Section VW Overrides --- */
  .insights-details-page-body .insights-section {
    padding-top: 3.977vw !important;
    /* Reduced from 100/1440 gap from details content */
    padding-bottom: 4.872vw !important;
    /* Reduced from 109.56/1440 */
  }

  .insights-details-page-body .insights-label {
    font-size: 2.0833vw !important;
    /* 30/1440 */
    line-height: 2.0833vw !important;
  }

  .insights-details-page-body .insights-label-wrap svg,
  .insights-details-page-body .insights-label-wrap img {
    width: 0.3937vw !important;
    /* 5.67/1440 */
    height: 1.9541vw !important;
    /* 28.14/1440 */
  }

  .insights-details-page-body .insights-title {
    font-size: 2.8472vw !important;
    /* 41/1440 */
    line-height: 3.2638vw !important;
    /* 47/1440 */
    width: 35.0694vw !important;
    /* 505/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights {
    width: 18.75vw !important;
    /* 270/1440 */
    height: 3.75vw !important;
    /* 54/1440 */
    border-radius: 2.0138vw !important;
    /* 29/1440 */
    padding: 0 !important;
  }

  .insights-details-page-body .btn-discover-now-insights .btn-text {
    font-size: 1.6666vw !important;
    /* 24/1440 */
    line-height: 2.0833vw !important;
    /* 30/1440 */
    top: 0.8708vw !important;
    /* 12.54/1440 */
    left: 4.7493vw !important;
    /* 68.39/1440 */
    width: 12.8vw !important;
    /* 184.32/1440 */
    height: 2.2097vw !important;
    /* 31.82/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights .icon-circle {
    top: 0.3472vw !important;
    /* 5/1440 */
    left: 0.4166vw !important;
    /* 6/1440 */
    width: 3.0784vw !important;
    /* 44.33/1440 */
    height: 3.0555vw !important;
    /* 44/1440 */
  }

  .insights-details-page-body .btn-discover-now-insights .discover-arrow-img {
    width: 3.0784vw !important;
    /* 44.33/1440 */
    height: 3.0555vw !important;
    /* 44/1440 */
    border-radius: 1.6666vw !important;
    /* 24/1440 */
  }

  .insights-details-page-body .insights-header-top {
    position: relative !important;
    display: block !important;
    width: 90.4861vw !important;
    /* 1303/1440 */
    max-width: 90.4861vw !important;
    height: 5.6528vw !important;
    /* 81.4/1440 - enough to contain all children */
    margin: 0 4.7222vw 0 4.7917vw !important;
    /* 0 68px 0 69px */
    padding: 0 !important;
  }

  .insights-details-page-body .insights-label-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 32.8472vw !important;
    /* 473/1440 */
    height: 2.7208vw !important;
    /* 39.18/1440 */
    display: flex !important;
    align-items: center !important;
    gap: 0.5555vw !important;
    margin: 0 !important;
    padding-left: 3.75vw !important;
    /* 54/1440 - bar starts at x:54 in Figma */
    box-sizing: border-box !important;
  }

  .insights-details-page-body .insights-title {
    position: absolute !important;
    top: 0.4444vw !important;
    /* 6.4/1440 */
    left: 30.9028vw !important;
    /* 445/1440 */
    width: 35.0694vw !important;
    /* 505/1440 */
    height: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .insights-details-page-body .btn-discover-now-insights {
    position: absolute !important;
    top: 1.9444vw !important;
    /* 28/1440 */
    left: 71.7361vw !important;
    /* 1033/1440 */
    width: 18.75vw !important;
    /* 270/1440 */
    height: 3.75vw !important;
    /* 54/1440 */
    border-radius: 2.0138vw !important;
    /* 29/1440 */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- Related Insights Cards --- */
  .insights-related-cards-container {
    width: 91.7361vw;
    /* 1321/1440 */
    margin: 0 auto;
    margin-top: 6.0028vw;
    /* 86.44/1440 gap between title and cards */
  }

  .insights-related-cards-row {
    display: flex;
    gap: 0.8333vw;
    /* 12/1440 */
    align-items: stretch;
  }

  .insights-related-card {
    background: #E9EAEB;
    border-radius: 1.3194vw;
    /* 19/1440 */
    padding: 1.1805vw 1.3888vw 3.0555vw;
    /* 17px 20px 44px */
    display: flex;
    flex-direction: column;
    gap: 2.2916vw;
    /* 33/1440 */
  }

  .insights-related-card-large {
    width: 37.9861vw;
    /* 547/1440 */
    flex-shrink: 0;
  }

  .insights-related-card-small {
    flex: 1;
  }

  .insights-related-card-img {
    width: 100%;
    height: 18.4027vw;
    /* 265/1440 */
    border-radius: 1.4583vw;
    /* 21/1440 */
    overflow: hidden;
  }

  .insights-related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.4583vw;
    /* 21/1440 */
  }

  .insights-related-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.9027vw;
    /* 13/1440 */
    flex: 1;
  }

  .insights-related-card-date {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* 7/1440 */
  }

  .insights-related-cal-icon {
    width: 1.8055vw;
    /* 26/1440 */
    height: 1.7361vw;
    /* 25/1440 */
    object-fit: cover !important;
  }

  .insights-related-card-date span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 1;
    color: #000000;
  }

  .insights-related-card-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5972vw;
    /* 23/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-related-card-title-large {
    font-size: 1.9444vw;
    /* 28/1440 */
  }

  .insights-related-card-desc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9722vw;
    /* 14/1440 */
    line-height: 1.3888vw;
    /* 20/1440 */
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
  }

  .insights-related-read-more {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    /* 21/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    text-decoration: none;
    margin-top: auto;
  }

  .insights-related-read-more:hover {
    text-decoration: underline;
  }

  /* --- Pre-footer overrides ---
     Was a full fixed-height/absolute-position re-implementation (height,
     top/left, icon/button sizing) - all of that is now handled dynamically
     by the shared base in style-v2.css, including this page. Only the
     title's own wider wrap-width is a genuine difference worth keeping. */
  .insights-details-page-body .pre-footer-title {
    max-width: 52.0138vw !important;
    /* 749/1440 */
  }
}

/* For Mobile (Below 992px) - Fallback to standard px/layout */
@media (max-width: 767px) {

  /* --- Hero Section --- */
  .insights-details-hero {
    position: relative;
    width: 100%;
    height: 100svh !important;
    min-height: 500px !important;
    overflow: hidden;
    display: block !important;
    padding: 0 !important;
  }

  .insights-details-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0000006B, #0000006B), url('../assets/images/herodetailpage.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
  }

  .insights-details-hero-content {
    position: absolute !important;
    /* Hero content was sitting just below the middle (53.7%). Centred
       slightly above it instead: 45vh - 120px (half the 241px block). The
       block naturally starts 333px down, hence the -453px. Offsetting the
       wrapper moves title and meta together, so their gap is unchanged.
       vh because this hero is 100vh. */
    top: calc(45vh - 453px) !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    display: block !important;
  }

  .insights-details-hero-title-container {
    position: absolute !important;
    top: 333px !important;
    left: 25px !important;
    width: 278px !important;
    max-width: 278px !important;
  }

  .insights-details-hero-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 38.2px !important;
    line-height: 43px !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .insights-details-hero-meta {
    position: absolute !important;
    top: 545px !important;
    left: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 4px !important;
  }

  .meta-item:nth-child(2) {
    gap: 8px !important;
  }

  .meta-item span {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 29px !important;
    letter-spacing: 0.01em !important;
    color: #FFA726 !important;
  }

  .meta-item i {
    color: #FFA726 !important;
    font-size: 12px !important;
  }

  .meta-calendar-icon {
    width: 12px !important;
    height: 11px !important;
    object-fit: contain !important;
  }

  /* --- Details Body Section --- */
  .insights-details-section {
    width: 100% !important;
    background: #FFFFFF !important;
    /* Figma uses #FFFFFF for body */
    padding: 0 !important;
    /* Reset */
  }

  .insights-details-container {
    width: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .insights-details-content {
    padding: 7.6336vw 0 0 0 !important;
    /* Top 30px */
    display: flex !important;
    justify-content: center !important;
  }

  .insights-details-body {
    width: 85.4962vw !important;
    /* Exactly 336px relative to 393px */
    display: flex;
    flex-direction: column;
    gap: 4.0712vw !important;
    /* 16px relative to 393px */
  }

  .insights-details-paragraph {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16px relative to 393px */
    line-height: 5.5980vw !important;
    /* 22px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-details-subtitle {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.5979vw !important;
    /* 22px relative to 393px */
    line-height: 7.1246vw !important;
    /* 28px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 5.3435vw 0 0 0 !important;
    /* 21px top margin + 16px gap = 37px total gap from first paragraph */
  }

  .insights-details-list {
    margin: 0 !important;
    padding-left: 5.0890vw !important;
    /* 20px */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16px */
    line-height: 5.5980vw !important;
    /* 22px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    list-style-type: none !important;
  }

  .insights-details-list li {
    position: relative !important;
  }

  .insights-details-list li::before {
    content: '•' !important;
    /* Reverted to dot per user request */
    position: absolute !important;
    left: -3.0534vw !important;
    /* -12px */
    color: #000000 !important;
  }

  /* Generic tags produced by the native WordPress editor (the_content()) -
     mirrors the .insights-details-paragraph/-subtitle/-list rules above. */
  .insights-details-body p {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    line-height: 5.5980vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.5979vw !important;
    line-height: 7.1246vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 5.3435vw 0 0 0 !important;
  }

  .insights-details-body ul,
  .insights-details-body ol {
    margin: 0 !important;
    padding-left: 5.0890vw !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    line-height: 5.5980vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    list-style-type: none !important;
  }

  .insights-details-body ul li,
  .insights-details-body ol li {
    position: relative !important;
  }

  .insights-details-body ul li::before,
  .insights-details-body ol li::before {
    content: '•' !important;
    position: absolute !important;
    left: -3.0534vw !important;
    color: #000000 !important;
  }

  .insights-details-body img,
  .insights-details-body figure {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin: 0 !important;
    display: block !important;
  }

  .insights-details-image-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 9.1603vw !important;
    /* 36px */
    margin-bottom: 0 !important;
    padding: 0 7.3791vw !important;
    /* 29px */
  }

  .insights-details-full-image {
    width: 100% !important;
    height: 233px !important;
    /* Exact height */
    object-fit: cover !important;
    border-radius: 4px !important;
    /* Exact radius */
  }

  .insights-details-image-wrapper+.insights-details-content {
    padding-top: 3.0534vw !important;
    /* 12px gap from image to next paragraph */
  }

  /* --- Related Insights Section Mobile Overrides --- */
  .insights-details-page-body .insights-section {
    background: #FFFFFF !important;
    padding-top: 33px !important;
    /* Exact gap from content above */
    padding-bottom: 55px !important;
    /* Gap between Load More and pre-footer */
    margin-bottom: 0 !important;
  }

  .insights-details-page-body .insights-header-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* Override the 27px left margin from global styles */
    padding: 0 30px !important;
    /* Exact 30px gap to screen edges */
    box-sizing: border-box !important;
    gap: 20px !important;
  }

  .insights-details-page-body .insights-label-wrap {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0 !important;
    /* gap handles spacing */
    padding: 0 !important;
    /* prevent padding from shrinking text space */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
  }

  .insights-details-page-body .insights-label-wrap::before {
    display: none !important;
  }

  .insights-details-page-body .insights-label {
    width: auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .insights-details-page-body .insights-label::before {
    content: "" !important;
    display: block !important;
    width: 3.77px !important;
    height: 31px !important;
    background: #FFA726 !important;
    margin-right: 7.83px !important;
    /* Creates the exact gap between bar and text */
  }

  .insights-details-page-body .insights-label::after {
    content: "Lorem Blogs" !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    /* Force text to stay on one line */
  }

  .insights-details-page-body .insights-title {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin-top: 0 !important;
    /* Prevent default heading margins from inflating gap */
    margin-bottom: 0 !important;
    /* gap handles spacing */
  }

  .insights-details-page-body .insights-title::after {
    content: "Lorem ipsum dolor sit amet\A consectetur adipiscing elit" !important;
    white-space: pre-wrap !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #000000 !important;
    display: block !important;
  }

  .insights-details-page-body .btn-discover-now-insights {
    position: static !important;
    margin-top: 20px !important;
    /* optional separation for button */
  }

  .insights-details-page-body .btn-discover-now-insights {
    display: none !important;
  }

  .insights-details-page-body .insights-header-top>div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* --- Related Insights Cards Mobile --- */
  .insights-related-cards-container {
    width: 100% !important;
    padding: 0 17px !important;
    /* Centered padding (393 - 359 = 34 / 2) */
    margin-top: 27px !important;
    /* Exact 27px gap from header */
  }

  .insights-related-cards-row {
    display: flex !important;
    flex-direction: row !important;
    /* Figma uses side-by-side */
    flex-wrap: wrap !important;
    /* Wrap to new line */
    justify-content: space-between !important;
    gap: 11px !important;
    /* 11px gap between cards */
    padding: 0 !important;
  }

  .insights-related-load-more {
    margin-top: 41px !important;
    text-align: center !important;
  }

  .insights-related-load-more a {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
  }

  .insights-related-card {
    background: #E9EAEB !important;
    /* User said card bg is fine */
    border-radius: 5px !important;
    padding: 7px 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: calc(50% - 5.5px) !important;
    min-width: unset !important;
    /* Allow flex to shrink if needed */
  }

  .insights-related-card-large {
    width: calc(50% - 5.5px) !important;
    /* Reset large card class override */
  }

  .insights-related-card-img {
    width: 100% !important;
    height: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .insights-related-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }

  .insights-related-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .insights-related-card-date {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .insights-related-cal-icon {
    width: 10px !important;
    height: 10px !important;
    object-fit: contain !important;
  }

  .insights-related-card-date span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 8px !important;
    line-height: 12px !important;
    color: #000000 !important;
  }

  .insights-related-card-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-related-card-title-large {
    font-size: 10px !important;
  }

  .insights-related-card-desc {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
  }

  .insights-related-read-more {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 8px !important;
    line-height: 12px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
  }


  /* Was a full fixed-height/absolute-position re-implementation - the
     shared base (style-v2.css) now handles this page's pre-footer
     dynamically too. Kept: the one rule that was a genuine content
     difference, not a positioning hack. */
  .insights-details-page-body .cs-pre-footer .insights-mobile-pre-footer-title {
    color: #FFFFFF !important;
  }
}

/* =============================================================
   TABLET (768-1199px)
   Card excerpts/dates are 0.9722cqi, which is 7.5px at 768. This file
   loads after style-v2.css so it needs its own floor.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  .insights-related-card-desc,
  .insights-related-card-date,
  .insights-related-card-title,
  .insights-details-body p,
  .insights-details-body li {
    font-size: max(12px, 0.9722cqi);
  }

  .insights-details-hero-breadcrumb .breadcrumb-home,
  .insights-details-hero-breadcrumb .current,
  .insights-details-hero-breadcrumb a,
  .insights-details-hero-meta,
  .insights-details-hero-meta span {
    font-size: max(12px, 1.25cqi);
  }

  .insights-related-card-date,
  .insights-related-card-date span,
  .insights-related-read-more,
  .insights-related-read-more a {
    font-size: max(12px, 1.4583cqi);
  }
}

/* Mobile hero: long titles (5+ lines) used to run over the read-time/date line,
   which was pinned 212px below the title top (room for 4 lines of 43px + a 40px
   gap). The meta now follows the title in normal flow: the title box keeps a
   212px minimum height, so titles of 1-4 lines put the meta exactly where it
   was; longer titles push it down and keep the same 40px gap. */
@media (max-width: 767px) {
  .insights-details-hero-title-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 333px 0 0 25px !important;
    min-height: 212px !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }

  .insights-details-hero-meta {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-left: 25px !important;
    width: max-content !important;
  }
}

/* Tables inside articles (2 of the old getsold.ae posts have one; no other
   page has tables): readable rows - header row bold, thin row lines, top-aligned
   cells. Text keeps the article's own font, size and colour. */
.insights-details-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
}

.insights-details-body th,
.insights-details-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.7em 1.2em 0.7em 0;
  border-bottom: 1px solid #D5D9DB;
}

.insights-details-body th,
.insights-details-body tr:first-child td {
  font-weight: 600;
  border-bottom-color: #263238;
}

.insights-details-body th p,
.insights-details-body td p {
  margin: 0;
}

@media (max-width: 767px) {
  /* A table wider than the phone (e.g. 4 columns) scrolls sideways inside its
     own box instead of being cut off; tables that fit look the same. */
  .insights-details-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .insights-details-body th,
  .insights-details-body td {
    padding: 0.6em 0.8em 0.6em 0;
  }
}

/* Blog details - article text (web only, 2026-10-02):
   - headings use the full text width (were capped at 719 of 1221 at 1440, so they wrapped early);
   - text after a heading or after a paragraph sits 16px below it (was 40 - looked like an empty line);
   - 40px kept above headings and around images / tables, as before. */
@media (min-width: 768px) {
  .insights-details-body {
    gap: 0 !important;
  }

  .insights-details-body h2,
  .insights-details-body h3 {
    max-width: none !important;
  }

  .insights-details-body > * + * {
    margin-top: 2.7777vw !important;
    /* 40/1440 - as before */
  }

  .insights-details-body > :is(p, h2, h3, h4, ul, ol) + :is(p, ul, ol) {
    margin-top: 1.1111vw !important;
    /* 16/1440 */
  }
}

/* images sit inside <p> in the posts - keep their 40px above and below (web) */
@media (min-width: 768px) {
  .insights-details-body > p:has(img),
  .insights-details-body > p:has(img) + * {
    margin-top: 2.7777vw !important;
  }
}

/* some older posts carry pasted Google Docs spacing (margin 12pt) on their paragraphs - ignore it (web) */
@media (min-width: 768px) {
  .insights-details-body > p {
    margin-bottom: 0 !important;
  }
}

/* empty "blank line" paragraphs in older posts (marked by functions.php) - hidden on web only */
@media (min-width: 768px) {
  .insights-details-body > p.sold-empty-p {
    display: none !important;
  }
}

/* =============================================================================================================
   Blog Details = Figma "Desktop - 11" (node 4132:1455, 2026-10-05) - WEB + TABLET only (>= 768px); mobile later.
   Sizes are Figma px at 1440 written as vw (n/1440), like the rest of the site, so the page scales with the screen.
   Related Insights, pre-footer and footer are not touched.
   ============================================================================================================= */
@media (min-width: 768px) {

  /* --- Hero (4132:1456): 818 tall; title box 933 wide at top 418 (220 tall, text centred in it); meta 24 below --- */
  .insights-details-page-body .insights-details-hero {
    height: 56.8056vw;
    /* 818 */
    min-height: 0;
  }

  .insights-details-page-body .insights-details-hero-bg {
    background-image: linear-gradient(150.54deg, #000000 4.05%, rgba(0, 0, 0, 0) 75.07%), url('../assets/images/insightdetailsherp.png');
  }

  .insights-details-page-body .insights-details-hero-content {
    display: block;
    padding-top: 29.0278vw;
    /* 418 */
  }

  .insights-details-page-body .insights-details-hero-content::before,
  .insights-details-page-body .insights-details-hero-content::after {
    content: none;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    max-width: 64.7917vw;
    /* 933 */
    min-height: 15.2778vw;
    /* 220 - 3 lines; a longer title grows the box and moves the meta down */
    display: flex;
    align-items: center;
  }

  .insights-details-page-body .insights-details-hero-title {
    font-size: 3.9583vw;
    /* 57 */
    line-height: 4.3056vw;
    /* 62 */
    letter-spacing: 0.01em;
    font-weight: 700;
  }

  .insights-details-page-body .insights-details-hero-meta {
    margin-top: 1.6667vw;
    /* 24 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-calendar-icon {
    width: 1.6667vw;
    /* 24 */
    height: 1.5278vw;
    /* 22 */
    object-fit: contain !important;
  }

  /* --- Article column: 890 wide, centred (275 each side at 1440); 81 below the hero, 70 above Related --- */
  .insights-details-page-body .insights-details-section {
    padding-top: 5.625vw;
    /* 81 */
    padding-bottom: 4.8611vw;
    /* 70 (+57 Related top padding = Figma 127) */
  }

  .insights-details-page-body .insights-details-container {
    width: 61.8056vw;
    /* 890 */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
  }

  .insights-details-page-body .insights-details-content {
    padding: 0;
  }

  .insights-details-page-body .insights-details-body {
    max-width: none;
  }

  /* --- Text (4132:1764, 4137:2114): Mona Sans, black, 1% letter-spacing, left aligned --- */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4, h5, h6) {
    font-family: 'Mona Sans', sans-serif !important;
    color: #000000 !important;
    letter-spacing: 0.01em !important;
    text-align: left;
    white-space: normal !important;
    max-width: none !important;
    width: auto;
  }

  /* body text + lists: 18 / 38 Regular */
  .insights-details-page-body .insights-details-body :is(p, li, ul, ol) {
    font-size: max(15px, 1.25vw) !important;
    font-weight: 400 !important;
    line-height: 2.1111 !important;
    /* 38 / 18 */
  }

  /* intro = the paragraphs before the first heading: 18 / 30 */
  .insights-details-page-body .insights-details-body > p:not(:is(h2, h3, h4, h5, h6) ~ p) {
    line-height: 1.6667 !important;
    /* 30 / 18 */
  }

  /* Headings (client 2026-10-14, reference image WhatsApp 2026-10-12 6.03.34 PM: "follow the H1-H4 hierarchy exactly as
     marked, and heading weights should be similar"): sizes = Figma 4137:2114 with H4 below H3, every level Bold like the
     image. H2 "What Makes PPC Costs..." 4137:2087, H3 "1. High Density..." 4137:2092, H4 "United Arab Emirates". */
  .insights-details-page-body .insights-details-body h2 {
    font-size: max(26px, 2.5694vw) !important;
    /* 37 */
    font-weight: 700 !important;
    /* Bold */
    line-height: 1.2162 !important;
    /* 45 / 37 */
  }

  /* 2026-10-21 client (slides p16): H3 and H4 must look clearly different, as in the reference image (body 12 -> H4
     15.5 -> H3 22 -> H2 30 there). H2 and body text stay as they were; H3 / H4 sit between them in the image's
     proportions: 18 body -> H4 22 -> H3 29 -> H2 37 at 1440 (was H3 20 / H4 18 = the body size, so they looked the
     same). Smaller screens keep the old floors scaled the same way (1024 and tablets: 15 -> 17.5 -> 21.5 -> 26). */
  .insights-details-page-body .insights-details-body h3 {
    font-size: max(21.5px, 2.0139vw) !important;
    /* 29 */
    font-weight: 700 !important;
    /* Bold */
    line-height: 1.3 !important;
  }

  /* H4: Figma 4137:2136 is 26 - bigger than its H3. User 2026-10-14: "H4 must be smaller than H3" -> 22 Bold (2026-10-21) */
  .insights-details-page-body .insights-details-body :is(h4, h5, h6) {
    font-size: max(17.5px, 1.5278vw) !important;
    /* 22 */
    font-weight: 700 !important;
    line-height: 1.4 !important;
  }

  /* pasted Google Docs spans (Arial 11pt, line-height 1.38, white-space pre) take the article's own text style;
     bold / italic keep their weight */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4) [style] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal !important;
  }

  /* lists: native disc bullets, 27 indent (Figma "ms-27") */
  .insights-details-page-body .insights-details-body :is(ul, ol) {
    width: auto !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 1.875vw !important;
    /* 27 */
    padding-inline-start: 1.875vw !important;
    white-space: normal !important;
    /* a pasted list with white-space: pre turned the line breaks between bullets into blank lines */
  }

  .insights-details-page-body .insights-details-body ul {
    list-style: disc outside !important;
  }

  .insights-details-page-body .insights-details-body ol {
    list-style: decimal outside !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li::before {
    content: none !important;
  }

  .insights-details-page-body .insights-details-body li > p {
    margin: 0 !important;
  }

  /* pasted blank lines inside list items (marked sold-empty-p by functions.php) left a gap after every bullet */
  .insights-details-page-body .insights-details-body p.sold-empty-p {
    display: none !important;
  }

  /* --- Spacing between blocks (Figma frame gaps) --- */
  .insights-details-page-body .insights-details-body > * {
    margin-bottom: 0 !important;
  }

  .insights-details-page-body .insights-details-body > * + * {
    margin-top: 1.9444vw !important;
    /* 28 between blocks */
  }

  .insights-details-page-body .insights-details-body > h2 + * {
    margin-top: 0.8333vw !important;
    /* 12 under an H2 */
  }

  .insights-details-page-body .insights-details-body > h3 + * {
    margin-top: 0.2778vw !important;
    /* 4 under an H3 (H4 keeps the 28 block gap: "United Arab Emirates" -> text, 4137:2125 -> 4137:2137) */
  }

  .insights-details-page-body .insights-details-body > h3 + :is(h4, h5, h6) {
    margin-top: 0.8333vw !important;
    /* 12: "A. Google Search Ads" -> "United Arab Emirates" */
  }

  .insights-details-page-body .insights-details-body > p + :is(ul, ol) {
    margin-top: 0 !important;
    /* a list continues the paragraph that introduces it */
  }

  .insights-details-page-body .insights-details-body > :is(ul, ol) + p {
    margin-top: 0.2778vw !important;
    /* 4 */
  }

  /* intro -> first heading: 56 (4132:1764 ends 1019, 4137:2114 starts 1075) */
  .insights-details-page-body .insights-details-body > p + :is(h2, h3, h4):not(:is(h2, h3, h4, h5, h6) ~ *) {
    margin-top: 3.8889vw !important;
  }

  /* --- Images (4134:2084): column wide, 12 radius, 80 above and below --- */
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img),
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img) + * {
    margin-top: 5.5556vw !important;
    /* 80 */
  }

  .insights-details-page-body .insights-details-body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0.8333vw;
    /* 12 */
  }

  .insights-details-page-body .insights-details-image-wrapper {
    margin-top: 5.5556vw;
    /* 80 */
    padding-bottom: 0;
  }

  .insights-details-page-body .insights-details-image-wrapper + .insights-details-content {
    margin-top: 5.5556vw !important;
    /* 80 */
  }

  .insights-details-page-body .insights-details-full-image {
    width: 100%;
    height: 35vw;
    /* 504 */
    border-radius: 0.8333vw;
    /* 12 */
    object-fit: cover;
  }
}

/* Tablet (768-1023): the 890/1440 column would be under 640px - use a wider centred column so lines stay readable */
@media (min-width: 768px) and (max-width: 1023px) {
  .insights-details-page-body .insights-details-container {
    width: 84vw;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    max-width: 84vw;
  }
}

/* =============================================================================================================
   Blog Details = Figma mobile "iPhone 14 & 15 Pro - 16" (node 2036:264, 2026-10-06) - MOBILE only (< 768px).
   Hero 2036:265, article 2036:667, Related 2036:696 / 2036:697. Web + tablet (above) untouched.
   Pre-footer (2036:308) and footer (2036:315) are the shared site sections - not changed here.
   Every size is Figma px at 393 written as vw (n/393), like the Insights listing page, so every phone shows the
   same layout scaled to its width (320, 375, 430 ... look like the 393 design). Vertical hero position = % of hero.
   ============================================================================================================= */
@media (max-width: 767px) {

  /* --- Hero (2036:265): title lines start at 327 of 852 (38.38% of the hero), 38.2/43 Bold 2%, 278 wide at left 25;
         meta 34 below the 4th line (533), left 30, 13/29 --- */
  .insights-details-page-body .insights-details-hero-content {
    top: calc(38.38% - 327px) !important;
  }

  .insights-details-page-body .insights-details-hero-title-container {
    margin: 327px 0 0 6.3613vw !important;
    width: 70.7379vw !important;
    max-width: 70.7379vw !important;
    min-height: 52.4173vw !important;
    /* 206 = 4 lines (172) + 34; longer titles grow it and push the meta down, keeping the 34 gap */
    padding-bottom: 8.6514vw !important;
  }

  .insights-details-page-body .insights-details-hero-title {
    font-size: 9.7201vw !important;
    /* 38.2 */
    line-height: 10.9415vw !important;
    /* 43 */
    letter-spacing: 0.02em !important;
  }

  .insights-details-page-body .insights-details-hero-meta {
    margin-left: 7.6336vw !important;
    /* 30 */
    gap: 2.0356vw !important;
    /* 8 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item {
    gap: 1.0178vw !important;
    /* 4 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item:nth-child(2) {
    gap: 2.0356vw !important;
    /* 8 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item span {
    font-size: 3.3079vw !important;
    /* 13 */
    line-height: 7.3791vw !important;
    /* 29 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-item i {
    font-size: 3.0534vw !important;
    /* 12 */
  }

  .insights-details-page-body .insights-details-hero-meta .meta-calendar-icon {
    width: 3.0534vw !important;
    /* 12 */
    height: 2.799vw !important;
    /* 11 */
  }

  /* --- Article column (2036:667): 336 wide at x 29, 30 below the hero --- */
  .insights-details-page-body .insights-details-body {
    display: block !important;
    gap: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(p, li, ul, ol, h2, h3, h4, h5, h6) {
    font-family: 'Mona Sans', sans-serif !important;
    color: #000000 !important;
    letter-spacing: 0.01em !important;
    text-align: left;
    white-space: normal !important;
    max-width: none !important;
  }

  /* body text + lists: 14 / 22 Regular */
  .insights-details-page-body .insights-details-body :is(p, li, ul, ol) {
    font-size: 3.5623vw !important;
    line-height: 5.598vw !important;
    font-weight: 400 !important;
  }

  /* Headings: Figma mobile sizes, every level Bold like the client's reference image (2026-10-14).
     H2 20 / 28 (2036:666) */
  .insights-details-page-body .insights-details-body h2 {
    font-size: 5.0891vw !important;
    line-height: 7.1247vw !important;
    font-weight: 700 !important;
  }

  /* H3 (Figma 4151:3614 was 16 / 22). 2026-10-21 client (slides p16): clearly bigger than H4 like the reference image
     -> 18 / 24 at 393 (H2 20, H4 15, body 14 unchanged) */
  .insights-details-page-body .insights-details-body h3 {
    font-size: 4.5802vw !important;
    line-height: 6.1069vw !important;
    font-weight: 700 !important;
  }

  /* H4 (no mobile Figma frame has one): smaller than H3 - 15 / 22 */
  .insights-details-page-body .insights-details-body :is(h4, h5, h6) {
    font-size: 3.8168vw !important;
    line-height: 5.598vw !important;
    font-weight: 700 !important;
  }

  /* pasted Google Docs spans keep the article's text style (bold / italic keep their weight) */
  .insights-details-page-body .insights-details-body :is(p, li, h2, h3, h4) [style] {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal !important;
  }

  /* lists: native disc bullets, 21 indent (Figma "ms-21") */
  .insights-details-page-body .insights-details-body :is(ul, ol) {
    margin-left: 0 !important;
    padding-left: 5.3435vw !important;
    padding-inline-start: 5.3435vw !important;
  }

  .insights-details-page-body .insights-details-body ul {
    list-style: disc outside !important;
  }

  .insights-details-page-body .insights-details-body ol {
    list-style: decimal outside !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body :is(ul, ol) li::before {
    content: none !important;
  }

  .insights-details-page-body .insights-details-body li > p {
    margin: 0 !important;
  }

  /* pasted blank lines (marked sold-empty-p by functions.php) - no empty gaps */
  .insights-details-page-body .insights-details-body p.sold-empty-p {
    display: none !important;
  }

  /* tables keep their own readable size (they scroll sideways inside their box) */
  .insights-details-page-body .insights-details-body table :is(p, li) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .insights-details-page-body .insights-details-body table {
    font-size: 3.5623vw;
    line-height: 5.598vw;
  }

  /* --- Spacing (Figma frame gaps): 16 between blocks, 37 before a section H2, 6 inside an H3 group --- */
  .insights-details-page-body .insights-details-body > * {
    margin: 0 !important;
  }

  .insights-details-page-body .insights-details-body > * + * {
    margin-top: 4.0712vw !important;
    /* 16 */
  }

  .insights-details-page-body .insights-details-body > * + h2 {
    margin-top: 9.4148vw !important;
    /* 37 */
  }

  .insights-details-page-body .insights-details-body > h3 + * {
    margin-top: 1.5267vw !important;
    /* 6 */
  }

  .insights-details-page-body .insights-details-body > p + :is(ul, ol),
  .insights-details-page-body .insights-details-body > :is(ul, ol) + p {
    margin-top: 1.5267vw !important;
    /* 6 */
  }

  /* --- Images (2036:673): column wide, 4 radius, 16 above, 12 to the text below --- */
  .insights-details-page-body .insights-details-body > :is(p, figure):has(img) + * {
    margin-top: 3.0534vw !important;
    /* 12 */
  }

  .insights-details-page-body .insights-details-body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-details-image-wrapper {
    margin-top: 4.0712vw !important;
  }

  .insights-details-page-body .insights-details-image-wrapper + .insights-details-content {
    padding-top: 3.0534vw !important;
  }

  .insights-details-page-body .insights-details-full-image {
    height: auto !important;
    aspect-ratio: 336 / 233;
    object-fit: cover !important;
    border-radius: 1.0178vw !important;
  }

  /* --- Related header (2036:696): 47 below the article, 30 from the sides; label 20/30 SemiBold #FFA726 + 3.77 x 31 bar;
         title 20/24 Bold; gap 20. Shows the real label / title from Theme Settings (was CSS placeholder text
         "Lorem Blogs" / "Lorem ipsum ..."). --- */
  .insights-details-page-body .insights-section {
    padding-top: 11.9593vw !important;
    /* 47 */
    padding-bottom: 22.3919vw !important;
    /* Load More -> pre-footer 88 */
  }

  .insights-details-page-body .insights-header-top {
    padding: 0 7.6336vw !important;
    gap: 5.0891vw !important;
  }

  .insights-details-page-body .insights-label-wrap {
    height: 8.9059vw !important;
    /* 35 */
  }

  .insights-details-page-body .insights-label {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.0891vw !important;
    line-height: 7.6336vw !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
  }

  .insights-details-page-body .insights-label::before {
    width: 0.9593vw !important;
    height: 7.888vw !important;
    margin-right: 2.0356vw !important;
  }

  .insights-details-page-body .insights-label::after,
  .insights-details-page-body .insights-title::after {
    content: none !important;
  }

  .insights-details-page-body .insights-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.0891vw !important;
    line-height: 6.1069vw !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
  }

  /* --- Related cards (2036:697): 2 x 174, 8 apart, 11 between rows, centred ---
         Figma: 27 below the 43px title frame = 22 below the real 2-line (48px) title */
  .insights-details-page-body .insights-related-cards-container {
    padding: 0 !important;
    margin-top: 5.598vw !important;
  }

  .insights-details-page-body .insights-related-cards-row {
    justify-content: center !important;
    gap: 2.799vw 2.0356vw !important;
  }

  .insights-details-page-body .insights-related-card,
  .insights-details-page-body .insights-related-card-large {
    width: 44.2748vw !important;
    /* 174 */
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 1.7812vw 2.0356vw 3.5623vw !important;
    /* 7 8 14 */
    border-radius: 1.2723vw !important;
    gap: 1.5267vw !important;
  }

  .insights-details-page-body .insights-related-card-img {
    height: 23.4097vw !important;
    /* 92 */
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-related-card-img img {
    border-radius: 1.0178vw !important;
  }

  .insights-details-page-body .insights-related-card-body {
    gap: 0 !important;
  }

  .insights-details-page-body .insights-related-card-date {
    height: 4.0712vw !important;
    /* 16 */
    gap: 1.7812vw !important;
    /* 7 */
  }

  .insights-details-page-body .insights-related-cal-icon {
    width: 3.3079vw !important;
    height: 3.0534vw !important;
  }

  .insights-details-page-body .insights-related-card-date span {
    font-size: 2.0356vw !important;
    /* 8 */
    line-height: 3.8168vw !important;
  }

  .insights-details-page-body .insights-related-card-title {
    font-size: 2.5445vw !important;
    /* 10 */
    line-height: 3.5623vw !important;
    padding: 1.0178vw 0 !important;
    /* one line = Figma's 22px row; longer titles wrap at 14 */
  }

  .insights-details-page-body .insights-related-card-desc {
    font-size: 2.5445vw !important;
    line-height: 3.5623vw !important;
  }

  .insights-details-page-body .insights-related-read-more {
    font-size: 2.0356vw !important;
    font-weight: 600 !important;
    line-height: 6.1069vw !important;
  }

  /* --- Load More (2036:475): 31 below the cards, 20/24 --- */
  .insights-details-page-body .insights-related-load-more {
    margin-top: 7.888vw !important;
    line-height: 6.1069vw !important;
  }

  .insights-details-page-body .insights-related-load-more a {
    display: inline-block;
    vertical-align: top;
    font-size: 5.0891vw !important;
    line-height: 6.1069vw !important;
  }
}

/* Pasted Google Docs <font color="..."> inside articles (e.g. a blue heading in Stop Junk Leads): text keeps the
   article's own colour on every screen (SEO doc #18 review, 2026-10-07) */
.insights-details-page-body .insights-details-body font {
  color: inherit !important;
}

/* Bold tags pasted inside headings (14 H3s in Cost of PPC showed at 700, an H2 in Stop Junk Leads at 900): a heading
   always keeps its own level's weight (Bold on every level, client reference image 2026-10-14) */
.insights-details-page-body .insights-details-body :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
  font-weight: inherit !important;
}

/* Whole card clickable (2026-10-14): the related Insights cards under the article. The card's "Read More" link is
   stretched over the card (::after), so a click anywhere opens the post; still a real link. */
.insights-related-card {
  position: relative;
  cursor: pointer;
}

.insights-related-read-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 2026-10-15 user: blog post hero on mobile - title + read-time/date always inside the visible phone screen, same look
   on every phone. It was placed for an average title (block assumed 241 tall), so a long title (8 lines on a 375 x 553
   iPhone SE) pushed the date below the screen. Now the real title + date block is centred in the hero below the logo
   area (90 top, 18% of the screen height under it -> a little above the middle, as before), whatever its length.
   Mobile only. */
@media (max-width: 767px) {
  .insights-details-hero.insights-details-hero {
    min-height: max(500px, 130vw) !important;
    /* phone turned sideways: room for the whole title + date (was cut off in a 500 hero); upright phones unaffected */
  }

  .insights-details-hero .insights-details-hero-content {
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    justify-content: safe center !important;
    /* safe: a very long title on a very short phone starts at 90 (under the logo) instead of spilling up behind it */
    padding: 90px 0 18vh !important;
    padding-bottom: 18svh !important;
    box-sizing: border-box !important;
  }

  .insights-details-hero .insights-details-hero-title-container,
  .insights-details-hero .insights-details-hero-meta {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* 2026-10-21 client (slides p19): blog post hero on PHONES - the title used a narrow 278/393 column (90px empty on
   the right), so long titles broke into many short lines. Now the same column as the other pages' phone heroes
   (25 left, 35 right at 393 = the Services description), and the read-time / date line starts on the title's left
   edge (was 5px further in). */
@media (max-width: 767px) {
  .insights-details-page-body .insights-details-hero-title-container {
    width: 84.7328vw !important;
    max-width: 84.7328vw !important;
  }

  .insights-details-page-body .insights-details-hero-meta {
    margin-left: 6.3613vw !important;
  }
}