/* ============================================
   ROUND 9 — Polished homepage sections + blog hero
   Loaded after main.css to override prior rules
   ============================================ */

/* === CTA banner — card style (NOT full-width) === */
.cta-banner {
    padding: 2rem 0 0 !important;
    background: none !important;
    margin: 0 !important;
}
.cta-banner::before { content: none !important; }
.cta-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(135deg, #FF8C42 0%, #E63946 100%);
    border-radius: 24px;
    padding: 1.75rem 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    box-shadow: 0 12px 32px rgba(230,57,70,.18);
    position: relative;
    overflow: hidden;
}
.cta-banner-inner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
    pointer-events: none;
}
@media (min-width: 720px) {
    .cta-banner-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 2.25rem 2.5rem;
        gap: 2rem;
    }
}
.cta-banner-text { position: relative; flex: 1; min-width: 0; }
.cta-banner h2 {
    color: #fff !important;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    margin: 0 0 .35rem;
    font-weight: 800;
    line-height: 1.25;
}
.cta-banner p {
    color: rgba(255,255,255,.94) !important;
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
}
.cta-banner-actions {
    display: flex !important;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
@media (min-width: 720px) {
    .cta-banner-actions { justify-content: flex-end; }
}
.cta-banner-actions .btn {
    border-radius: var(--goinkth-radius-pill);
    font-weight: 600;
}
.cta-banner-actions .btn-primary {
    background: #fff !important;
    color: var(--goinkth-primary) !important;
    border: 0;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.cta-banner-actions .btn-primary:hover { background: #fff7f3 !important; transform: translateY(-1px); }
.cta-banner-actions .btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.55);
}
.cta-banner-actions .btn-outline:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}

/* === Buyback teaser — soft warm card === */
.buyback-teaser { padding: 1.75rem 0 0; }
.bbt-row {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEEE0 100%);
    border: 1px solid rgba(255,140,66,.2);
    border-radius: 20px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}
@media (min-width: 720px) {
    .bbt-row {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem 2rem;
    }
}
.bbt-icon {
    font-size: 1.85rem;
    line-height: 1;
    background: #fff;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255,140,66,.18);
}
.bbt-text { flex: 1; min-width: 0; }
.bbt-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    color: var(--goinkth-black);
    line-height: 1.3;
}
.bbt-text p {
    font-size: .9rem;
    color: var(--goinkth-gray-700);
    margin: 0;
    line-height: 1.6;
}
.buyback-teaser .btn { flex-shrink: 0; }

/* === Home FAQ — accordion cards === */
.home-faq { padding: 2.25rem 0 2.5rem; }
.home-faq .section-title {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    margin-bottom: 1.25rem;
    text-align: center;
    font-weight: 800;
}
.home-faq-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-width: 820px;
    margin: 0 auto;
}
.home-faq details {
    background: #fff;
    border: 1px solid var(--goinkth-gray-200);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.home-faq details:hover { border-color: rgba(230,57,70,.35); }
.home-faq details[open] {
    border-color: var(--goinkth-primary);
    box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.home-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 3rem 1rem 1.15rem;
    font-weight: 600;
    color: var(--goinkth-black);
    font-size: .95rem;
    position: relative;
    transition: color .15s ease;
}
.home-faq summary:hover { color: var(--goinkth-primary); }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after {
    content: '+';
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 1.5px solid var(--goinkth-gray-300);
    border-radius: 50%;
    color: var(--goinkth-gray-500);
    font-weight: 400;
    font-size: 1.1rem;
    transition: all .25s ease;
}
.home-faq details[open] summary::after {
    content: '−';
    background: var(--goinkth-primary);
    border-color: var(--goinkth-primary);
    color: #fff;
}
.home-faq details p {
    padding: 0 1.15rem 1.15rem;
    margin: 0;
    color: var(--goinkth-gray-700);
    font-size: .9rem;
    line-height: 1.75;
    border-top: 1px solid var(--goinkth-gray-200);
    padding-top: .85rem;
}
.home-faq-more {
    text-align: center;
    margin-top: 1.5rem;
}
.home-faq-more .section-link {
    font-weight: 600;
    color: var(--goinkth-primary);
    text-decoration: none;
    font-size: .92rem;
}
.home-faq-more .section-link:hover { text-decoration: underline; }

/* === Blog single — hero banner (no gap, looks like home) === */
body.single-post,
.single-post {
    padding: 0 !important;
}
.post-hero-banner {
    background: linear-gradient(180deg, #FFF4ED 0%, #fff 90%);
    padding: .75rem 0 1.25rem;
    border-bottom: 1px solid var(--goinkth-gray-200);
    margin-bottom: 1.5rem;
}
@media (min-width: 880px) {
    .post-hero-banner { padding: 1.25rem 0 1.5rem; }
}
.post-hero-banner .breadcrumbs {
    margin: 0 0 .85rem;
    font-size: .82rem;
}
.post-hero-banner .single-post-header { margin: 0; }
.post-hero-banner .post-meta-row { margin-bottom: .65rem; }
.post-hero-banner .single-post-title {
    font-size: clamp(1.4rem, 4vw, 2.25rem) !important;
    line-height: 1.25;
    margin-bottom: .5rem;
    font-weight: 800;
}
.post-hero-banner .single-post-excerpt {
    font-size: clamp(.9rem, 1.6vw, 1.05rem);
    color: var(--goinkth-gray-700);
    line-height: 1.65;
    border-left: 3px solid var(--goinkth-primary);
    padding-left: .85rem;
    margin: .5rem 0 0;
    max-width: 900px;
}
.single-post > .container { padding-top: 0 !important; }

/* === Hero IMAGE-LEFT layout === */
@media (min-width: 880px) {
    .hero--with-image .hero-inner {
        grid-template-columns: 500px minmax(0, 1fr) !important;
    }
    .hero--with-image .hero-visual {
        order: 1 !important;
        justify-self: start !important;
    }
    .hero--with-image .hero-text {
        order: 2 !important;
    }
}
.hero-image {
    object-position: center center;
}

/* === Hero image visible on MOBILE too === */
.hero--with-image .hero-visual {
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: -1;
    width: 100%;
    max-width: 320px;
    margin: 0 auto .75rem;
    aspect-ratio: 1 / 1;
}
.hero--with-image .hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (min-width: 880px) {
    .hero--with-image .hero-visual {
        order: 1 !important;
        max-width: 500px;
        margin: 0;
        justify-self: start !important;
    }
}

/* === Remove top/bottom padding on Hero + Cat-quick (per request) === */
.hero {
    padding: 0 !important;
}
.cat-quick {
    padding: 0 !important;
}
.hero-inner {
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
}
@media (min-width: 880px) {
    .hero-inner {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* === Hero — tighter outer padding + breathable inner spacing === */
.hero-inner {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
@media (min-width: 880px) {
    .hero-inner {
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }
}

/* Add breathing room between hero text elements */
.hero-text .hero-eyebrow {
    margin-bottom: 1rem !important;
}
.hero-text .hero-title {
    margin-bottom: 1rem !important;
    line-height: 1.25 !important;
}
.hero-text .hero-sub {
    margin-bottom: 1.4rem !important;
    line-height: 1.65 !important;
}
.hero-text .hero-cta-row {
    margin-bottom: 1.25rem !important;
    gap: .65rem !important;
}
.hero-text .hero-search {
    margin-top: 0 !important;
}

/* === Sub-menu align to LEFT of parent (not centered) === */
@media (min-width: 880px) {
    .primary-menu .sub-menu {
        left: 0 !important;
        right: auto !important;
        transform: translateY(8px) !important;
    }
    .primary-menu > li:hover > .sub-menu,
    .primary-menu > li:focus-within > .sub-menu {
        transform: translateY(0) !important;
    }
}

/* === Tighten gap between header/sub-banner and Hero === */
.site-header .sub-banner {
    margin-bottom: 0 !important;
    padding-bottom: .35rem !important;
}
.hero, .hero-inner {
    margin-top: 0 !important;
}
.hero-inner {
    padding-top: 0 !important;
}
@media (min-width: 880px) {
    .hero-inner {
        padding-top: 0 !important;
    }
}
.site-main { padding-top: 0 !important; }
#content { padding-top: 0 !important; }

/* === Mobile: hero-inner becomes flex-column so image can be ordered first === */
@media (max-width: 879px) {
    .hero--with-image .hero-inner {
        display: flex !important;
        flex-direction: column !important;
    }
    .hero--with-image .hero-visual {
        order: -1 !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto .85rem !important;
    }
    .hero--with-image .hero-text {
        order: 1 !important;
    }
}

/* === Mobile: hero image FULL WIDTH + gap before next section === */
@media (max-width: 879px) {
    .hero--with-image .hero-visual {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 1rem !important;
        aspect-ratio: auto !important;
    }
    .hero--with-image .hero-image {
        width: 100% !important;
        height: auto !important;
        max-height: 380px;
        object-fit: contain;
    }
    /* Gap between Hero and Categories */
    .hero { margin-bottom: 1rem !important; }
    .cat-quick { margin-top: .5rem !important; }
}

/* === Mobile: hero image FULL-BLEED edge to edge (no padding) === */
@media (max-width: 879px) {
    .hero--with-image .hero-visual {
        margin-left: calc(-1 * var(--container-pad)) !important;
        margin-right: calc(-1 * var(--container-pad)) !important;
        margin-top: 0 !important;
        margin-bottom: .85rem !important;
        width: calc(100% + (2 * var(--container-pad))) !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .hero--with-image .hero-image {
        width: 100% !important;
        height: auto !important;
        max-height: 420px;
        max-width: none !important;
        object-fit: cover;
        display: block;
    }
    .hero { padding: 0 !important; }
    .hero-inner { padding-top: 0 !important; }
}

/* === Related posts — gradient fallback when no featured image + no padding === */
.related-posts .post-card {
    overflow: hidden;
}
.related-posts .post-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--goinkth-gray-100);
}
.related-posts .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}
.post-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: .5rem;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
}
.post-thumb-fallback .ptf-icon {
    font-size: 2.5rem;
    line-height: 1;
    opacity: .92;
}
.post-thumb-fallback .ptf-cat {
    font-size: .82rem;
    font-weight: 600;
    background: rgba(255,255,255,.22);
    padding: .25rem .8rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* === HP brand logo — scale down (too dominant) === */
.brand-item[aria-label="HP"] .brand-logo-img,
.brand-item[href*="/hp/"] .brand-logo-img {
    transform: scale(0.7);
    transform-origin: center center;
}

/* === Brand hub FAQ — gap between title and items === */
.brand-hub-faq .section-title {
    margin-bottom: 1.25rem !important;
}
.brand-hub-faq .bh-faq {
    gap: .65rem;
}
.brand-hub-faq {
    padding-top: 2rem !important;
}

/* === Post cards (index/archive) — consistent thumb area + fallback === */
.post-card .post-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--goinkth-gray-100);
}
.post-card .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* === Mobile: pill "ของแท้ 100%" overlaps bottom of hero image === */
@media (max-width: 879px) {
    .hero--with-image .hero-text .hero-eyebrow {
        position: relative;
        margin-top: -1.5rem !important;
        z-index: 5;
        box-shadow: 0 4px 12px rgba(15,23,42,.08);
    }
    .hero--with-image .hero-visual {
        margin-bottom: 0 !important;
    }
    .hero--with-image .hero-text {
        margin-top: 0 !important;
    }
}

/* === Brand logos — scale down ALL (not just HP) === */
.brand-circle .brand-logo-img {
    width: 75% !important;
    height: 75% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
/* Keep HP smaller still (it's particularly dominant) */
.brand-item[aria-label="HP"] .brand-logo-img,
.brand-item[href*="/hp/"] .brand-logo-img {
    width: 55% !important;
    height: 55% !important;
    transform: none !important;
}
@media (max-width: 720px) {
    .brand-circle .brand-logo-img {
        width: 70% !important;
        height: 70% !important;
    }
    .brand-item[aria-label="HP"] .brand-logo-img,
    .brand-item[href*="/hp/"] .brand-logo-img {
        width: 50% !important;
        height: 50% !important;
    }
}