/*
 * Buyit CMS — shared page width and mobile layout, v1.
 * Applied after the legacy inline styles on all public PHP pages.
 * No image filename, folder, or source content is changed.
 */
:root {
    --buyit-layout-max: 1380px;
    --buyit-layout-gutter: 24px; /* Total horizontal inset, not per-side */
}

/* Every image band and text section uses exactly the same content edges. */
.container,
#services .container,
#howto .container,
#reviews .container,
#faq .container,
.semantic-section .container,
#characters .container {
    box-sizing: border-box;
    width: min(var(--buyit-layout-max), calc(100% - var(--buyit-layout-gutter))) !important;
    max-width: var(--buyit-layout-max) !important;
    margin-inline: auto !important;
}

body, main, main > section, main > section > .container {
    min-width: 0;
    max-width: 100%;
}

main > section > .container > .hero-media,
main > section > .container > .hero-copy,
main > section > .container > .content-shell,
main > section > .container > .article-grid,
main > section > .container > .ai-summary,
main > section > .container > .split,
main > section > .container > .howto-dense-layout,
main > section > .container > .character-directory,
main .image-band figure {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

main .hero-media picture,
main .image-band picture,
main .howto-visual picture {
    display: block;
    width: 100%;
    max-width: 100%;
}
main .hero-media img,
main .image-band img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
main img, main video, main iframe, main canvas, main svg {
    max-width: 100%;
}

/* Protect grid/flex children from long Thai strings, URLs and wide content. */
.site-header .nav,
.site-header .brand,
.site-header .brand span,
.site-header .nav-links,
main .hero-copy,
main .services,
main .service-contact-strip,
main .content-shell,
main .content-card,
main .article-grid,
main .split,
main .howto-dense-layout,
main .howto-visual,
main .howto-panel,
main .steps-grid,
main .review-grid,
main .faq-list,
main .knowledge-copy,
main .knowledge-key-grid,
main .knowledge-mini-list,
main .directory-head,
main .directory-groups,
main .directory-links,
main .character-directory,
main .semantic-summary-grid,
main .keyword-cloud,
.footer .footer-grid-full,
.footer .footer-cta,
.footer .footer-cta-actions {
    min-width: 0;
    max-width: 100%;
}

main :is(.content-card, .service-card, .step-card, .review-card,
         .faq-card, .hero-intent-card, .fact, .directory-link,
         .character-topic-card, .knowledge-key-grid > div,
         .semantic-summary-card),
.footer :is(.footer-panel, .footer-cta, .footer-contact-box) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tables scroll inside their own cards — never force page-level scrolling. */
main .table-wrap {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
main .table-wrap table { width: 100%; }
main pre, main code { overflow-wrap: anywhere; }
main pre { max-width: 100%; overflow-x: auto; }
main .btn, .footer .btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    main .hero-dense-center .hero-copy,
    main .split,
    main .howto-dense-layout,
    main .directory-head,
    .footer .footer-cta {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .site-header .nav { flex-wrap: nowrap; }
    .site-header .brand {
        flex: 0 1 auto;
        max-width: calc(100% - 58px);
        overflow-wrap: anywhere;
    }
    .site-header .brand span {
        overflow-wrap: anywhere;
        line-height: 1.3;
    }
    .site-header .menu-btn { flex: 0 0 auto; margin-left: auto; }
    .site-header .nav-links {
        box-sizing: border-box;
        min-width: 0;
        max-width: calc(100% - 24px);
    }
}

@media (max-width: 600px) {
    :root { --buyit-layout-gutter: 20px; }

    main .hero-dense-center .hero-copy,
    main .services-dense .services,
    main .article-dense-section .article-grid,
    main .steps-grid,
    main #reviews .review-grid,
    main #faq .faq-list,
    main .service-contact-strip,
    .footer .footer-grid-full {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    main .article-dense-section .article-grid { column-count: 1 !important; }
    main .service-contact-strip > div { grid-column: auto; }
    main .howto-visual img { max-height: none; height: auto; object-fit: contain; }
    main .hero-copy > div,
    main .content-card,
    main .howto-visual,
    main .howto-panel {
        max-width: 100%;
    }
    main .hero-intent-grid,
    main .quickfacts,
    main .knowledge-key-grid,
    main .knowledge-mini-list,
    main .semantic-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    main .keyword-cloud,
    main .directory-links,
    main .howto-mini,
    .footer .footer-link-list.two-col {
        min-width: 0;
        max-width: 100%;
    }
    .site-header .brand span { font-size: clamp(.78rem, 3.35vw, .94rem); }
}

@media (max-width: 390px) {
    :root { --buyit-layout-gutter: 16px; }
    main .knowledge-key-grid,
    main .knowledge-mini-list,
    main .semantic-summary-grid,
    main .hero-intent-grid,
    main .character-term-grid,
    main .directory-links {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .site-header .brand { gap: 6px; }
    .site-header .brand span { font-size: .8rem; }
}

@media (max-width: 340px) {
    .site-header .brand img { width: 38px; height: 38px; }
    .site-header .menu-btn { padding: 7px 9px; }
    main .quickfacts,
    main .howto-mini,
    main .footer-cta-actions,
    .footer .footer-cta-actions,
    .footer .footer-link-list.two-col {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Editorial self-links within existing article prose: discoverable, never button-like. */
.article-dense-section .buyit-self-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
}
.article-dense-section .buyit-self-link:hover,
.article-dense-section .buyit-self-link:focus-visible {
    color: #145b84;
    text-decoration-thickness: 2px;
}
.article-dense-section .buyit-link-context { line-height: 1.7; }