/* ===========================================================
   QAUSHIK LABS — SHARED CASE STUDY STYLESHEET
   Path: /wp-content/themes/astra-child/assets/css/case-studies.css
   Requires the site's existing global .qlp design styles.
   Reusable with ENT SEO, Jewellery Ads, Dental Ads and future cases.
   Add 'qlpcs-alternate' to an <ol class="qlp-cs-steps"> to
   alternate right/left screenshots, beginning with image right.
   Use 'qlpcs-wide' alone for full-width images below step text.
   Legacy 'qlpcs-gbp-row' / 'qlpcs-gbp-reverse' also supported.
   =========================================================== */

.qlp {
  --qlpcs-gold: #9A7440;
  --qlpcs-dark: #14110E;
  --qlpcs-body: #5C544A;
  --qlpcs-muted: #6E655A;
  --qlpcs-line: #EAE2D5;
  --qlpcs-cream: #FBF8F3;
}

/* Comparison tables */
.qlp .qlpcs-tw {overflow-x:auto;border:1px solid var(--qlpcs-line);border-radius:18px}
.qlp .qlpcs-t {width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55;background:#fff;margin:0}
.qlp .qlpcs-t th {background:var(--qlpcs-dark);color:#E3C99A;text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:14px 18px;border:0}
.qlp .qlpcs-t td {padding:14px 18px;border:0;border-top:1px solid var(--qlpcs-line);vertical-align:top;color:var(--qlpcs-body)}
.qlp .qlpcs-t td:first-child {font-weight:600;color:var(--qlpcs-dark);width:28%}
.qlp .qlpcs-kw-t th:nth-child(n+2),
.qlp .qlpcs-kw-t td:nth-child(n+2) {text-align:right;white-space:nowrap}
.qlp .qlpcs-kw-t td:first-child {width:auto}
.qlp .qlpcs-kw-t .up {color:#2E7D4F;font-weight:700}

/* Challenge cards */
.qlp .qlpcs-ch {display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.qlp .qlpcs-ch .qlp-card h3 {margin-top:0}
.qlp .qlpcs-ch .qlpcs-why {margin:14px 0 0;padding-top:12px;border-top:1px solid var(--qlpcs-line);font-size:13.5px;color:var(--qlpcs-muted)}
.qlp .qlpcs-ch .qlpcs-why b {color:var(--qlpcs-gold)}

/* Three overview pillars */
.qlp .qlpcs-pill {display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:clamp(28px,4vw,44px)}
.qlp .qlpcs-pill a {display:block;background:var(--qlpcs-cream);border:1px solid var(--qlpcs-line);border-radius:20px;padding:24px 22px;text-decoration:none!important;color:var(--qlpcs-dark);transition:transform .2s,box-shadow .2s}
.qlp .qlpcs-pill a:hover {transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(20,17,14,.35)}
.qlp .qlpcs-pill b {display:block;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:34px;line-height:1;color:var(--qlpcs-gold)}
.qlp .qlpcs-pill strong {display:block;margin:10px 0 6px;font-size:17px}
.qlp .qlpcs-pill span {display:block;font-size:14px;line-height:1.5;color:var(--qlpcs-muted)}

/* Step-group headings */
.qlp .qlpcs-part {display:flex;align-items:center;gap:14px;margin:clamp(56px,7vw,88px) 0 clamp(32px,4vw,48px)}
.qlp .qlpcs-part:first-of-type {margin-top:clamp(28px,4vw,44px)}
.qlp .qlpcs-part span {flex:none;padding:7px 14px;border-radius:999px;background:var(--qlpcs-dark);color:#E3C99A;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.qlp .qlpcs-part h3 {margin:0!important;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(22px,2.4vw,28px);color:var(--qlpcs-dark)}
.qlp .qlpcs-part::after {content:"";flex:1;height:1px;background:var(--qlpcs-line)}

/* Checked action lists */
.qlp ul.qlpcs-did {list-style:none;margin:16px 0 0;padding:0}
.qlp ul.qlpcs-did li {position:relative;margin:0 0 8px;padding-left:24px;font-size:15px;line-height:1.55;color:var(--qlpcs-body)}
.qlp ul.qlpcs-did li::before {content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--qlpcs-gold)}
.qlp ul.qlpcs-did b {color:var(--qlpcs-dark);font-weight:600}

/* Full-width step image, used for dense screenshots and reports */
.qlp .qlp-cs-steps > li.qlpcs-wide {display:grid;grid-template-columns:minmax(0,1fr)!important;gap:clamp(18px,2.5vw,28px)}
.qlp .qlp-cs-steps > li.qlpcs-wide > .qlp-cs-copy {order:0!important;max-width:900px;min-width:0}
.qlp .qlp-cs-steps > li.qlpcs-wide > figure.qlp-shot {order:1!important;justify-self:start;width:100%;margin:0}
.qlp .qlp-cs-steps > li > figure.qlp-shot img {display:block;width:100%;height:auto;object-fit:contain}

/* Optional alternate layout on any list of case-study steps:
   <ol class="qlp-cs-steps qlpcs-alternate"> ... </ol>
   Row 1: text | image; Row 2: image | text; etc. */
@media (min-width:861px) {
  .qlp .qlp-cs-steps.qlpcs-alternate > li,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row {
    display:grid!important;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
    gap:clamp(24px,4vw,56px);
    align-items:center;
  }
  .qlp .qlp-cs-steps.qlpcs-alternate > li > .qlp-cs-copy,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row > .qlp-cs-copy {
    grid-column:1;grid-row:1;order:initial!important;min-width:0;max-width:none;
  }
  .qlp .qlp-cs-steps.qlpcs-alternate > li > figure.qlp-shot,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row > figure.qlp-shot {
    grid-column:2;grid-row:1;order:initial!important;
    margin:0;width:100%;max-width:100%;justify-self:end;min-width:0;
  }
  .qlp .qlp-cs-steps.qlpcs-alternate > li:nth-child(even),
  .qlp .qlp-cs-steps > li.qlpcs-gbp-reverse {
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
  }
  .qlp .qlp-cs-steps.qlpcs-alternate > li:nth-child(even) > .qlp-cs-copy,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-reverse > .qlp-cs-copy {grid-column:2}
  .qlp .qlp-cs-steps.qlpcs-alternate > li:nth-child(even) > figure.qlp-shot,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-reverse > figure.qlp-shot {grid-column:1;justify-self:start}
}
@media (max-width:860px) {
  .qlp .qlp-cs-steps.qlpcs-alternate > li,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px}
  .qlp .qlp-cs-steps.qlpcs-alternate > li > .qlp-cs-copy,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row > .qlp-cs-copy {grid-column:1;grid-row:1;order:0!important;min-width:0}
  .qlp .qlp-cs-steps.qlpcs-alternate > li > figure.qlp-shot,
  .qlp .qlp-cs-steps > li.qlpcs-gbp-row > figure.qlp-shot {grid-column:1;grid-row:2;order:1!important;width:100%;max-width:100%;margin:0}
}

/* Results: metrics and screenshot */
.qlp .qlpcs-res {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.qlp .qlpcs-res .qlp-shot {margin:0}
.qlp .qlpcs-rank {margin:0;background:#fff;border:1px solid var(--qlpcs-line);border-radius:22px;padding:26px 24px 18px;box-shadow:0 18px 40px -28px rgba(20,17,14,.28)}
.qlp .qlpcs-rank-h {display:flex;justify-content:space-between;margin:0 0 6px;padding-right:22px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--qlpcs-muted)}
.qlp .qlpcs-rank-h + ul {margin-bottom:18px!important}
.qlp .qlpcs-rank ul {list-style:none;margin:0;padding:0;border-top:1px solid var(--qlpcs-line)}
.qlp .qlpcs-rank li {margin:0;border-bottom:1px solid var(--qlpcs-line)}
.qlp .qlpcs-rank a {display:flex;align-items:center;gap:10px;padding:13px 6px;margin:0 -6px;border-radius:10px;text-decoration:none!important;color:var(--qlpcs-dark)}
.qlp .qlpcs-rank a:hover {background:#F4EBDD}
.qlp .qlpcs-rank .qlpcs-row {display:flex;align-items:center;gap:12px;padding:12px 4px;color:var(--qlpcs-dark)}
.qlp .qlpcs-rank .q {flex:1;min-width:0;font-size:15.5px}
.qlp .qlpcs-rank .r {display:inline-flex;align-items:baseline;gap:4px;min-width:52px;justify-content:center;padding:6px 11px;border-radius:999px;border:1px solid #DCCBAE;background:#fff;font-weight:700;font-size:14px;flex:none}
.qlp .qlpcs-rank .r small {font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--qlpcs-muted)}
.qlp .qlpcs-rank .r--top {background:var(--qlpcs-dark);border-color:var(--qlpcs-dark);color:#E3C99A}
.qlp .qlpcs-rank .r--top small {color:rgba(247,243,236,.6)}
.qlp .qlpcs-rank .go {width:16px;font-size:13px;color:var(--qlpcs-gold);opacity:.6}
.qlp .qlpcs-rank p.qlpcs-note {margin:4px 0 0;font-size:12.5px;color:var(--qlpcs-muted)}
.qlp .qlpcs-faq {max-width:860px;margin:0 auto}

/* Branded links: FAQ, related work and normal editorial links */
.qlp .qlp-faq-grid a:not(.qlp-btn),
.qlp .qlp-faq-grid a:not(.qlp-btn):visited,
.qlp .qlp-split a:not(.qlp-contact-item):not(.qlp-btn),
.qlp .qlp-split a:not(.qlp-contact-item):not(.qlp-btn):visited,
.qlp a.qlp-link,
.qlp a.qlp-link:visited {
  color:var(--qlpcs-gold)!important;
  text-decoration:underline;
  text-decoration-color:rgba(154,116,64,.4);
  text-underline-offset:4px;
  transition:color .2s ease;
}
.qlp .qlp-faq-grid a:not(.qlp-btn):hover,
.qlp .qlp-split a:not(.qlp-contact-item):not(.qlp-btn):hover,
.qlp a.qlp-link:hover {color:var(--qlpcs-dark)!important;text-decoration-color:var(--qlpcs-dark)}

/* Existing inline styles can be replaced with these reusable classes */
.qlp .qlpcs-meta-spacing {padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.qlp .qlpcs-image-468 {max-width:468px}
.qlp .qlpcs-image-500 {max-width:500px}
.qlp .qlpcs-image-600 {max-width:600px}
.qlp .qlpcs-rank-h--first {margin-top:0}
.qlp .qlpcs-related-list {grid-template-columns:1fr}
.qlp .qlpcs-cta-spacing {padding:0 20px clamp(48px,6vw,80px)}
.qlp .qlpcs-cta-title {max-width:820px;margin:20px auto}

/* Screenshot zoom: styling only; existing page lightbox JS still required */
.qlp figure.qlp-shot {position:relative}
.qlp figure.qlp-shot img {cursor:zoom-in}
.qlp figure.qlp-shot:has(img)::after {content:"⤢ Click to enlarge";position:absolute;top:12px;right:12px;padding:5px 11px;border-radius:999px;background:rgba(20,17,14,.78);color:#F7F3EC;font-size:12px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .2s}
.qlp figure.qlp-shot:has(img):hover::after {opacity:1}
.qlpcs-lb {position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(20,17,14,.92);cursor:zoom-out}
.qlpcs-lb.is-open {display:flex}
.qlpcs-lb img {max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.qlpcs-lb button {position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:#F7F3EC;color:var(--qlpcs-dark);font-size:24px;line-height:1;cursor:pointer}

@media (max-width:860px) {
  .qlp .qlpcs-res {grid-template-columns:minmax(0,1fr)}
  .qlp .qlpcs-rank {padding:20px 16px 16px}
}
@media (max-width:480px) {
  .qlp .qlpcs-part {gap:8px}
  .qlp .qlpcs-part h3 {font-size:20px}
  .qlp .qlpcs-rank .qlpcs-row .q {font-size:14px}
  .qlp .qlpcs-rank .qlpcs-row .r {font-size:12px;padding:6px 8px}
}



/* ==========================================
   CASE STUDY RESULTS — RANKING CARD FIX
   ========================================== */

.qlp .qlpcs-res {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
}

/* Ranking Card */
.qlp .qlpcs-rank {
    background: #ffffff;
    border: 1px solid #EAE2D5;
    border-radius: 22px;
    padding: 26px 24px 18px;
    box-shadow: 0 18px 40px -28px rgba(20,17,14,.28);
    min-width: 0;
}

/* Ranking Headings */
.qlp .qlpcs-rank-h {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6E655A;
    margin: 0 0 10px;
}

/* Remove Default Bullet Points */
.qlp .qlpcs-rank ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #EAE2D5;
}

.qlp .qlpcs-rank ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #EAE2D5;
}

.qlp .qlpcs-rank ul li::before,
.qlp .qlpcs-rank ul li::marker {
    content: none !important;
}

/* Ranking Rows */
.qlp .qlpcs-rank a,
.qlp .qlpcs-rank .qlpcs-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 13px 6px;
    text-decoration: none !important;
    color: #14110E !important;
}

.qlp .qlpcs-rank .q {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #14110E;
}

/* Position Badges */
.qlp .qlpcs-rank .r {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 11px;
    border: 1px solid #DCCBAE;
    border-radius: 999px;
    background: #ffffff;
    color: #14110E;
    font-weight: 700;
    font-size: 14px;
}

.qlp .qlpcs-rank .r--top {
    background: #14110E;
    border-color: #14110E;
    color: #E3C99A;
}

/* Arrow Icon */
.qlp .qlpcs-rank .go {
    color: #9A7440;
    font-size: 13px;
}

/* Hover */
.qlp .qlpcs-rank a:hover {
    background: #FBF8F3;
    border-radius: 10px;
}

/* Notes */
.qlp .qlpcs-rank .qlpcs-note {
    margin-top: 16px;
    font-size: 12.5px;
    color: #6E655A;
    line-height: 1.6;
}

/* Results Screenshot */
.qlp .qlpcs-res .qlp-shot {
    width: 100%;
    margin: 0;
    min-width: 0;
}

.qlp .qlpcs-res .qlp-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* Mobile */
@media (max-width: 860px) {
    .qlp .qlpcs-res {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .qlp .qlpcs-rank {
        padding: 20px 16px;
    }
}


/* ==========================================================
   EVERSHINE — STEP 03 SCREENSHOT LAYOUT
   Applies only to the Evershine ad-assets image.
   Uses flexible fractions so the column gap cannot overflow.
   ========================================================== */
@media (min-width: 861px) {
  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
    gap: 24px !important;
    align-items: center;
  }

  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) > .qlp-cs-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: none;
  }

  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) > figure.qlp-shot {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    justify-self: stretch;
  }

  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) > figure.qlp-shot img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

@media (max-width: 860px) {
  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) > .qlp-cs-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .qlp #how .qlp-cs-steps > li:has(img[data-file="evershine-ads-assets.webp"]) > figure.qlp-shot {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}


/* EVERSHINE — STEP 03 SCREENSHOT HEIGHT */

@media (min-width: 861px) {

  .qlp #how .qlp-cs-steps > li:has(
    img[data-file="evershine-ads-assets.webp"]
  ) figure.qlp-shot {
    width: 100% !important;
    max-width: none !important;
    height: 450px !important;
    overflow: hidden;
    border-radius: 16px;
  }

  .qlp #how .qlp-cs-steps > li:has(
    img[data-file="evershine-ads-assets.webp"]
  ) figure.qlp-shot img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: left center;
    display: block;
  }
}

/* MOBILE */
@media (max-width: 860px) {

  .qlp #how .qlp-cs-steps > li:has(
    img[data-file="evershine-ads-assets.webp"]
  ) figure.qlp-shot {
    height: auto !important;
  }

  .qlp #how .qlp-cs-steps > li:has(
    img[data-file="evershine-ads-assets.webp"]
  ) figure.qlp-shot img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}



/* ===========================================================
   CLIENT WEBSITE LINK — SHARED, MATCHES ACTUAL HTML
   Targets <dl class="qlp-cs-meta"><dd><a class="qlpcs-website-link">
   =========================================================== */
.qlp dl.qlp-cs-meta dd a.qlpcs-website-link,
.qlp dl.qlp-cs-meta dd a.qlpcs-website-link:link,
.qlp dl.qlp-cs-meta dd a.qlpcs-website-link:visited {
  display: inline;
  color: #9A7440 !important;
  -webkit-text-fill-color: #9A7440 !important;
  text-decoration: underline !important;
  text-decoration-color: #9A7440 !important;
  text-underline-offset: 4px;
  font-size: inherit;
  font-weight: 600;
}
.qlp dl.qlp-cs-meta dd a.qlpcs-website-link:hover,
.qlp dl.qlp-cs-meta dd a.qlpcs-website-link:focus-visible {
  color: #14110E !important;
  -webkit-text-fill-color: #14110E !important;
  text-decoration-color: #14110E !important;
}


/* Capital Equipment India: results section spacing.
   Append to the existing shared assets/css/case-studies.css file. */
.qlp #results .qlpcs-results-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #6E655A;
}

.qlp #results .qlpcs-results-subhead {
  margin: clamp(40px, 5vw, 56px) 0 16px;
}

.qlp #results figure.qlpcs-results-figure {
  margin-top: clamp(40px, 5vw, 56px);
}



/* SELECT REMODELING — STEP 01 IMAGE HEIGHT */

.qlp figure.qlp-shot-tall img {
    width: 100% !important;
    height: 500px !important;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 24px;
}

/* MOBILE */
@media (max-width: 768px) {
    .qlp figure.qlp-shot-tall img {
        height: auto !important;
        object-fit: contain;
    }
}



/* CASE STUDY — CLIENT WEBSITE LINK */

.qlp .qlp-cs-meta a,
.qlp .qlp-cs-meta a:link,
.qlp .qlp-cs-meta a:visited {
    color: #9A7440 !important;
    text-decoration: underline !important;
    text-decoration-color: #9A7440;
    text-underline-offset: 4px;
    font-weight: 600;
}

.qlp .qlp-cs-meta a:hover,
.qlp .qlp-cs-meta a:focus-visible {
    color: #14110E !important;
    text-decoration-color: #14110E;
}


/* =============================================================
   SCOTTISH BEAUTY EXPERT — READABLE, FULL-WIDTH EVIDENCE IMAGES
   Applies ONLY to <main class="qlp qlp-sbe">.
   Dense Ads tables are more legible at full-width rather than
   stretching their height in a narrow alternating column.
   ============================================================= */

/* Put step text first and screenshots beneath it, across the page. */
@media (min-width: 861px) {
  .qlp.qlp-sbe .qlp-cs-steps > li,
  .qlp.qlp-sbe .qlp-cs-steps.qlpcs-alternate > li,
  .qlp.qlp-sbe .qlp-cs-steps.qlpcs-alternate > li:nth-child(even),
  .qlp.qlp-sbe .qlp-cs-steps > li.qlpcs-gbp-row,
  .qlp.qlp-sbe .qlp-cs-steps > li.qlpcs-gbp-reverse {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start;
  }
}

.qlp.qlp-sbe .qlp-cs-steps > li > .qlp-cs-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 0 !important;
  width: 100%;
  max-width: 980px !important;
  min-width: 0;
}

.qlp.qlp-sbe .qlp-cs-steps > li > figure.qlp-shot {
  grid-column: 1 !important;
  grid-row: 2 !important;
  order: 1 !important;
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  overflow: visible !important;
  justify-self: stretch !important;
  background: #fff;
  border-radius: 18px;
}

/* Preserve full screenshot, rather than crop or distort it. */
.qlp.qlp-sbe .qlp-cs-steps > li > figure.qlp-shot img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 18px;
  background: #fff;
}

.qlp.qlp-sbe .qlp-cs-steps > li > figure.qlp-shot figcaption {
  margin-top: 12px;
  line-height: 1.55;
}

/* Results evidence: place screenshot under the metrics table. */
.qlp.qlp-sbe .qlpcs-res {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
}
.qlp.qlp-sbe .qlpcs-res figure.qlp-shot {
  width: 100% !important;
  max-width: none !important;
}
.qlp.qlp-sbe .qlpcs-res figure.qlp-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 860px) {
  .qlp.qlp-sbe .qlp-cs-steps > li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .qlp.qlp-sbe .qlp-cs-steps > li > .qlp-cs-copy,
  .qlp.qlp-sbe .qlp-cs-steps > li > figure.qlp-shot {
    max-width: 100% !important;
  }
}


/* ============================================================
   HOMEITUP — LARGE READABLE GOOGLE ADS EVIDENCE
   Only applies to <main class="qlp qlp-homeitup">.
   Side-by-side desktop: text 39% / evidence 61%; alternating.
   No fixed image height or clipping; original aspect ratio is kept.
   ============================================================ */
.qlp.qlp-homeitup .qlpcs-home-featured .qlp-shot {
  width: 100% !important;
  max-width: 1260px !important;
  min-width: 0;
  margin: 30px auto 0 !important;
  padding: 14px;
  background: #fff;
  border: 1px solid #EAE2D5;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(20,17,14,.075);
}
.qlp.qlp-homeitup .qlpcs-home-featured .qlp-shot img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 12px;
}
/* Keep the first featured result and repeated Results image large. */
.qlp.qlp-homeitup #results .qlpcs-res {
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: 32px;
  align-items: start;
}
.qlp.qlp-homeitup #results .qlpcs-res > figure.qlp-shot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 12px;
  border: 1px solid #EAE2D5;
  border-radius: 20px;
  background: #fff;
}
.qlp.qlp-homeitup #results .qlpcs-res > figure.qlp-shot img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
@media (min-width: 1025px) {
  /* Stronger than generic alternating-row styles. */
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step,
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(even) {
    display: grid !important;
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr) !important;
    gap: clamp(20px, 2.2vw, 34px) !important;
    align-items: center;
    margin-bottom: clamp(56px,6vw,88px) !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(even) {
    grid-template-columns: minmax(0, 61fr) minmax(0, 39fr) !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(odd) > .qlp-cs-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(odd) > figure.qlp-shot {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(even) > .qlp-cs-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(even) > figure.qlp-shot {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}
.qlp.qlp-homeitup #how .qlp-cs-steps > li.qlpcs-home-step > .qlp-cs-copy {
  width: 100%;
  max-width: none !important;
  min-width: 0;
}
.qlp.qlp-homeitup #how .qlp-cs-steps > li.qlpcs-home-step > figure.qlp-shot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 12px;
  overflow: visible !important;
  border: 1px solid #EAE2D5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(20,17,14,.075);
  justify-self: stretch !important;
}
.qlp.qlp-homeitup #how .qlp-cs-steps > li.qlpcs-home-step > figure.qlp-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  border-radius: 11px;
  background: #fff;
}
.qlp.qlp-homeitup #how .qlp-cs-steps > li.qlpcs-home-step > figure.qlp-shot figcaption {
  margin-top: 11px;
  line-height: 1.55;
  font-size: 13px;
  color: #6E655A;
}
@media (max-width: 1024px) {
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step,
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step:nth-child(even) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step > .qlp-cs-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-homeitup #how .qlp-cs-steps.qlpcs-alternate > li.qlpcs-home-step > figure.qlp-shot {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .qlp.qlp-homeitup #results .qlpcs-res {
    grid-template-columns: minmax(0,1fr) !important;
  }
}
@media (max-width: 600px) {
  .qlp.qlp-homeitup .qlpcs-home-featured .qlp-shot,
  .qlp.qlp-homeitup #how .qlp-cs-steps > li.qlpcs-home-step > figure.qlp-shot,
  .qlp.qlp-homeitup #results .qlpcs-res > figure.qlp-shot {
    padding: 8px;
    border-radius: 14px;
  }
}

/* ============================================================
   FATEH LEGACY — LARGE, READABLE STEP SCREENSHOTS
   Applies only to <main class="qlp qlp-fateh">.
   Keeps the source screenshot uncropped and other case studies unchanged.
   ============================================================ */

/* Ensure the image and text both fit inside alternating rows. */
.qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step {
  min-width: 0;
}
.qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > .qlp-cs-copy {
  min-width: 0;
  max-width: none !important;
}

/* Match the generous screenshot column from Homeitup. */
@media (min-width: 1025px) {
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step {
    display: grid !important;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr) !important;
    gap: clamp(22px, 2.5vw, 36px) !important;
    align-items: center !important;
    margin-bottom: clamp(56px, 6vw, 90px);
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step:nth-child(even) {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr) !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step:nth-child(odd) > .qlp-cs-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step:nth-child(odd) > figure.qlp-shot {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step:nth-child(even) > .qlp-cs-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step:nth-child(even) > figure.qlp-shot {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}

/* Equal-height screenshot presentation, without cutting off tall posts. */
.qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > figure.qlp-shot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 12px;
  border: 1px solid #EAE2D5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(20,17,14,.075);
  overflow: visible !important;
  justify-self: stretch !important;
}
.qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > figure.qlp-shot img {
  display: block !important;
  width: 100% !important;
  height: 540px !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
  border-radius: 12px;
}
.qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > figure.qlp-shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #6E655A;
}

/* Keep the featured Search Console screenshot wide. */
.qlp.qlp-fateh .fateh-featured figure.qlp-shot,
.qlp.qlp-fateh #results figure.qlp-shot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
.qlp.qlp-fateh .fateh-featured figure.qlp-shot img,
.qlp.qlp-fateh #results figure.qlp-shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Tablet and mobile: stack copy above screenshot, retain image ratio. */
@media (max-width: 1024px) {
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step > .qlp-cs-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps.qlpcs-alternate > li.fateh-step > figure.qlp-shot {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > figure.qlp-shot img {
    height: auto !important;
    max-height: none !important;
  }
}
@media (max-width: 600px) {
  .qlp.qlp-fateh #how .qlp-cs-steps > li.fateh-step > figure.qlp-shot {
    padding: 8px;
    border-radius: 16px;
  }
}

/* ============================================================
   SELECT REMODELING — TWO-COLUMN CASE STUDY FAQ
   HTML classes: qlpcs-faq-split, qlpcs-faq-layout,
   qlpcs-faq-intro, qlpcs-faq-accordion, qlpcs-faq-card.
   Uses the shared Qaushik Labs color tokens above.
   ============================================================ */
.qlp .qlpcs-faq-split {
  background: #fff;
  padding: clamp(56px, 7vw, 96px) 20px;
}
.qlp .qlpcs-faq-split .qlp-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}
.qlp .qlpcs-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.qlp .qlpcs-faq-intro {
  min-width: 0;
  max-width: 480px;
  padding-top: 14px;
}
.qlp .qlpcs-faq-eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--qlpcs-gold, #9A7440);
}
.qlp .qlpcs-faq-eyebrow::before {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: #C8A36A;
}
.qlp .qlpcs-faq-intro h2 {
  margin: 0 0 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: var(--qlpcs-dark, #14110E);
}
.qlp .qlpcs-faq-intro h2 em { font-weight: inherit; }
.qlp .qlpcs-faq-intro p {
  max-width: 460px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--qlpcs-muted, #6E655A);
}
.qlp .qlpcs-faq-intro p a,
.qlp .qlpcs-faq-intro p a:visited {
  color: var(--qlpcs-gold, #9A7440) !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.qlp .qlpcs-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.qlp details.qlpcs-faq-card {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--qlpcs-line, #EAE2D5);
  border-radius: 22px;
  transition: border-color .2s ease;
}
.qlp details.qlpcs-faq-card:hover,
.qlp details.qlpcs-faq-card[open] { border-color: #DCCBAE; }
.qlp .qlpcs-faq-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 25px 30px;
  cursor: pointer;
  list-style: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--qlpcs-dark, #14110E);
}
.qlp .qlpcs-faq-card > summary::-webkit-details-marker { display: none; }
.qlp .qlpcs-faq-card > summary::marker { content: ""; }
.qlp .qlpcs-faq-card > summary:focus-visible {
  outline: 2px solid #C8A36A;
  outline-offset: -4px;
}
.qlp .qlpcs-faq-toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.qlp .qlpcs-faq-toggle::before,
.qlp .qlpcs-faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #C8A36A;
  transform: translate(-50%, -50%);
}
.qlp .qlpcs-faq-toggle::before { width: 14px; height: 2px; }
.qlp .qlpcs-faq-toggle::after { width: 2px; height: 14px; }
.qlp .qlpcs-faq-card[open] .qlpcs-faq-toggle::after { display: none; }
.qlp .qlpcs-faq-content { padding: 0 30px 26px; }
.qlp .qlpcs-faq-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--qlpcs-body, #5C544A);
}
@media (max-width: 1024px) {
  .qlp .qlpcs-faq-layout { gap: 28px; }
}
@media (max-width: 767px) {
  .qlp .qlpcs-faq-split { padding: 55px 16px; }
  .qlp .qlpcs-faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .qlp .qlpcs-faq-intro { max-width: none; padding-top: 0; }
  .qlp .qlpcs-faq-intro h2 { font-size: clamp(30px, 7vw, 38px); }
  .qlp .qlpcs-faq-intro p { font-size: 15px; }
  .qlp .qlpcs-faq-card > summary { padding: 20px; font-size: 17px; gap: 12px; }
  .qlp .qlpcs-faq-content { padding: 0 20px 22px; }
  .qlp .qlpcs-faq-content p { font-size: 14px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  .qlp details.qlpcs-faq-card { transition: none; }
}