/**
 * Dogology Blog Redesign — premium-minimal, cohesive with /dogology-101/
 * landing and MindMap report. Loaded only on the /blog page (gated by
 * functions.php enqueue conditional).
 *
 * Source-of-truth tokens mirror dogology-mindmap/assets/css/mindmap-sales.css
 * and dogology-commerce/templates/Dogology-Premium-Minimalist-Style.md.
 *
 * Rules carried over:
 *   - No card shadows at rest. Shadow + translateY(-4px) on hover only.
 *   - Section rhythm = alternating #FAFAFA / #FFFFFF backgrounds, no dividers.
 *   - Brand gradient is reserved for ONE moment per section max.
 *   - Cards: 1px #EEF0F4 border, 20px radius, hover border tints to brand-teal/pillar.
 *   - Eyebrows: brand-teal, uppercase, letter-spacing: 3px, 0.78rem 700.
 *   - Body prose: #475569, line-height: 1.7.
 */

/* =====================================================================
 * Page-level adjustments for the /blog page only.
 * Loaded ONLY on /blog via functions.php enqueue conditional, so this
 * doesn't affect other pages.
 * ===================================================================== */
html, body { overflow-x: clip; }

/* Spacer override retired 2026-05-14. Site-wide header pivot to
 * `position: sticky` removed the spacer + body padding-top mechanism,
 * so the blog hero now sits naturally below the header in flow.
 * Existing .dgo-hero padding (104px mobile / 128px desktop) remains
 * as pure visual breathing room above the eyebrow. */

/* =====================================================================
 * Tokens scoped to .dgo-blog
 * ===================================================================== */
.dgo-blog {
    --dgo-ink:        #0F172A;
    --dgo-ink-2:      #1E293B;
    --dgo-body:       #475569;
    --dgo-muted:      #64748B;

    --dgo-line:       #EEF0F4;
    --dgo-line-hover: rgba(0, 171, 142, 0.22);

    --dgo-bg-white:   #FFFFFF;
    --dgo-bg-warm:    #FAFAFA;
    --dgo-bg-soft:    #F1F5F9;

    --dgo-brand-teal: #00AB8E;
    --dgo-brand-blue: #0076BA;
    --dgo-gradient:   linear-gradient(135deg, #00AB8E 0%, #0076BA 100%);

    --dgo-radius-card:        20px;
    --dgo-radius-card-mobile: 18px;
    --dgo-radius-pill:        999px;

    --dgo-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.06);
    --dgo-shadow-cta:   0 8px 24px rgba(0, 118, 186, 0.18);

    --dgo-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dgo-tx:   0.35s var(--dgo-ease);

    --dgo-container: 1180px;

    font-family: 'Kanit', 'Noto Sans Thai Looped', 'Noto Sans Thai', system-ui, sans-serif;
    color: var(--dgo-ink);
    background: var(--dgo-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

.dgo-blog *,
.dgo-blog *::before,
.dgo-blog *::after {
    box-sizing: border-box;
}

.dgo-blog a {
    color: inherit;
    text-decoration: none;
}

.dgo-blog img {
    max-width: 100%;
    height: auto;
    display: block;
}

.dgo-blog button {
    font-family: inherit;
    cursor: pointer;
}

.dgo-blog a:focus-visible,
.dgo-blog button:focus-visible,
.dgo-blog input:focus-visible {
    outline: 2px solid var(--dgo-brand-teal);
    outline-offset: 3px;
    border-radius: 6px;
}

.dgo-container {
    max-width: var(--dgo-container);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 640px) {
    .dgo-container { padding-left: 18px; padding-right: 18px; }
}

/* =====================================================================
 * Eyebrow — solid brand-teal at this size (gradient on text is wasted
 * at 0.78rem with 3px tracking — the gradient transition can't span
 * tall-enough glyphs to read as a true gradient).
 *
 * The recurring brand moment is the gradient accent BAR above each
 * section eyebrow (see .dgo-section-head::before below).
 * ===================================================================== */
.dgo-eyebrow {
    display: inline-block;
    font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--dgo-brand-teal);
    text-transform: uppercase;
    line-height: 1;
}
.dgo-eyebrow--pillar {
    color: var(--dgo-pillar-color, var(--dgo-brand-teal));
}

.dgo-grad-phrase {
    background: var(--dgo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dgo-brand-blue); /* fallback */
}

/* =====================================================================
 * Section heads — mobile-first centered. The `--inline` modifier flips
 * to left-align at ≥760px so desktop layouts that need a left-rail
 * heading (next to a grid, etc.) still work.
 * ===================================================================== */
.dgo-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
}

.dgo-section-head .dgo-eyebrow { margin-bottom: 14px; }

@media (min-width: 760px) {
    .dgo-section-head { margin-bottom: 40px; }

    .dgo-section-head--inline {
        text-align: left;
        margin: 0 0 24px;
        max-width: none;
    }
}

.dgo-section-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dgo-ink);
    margin: 0 0 12px;
}

.dgo-section-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dgo-body);
    margin: 0 auto;
    max-width: 640px;
}

/* =====================================================================
 * HERO — brand-dark gradient. Matches Dogology's other landing heroes
 * (Course 101 uses the exact same gradient; MindMap landing uses a
 * radial brand-blue). White cards on dark cut through dramatically,
 * featured images become the focal point, and the page reads like
 * the rest of the site instead of an outlier.
 *
 * Section cadence: hero (dark gradient) → filters (warm) → grid (white)
 * → CTA (gradient) → picks (warm). Variety + brand consistency.
 * ===================================================================== */
.dgo-hero {
    /* Reusing Course 101's hero treatment: photo background with a
       layered dark overlay + radial vignette. The photo gives ambient
       texture; the overlay drops its saturation so it reads as a calm
       canvas, not a competing image. Same image as 101's hero for now —
       swap the URL with a blog-specific photo when ready.
       Stack order (bottom → top): solid fallback, photo, dark overlay,
       radial vignette. */
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(rgba(10, 16, 28, 0.86), rgba(10, 16, 28, 0.92)),
        var(--dgo-hero-image, url('/wp-content/themes/zento-child/assets/image/lucija-vukusic-a9m588zqkt0-unsplash-69f063c779b39.webp')) center/cover no-repeat,
        #0A1020;
    color: #fff;
    /* Top padding = fixed header (72/80px) + breathing room above the
       eyebrow, so "บทความแนะนำ" doesn't crowd against the header. */
    padding: 104px 0 48px;
    position: relative;
    overflow: hidden;
}
.dgo-hero::before {
    /* Subtle brand glow — keeps the page feeling Dogology rather than
       generic dark-mode. Soft alphas so they don't lift the whole bg. */
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 171, 142, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 84% 78%, rgba(0, 118, 186, 0.12) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle film-grain noise — inline SVG `feTurbulence` for tactile depth
   on the dark canvas. No HTTP request; tiles automatically. Low opacity
   + screen blend so it shows as faint highlight grain, not visible
   noise dots. Hides banding on gradients/solids and gives the hero a
   premium-print feel. */
.dgo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    mix-blend-mode: screen;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.dgo-hero > .dgo-container {
    position: relative;
    z-index: 1;
    /* Strip the global .dgo-container constraints inside the hero so the
       lead cover (full-bleed) and the marquee shelf (edge-bleed) can
       reach the viewport edges. Body content inside gets its own padding
       so it stays centered in a 1180px reading rail. */
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Hero meta + body need their own padding now that the container has none */
.dgo-hero-meta {
    max-width: var(--dgo-container);
    margin-inline: auto;
    padding-inline: 24px;
}
@media (max-width: 640px) {
    .dgo-hero-meta { padding-inline: 18px; }
}

@media (min-width: 760px) {
    .dgo-hero { padding: 128px 0 72px; }
}

/* Hero meta (eyebrow + breadcrumb) read on dark */
.dgo-hero .dgo-eyebrow {
    color: #5EEAD4; /* on-dark teal — matches the 101 landing eyebrow */
}
.dgo-hero .dgo-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
}
.dgo-hero .dgo-breadcrumb a:hover {
    color: #fff;
}

.dgo-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
@media (min-width: 760px) {
    .dgo-hero-meta { margin-bottom: 28px; gap: 16px; }
}

.dgo-breadcrumb {
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--dgo-muted);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.dgo-breadcrumb a:hover { color: var(--dgo-brand-teal); }

/* Lead full-width on top, marquee shelf full-width below — at every
   viewport. The shelf auto-scrolls (rAF marquee) at all widths; card
   width inside the shelf scales: ~82% mobile, ~48% tablet, ~32% desktop
   so each viewport sees roughly 1+peek / 2+peek / 3+peek cards. */
.dgo-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}
@media (min-width: 760px) {
    .dgo-hero-grid { gap: 28px; }
}

.dgo-feature-secondaries {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The hero container has no padding now (so the lead cover can bleed),
       so the shelf needs its own inline padding to keep cards from touching
       the viewport edges. No negative margin — just plain padding. */
    padding-inline: 18px;
    /* Smoothness — keep horizontal swipe contained (no Safari back-swipe
       interference), promote to compositor for buttery momentum scroll.
       Snap deliberately removed: auto-scroll glides continuously, snap
       would fight the per-frame translate. */
    overscroll-behavior-x: contain;
    will-change: scroll-position;
}
.dgo-feature-secondaries::-webkit-scrollbar { display: none; }

/* Shelf cards — width scales with viewport so the shelf shows
   roughly 1+peek / 2+peek / 3+peek cards from mobile to desktop. */
.dgo-feature-secondaries .dgo-feature--small {
    flex-shrink: 0;
    width: 82%;
}
@media (min-width: 640px) {
    .dgo-feature-secondaries .dgo-feature--small { width: 48%; }
}
@media (min-width: 980px) {
    .dgo-feature-secondaries .dgo-feature--small { width: 31%; }
}

/* Inside shelf cards: stacked layout (image on top, body below) so each
   card reads as a real preview, not a thumbnail. Same on every viewport. */
.dgo-feature-secondaries .dgo-feature--small .dgo-feature-link {
    flex-direction: column;
}
.dgo-feature-secondaries .dgo-feature--small .dgo-feature-cover {
    width: 100%;
    aspect-ratio: 16 / 10;
}

/* Tablet/desktop — bump shelf inset to match the page container. */
@media (min-width: 760px) {
    .dgo-feature-secondaries {
        padding-inline: 24px;
    }
}

/* Feature card — DARK cards on dark-gradient hero. Slate-800 bg sits
   one notch above the hero gradient so cards have natural separation
   without bright white cutouts. Hover lifts to teal-tinted border. */
.dgo-feature {
    background: #1E293B;          /* slate-800 — one shade above hero */
    color: #F1F5F9;               /* slate-100 — body text on dark */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--dgo-radius-card);
    overflow: hidden;
    transition: border-color var(--dgo-tx), box-shadow var(--dgo-tx), transform var(--dgo-tx);
    height: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.dgo-feature:hover {
    border-color: var(--dgo-pillar-color, rgba(94, 234, 212, 0.4));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    transform: translateY(-4px);
}

/* Title + dek inside dark cards — flipped to light tones */
.dgo-feature .dgo-feature-title {
    color: #FFFFFF;
}
.dgo-feature .dgo-feature-dek {
    color: #CBD5E1;               /* slate-300 — readable on slate-800 */
}
.dgo-feature .dgo-meta-row {
    color: #94A3B8;               /* slate-400 */
}
.dgo-feature .dgo-meta-time {
    color: #E2E8F0;               /* slate-200 — slight emphasis */
}
.dgo-feature .dgo-meta-dot {
    color: rgba(255, 255, 255, 0.25);
}

/* Pillar eyebrow inside dark cards — keep per-pillar color but bump the
   color-strength helper so it reads cleanly on slate (not the muted
   on-light brand-teal). */
.dgo-feature .dgo-eyebrow--pillar {
    /* Per-pillar color stays vivid; on slate-800 it's already legible */
    color: var(--dgo-pillar-color, #5EEAD4);
}

/* Pillar tag overlay on cover — color-coded by category. Background is
   the pillar's hex (vivid), white label with a subtle text-shadow so it
   stays readable on the lighter pillar colors (yellow/amber). */
.dgo-feature .dgo-feature-pillar {
    background: var(--dgo-pillar-color, rgba(15, 23, 42, 0.78));
    color: #FFFFFF;
    backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.dgo-feature:hover {
    border-color: var(--dgo-pillar-color, var(--dgo-line-hover));
    box-shadow: var(--dgo-shadow-hover);
    transform: translateY(-4px);
}

.dgo-feature-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dgo-feature-cover {
    position: relative;
    overflow: hidden;
    background: var(--dgo-pillar-tint, var(--dgo-bg-soft));
    aspect-ratio: 16 / 10;
}
.dgo-feature-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--dgo-ease);
}
.dgo-feature:hover .dgo-feature-cover img {
    transform: scale(1.04);
}

.dgo-feature-cover-fallback {
    width: 100%;
    height: 100%;
    background: var(--dgo-gradient);
    opacity: 0.18;
}

.dgo-feature-pillar {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,0.94);
    color: var(--dgo-pillar-color, var(--dgo-ink));
    padding: 6px 14px;
    border-radius: var(--dgo-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
}

.dgo-feature-body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
@media (min-width: 760px) {
    .dgo-feature-body { padding: 28px 28px 28px; gap: 12px; }
}

/* Lead featured = magazine-cover bleed treatment.
   Card chrome (slate bg, border, shadow, rounded corners) is dropped so
   the cover image can extend to the viewport edges past the container.
   Title + dek + meta sit centered below on the hero gradient itself. */
.dgo-feature--lead {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.dgo-feature--lead:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

.dgo-feature--lead .dgo-feature-cover {
    /* Hidden — the hero now uses a layered photo background with dark
       overlay (matching Course 101). The lead is text-only on top of
       that canvas; the per-card cover image would compete with the
       hero photo. */
    display: none;
}
.dgo-feature--lead .dgo-feature-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}

.dgo-feature--lead .dgo-feature-body {
    /* Padding compensates for the now-unconstrained hero container so
       the centered text doesn't touch viewport edges on narrow screens. */
    padding: 0 24px;
    max-width: calc(760px + 48px);
    margin: 0 auto;
    text-align: center;
    gap: 12px;
}
@media (max-width: 640px) {
    .dgo-feature--lead .dgo-feature-body { padding: 0 18px; }
}
@media (min-width: 760px) {
    .dgo-feature--lead .dgo-feature-cover { margin-bottom: 36px; }
    .dgo-feature--lead .dgo-feature-body { gap: 14px; }
}

/* Center the meta row to match the centered body */
.dgo-feature--lead .dgo-meta-row {
    justify-content: center;
}

.dgo-feature-title {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dgo-ink);
    margin: 0;
}
.dgo-feature--lead .dgo-feature-title {
    font-size: clamp(1.55rem, 3.1vw, 2.4rem);
    line-height: 1.25;
}

.dgo-feature-dek {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dgo-body);
    margin: 0;
    /* clamp 3 lines on lead */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small variant base — typography + body padding. Layout
   (image-left vs stacked) is handled by `.dgo-feature-secondaries` rules
   above, which differ between mobile shelf and desktop right-column. */
.dgo-feature--small .dgo-feature-body { padding: 18px 18px; gap: 8px; }
.dgo-feature--small .dgo-feature-title {
    font-size: 1.05rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row */
.dgo-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--dgo-muted);
    margin-top: auto;
    padding-top: 8px;
    font-weight: 500;
}
.dgo-meta-time { color: var(--dgo-body); font-weight: 600; }
.dgo-meta-dot { color: #CBD5E1; }


/* =====================================================================
 * FILTERS — tinted brand stripe so the filter zone reads as interactive
 * at a glance. Soft brand-teal+blue wash, hairline dividers top/bottom.
 *
 * Mobile-first: chips render as a horizontal-scroll shelf (single row,
 * swipe to reveal more) with the search input full-width underneath.
 * Desktop (≥760px): chips wrap inline with the search input on the right.
 * ===================================================================== */
.dgo-filters {
    /* Identity through the system's own pattern: warm/white shift demarcates
       sections (no explicit rules anywhere else on the page), and an eyebrow
       label announces the zone the same way every other section does
       (FEATURED · LATEST · EDITORS PICKS · FILTER). The chip color dots are
       the only chromatic moment in this zone. */
    background: var(--dgo-bg-warm);
    padding: 24px 0 22px;
    border: 0;
    /* Soft shadows on both edges so the strip reads as a slightly raised
       plate floating above the page — adds presence without explicit
       rules. z-index lifts it above the grid below for the shadow. */
    box-shadow:
        0 6px 14px -8px rgba(15, 23, 42, 0.10),
        0 -4px 12px -8px rgba(15, 23, 42, 0.06);
    position: relative;
    z-index: 1;
}

/* Filter zone uses the standard .dgo-section-head pattern — no custom
   variant needed. Eyebrow + heading center on mobile, left-align at
   ≥760px via the --inline modifier. */

/* Mobile-first: container stacks heading → search → chips via document
   order (all inside .dgo-filters-side, then .dgo-filter-chips-wrap).
   Container gap is wider than .dgo-filters-side gap so there's a clear
   breath between search and chips — heading + search read as one unit,
   chips read as the action area below. */
.dgo-filters .dgo-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dgo-filters-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The filter section's heading shouldn't carry its own bottom margin —
   the parent flex's `gap` is the spacing source. Without this reset,
   on mobile heading→search becomes 28+14=42px while search→chips is 14px,
   making search visually drift toward the chips. */
.dgo-filters .dgo-section-head {
    margin: 0;
    max-width: none;
}


/* Wrapper for the chip shelf — needed so the right-edge fade indicator
   (a pseudo-element) can be positioned absolutely without scrolling
   along with the chips. */
.dgo-filter-chips-wrap {
    position: relative;
    margin-inline: -18px;
}
.dgo-filter-chips-wrap::after {
    /* Right-edge gradient fade — signals "more chips this way" without
       chrome. Matches the warm filter-zone bg so it dissolves visually. */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, rgba(250,250,250,0), var(--dgo-bg-warm) 70%);
    pointer-events: none;
}

/* Mobile chip shelf — horizontal scroll, no wrap. Hide scrollbar visually. */
.dgo-filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Free scroll — no snap. User can rest the shelf at any position
       between chips instead of being yanked to a chip boundary. */
    scrollbar-width: none; /* Firefox */
    padding-inline: 18px;
}
.dgo-filter-chips::-webkit-scrollbar { display: none; } /* WebKit */

/* Chips — color-coded per category. Each chip carries --dgo-chip-color
   inline; a small dot before the label and the active fill use it. */
.dgo-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dgo-bg-white);
    border: 1px solid var(--dgo-line);
    border-radius: var(--dgo-radius-pill);
    padding: 10px 18px 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dgo-body);
    min-height: 44px;
    white-space: nowrap;
    transition: background var(--dgo-tx), color var(--dgo-tx),
                border-color var(--dgo-tx), box-shadow var(--dgo-tx);
}

/* Color dot — the per-category visual cue */
.dgo-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dgo-chip-color, var(--dgo-muted));
    flex-shrink: 0;
    transition: transform var(--dgo-tx), background var(--dgo-tx);
}

/* The "ทั้งหมด" chip has no category color — show a neutral dot */
.dgo-chip--all::before {
    background: var(--dgo-muted);
}

.dgo-chip:hover {
    border-color: var(--dgo-chip-color, var(--dgo-brand-teal));
    color: var(--dgo-ink);
    background: var(--dgo-chip-tint, var(--dgo-bg-white));
}
.dgo-chip:hover::before { transform: scale(1.2); }

/* Active = filled with the category's color, white label, no dot needed */
.dgo-chip.is-active {
    background: var(--dgo-chip-color, var(--dgo-ink));
    color: #fff;
    border-color: var(--dgo-chip-color, var(--dgo-ink));
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.dgo-chip.is-active::before {
    background: #fff;
    transform: scale(1);
}

/* The "ทั้งหมด" active state stays the neutral ink fill */
.dgo-chip--all.is-active {
    background: var(--dgo-ink);
    border-color: var(--dgo-ink);
}
.dgo-chip--all.is-active::before { background: #fff; }

/* Search — full width on mobile, sits under the chip shelf.
   Height locked to 44px so it matches the chip pill exactly. */
.dgo-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dgo-bg-white);
    border: 1px solid var(--dgo-line);
    border-radius: var(--dgo-radius-pill);
    padding: 0 18px;
    height: 44px;
    width: 100%;
    transition: border-color var(--dgo-tx), box-shadow var(--dgo-tx);
}
.dgo-search:focus-within {
    border-color: var(--dgo-brand-teal);
    box-shadow: 0 0 0 3px rgba(0, 171, 142, 0.12);
}
.dgo-search-icon {
    color: var(--dgo-muted);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
}
.dgo-search-icon svg { width: 100%; height: 100%; }
.dgo-search input {
    /* Kill iOS Safari's native search-field chrome (round inner border,
       cancel button) so only our pill wrapper styles show. */
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;  /* ≥16px — prevents iOS auto-zoom on focus */
    line-height: 1.2;
    color: var(--dgo-ink);
    width: 100%;
    min-width: 0;  /* prevents overflow inside flex */
    height: 100%;
    padding: 0;
    margin: 0;
}
.dgo-search input::placeholder { color: var(--dgo-muted); opacity: 1; }
.dgo-search input::-webkit-search-decoration,
.dgo-search input::-webkit-search-cancel-button,
.dgo-search input::-webkit-search-results-button,
.dgo-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}
/* Don't double-up the focus ring — wrapper handles :focus-within already */
.dgo-search input:focus,
.dgo-search input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Tablet/desktop — sidebar split layout.
   Left column: eyebrow + heading (the "what you're looking at" state).
   Right column: chips + search (the "refine it" controls).
   Cleanly separates state from actions, uses desktop horizontal space
   well, and gives chips a stable row width so they wrap predictably. */
@media (min-width: 760px) {
    .dgo-filters {
        padding: 28px 0 30px;
    }

    /* Sidebar split — 50/50 columns, content center-aligned both axes.
       The 260px-vs-1fr split read too right-heavy because chips dominated
       horizontally; equal columns plus center-justified content inside
       each column gives a properly balanced two-pane look. */
    .dgo-filters .dgo-container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 40px;
        align-items: center;
    }

    /* Left column — center the stacked block on the cross axis */
    .dgo-filters-side {
        align-items: center;
        text-align: center;
    }

    /* Heading content centers (eyebrow + title) */
    .dgo-filters .dgo-section-head {
        text-align: center;
    }

    /* Search bar capped width + centered as a block, no longer fills the
       full column (which would be ~580px and feel oversized). */
    .dgo-filters .dgo-search {
        width: 100%;
        max-width: 340px;
    }

    /* Chips center-justify within their column, so when they wrap to two
       rows the second row centers its remaining items instead of left-
       aligning awkwardly under the first. */
    .dgo-filter-chips {
        justify-content: center;
    }

    .dgo-filters .dgo-section-head .dgo-eyebrow { margin-bottom: 12px; }
    .dgo-filters .dgo-section-title {
        font-size: clamp(1.3rem, 2vw, 1.55rem);
        line-height: 1.35;
    }

    .dgo-filter-chips-wrap {
        flex: 1;
        min-width: 0;
        margin-inline: 0;
    }
    .dgo-filter-chips-wrap::after { display: none; }

    .dgo-filter-chips {
        flex-wrap: wrap;
        overflow: visible;
        padding-inline: 0;
        gap: 6px;
    }

    /* Slightly tighter chip on desktop so a long chip row reads cleaner */
    .dgo-chip {
        padding: 8px 14px 8px 12px;
        font-size: 0.88rem;
        min-height: 38px;
    }
    .dgo-chip::before { width: 7px; height: 7px; }

    /* Active chip gets stronger presence on desktop */
    .dgo-chip.is-active {
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    }

    /* Search sits in the left column under the heading, filling the rail
       width. Quiet utility look — transparent at rest, defers to chips
       until focused. Lights up to white-bg with brand border on focus. */
    .dgo-search {
        width: 100%;
        min-width: 0;
        height: 38px;
        padding: 0 14px;
        background: transparent;
        border-color: rgba(15, 23, 42, 0.10);
    }
    .dgo-search:focus-within {
        background: var(--dgo-bg-white);
        border-color: var(--dgo-brand-teal);
    }
    .dgo-search input { font-size: 0.92rem; }
}


/* =====================================================================
 * GRID — white bg. Mobile-first: 1 col, then 2, then 3.
 *
 * Top padding tightened — there's no longer an eyebrow + heading at the
 * top of the section, so the grid sits flush against the filter strip
 * with just enough breathing room.
 *
 * `content-visibility: auto` lets the browser skip layout/paint for the
 * grid until it scrolls into view. `contain-intrinsic-size` reserves
 * space so the scrollbar/CLS stays sane while skipped. Big LCP/FCP win.
 * ===================================================================== */
.dgo-grid-section {
    background: var(--dgo-bg-white);
    padding: 28px 0 56px;
    content-visibility: auto;
    contain-intrinsic-size: 1px 2400px;
}
@media (min-width: 760px) {
    .dgo-grid-section { padding: 40px 0 88px; }
}

.dgo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 640px) {
    .dgo-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 980px) {
    .dgo-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.dgo-card {
    background: var(--dgo-bg-white);
    border: 1px solid var(--dgo-line);
    border-radius: var(--dgo-radius-card);
    overflow: hidden;
    transition: border-color var(--dgo-tx), box-shadow var(--dgo-tx), transform var(--dgo-tx);
    display: flex;
    flex-direction: column;
}
.dgo-card:hover {
    border-color: var(--dgo-pillar-color, var(--dgo-line-hover));
    box-shadow: var(--dgo-shadow-hover);
    transform: translateY(-4px);
}

.dgo-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dgo-card-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--dgo-pillar-tint, var(--dgo-bg-soft));
}
.dgo-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--dgo-ease);
}
.dgo-card:hover .dgo-card-cover img { transform: scale(1.04); }

.dgo-card-cover-fallback {
    width: 100%;
    height: 100%;
    background: var(--dgo-gradient);
    opacity: 0.18;
}

.dgo-card-pillar {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255,255,255,0.94);
    color: var(--dgo-pillar-color, var(--dgo-ink));
    padding: 5px 12px;
    border-radius: var(--dgo-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
}

.dgo-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
@media (min-width: 760px) {
    .dgo-card-body { padding: 24px 24px; gap: 10px; }
}

.dgo-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--dgo-ink);
    margin: 0;
    /* clamp to 3 lines — real titles run long */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dgo-card-dek {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--dgo-body);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Load more */
.dgo-loadmore-wrap {
    text-align: center;
    margin-top: 32px;
}
@media (min-width: 760px) {
    .dgo-loadmore-wrap { margin-top: 48px; }
}

.dgo-loadmore {
    background: var(--dgo-bg-white);
    border: 1px solid var(--dgo-line);
    border-radius: var(--dgo-radius-pill);
    padding: 14px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dgo-ink);
    transition: border-color var(--dgo-tx), color var(--dgo-tx),
                transform var(--dgo-tx), box-shadow var(--dgo-tx);
    min-height: 44px;
}
.dgo-loadmore:hover:not(:disabled) {
    border-color: var(--dgo-brand-teal);
    color: var(--dgo-brand-teal);
    transform: translateY(-2px);
    box-shadow: var(--dgo-shadow-hover);
}
.dgo-loadmore:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.dgo-loadmore.is-loading::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: dgo-spin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes dgo-spin { to { transform: rotate(360deg); } }

.dgo-empty {
    text-align: center;
    color: var(--dgo-muted);
    font-size: 0.95rem;
    padding: 48px 0;
    margin: 0;
}


/* =====================================================================
 * CTA BAND — full-bleed brand gradient. The single allowed gradient
 * moment on the page (per the design system rule). Funnels blog readers
 * → MindMap (free) and Dogology 101 (course).
 * ===================================================================== */
.dgo-cta {
    background: var(--dgo-gradient);
    color: #fff;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 360px;
}

.dgo-cta::before {
    /* subtle radial decoration — adds depth without competing with copy */
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,0.16) 0%, transparent 42%),
        radial-gradient(circle at 86% 70%, rgba(255,255,255,0.10) 0%, transparent 40%);
    pointer-events: none;
}

@media (min-width: 760px) {
    .dgo-cta { padding: 72px 0; }
}

.dgo-cta-inner {
    position: relative; /* sit above ::before */
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

@media (min-width: 880px) {
    .dgo-cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
        text-align: left;
    }
    .dgo-cta-copy { max-width: 580px; }
}

.dgo-cta-copy .dgo-eyebrow { margin-bottom: 14px; }

.dgo-eyebrow--on-dark {
    color: #ffffff;
    opacity: 0.85;
}

.dgo-cta-title {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 12px;
}

.dgo-cta-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
    margin: 0;
}

.dgo-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
@media (min-width: 480px) {
    .dgo-cta-actions { flex-direction: row; justify-content: center; }
}
@media (min-width: 880px) {
    .dgo-cta-actions { flex-direction: column; align-items: stretch; }
}
@media (min-width: 1080px) {
    .dgo-cta-actions { flex-direction: row; }
}

/* CTA button variants — only used in the band */
.dgo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--dgo-radius-pill);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    min-height: 48px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--dgo-tx), box-shadow var(--dgo-tx),
                background var(--dgo-tx), color var(--dgo-tx);
    white-space: nowrap;
}

/* Specificity bump: outrank `.dgo-blog a { color: inherit }` so button
   text isn't pulled to white by the band's `color: #fff`. */
.dgo-blog .dgo-btn--white {
    background: #fff;
    color: var(--dgo-brand-blue);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.dgo-blog .dgo-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}

.dgo-blog .dgo-btn--ghost-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}
.dgo-blog .dgo-btn--ghost-light:hover {
    background: rgba(255,255,255,0.10);
    border-color: #fff;
}


/* =====================================================================
 * EDITORS PICKS — warm bg, flat-list pattern (mirrors mindmap-sales
 * `.dc-mm-traits-list`). Mobile-first padding.
 * ===================================================================== */
.dgo-picks {
    background: var(--dgo-bg-warm);
    padding: 48px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 480px;
}
@media (min-width: 760px) { .dgo-picks { padding: 72px 0; } }

.dgo-picks-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 820px;
    border-top: 1px solid var(--dgo-line);
}
.dgo-picks-list li { border-bottom: 1px solid var(--dgo-line); }

.dgo-picks-list li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0 22px 28px;
    color: var(--dgo-ink-2);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
    transition: color var(--dgo-tx), padding var(--dgo-tx);
}
.dgo-picks-list li a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Per-category color flows in via inline --dgo-pillar-color on <li> */
    background: var(--dgo-pillar-color, var(--dgo-brand-teal));
    transform: translateY(-50%);
    transition: transform var(--dgo-tx);
}
.dgo-picks-list li a:hover {
    color: var(--dgo-pillar-color, var(--dgo-brand-teal));
    padding-left: 36px;
}
.dgo-picks-list li a:hover::before {
    transform: translateY(-50%) scale(1.3);
}

.dgo-picks-name { flex: 1; }
.dgo-picks-time {
    color: var(--dgo-muted);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}


/* =====================================================================
 * Reduced motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dgo-blog *,
    .dgo-blog *::before,
    .dgo-blog *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}