/* ============================================================
   Services Landing — AEO/search sections
   Append to the theme's custom.css. Uses the existing asb19
   palette: accent #b84c2e, warm #c98a5e, ink #375357, tint #f3ede7.
   ============================================================ */

/* Shared eyebrow label (h6) already styled by the theme headings;
   these rules only cover the NEW components below. */

/* ---------- Component A: Platform cards ---------- */
.asb19__platforms--wrap {
    margin-top: 2.5rem;
}
.asb19__platformCard {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid rgba(55, 83, 87, .12);
    border-radius: 16px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.asb19__platformCard:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 76, 46, .35);
    box-shadow: 0 18px 40px -24px rgba(55, 83, 87, .45);
}
.asb19__platformCard--top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.asb19__platformCard--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}
.asb19__platformCard--icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.asb19__platformCard--badge {
    display: inline-block;
    padding: .3em .8em;
    border-radius: 999px;
    background: #f3ede7;
    color: #375357;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.asb19__platformCard--name {
    margin: 0 0 .5rem;
    color: #375357;
}
.asb19__platformCard--desc {
    margin: 0;
    color: rgba(55, 83, 87, .8);
    font-size: .95rem;
    line-height: 1.6;
}

/* ---------- Component B: Feature cards ---------- */
.asb19__features--wrap {
    margin-top: 2.5rem;
}
.asb19__featureCard {
    height: 100%;
    padding: 1.75rem;
    border-radius: 16px;
    background: #f3ede7;
    transition: transform .25s ease, box-shadow .25s ease;
}
.asb19__featureCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(55, 83, 87, .45);
}
.asb19__featureCard--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
}
.asb19__featureCard--icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.asb19__featureCard--title {
    margin: 0 0 .5rem;
    color: #375357;
}
.asb19__featureCard--desc {
    margin: 0;
    color: rgba(55, 83, 87, .8);
    font-size: .95rem;
    line-height: 1.6;
}

/* ---------- Marquee ---------- */
.asb19__marquee {
    overflow: hidden;
    padding: 1.25rem 0;
    background: #375357;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.asb19__marquee--track {
    display: flex;
    width: max-content;
    animation: asb19MarqueeScroll 40s linear infinite;
}
.asb19__marquee:hover .asb19__marquee--track {
    animation-play-state: paused;
}
.asb19__marquee--set {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0 .5rem;
    list-style: none;
    flex: 0 0 auto;
}
.asb19__marquee--item {
    flex: 0 0 auto;
    padding: .45em 1.1em;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}
/* Two identical sets side-by-side; shifting by half the track loops seamlessly. */
@keyframes asb19MarqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .asb19__marquee--track { animation: none; }
}

/* ---------- New Search Reality: intro + pull-quote ---------- */
.asb19__lpReality--intro {
    text-align: center;
    margin-bottom: 1rem;
}
.asb19__lpReality--intro p {
    color: rgba(55, 83, 87, .85);
    line-height: 1.7;
}
.asb19__lpReality--quote {
    margin: 2rem auto 0;
    max-width: 46rem;
    padding-left: 1.25rem;
    border-left: 3px solid #c98a5e;
    color: #375357;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
}
/* Reality section only: this section has a dark near-black background, so invert the heading
   squiggle (heading-sketch.webp on the em::after) to white for contrast. Scoped strictly to
   .asb19__lpReality so the same squiggle on light-background sections stays unchanged. */
.asb19__lpReality h2 em::after { filter: brightness(0) invert(1); }

/* Extend the SEO section-heading accent (two-tone slanted em + hand-drawn squiggle) to the FAQ and
   final-CTA titles so they match the Searching/Reality/AEO sections. Scoped to the SEO landing page
   (body.page-id-1605) so BS/Social FAQ/CTA titles are untouched. Mirrors the inline rule those
   sections use. */
body.page-id-1605 .asb19__faq .asb19__heading h2 em,
body.page-id-1605 .asb19__cta .asb19__heading h2 em {
    font-style: normal;
    font-weight: 700;
    color: var(--clr-accent) !important;
    display: block;
    width: fit-content;
    transform: rotate(-3deg);
    margin-left: 45px;
    position: relative;
    padding-bottom: 50px;
}
body.page-id-1605 .asb19__faq .asb19__heading h2 em::after,
body.page-id-1605 .asb19__cta .asb19__heading h2 em::after {
    position: absolute;
    content: "";
    width: 225px;
    height: 70px;
    background-image: url("/wp-content/themes/themarketingmiles/assets/images/heading-sketch.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    bottom: 0;
    right: -70px;
}

/* ---------- What Is AEO: intro ---------- */
.asb19__lpAeo--intro {
    text-align: center;
}
.asb19__lpAeo--intro p {
    color: rgba(55, 83, 87, .85);
    line-height: 1.7;
}

/* ---------- Why It Matters: callout ---------- */
.asb19__lpWhy--card {
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    border-radius: 24px;
    background: linear-gradient(135deg, #f3ede7 0%, #fff 100%);
    border: 1px solid rgba(201, 138, 94, .35);
}
.asb19__lpWhy--card h2 {
    color: #375357;
    margin-bottom: 1rem;
}
.asb19__lpWhy--card .asb19__content p {
    color: rgba(55, 83, 87, .85);
    line-height: 1.7;
    max-width: 44rem;
    margin-inline: auto;
}
.asb19__lpWhy--card .asb19__btn--wrap {
    margin-top: 1.75rem;
}

/* SEO page (1605) only — orange eyebrow pills for the two sections that sit on pale/cream
   backgrounds: "What Is AEO" (.asb19__lpAeo) and "Why It Matters Now" (.asb19__lpWhy).
   !important + page scope to beat the base `.asb19__heading h6` (light-grey) in custom.css.
   Only bg + text colour change; all other pill styling is inherited unchanged. */
body.page-id-1605 .asb19__lpAeo .asb19__heading h6,
body.page-id-1605 .asb19__lpWhy .asb19__heading h6 {
    background-color: #f5a640 !important;
    color: #ffffff !important;
}

/* SEO page (1605) only — the global `.asb19__clients .asb19__main--widget { margin-top:-100px }`
   in custom.css (kept for BS/Social) now overlaps the section above after this page's testimonials
   padding was tightened. Neutralise the negative margin here so the "What Clients Say" pill sits
   cleanly below with the section's own padding as the gap. */
body.page-id-1605 .asb19__clients .asb19__main--widget {
    margin-top: 0 !important;
}

/* Social page (1687) only — render the section eyebrow pills in Title Case. Higher specificity than
   the template's `.tmm-social-lp .asb19__heading h6 { text-transform:none }`, so this wins. */
body.page-id-1687 .asb19__heading h6 {
    text-transform: capitalize;
}

/* Social page (1687) only — the testimonials section stacks margin-top:80px + padding-top:70px
   (~150px). Match the SEO fix: no top margin, 48px top padding. */
body.page-id-1687 .asb19__clients {
    margin-top: 0 !important;
    padding-top: 48px !important;
}

/* Social page (1687) only — the counter section has no top spacing, so its stat cards touch the
   orange marquee above. Add breathing room. */
body.page-id-1687 .asb19__lpCounter {
    padding-top: 56px;
}

/* Social page (1687) only — neutralise the global `.asb19__clients .asb19__main--widget { margin-top:-100px }`
   (kept for Brand Strategy) so the testimonials pill doesn't overlap the section above. Mirrors the SEO (1605) fix. */
body.page-id-1687 .asb19__clients .asb19__main--widget {
    margin-top: 0 !important;
}