/* ==========================================================================
   Responsive overrides — The Ink Society / About Us
   Loaded AFTER main.css. Above 1020px nothing is changed: the original
   fixed 980px layout renders byte-for-byte as before.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (<=1020px): keep the two-column design, let the page and the
   content column flow with the viewport instead of being pinned at 980px.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
        #wrapper {
                width: auto;
                max-width: 980px;
                padding-left: 30px;
                padding-right: 30px;
        }
        /* #left and #lang are absolutely positioned and ignore the wrapper
           padding, so they are nudged 30px in by hand. The content
           column keeps the original 60px gap to the menu:
           30px + 200px menu + 60px gap = 290px from the wrapper edge,
           i.e. 30px padding + 260px margin-left. */
        #left {
                left: 30px;
        }
        #lang {
                right: 30px;
        }
        #right {
                margin: 128px 0 60px 260px;
        }
        #right #content,
        #right #content2,
        #right #content_contact {
                width: auto;
        }
	#right #content > p,
	#right #content2 > p {
		width: auto !important;      /* 對付內聯 style="width:620px" */
	}
	#right #content img,
	#right #content2 img {
		max-width: 100%;             /* 對付 619px banner */
		height: auto;                /* 保持比例 */
	}
	#right #content iframe{
		max-width: 100%; 
	}
	div.images.inline_gallery {
		width: auto;                 /* main.css 把相簿容器釘死在 500px */
	}
}

/* --------------------------------------------------------------------------
   Mobile (<=768px): stack the sidebar above the content, one column.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
        #wrapper {
                padding-left: 20px;
                padding-right: 20px;
        }
        #lang {
                top: 22px;
                right: 20px;
        }
        #left {
                position: static;
                width: auto;
        }
        #menu ul {
                height: auto;
                font-size: 14px;
        }
        #menu li {
                margin-bottom: 12px;
        }
        #right {
                position: static;
                margin: 24px 0 40px 0;
                min-height: 0;
                font-size: 14px;
                line-height: 22px;
        }
        #right #content,
        #right #content2,
        #right #content_contact {
                width: auto;
                text-align: left;
        }
        h1 {
                margin-bottom: 24px;
        }
        #footer {
                padding-top: 8px;
        }
}