/* ==========================================================================
   Articles harmony (v-next)
   Article cards (home #articles .service-card, archive/related .blog-card)
   adopt the card language of each preset's CUSTOM services section, so blog
   cards no longer look foreign next to bespoke service markup.
   Presets whose services already render as .service-card share one rule for
   .service-card + .blog-card in their own CSS and need nothing here.
   Loaded after the preset CSS. Never touches .service-card-link (whole-card
   overlay) nor the CTA pointer-events:none proxy (v297).
   ========================================================================== */

/* ---- shared helpers: image framing + CTA stays a visual proxy ---- */
body[class*="zg-preset-"] :is(#articles .service-card, .blog-card) .service-card-cta { pointer-events: none; }
body[class*="zg-preset-"] :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { overflow: hidden; }
body[class*="zg-preset-"] :is(#articles .service-card, .blog-card) :is(.service-card-image img, .blog-card__image) { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- clinic: soft rounded shadow cards, lift + glow ---------- */
body.zg-preset-clinic :is(#articles .service-card, .blog-card) { background: #fff !important; border: 1px solid var(--p-line, #e5e7eb) !important; border-radius: var(--p-r-lg, 20px) !important; box-shadow: var(--p-shadow) !important; overflow: hidden; transition: transform .35s var(--p-ease, ease), box-shadow .35s ease; }
body.zg-preset-clinic :is(#articles .service-card, .blog-card):is(:hover, :focus-within) { transform: translateY(-6px); box-shadow: var(--p-shadow-lg, var(--p-shadow)) !important; }
body.zg-preset-clinic :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 16 / 10; border-radius: calc(var(--p-r-lg, 20px) - 8px); margin: 10px 10px 0; }
body.zg-preset-clinic :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; }

/* ---------- institute: ruled "story" cards, accent line grows on hover ---------- */
body.zg-preset-institute :is(#articles .service-card, .blog-card) { position: relative; background: #fff !important; border: var(--p-rule, 1px solid #d9d9d9) !important; border-radius: var(--p-r, 4px) !important; box-shadow: none !important; transition: box-shadow .3s var(--p-ease, ease), transform .3s ease; }
body.zg-preset-institute :is(#articles .service-card, .blog-card)::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px; z-index: 2; background: var(--p-accent-line, var(--color-primary)); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--p-ease, ease); pointer-events: none; }
body.zg-preset-institute :is(#articles .service-card, .blog-card):hover { box-shadow: var(--p-shadow) !important; transform: translateY(-2px); }
body.zg-preset-institute :is(#articles .service-card, .blog-card):hover::before { transform: scaleX(1); }
body.zg-preset-institute :is(#articles .service-card h3, .blog-card__title) { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; line-height: 1.3; }
body.zg-preset-institute :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--p-ink, #111) !important; }

/* ---------- marcotte: big-radius floating cards, tint bubble on hover ---------- */
body.zg-preset-marcotte :is(#articles .service-card, .blog-card) { position: relative; background: #fff !important; border: 0 !important; border-radius: var(--p-r-xl, 28px) !important; box-shadow: var(--p-shadow) !important; overflow: hidden; transition: transform .45s var(--p-ease, ease), box-shadow .35s ease; }
body.zg-preset-marcotte :is(#articles .service-card, .blog-card)::after { content: ""; position: absolute; inset-block-start: -40px; inset-inline-end: -40px; width: 130px; aspect-ratio: 1; border-radius: 50%; background: var(--p-tint); opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .6s var(--p-ease, ease); z-index: 0; pointer-events: none; }
body.zg-preset-marcotte :is(#articles .service-card, .blog-card):hover { transform: translateY(-8px); box-shadow: var(--p-shadow-lg, var(--p-shadow)) !important; }
body.zg-preset-marcotte :is(#articles .service-card, .blog-card):hover::after { opacity: 1; transform: scale(1); }
body.zg-preset-marcotte :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { border-radius: calc(var(--p-r-xl, 28px) - 12px); margin: 12px 12px 0; aspect-ratio: 4 / 3; }
body.zg-preset-marcotte :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; }

/* ---------- schoger: crisp white card, hairline ring + deep shadow ---------- */
body.zg-preset-schoger :is(#articles .service-card, .blog-card) { background: #fff !important; border: 0 !important; border-radius: var(--p-radius, 12px) !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, .03), var(--p-shadow) !important; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
body.zg-preset-schoger :is(#articles .service-card, .blog-card):is(:hover, :focus-within) { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .03), var(--p-shadow-lg, var(--p-shadow)) !important; }
body.zg-preset-schoger :is(#articles .service-card h3, .blog-card__title) { font-weight: 700; letter-spacing: -.01em; }

/* ---------- norma: calm card, inset rounded thumb, round "go" ---------- */
body.zg-preset-norma :is(#articles .service-card, .blog-card) { background: var(--n-card, #fff) !important; border: 1px solid var(--n-line) !important; border-radius: var(--n-radius, 18px) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important; transition: transform .5s var(--n-ease, ease), box-shadow .5s ease, border-color .3s ease; }
body.zg-preset-norma :is(#articles .service-card, .blog-card):is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--n-shadow) !important; border-color: var(--n-line-2, var(--n-line)) !important; }
body.zg-preset-norma :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: calc(var(--n-radius, 18px) - 8px); background: var(--n-tint-2); }
body.zg-preset-norma :is(#articles .service-card h3, .blog-card__title) { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
body.zg-preset-norma :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--n-text) !important; }
body.zg-preset-norma :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; }
body.zg-preset-norma .blog-card__cat { background: var(--n-tint) !important; color: var(--n-text) !important; border-radius: 999px; }

/* ---------- tietae: soft pastel cards, pill tags + pill CTA ---------- */
body.zg-preset-tietae :is(#articles .service-card, .blog-card) { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r, 24px) !important; box-shadow: none !important; transition: transform .45s var(--p-ease, ease), box-shadow .45s ease; }
body.zg-preset-tietae :is(#articles .service-card, .blog-card):nth-child(3n+2) { background: var(--p-light-2, #fff) !important; }
body.zg-preset-tietae :is(#articles .service-card, .blog-card):nth-child(3n+3) { background: var(--p-light-3, #fff) !important; }
body.zg-preset-tietae :is(#articles .service-card, .blog-card):hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .35) !important; }
body.zg-preset-tietae :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { margin: 12px 12px 0; border-radius: calc(var(--p-r, 24px) - 10px); aspect-ratio: 4 / 3; }
body.zg-preset-tietae :is(#articles .service-card h3, .blog-card__title) { font-size: 1.4rem; font-weight: 700; }
body.zg-preset-tietae :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--p-ink) !important; }
body.zg-preset-tietae :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; background: var(--p-btn, var(--color-primary)) !important; color: #fff !important; border-color: transparent !important; }
body.zg-preset-tietae .blog-card__read-more { padding: .45rem 1rem; }
body.zg-preset-tietae .blog-card__cat { border-radius: 999px; background: #fff !important; color: var(--p-ink) !important; border: 1px solid var(--p-line); }

/* ---------- wroblewski: compact app-card, tinted chips ---------- */
body.zg-preset-wroblewski .blog-card { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r-lg, 16px) !important; box-shadow: var(--p-sh-1) !important; transition: transform .2s var(--p-ease, ease), box-shadow .2s, border-color .2s; }
body.zg-preset-wroblewski :is(#articles .service-card, .blog-card):hover { transform: translateY(-3px); box-shadow: var(--p-sh-2) !important; border-color: color-mix(in srgb, var(--color-primary) 40%, var(--p-line)) !important; }
body.zg-preset-wroblewski :is(#articles .service-card h3, .blog-card__title) { font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
body.zg-preset-wroblewski .blog-card__cat { background: var(--p-tint) !important; color: var(--color-secondary) !important; border-radius: var(--p-r-pill, 999px); }
body.zg-preset-wroblewski :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: var(--p-r-pill, 999px); }

/* ---------- frost: modular bento panel with bar/foot rules ---------- */
body.zg-preset-frost :is(#articles .service-card, .blog-card) { border: 1px solid var(--p-bd) !important; box-shadow: none !important; }
body.zg-preset-frost :is(#articles .service-card, .blog-card):hover { border-color: var(--p-tint-bd, var(--color-primary)) !important; box-shadow: var(--p-shadow-hover) !important; }
body.zg-preset-frost :is(#articles .service-card h3, .blog-card__title) { font-family: var(--font-heading); font-size: 1.18rem; line-height: 1.3; }
body.zg-preset-frost :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--color-secondary) !important; }
body.zg-preset-frost .blog-card__footer { border-top: 1px solid var(--p-bd); padding-top: 12px; }
body.zg-preset-frost :is(#articles .service-card-cta, .blog-card__read-more) { color: var(--color-primary-dark, var(--color-primary)) !important; font-weight: 600; }

/* ---------- vignelli: gridded "table" cells, red numerals, square ---------- */
body.zg-preset-vignelli :is(#articles .service-card, .blog-card) { background: var(--p-paper, #fff) !important; border: var(--p-line, 1px solid #111) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: background-color .2s ease; }
body.zg-preset-vignelli #articles .services-grid { counter-reset: zgart; }
body.zg-preset-vignelli #articles .service-card { counter-increment: zgart; }
body.zg-preset-vignelli #articles .service-card-body::before { content: counter(zgart, decimal-leading-zero); display: block; margin-bottom: 1rem; font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 900; line-height: .9; color: var(--p-red, var(--color-primary)); direction: ltr; text-align: start; }
body.zg-preset-vignelli :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { border-radius: 0; }
body.zg-preset-vignelli :is(#articles .service-card h3, .blog-card__title) { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; }
body.zg-preset-vignelli :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--p-ink, #111) !important; }
body.zg-preset-vignelli :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more, .blog-card__cat) { border-radius: 0 !important; }

/* ---------- gazette: newspaper story — ruled, no box, kicker + underline title ---------- */
body.zg-preset-gazette :is(#articles .service-card, .blog-card) { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--g-rule, #cfcfcf) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding-bottom: 1.2rem; }
body.zg-preset-gazette :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 16 / 10; border-radius: 0; background: var(--g-news); }
body.zg-preset-gazette :is(#articles .service-card, .blog-card) :is(.service-card-image img, .blog-card__image) { transition: transform .6s var(--g-ease, ease); }
body.zg-preset-gazette :is(#articles .service-card, .blog-card):hover :is(.service-card-image img, .blog-card__image) { transform: scale(1.04); }
body.zg-preset-gazette :is(#articles .service-card-body, .blog-card__body) { padding-inline: 0 !important; }
body.zg-preset-gazette :is(#articles .service-card h3, .blog-card__title) { font-size: 1.4rem; line-height: 1.25; }
body.zg-preset-gazette :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--g-ink, #111) !important; text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .35s var(--g-ease, ease); }
body.zg-preset-gazette :is(#articles .service-card, .blog-card):hover :is(h3 a, .blog-card__title a) { background-size: 100% 1px; }
body.zg-preset-gazette .blog-card__cat { position: static !important; display: block; background: none !important; color: var(--g-accent) !important; font-weight: 800; font-size: .8rem; padding: .6rem 0 0 !important; }
body.zg-preset-gazette :is(#articles .service-card-cta, .blog-card__read-more) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--g-accent) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- residence: editorial "suite" portraits, hairline, no box ---------- */
body.zg-preset-residence :is(#articles .service-card, .blog-card) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
body.zg-preset-residence :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 3 / 4; border-radius: 0; background: var(--p-stone); }
body.zg-preset-residence :is(#articles .service-card, .blog-card) :is(.service-card-image img, .blog-card__image) { filter: saturate(.85); transition: transform 1.6s var(--p-ease, ease), filter .8s ease; }
body.zg-preset-residence :is(#articles .service-card, .blog-card):hover :is(.service-card-image img, .blog-card__image) { transform: scale(1.05); filter: saturate(1); }
body.zg-preset-residence :is(#articles .service-card-body, .blog-card__body) { padding: 22px 0 0 !important; }
body.zg-preset-residence #articles .service-card--icon { border-top: var(--p-hair-strong, 1px solid #999) !important; }
body.zg-preset-residence :is(#articles .service-card h3, .blog-card__title) { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; }
body.zg-preset-residence :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--p-ink) !important; }
@media (min-width: 900px) { body.zg-preset-residence #articles .service-card:nth-child(3n+2) { margin-top: 56px; } }

/* ---------- dubai: gallery rows — quiet ivory, hairline, desaturated media ---------- */
body.zg-preset-dubai :is(#articles .service-card, .blog-card) { background: transparent !important; border: 0 !important; border-bottom: var(--p-hair, 1px solid #d8d0c0) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding-bottom: 1.4rem; }
body.zg-preset-dubai :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 16 / 10; border-radius: 0; background: var(--p-ivory-2); }
body.zg-preset-dubai :is(#articles .service-card, .blog-card) :is(.service-card-image img, .blog-card__image) { filter: saturate(.85); transition: transform 1.2s var(--p-ease, ease), filter .6s; }
body.zg-preset-dubai :is(#articles .service-card, .blog-card):hover :is(.service-card-image img, .blog-card__image) { transform: scale(1.04); filter: saturate(1); }
body.zg-preset-dubai :is(#articles .service-card-body, .blog-card__body) { padding-inline: 0 !important; }
body.zg-preset-dubai :is(#articles .service-card h3, .blog-card__title) { font-family: var(--font-heading); font-weight: 400; letter-spacing: .03em; font-size: clamp(1.25rem, 2vw, 1.6rem); }
body.zg-preset-dubai :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--p-ink) !important; }

/* ---------- pathone: line rows — rule, accent line sweeps on hover ---------- */
body.zg-preset-pathone :is(#articles .service-card, .blog-card) { position: relative; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--o-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
body.zg-preset-pathone :is(#articles .service-card, .blog-card)::before { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; z-index: 2; background: var(--o-accent, var(--color-primary)); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--o-ease, ease); pointer-events: none; }
body.zg-preset-pathone :is(#articles .service-card, .blog-card):is(:hover, :focus-within)::before { transform: scaleX(1); }
body.zg-preset-pathone :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { border-radius: 14px; aspect-ratio: 4 / 3; }
body.zg-preset-pathone :is(#articles .service-card-body, .blog-card__body) { padding-inline: 0 !important; }
body.zg-preset-pathone :is(#articles .service-card h3, .blog-card__title) { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 400; line-height: 1.1; }
body.zg-preset-pathone :is(#articles .service-card h3 a, .blog-card__title a) { color: var(--o-text) !important; }
body.zg-preset-pathone :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; }

/* ---------- rams: functional list — rule lines, orange knob CTA ---------- */
body.zg-preset-rams :is(#articles .service-card, .blog-card) { background: transparent !important; border: 0 !important; border-top: var(--p-rule-strong, 1px solid #222) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: background-color .2s ease; }
body.zg-preset-rams :is(#articles .service-card, .blog-card):hover { background: color-mix(in srgb, var(--p-surface, #eee) 60%, transparent) !important; }
body.zg-preset-rams :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { border-radius: 0; aspect-ratio: 16 / 10; }
body.zg-preset-rams :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 999px; }

/* ---------- nielsen: usability rows — clear border, strong focus/hover ---------- */
body.zg-preset-nielsen :is(#articles .service-card, .blog-card) { background: var(--color-white, #fff) !important; border: var(--p-line, 1px solid #ccc) !important; border-radius: var(--p-radius-lg, 12px) !important; box-shadow: none !important; transform: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
body.zg-preset-nielsen :is(#articles .service-card, .blog-card):hover { border-color: var(--color-primary) !important; box-shadow: var(--p-shadow-hover) !important; }
body.zg-preset-nielsen :is(#articles .service-card, .blog-card):focus-within { outline: 4px solid var(--p-focus, var(--color-primary)); outline-offset: 3px; }
body.zg-preset-nielsen :is(#articles .service-card, .blog-card):hover :is(h3 a, .blog-card__title a) { color: var(--color-primary) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- hustwit: editorial index — top rule, heavy type, outline numerals ---------- */
body.zg-preset-hustwit #articles .services-grid { counter-reset: zgart; }
body.zg-preset-hustwit #articles .service-card { counter-increment: zgart; }
body.zg-preset-hustwit #articles .service-card-body::before { content: counter(zgart, decimal-leading-zero); display: block; margin-bottom: .6rem; font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 900; line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--p-ink, #111); direction: ltr; text-align: start; transition: color .35s ease; }
body.zg-preset-hustwit #articles .service-card:hover .service-card-body::before { color: var(--p-ink, #111); }
body.zg-preset-hustwit :is(#articles .service-card h3, .blog-card__title) { font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
body.zg-preset-hustwit :is(#articles .service-card, .blog-card):hover :is(h3 a, .blog-card__title a) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* ---------- chrisdo: giant rows — heavy rule, full ink inversion on hover ---------- */
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card) { background: var(--p-paper, #fff) !important; border: 0 !important; border-top: var(--p-rule, 3px) solid var(--p-ink, #111) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: background-color .3s ease, color .3s ease; }
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { border-radius: 0; }
body.zg-preset-chrisdo :is(#articles .service-card h3, .blog-card__title) { font-weight: 900; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card):is(:hover, :focus-within) { background: var(--p-ink, #111) !important; }
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card):is(:hover, :focus-within) :is(h3, h3 a, p, p a, .blog-card__title a, .blog-card__excerpt, .blog-card__date) { color: #fff !important; }
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card):is(:hover, :focus-within) :is(.service-card-cta, .blog-card__read-more) { background: #fff !important; color: var(--p-ink, #111) !important; border-color: #fff !important; }
body.zg-preset-chrisdo :is(#articles .service-card, .blog-card) :is(.service-card-cta, .blog-card__read-more) { border-radius: 0 !important; }

/* ---- mobile: drop decorative offsets, keep cards full-width ---- */
@media (max-width: 767px) {
    body[class*="zg-preset-"] :is(#articles .service-card, .blog-card) { margin-top: 0; }
    body.zg-preset-residence :is(#articles .service-card, .blog-card) :is(.service-card-image, .blog-card__image-wrap) { aspect-ratio: 4 / 3; }
    body[class*="zg-preset-"] :is(#articles .service-card-body, .blog-card__body)::before { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    body[class*="zg-preset-"] :is(#articles .service-card, .blog-card), body[class*="zg-preset-"] :is(#articles .service-card, .blog-card) * { transition: none !important; }
    body[class*="zg-preset-"] :is(#articles .service-card, .blog-card):hover { transform: none !important; }
}