/*
 * Responsive layer for the (originally fixed-1000px) legacy design.
 * Loaded after the byte-identical legacy bundles, so desktop (>=981px) is
 * untouched. Two tiers per the 2026-06-15 decision:
 *   - Tablet:  max-width 980px  (fluid container, partial column collapse)
 *   - Phone:   max-width 640px  (full single-column stack + hamburger nav)
 */

/* ===========================================================================
   Hamburger toggle button — hidden on desktop, shown on phone.
   =========================================================================== */
.nav_toggle {
	display: none;
	position: absolute;
	top: 11px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 6px 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	z-index: 110;
}

.nav_toggle_bar {
	display: block;
	width: 100%;
	height: 2px;
	margin: 4px 0;
	background: #fff;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to an X when open. */
.stickynav.nav_open .nav_toggle_bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.stickynav.nav_open .nav_toggle_bar:nth-child(2) { opacity: 0; }
.stickynav.nav_open .nav_toggle_bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===========================================================================
   TABLET AND BELOW (<= 980px): make the fixed layout fluid.
   =========================================================================== */
@media (max-width: 980px) {
	html,
	body {
		min-width: 0;
		/* Clip the decorative bleed (NYC badge, background cubes) that is meant
		   to run off the edge; prevents a sliver of horizontal scroll. */
		overflow-x: hidden;
	}

	.container {
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	/* The studio profile and content wrappers wrap fluidly. */
	.page_content .container { width: auto; }

	/* 4-up grids drop to 2-up at tablet (related conversations/stories). */
	.related .span3,
	.grid_roundup .span3 { width: 48%; }

	/* Responsive 16:9 video — kill the fixed height=529. */
	.featured_video .video_holder,
	.conversations.detail iframe.video,
	.featured_video iframe.video {
		position: relative;
	}
	iframe.video {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Maps: full width, shorter. */
	.map.studiolocations,
	.map.studiolocations .canvas,
	.map.exhibitionlocation,
	.map.exhibitionlocation .canvas {
		width: 100% !important;
		height: 360px !important;
	}
}

/* ===========================================================================
   PHONE (<= 640px): single-column stack + hamburger nav.
   =========================================================================== */
@media (max-width: 640px) {

	/* ---- Nav: collapse to hamburger ---- */
	.nav_toggle { display: block; }

	header.stickynav { height: 54px; }

	/* Hide the cube logo slot's width games; keep it tidy. */
	header.stickynav nav { width: 100%; }

	/* Collapse the item list into a dropdown panel. */
	header.stickynav ul.nav {
		position: absolute;
		top: 54px;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0;
		background: rgba(32, 33, 92, 0.98);
		display: none;
	}
	header.stickynav.nav_open ul.nav { display: block; }

	header.stickynav ul.nav > li {
		float: none;
		display: block;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	header.stickynav ul.nav > li.logo { display: none; }
	header.stickynav ul.nav > li > a {
		display: block;
		padding: 14px 20px;
	}

	/* ---- Grid: everything stacks ---- */
	.row { margin-left: 0; } /* kill the desktop -20px gutter that overflows the fluid container */
	[class*="span"] {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
	}
	.related .span3,
	.grid_roundup .span3,
	.grid_roundup .span6 { width: 100% !important; }

	.container {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* ---- Typography scales down ---- */
	h1 { font-size: 30px; line-height: 1.1; }
	.intro h1,
	.home .intro h1 { font-size: 34px; }
	h2, .dek { font-size: 24px; line-height: 1.15; }

	/* ---- Home hero: hide the decorative overflow cubes, stack ---- */
	.bg_cubes { display: none; }
	.home .intro .span6 { width: 100% !important; }

	/* Rotating studios box + roundup tiles: consistent heights + uniform gaps
	   when stacked. box2 has only absolutely-positioned children (would collapse
	   without a height); .datavis gets a JS matchheight inline height, so beat it
	   with !important. */
	.page_content.home .grid_roundup .studios.squarebox.front { height: 300px; }
	.page_content.home .grid_roundup .squarebox.totalstudios,
	.page_content.home .grid_roundup .squarebox.box2,
	.page_content.home .grid_roundup .datavis {
		height: 200px !important;
		margin-top: 20px;
	}

	/* Participating studios list: single column + clear space above it (the
	   legacy .studio_list margin-top:-20px pulls it tight against the grid). */
	.participating_studios .studio_list [class*="span"] { width: 100% !important; }
	.page_content.home .participating_studios { margin-top: 30px; }
	.page_content.home .participating_studios .studio_list { margin-top: 0; }

	/* ---- Studios directory ---- */
	.page_content.studios nav.toggles ul { display: block; }
	.page_content.studios nav.toggles li { display: inline-block; margin: 4px 10px 4px 0; }
	.map.studiolocations,
	.map.studiolocations .canvas { height: 280px !important; }

	/* ---- Studio profile: stack the two portraits full-width.
	   Matches the legacy 4-class specificity (.page_content.studio_profile
	   section.portraits .portrait) so the override actually wins. The legacy
	   :first-child/:last-child gutters become opposite one-sided insets once
	   stacked, so reset to a symmetric 18px (aligns with the content padding)
	   and add a vertical gap between the items. ---- */
	.page_content.studio_profile section.portraits {
		margin-top: 20px;
	}
	.page_content.studio_profile section.portraits .portrait {
		width: 100%;
		float: none;
	}
	/* Target :first-child/:last-child to beat the legacy one-sided gutters
	   (which carry the same prefix, so a plain .portrait rule loses). */
	.page_content.studio_profile section.portraits .portrait:first-child,
	.page_content.studio_profile section.portraits .portrait:last-child {
		padding-left: 18px;
		padding-right: 18px;
	}
	.page_content.studio_profile section.portraits .portrait + .portrait {
		margin-top: 18px;
	}

	/* Photo credits: smaller type on mobile across all length variants
	   (base 22/26, .medium 18/22, .long 16/20). Hover reveal is untouched. */
	.page_content.studio_profile section.portraits .portrait .studio_photo_portrait .photo_credits,
	.page_content.studio_profile section.portraits .portrait .studio_photo_portrait .photo_credits.medium,
	.page_content.studio_profile section.portraits .portrait .studio_photo_portrait .photo_credits.long {
		font-size: 16px;
		line-height: 21px;
	}

	/* ---- About: the figure asides are position:absolute/float:right on
	   desktop; return them to normal flow so they don't overlap the body. ---- */
	.page_content.about section#about aside {
		position: static;
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}

	/* ---- Conversations / Explore grids -> single column ---- */
	.conversations .span6,
	.conversations .span3,
	.explore .span6,
	.explore .span3 { width: 100% !important; }

	/* ---- Footer stacks ---- */
	.footer_wrapper .span9,
	.footer_wrapper .span6,
	.footer_wrapper .span3 { width: 100% !important; margin-bottom: 20px; }

	/* Keep the WP admin bar from covering the fixed nav awkwardly on mobile. */
	body.admin-bar header.stickynav { top: 46px; }
}