/*
 * profile.css — the model profile page: the back box, and one long
 * left-right scrollable stripe holding the info cell followed by every
 * picture at full height.
 */

/* The profile page is locked to one viewport: nav + hero + cities bar +
   stripe add up to 100vh, so the stripe runs from the city chrome to the
   bottom of the screen and only scrolls left-right. The fixed body height
   keeps every flex level definite, which lets the pictures' height:100%
   resolve instead of falling back to their natural size.
   (The back button lives in the cities bar: see common.css #prfl_back.) */
body.page_profile{
	height:100vh;
	overflow:hidden;
}

body.page_profile main[data-page]{
	background:#f7f7f7;
	display:flex;
	flex-direction:column;
	min-height:0;
}

/* ---------------------------------------------------------------- stripe -- */

#prfl_strip{
	flex:1;
	min-height:0;
	display:flex;
	overflow-x:auto;
	overflow-y:hidden;
	background:var(--white);
	/* Faded in by profile.js once the data is there. */
	opacity:0;
	transform:translateY(14px);
	transition:opacity .45s var(--ease),transform .45s var(--ease);
}

#prfl_strip.in{
	opacity:1;
	transform:translateY(0);
}

/* Desktop drag-to-scroll (profile.js): the stripe reads as grabbable. */
#prfl_strip{
	cursor:grab;
}

#prfl_strip.dragging{
	cursor:grabbing;
	user-select:none;
}

#prfl_strip img{
	flex:none;
	height:100%;
	width:auto;
	display:block;
	object-fit: cover;
	object-position: center;
}

/* ----------------------------------------------------------------- info -- */

#prfl_info{
	flex:none;
	width:min(420px,86vw);
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:30px 54px;
	background:var(--white);
	overflow-y:auto;
}

#prfl_cod{
	font-size:11px;
	color:var(--ink);
}

#prfl_name{
	font-family:"Playfair Display",Georgia,serif;
	font-size:clamp(32px,3.4vw,46px);
	text-transform:none;
	letter-spacing:.02em;
	color:var(--black);
	margin:4px 0 30px;
}

#prfl_traits,
#prfl_msmts,
#prfl_sizes{
	font-size:13px;
	color:var(--ink);
	line-height:2;
}

/* The EU / US / IT / UK sizing systems. */
#size_tabs{
	display:flex;
	gap:7px;
	margin-top:20px;
}

.size_tab{
	font-size:11px;
	letter-spacing:.08em;
	padding:4px 11px;
	border:1px solid var(--black);
	color:var(--black);
	cursor:pointer;
	transition:background-color .3s var(--ease),color .3s var(--ease);
}

.size_tab:hover{
	border-color:var(--accent);
	color:var(--accent);
}

.size_tab.active{
	background:var(--black);
	color:var(--white);
}

.size_tab.active:hover{
	border-color:var(--black);
	color:var(--white);
}

/* ------------------------------------------------------------ not found -- */

#prfl_missing{
	display:none;
	text-align:center;
	color:var(--grey);
	letter-spacing:.2em;
	text-transform:uppercase;
	font-size:13px;
	padding:90px 20px 110px;
}

#prfl_missing.shown{
	display:block;
}

/* Mobile: the page scrolls normally and the stripe stacks vertically
   (top/down scrolling instead of left/right), with the info block on top. */
@media (max-width:760px){
	body.page_profile{
		height:auto;
		overflow:visible;
	}

	body.page_profile main[data-page]{
		display:block;
	}

	#prfl_strip{
		flex:none;
		display:block;
		height:auto;
		min-height:0;
		overflow:visible;
		background:transparent;
		padding: 6vw 6vw 0;
		cursor:default;
	}

	/* Pictures full width, one under the other. */
	#prfl_strip img{
		width:100%;
		height:auto;
		margin-top:9vw;
	}

	/* The info block: cod, big name, then the trait/measure lines with the
	   sizing tabs beside the shoe/dress line (grid, no markup change). */
	#prfl_info{
		width:100%;
		padding:2vw 0 0;
		background:transparent;
		display:grid;
		grid-template-columns:1fr auto;
		align-items:center;
		overflow:visible;
	}

	#prfl_cod,#prfl_name,#prfl_traits,#prfl_msmts{
		grid-column:1/-1;
	}

	#prfl_name{
		font-size:clamp(54px,16vw,84px);
		margin: 2vw 0 6vw;
	}

	#prfl_traits,#prfl_msmts,#prfl_sizes{
		font-size: 14px;
		line-height:2.2;
	}

	#size_tabs{
		margin-top:0;
	}
}