/*
 * models.css — the models listing page: the categories bar (only the
 * categories present in the current city, filled by models.js) and the
 * profiles grid of 160x240 preview cards. The division is chosen on the
 * home page and travels inside the #hash.
 * Card entrances are the .in class models.js adds on insert.
 */

/* The models page is locked to one viewport: the page itself never scrolls,
   only #models_grid does (its own scrollbar) when there are many profiles. */
body.page_models{
	height:100vh;
	overflow:hidden;
}

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

#cats_bar{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--white);
	padding:16px 30px;
	box-shadow:0 1px 0 var(--line);
}

#cat_tabs{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6px 32px;
}

.cat_tab{
	font-size:13px;
	color:var(--ink);
	cursor:pointer;
	transition:color .3s var(--ease);
}

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

.cat_tab.active{
	color:var(--accent);
}

/* ----------------------------------------------------------------- grid -- */

/* The only scrollable area of the page. */
#models_grid{
	flex:1;
	min-height:0;
	overflow-y:auto;
	display:grid;
	grid-template-columns: repeat(auto-fill,160px);
	justify-content:space-evenly;
	align-content:start;
	gap: 34px 16px;
	padding:30px 22px 60px;
}

/* Full-width rows inside the grid. */
#models_empty,#models_more{
	grid-column:1/-1;
}

.model_card{
	display:block;
	width: 100%;
	opacity:0;
	transform:translateY(22px);
	transition:opacity .5s var(--ease),transform .5s var(--ease);
}

/* models.js adds .in (with a small stagger) right after insertion. */
.model_card.in{
	opacity:1;
	transform:translateY(0);
}

/* Previews are 160x240; monochrome, back to color on hover. */
.model_card img{
	width: 100%;
	height: auto;
	aspect-ratio: 2/3;
	object-fit:cover;
	display:block;
	background:#efefef;
	filter:grayscale(1);
	transition:filter .5s var(--ease);
}

.model_card:hover img{
	filter:grayscale(0);
}

.model_card_cod{
	margin-top:9px;
	font-size:10px;
	color:var(--grey);
}

.model_card_nm{
	font-size:16px;
	color:var(--black);
}

/* ------------------------------------------------------ empty / loading -- */

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

#models_empty.shown{
	display:block;
}

/* Sentinel for the infinite "load more": shows three pulsing dots while a
   batch is being fetched. */
#models_more{
	height:60px;
	display:none;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-bottom:40px;
}

#models_more.shown{
	display:flex;
}

#models_more::before,
#models_more::after,
#models_more .dot{
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--light_grey);
	animation:more_pulse 1s ease-in-out infinite;
}

#models_more .dot{
	animation-delay:.15s;
}

#models_more::after{
	animation-delay:.3s;
}

@keyframes more_pulse{
	0%,100%{opacity:.25;}
	50%{opacity:1;}
}

@media (max-width:760px){
	#cats_bar{
		flex-direction:column;
		gap:12px;
		padding: 0 20px 14px;
	}
	.model_card img{
		filter: grayscale(0);
	}
}

@media (max-width:384px){
	#models_grid {
	    gap: 34px 4vw;
	    padding: 8vw 4vw 16vw;
	    grid-template-columns: repeat(auto-fill, 44vw);
	}
	.model_card img {
		width: 100%;
	}
}