/*!
 * responsive-fix.css — loaded last, after the legacy stylesheets.
 * Closes the gaps the original CSS left: unconstrained media, tables and
 * embeds that force horizontal scroll, and touch targets below the usable
 * minimum.
 */

/* ---- 1. Box model ----
 * No global border-box: the legacy template (BASE.css) is laid out in
 * content-box. #hd, for one, pairs height:80px with a 120px top padding that
 * clears the fixed header; under border-box the box shrank to the padding
 * alone and the page title disappeared behind the header. Rules below that
 * need border-box opt in. Bootstrap pages get it from bootstrap.min.css. */
html { -webkit-text-size-adjust: 100%; }

/* ---- 2. Kill horizontal overflow ----
 * On body only, so it propagates to the viewport. With html clipped as
 * well, body became its own scroll container (BASE.css gives it
 * height:100%): the window never scrolled, so the back-to-top button never
 * appeared, and the shop menu's body{overflow:hidden} scroll lock stopped
 * reaching the page. */
body { overflow-x: hidden; }

/* Long unbroken strings (URLs, IDs) used to push the layout wide */
body { word-wrap: break-word; overflow-wrap: break-word; }

/* ---- 3. Media never exceeds its container ---- */
img, video, canvas, svg, object {
    max-width: 100%;
    height: auto;
}

/* ---- 4. Embeds (YouTube, maps) scale with the column ---- */
iframe {
    max-width: 100%;
    border: 0;
}

.ac-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 0 0 1em;
}

.ac-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---- 5. Wide data tables scroll inside their own box, not the page ---- */
.ac-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ac-table-scroll > table { min-width: 100%; }

/* ---- 6. Fixed-width blocks become fluid below their breakpoint ----
 * .container3 sits beside .container2 on the shop pages; without the same
 * gutters its bootstrap .row (-15px margins) poked past the screen edge on
 * phones, widening the page by 8px. */
@media screen and (max-width: 1024px) {
    #hdTop,
    #ftBox,
    .container2,
    .container3 {
        box-sizing: border-box;
        width: 100%;
        max-width: 980px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* The homepage's 典藏精選 title is placed absolutely at left:0 of its
     * .container3; keep it on the content edge with the gutter above */
    .indexprolist #tabtitle { left: 15px; }
}

/* #cl/#cr already stack at this width in screen.css (96% wide, centred);
 * forcing them to 100% here put the text flush against the screen edge. */
@media screen and (max-width: 980px) {
    #cl .ifr,
    #cr .ifr { width: 100%; }
}

/* ---- 7. Touch targets: 44px minimum on pointer-coarse devices ----
 * (.m_navList links are already 45px tall in style.css) */
@media (pointer: coarse) {
    .navi a,
    nav a,
    .topnavleft a,
    .topnavright001 a,
    footer a {
        box-sizing: border-box;
        min-height: 44px;
        line-height: 1.5;
        display: inline-block;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .menu_opener,
    .a_js,
    .a_closed {
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- 8. Forms stay inside the viewport and stop iOS zoom-on-focus ---- */
input, select, textarea, button {
    box-sizing: border-box;   /* so 100%-wide fields include their padding */
    max-width: 100%;
    font-size: 16px;
}

textarea { resize: vertical; }

/* ---- 9. Small-screen typography and spacing ---- */
@media screen and (max-width: 560px) {
    body { font-size: 15px; line-height: 1.7; }
    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 17px; }

    #cl h1 { font-size: 20px; }

    .galleryTtl,
    .artImgBox,
    #artFile { box-sizing: border-box; width: 100%; max-width: 100%; }
}

/* ---- 9b. Legacy page-title band (#hd) ----
 * Fixed heights clipped any title or breadcrumb that wrapped; the band now
 * keeps its old height as a minimum and grows when it has to. */
#hd { height: auto; min-height: 80px; }

@media screen and (max-width: 980px) {
    #hdi { max-width: 100%; }   /* fixed 753px/540px widths below this */
    #pageNav { width: auto; }   /* was 753px, which forced it under the title */
}

@media screen and (max-width: 700px) {
    #hd { min-height: 70px; }
}

@media screen and (max-width: 560px) {
    #hd { min-height: 50px; }
    #hd .pttl { padding: 10px 5px; }
    #hd h1,
    #hd h2 { margin-top: 0; line-height: 1.4; }

    /* Linked titles are white for the dark desktop band, but the band is
     * white on phones */
    .pttl h1 a,
    .pttl h2 a,
    .pttl h1 a:hover,
    .pttl h2 a:hover { color: inherit; font-size: inherit; }

    /* A fixed 280px height cut off half the links and the address, and the
     * 30px left margin pushed the footer past the right edge. The five
     * floated link lists also dropped into a ragged stack; two even
     * columns instead, with the address across the bottom. */
    #ftBox {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        height: auto;
        margin-left: 0;
    }
    #ftBox ul { float: none; margin: 20px 0 0; }
    #ftBox .ftInf { grid-column: 1 / -1; }

    /* 96% wide plus the 10px side padding screen.css adds here overflowed
     * #main, which cut off the right edge of the column */
    #cl { box-sizing: border-box; }

    /* Contact form: the message box's 270px min-width overran the form */
    #frDat textarea { min-width: 0; width: 100%; }
}

/* ---- 9c. Legacy header: sticky, not fixed ----
 * #hd reserved a fixed 120-130px under the fixed header, but the header
 * grows whenever its menu wraps (seven items on a tablet, the phone menu in
 * landscape) and then covered the page title. Sticky keeps it pinned while
 * taking its real height. Phones keep the in-flow header screen.css gives
 * them, and so do short landscape screens, where the open phone menu is
 * taller than the viewport and a pinned header would hide its lower items.
 * Body must grow with the page (BASE.css fixes it at 100%), or the header
 * unsticks after one screen of scrolling. flow-root keeps a wrapped second
 * row of (floated) menu items inside the header's background. */
@media screen and (min-width: 561px) {
    body { height: auto; min-height: 100%; }
    header { position: relative; display: flow-root; }
    #hd { padding-top: 0; }
}

@media screen and (min-width: 561px) and (min-height: 500px) {
    header { position: sticky; top: 0; }
}

/* ---- 9d. Event articles (new/*) ----
 * The article text sits in #source, which BASE.css hides because a page
 * script rendered it into #cload; the scrape lost that loader, so 35 event
 * pages showed no article at all. Shown here in the site's editor style
 * (.tArea in BASE.css). */
#source {
    display: block;
    height: auto;
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 1px;
}

/* ---- 9e. News lists (#poList): rows were 100% wide plus 53px of padding,
 * and titles 120px + 80% wide, so the ends of long titles were cut off ---- */
#poList ul li { box-sizing: border-box; }
#poList ul li .listTtl { width: auto; }

/* The sidebar news box was 100% wide plus 2px padding, so its right edge
 * was cut off */
#whatsnews { box-sizing: border-box; }

/* Artwork titles get one 22px line (bank.css); a title that wrapped showed
 * the top sliver of its second line. Truncate it cleanly instead. */
.prdL .prdTtl {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 9f. FAQ accordion (fqa) ----
 * Titles were locked to one 42px line and clipped once they wrapped. The
 * chevron fills the 35px gutter layui reserves for its icon font, which the
 * site does not load. Open state comes from tabs.js. */
.layui-colla-title {
    height: auto;
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px;
}

.layui-colla-title::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 17px;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: rotate(-45deg);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.layui-colla-title[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

/* ---- 9g. Shop template on narrow screens ---- */

/* Keep short link labels whole when the line wraps: the sign-up banner
 * broke 立即加入 into 立即加 / 入, the category row 雕塑 into 雕 / 塑 */
.container2 > a[href$="users/register"],
.showfenlei a { white-space: nowrap; }

/* Course titles (courses) are held to two lines so the floated cards stay
 * aligned, but a 50px box with 26px lines cut the second line short with no
 * sign that the title went on */
.proli { height: 52px; }
.proli h4 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Pager buttons were a fixed 30px wide; "Last" spilled out of its box */
.pager a,
.pager strong {
    box-sizing: border-box;
    width: auto;
    min-width: 30px;
    padding: 0 8px;
}

/* Once the footer columns stack, the desktop 90px top padding on the
 * social icons left an empty red band above them */
@media screen and (max-width: 991px) {
    footer .end_logo { margin-top: 0; }
    footer .fenxiang { padding-top: 0; margin-bottom: 24px; }
}

/* ---- 9h. privacy, rule, copyright and cominf come from an older template
 * whose menu CSS and spNav() script were never captured: both menus spilled
 * as raw lists over the header and the page text, and every link in them
 * pointed at "/". The logo and footer still link out. ---- */
#spNavi,
#navi { display: none; }

/* ---- 10. Visible keyboard focus (was suppressed by the reset) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #b8933f;
    outline-offset: 2px;
}

/* ---- 11. Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 12. Print: drop chrome, keep content ---- */
@media print {
    header nav, .navi, .m_nav, .m_img, footer, .top_nav, .ac-carousel-nav, .ac-carousel-dots {
        display: none !important;
    }
    #cl, #cr { float: none; width: 100%; }
    body { color: #000; background: #fff; }
}