/* responsive.css
   Load AFTER style.css. Above 940px wide nothing changes, so the desktop
   design is exactly as before. Below that the fixed 940px layout scales.
   Breakpoints: 940px (scale down), 760px (stack hero and header),
   600px and 420px (smaller navigation text). */

/* Responsive video wrapper (replaces fixed 550x309 iframes) */
.video {
	position: relative;
	width: 100%;
	max-width: 550px;
	margin: 0 auto 30px;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Image floated to the RIGHT of the text (add class="img-right" to the img).
   Only above 760px wide; on phones every image stacks above its text. */
@media only screen and (min-width: 761px) {
	.img-box1 img.img-right { float: right; margin: -10px 0 0 20px; }
}

/* Row of images, centred and evenly spaced (wrap them in <div class="gallery">).
   Images keep their natural size and shrink only if the row is too narrow. */
.gallery { display: flex; justify-content: space-evenly; align-items: flex-start; gap: 15px; margin: 10px 0 25px 0; }
.gallery img { float: none; margin: 0; min-width: 0; max-width: 100%; height: auto; }
@media only screen and (max-width: 760px) {
	.gallery { flex-direction: column; align-items: center; }
}

/* Testimonial quotation: <blockquote class="testimonial"><p>Quote</p><cite>Name, Company</cite></blockquote> */
.testimonial { position: relative; margin: 25px 0 30px 0; padding: 22px 25px 8px 65px; background: #1d1d1d; border-left: 4px solid #2c6d9a; }
.testimonial:before { content: "\201C"; position: absolute; left: 14px; top: 6px; font: bold 72px/1 Georgia, "Times New Roman", serif; color: #2c6d9a; }
.testimonial p { margin: 0 0 12px 0; font-size: 1.2em; font-style: italic; line-height: 1.6em; color: #e1e1e1; }
.testimonial cite { display: block; margin-bottom: 14px; font-style: normal; font-weight: bold; color: #2c6d9a; }
@media only screen and (max-width: 760px) {
	.testimonial { padding: 18px 15px 6px 48px; }
	.testimonial:before { left: 10px; font-size: 56px; }
}

/* ---------- 940px and below: scale the existing layout ---------- */
@media only screen and (max-width: 940px) {
	html, body { min-width: 0; overflow-x: hidden; }
	#main { width: auto; max-width: 940px; }
	img { max-width: 100%; height: auto; }

	/* Hidden SEO text uses a percentage negative margin, which would
	   become visible on narrow screens, so park it off screen instead */
	.ic, .ic a { position: absolute; left: -9999px; top: 0; margin: 0; float: none; }

	/* Header: keep five tabs in one row, sharing the width equally */
	#header { height: auto; padding-bottom: 8px; }
	#header .row-2 ul { display: flex; }
	#header .row-2 ul li { float: none; flex: 1 1 0; min-width: 0; }
	#header .row-2 ul li a { float: none; display: block; width: auto; background-size: 100% 100%; }

	/* Hero: everything is sized in em, and the font size follows the
	   screen width, so the banner scales as one piece (12.6px at 940px) */
	#slogan { width: auto; height: 25.556em; font-size: 1.3404vw; background-size: 100% 100%; }
	#slogan h2 { font-size: 2.381em; }
	#slogan h2 span { font-size: 1.3333em; }
	#slogan .inside { width: 25.397em; padding: 2.857em 0 0 3.968em; }
	#slogan .image, #slogan .image2, #slogan .image3, #slogan .image4, #slogan .image5 { right: -2.381em; top: -0.873em; width: 45.397em; height: 27.619em; background-size: 100% 100%; }

	/* Embedded iframes (forms, social feeds) never exceed the page width */
	iframe { max-width: 100%; }

	/* Instagram feed (news page): its height is fixed at 800px inline, which leaves a
	   big empty gap when the width shrinks, so keep it in proportion (760 x 800) */
	.snapwidget-widget { width: 100% !important; max-width: 760px; height: auto !important; aspect-ratio: 760 / 800; }

	/* Portfolio thumbnails keep their 30px overhang, but shrink with the column */
	.movies li img { max-width: calc(100% + 30px); }

	/* Site map: long PDF addresses wrap instead of pushing the page wider */
	.inner table { table-layout: fixed; }
	.inner td a { overflow-wrap: anywhere; word-break: break-word; }

	/* Other pages that share this stylesheet */
	.line-hor { width: auto; margin: 0 11px; }
	#contacts-form { width: auto; }
	#contacts-form textarea { width: 100%; box-sizing: border-box; }
	.movies li { width: 30.5%; margin-right: 2.5%; }
	.movies li.last { margin-right: 0; }
}

/* ---------- 760px and below: stack hero and header ---------- */
@media only screen and (max-width: 760px) {
	/* Header: logo above the three icons, both centred */
	#header .row-1 { height: auto; padding-bottom: 12px; }
	#header .row-1 .fleft { float: none; padding: 18px 0 0 0; text-align: center; }
	#header .row-1 ul { float: none; padding: 14px 0 0 0; text-align: center; }
	#header .row-1 ul li { float: none; display: inline-block; padding: 0 16px; }

	/* Hero: artwork on top, text underneath */
	#slogan { height: auto; font-size: 1em; padding-bottom: 20px; background-size: cover; background-position: center top; }
	#slogan .image, #slogan .image2, #slogan .image3, #slogan .image4, #slogan .image5 { position: relative; right: auto; top: auto; width: 100%; max-width: 572px; height: 0; padding-bottom: 60.84%; margin: 0 auto; }
	#slogan .inside { width: auto; padding: 10px 24px 0 24px; }
	#slogan h2 { font-size: 26px; }
	#slogan h2 span { font-size: 34px; }

	/* Content */
	/* Keep the original 50px side padding so text stays clear of the film sprockets */
	.box .inner { padding-top: 20px; }
	h3 { font-size: 24px; }

	/* Floated images beside text: stack above the text */
	.img-box1 > img, .list li > img { float: none; display: block; margin: 0 0 15px 0; }

	/* Other pages that share this stylesheet */
	.movies li { float: none; width: auto; margin-right: 0; }
	.movies li img { margin-left: 0; max-width: 100%; }
	#content .content { padding: 30px 24px 39px 24px; }
	/* Nested .inner boxes (contact and news) would double the side padding */
	.box .inner .inner { padding-left: 0; padding-right: 0; }
	.movies li p { padding-right: 0; }
	.address .fleft { float: none; padding-right: 0 !important; }
	#contacts-form label { float: none; width: auto !important; display: block; }
}

/* ---------- Smaller navigation text ---------- */
@media only screen and (max-width: 600px) {
	#header .row-2 ul li { font-size: 15px; line-height: 48px; margin-right: 3px; }
}
@media only screen and (max-width: 420px) {
	#header .row-2 ul li { font-size: 13px; margin-right: 2px; }
	#header .row-1 ul li { padding: 0 10px; }
}