/*
The grid of chat rooms drawn by [gdv_chat_rooms], on the landing page and on any
page it is placed. Its own file because gdv-chat.css loads only for a signed-in
reader, and this grid is for the visitor who is not.

On a wide screen the picture fills the card and the room's name and live line sit
on a dark fade at its foot. On a phone every card is one row, the picture about
88px on the left, which is the width RoomGrid::SIZES tells the browser; the 600px
breakpoint and the 280px widest card are the same numbers it assumes.

Measured: white on the fade is at least 10.37:1, even over a white photo, and the
green dot there 5.02:1. On the phone row, light: #1e1e1e on #fff 16.67:1, the line
#50575e 7.33:1, the dot #2f7d4f 5.04:1; dark: #f0f0f0 on #312e29 11.86:1, the line
#a3a3a3 5.36:1, the dot #5cc98a 6.55:1. The focus ring #1d3d3e on the alt ground
#f8f7f5 is 10.96:1, and #8ec8c9 on #262420 8.3:1. The coral hover ring #f0605c
sits on the page, never on the photo: 3.00:1 on #f8f7f5, 4.82:1 on #262420.

Element-qualified throughout: on a WP Bakery page the grid renders inside
.nv-content-wrap, where the theme styles ul, li, a and h2.
*/

.gdv-chat-rooms {
	--gdv-chat-rooms-card:  #ffffff;
	--gdv-chat-rooms-text:  #1e1e1e;
	--gdv-chat-rooms-muted: #50575e;
	--gdv-chat-rooms-here:  #2f7d4f;
	--gdv-chat-rooms-focus: #1d3d3e;
	--gdv-chat-rooms-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	--gdv-chat-rooms-hover: var(--gdv-ui-primary-hover, #f0605c);
}

@media (prefers-color-scheme: dark) {
	.gdv-chat-rooms {
		--gdv-chat-rooms-card:  #312e29;
		--gdv-chat-rooms-text:  #f0f0f0;
		--gdv-chat-rooms-muted: #a3a3a3;
		--gdv-chat-rooms-here:  #5cc98a;
		--gdv-chat-rooms-focus: #8ec8c9;
		--gdv-chat-rooms-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	}

}

.gdv-chat-rooms [hidden] {
	display: none !important;
}

/* The heading off the landing page, where gdv-chat-landing.css does not load. */
.gdv-chat-rooms h2.gdv-chat-rooms__heading {
	font-family: 'Cantata One', Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	margin: 0 0 3rem;
	color: var(--gdv-chat-rooms-text);
}

/*
Centred rows rather than grid columns, so two rooms sit in the middle under the
centred heading instead of in the first two of four columns. A row takes as many
cards as fit at 240px, which then grow to 280px at most.
*/
.gdv-chat-rooms ul.gdv-chat-rooms__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* On the item, not only the list: the theme's ul:not(.menu):not(…) rule sets a
   disc at (0,6,1), and an item's own list-style beats what it inherits. */
.gdv-chat-rooms li.gdv-chat-rooms__item {
	list-style: none;
	flex: 1 1 240px;
	max-width: 280px;
	margin: 0;
	padding: 0;
}

.gdv-chat-rooms li.gdv-chat-rooms__item::before {
	content: none;
}

.gdv-chat-rooms a.gdv-chat-rooms__card {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	color: #ffffff;
	text-decoration: none;
	background: var(--gdv-chat-rooms-card);
	box-shadow: var(--gdv-chat-rooms-shadow);
	transition: box-shadow 0.2s ease;
}

/*
Hover is a coral ring around the card, the site's hover colour, and never a
change of text colour: coral text is 3.23:1 on the fade over a light photo and
3.21:1 on the phone row.
*/
.gdv-chat-rooms a.gdv-chat-rooms__card:hover {
	box-shadow: 0 0 0 3px var(--gdv-chat-rooms-hover), var(--gdv-chat-rooms-shadow);
}

.gdv-chat-rooms a.gdv-chat-rooms__card:focus-visible {
	outline: 2px solid var(--gdv-chat-rooms-focus);
	outline-offset: 3px;
}

/* The picture's box fills the square card; the image fills the box. */
.gdv-chat-rooms .gdv-chat-rooms__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.gdv-chat-rooms img.gdv-chat-rooms__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

/* Decoration only: the card shows nothing on hover it does not show at rest. */
.gdv-chat-rooms a.gdv-chat-rooms__card:hover img.gdv-chat-rooms__image {
	transform: scale(1.04);
}

.gdv-chat-rooms .gdv-chat-rooms__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	gap: 2px;
	padding: 48px 20px 18px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 45%);
}

.gdv-chat-rooms .gdv-chat-rooms__name {
	display: block;
	font-family: 'Cantata One', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: #ffffff;
	/* Breaks a word only when it is wider than the whole line on its own. */
	overflow-wrap: break-word;
}

.gdv-chat-rooms .gdv-chat-rooms__live {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #ffffff;
}

.gdv-chat-rooms .gdv-chat-rooms__live--here::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #5cc98a;
}

/* The photo credits, one line under the grid. Normal text size, muted. */
.gdv-chat-rooms p.gdv-chat-rooms__credits {
	margin: 1.5rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
	color: var(--gdv-chat-rooms-muted);
}

/* ── Phone: one row per room ───────────────────────────────────────────── */

@media (max-width: 599px) {
	.gdv-chat-rooms h2.gdv-chat-rooms__heading {
		margin-bottom: 1.5rem;
	}

	.gdv-chat-rooms ul.gdv-chat-rooms__grid {
		flex-direction: column;
		gap: 12px;
	}

	.gdv-chat-rooms li.gdv-chat-rooms__item {
		flex: none;
		max-width: none;
	}

	.gdv-chat-rooms a.gdv-chat-rooms__card {
		display: flex;
		align-items: center;
		gap: 16px;
		aspect-ratio: auto;
		padding: 10px;
		color: var(--gdv-chat-rooms-text);
	}

	/* A fixed 88px square that neither grows nor shrinks, whatever the image
	   inside it declares. */
	.gdv-chat-rooms .gdv-chat-rooms__media {
		position: relative;
		inset: auto;
		flex: 0 0 88px;
		width: 88px;
		height: 88px;
		border-radius: 10px;
	}

	.gdv-chat-rooms a.gdv-chat-rooms__card:hover img.gdv-chat-rooms__image {
		transform: none;
	}

	.gdv-chat-rooms .gdv-chat-rooms__body {
		position: static;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		background: none;
	}

	.gdv-chat-rooms .gdv-chat-rooms__name {
		font-size: 1.125rem;
		color: var(--gdv-chat-rooms-text);
	}

	.gdv-chat-rooms .gdv-chat-rooms__live {
		color: var(--gdv-chat-rooms-muted);
	}

	.gdv-chat-rooms .gdv-chat-rooms__live--here::before {
		background: var(--gdv-chat-rooms-here);
	}

}

@media (prefers-reduced-motion: reduce) {
	.gdv-chat-rooms img.gdv-chat-rooms__image,
	.gdv-chat-rooms a.gdv-chat-rooms__card {
		transition: none;
	}

	.gdv-chat-rooms a.gdv-chat-rooms__card:hover img.gdv-chat-rooms__image {
		transform: none;
	}

}

/*
The landing page's first join section, which a card links to. Clear of a sticky
header on every width, so the line naming the room is not hidden under it; the
same clearance gdv-glossary gives its anchors.
*/
#gdv-chat-join {
	scroll-margin-top: 6rem;
}