/**
 * Explore: the browse surface.
 *
 * One stylesheet, four surfaces. The phone shell, the iPad shell and the
 * desktop web all render this same page; the only differences are the
 * container width and the column counts, which are media queries here
 * rather than a second implementation per platform (build brief section 1).
 *
 * v2 tokens only (--pink, --s4, --r-md and so on). No hand-picked values.
 */

.ph-explore {
	background: var(--surface);
	min-height: 60vh;
}

.ph-explore__inner {
	max-width: 1180px; /* Desktop is boxed to 1180 (brief section 7.2). */
	margin: 0 auto;
	padding: 0 var(--s4);
}

/* ── Header ─────────────────────────────────────────────────────── */

.ph-explore__head {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-top: var(--s4);
}

.ph-explore__brand {
	display: flex;
	align-items: center;
	gap: var(--s2);
}

.ph-explore__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r-sm);
	background: var(--pink);
	color: var(--white);
}

.ph-explore__mark svg,
.ph-explore__city svg {
	width: 16px;
	height: 16px;
}

.ph-explore__wordmark {
	font-size: var(--t-h3);
	font-weight: var(--w-heavy);
	letter-spacing: -0.4px;
}

.ph-explore__city {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px var(--s3);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink-2);
	font-size: var(--t-xs);
	font-weight: var(--w-heavy);
	text-decoration: none;
}

.ph-explore__city svg {
	width: 13px;
	height: 13px;
}

.ph-explore__title {
	margin: var(--s4) 0 0;
	font-size: var(--t-h1);
	font-weight: var(--w-heavy);
	letter-spacing: -1.1px;
	line-height: 1.1;
}

.ph-explore__sub {
	margin: 6px 0 0;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

/* The segmented control. Real links, so a section is a shareable URL and
   the back button behaves, rather than a tab state nobody can point at. */
.ph-explore__segments {
	display: flex;
	gap: var(--s1);
	margin-top: var(--s3);
	padding: 3px;
	border-radius: var(--r-sm);
	background: var(--surface);
}

.ph-explore__segment {
	flex: 1;
	min-height: 36px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	color: var(--ink-2);
	text-decoration: none;
	text-align: center;
	transition: background var(--fast), color var(--fast);
}

.ph-explore__segment.is-on {
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--e1);
}

/* ── Right now ──────────────────────────────────────────────────── */

.ph-explore__now {
	padding: var(--s4) 0 var(--s6);
}

.ph-explore__eyebrow {
	margin: 0 0 var(--s2);
	font-size: var(--t-xs);
	font-weight: var(--w-heavy);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* A row that scrolls sideways, which is right for moments: they are a
   shortlist to pick from, not a filter group. (The filter panel is the
   opposite case and is never a sideways strip.) */
.ph-explore__occs {
	display: flex;
	gap: var(--s2);
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 var(--s4) 2px;
	max-width: 1180px;
	margin: 0 auto;
}

.ph-explore__occs::-webkit-scrollbar {
	display: none;
}

.ph-explore__occ {
	flex: 0 0 auto;
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
	padding: 0 var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--fast), color var(--fast);
}

.ph-explore__occ:hover,
.ph-explore__occ:focus-visible {
	border-color: var(--pink);
	color: var(--pink-press);
}

/* ── Rails ──────────────────────────────────────────────────────── */

.ph-explore__rails {
	padding: var(--s6) 0 var(--s12);
}

.ph-explore__rail {
	margin-bottom: var(--s8);
}

.ph-explore__rail:last-child {
	margin-bottom: 0;
}

.ph-explore__railhead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s4);
	margin-bottom: var(--s3);
}

.ph-explore__railtitle {
	margin: 0;
	font-size: var(--t-h2);
	font-weight: var(--w-heavy);
	letter-spacing: -0.5px;
}

.ph-explore__railsub {
	margin: 2px 0 0;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.ph-explore__action {
	flex: 0 0 auto;
	font-size: var(--t-sm);
	font-weight: var(--w-heavy);
	color: var(--pink-press);
	text-decoration: none;
	white-space: nowrap;
}

.ph-explore__action:hover {
	text-decoration: underline;
}

/* Sideways rails: clips, offers, curators. */
.ph-explore__scroller {
	display: flex;
	gap: var(--s2);
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s4) var(--s2);
}

.ph-explore__scroller::-webkit-scrollbar {
	display: none;
}

/* Every kind of place. */
.ph-explore__types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s2);
}

.ph-explore__type {
	display: grid;
	place-items: center;
	gap: 6px;
	min-height: 78px;
	padding: var(--s3) var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	text-align: center;
	transition: border-color var(--fast), box-shadow var(--fast);
}

.ph-explore__type:hover,
.ph-explore__type:focus-visible {
	border-color: var(--pink);
	box-shadow: var(--e1);
}

.ph-explore__typeicon svg {
	width: 22px;
	height: 22px;
	color: var(--pink);
}

.ph-explore__typename {
	font-size: var(--t-xs);
	font-weight: var(--w-bold);
}

.ph-explore__typecount {
	font-size: var(--t-micro);
	color: var(--ink-3);
}

/* The card grid. The card itself is the existing component, not a new one. */
.ph-explore__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
}

.ph-explore__plans {
	display: grid;
	gap: var(--s3);
}

/* Clips. */
.ph-explore__clip {
	flex: 0 0 auto;
	width: 132px;
	color: var(--ink);
	text-decoration: none;
}

.ph-explore__clipmedia {
	position: relative;
	display: block;
	height: 186px;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--hatch);
}

.ph-explore__clipmedia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ph-explore__clipmedia::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.62));
}

.ph-explore__clipplay {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--pink);
}

.ph-explore__clipplay svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
}

.ph-explore__cliptitle {
	display: block;
	margin-top: 6px;
	font-size: var(--t-xs);
	font-weight: var(--w-heavy);
	line-height: 1.25;
}

.ph-explore__clipcredit {
	display: block;
	font-size: var(--t-micro);
	color: var(--ink-3);
}

/* Offers. */
.ph-explore__offer {
	flex: 0 0 auto;
	width: 230px;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
}

.ph-explore__offertag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px var(--s2);
	border-radius: var(--r-pill);
	background: var(--pink-soft);
	color: var(--pink-press);
	font-size: var(--t-micro);
	font-weight: var(--w-heavy);
}

.ph-explore__offertag svg {
	width: 11px;
	height: 11px;
}

.ph-explore__offername {
	display: block;
	margin-top: 5px;
	font-size: var(--t-sm);
	font-weight: var(--w-heavy);
}

.ph-explore__offervenue {
	display: block;
	margin-top: 2px;
	font-size: var(--t-xs);
	color: var(--ink-3);
}

/* Where to go. */
.ph-explore__places {
	display: grid;
	gap: var(--s2);
}

.ph-explore__place {
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
}

.ph-explore__placehead {
	display: flex;
	align-items: center;
	gap: var(--s2);
	color: var(--ink);
	text-decoration: none;
}

.ph-explore__placeicon svg {
	width: 16px;
	height: 16px;
	color: var(--ink-3);
	display: block;
}

.ph-explore__placename {
	flex: 1;
	font-size: var(--t-sm);
	font-weight: var(--w-heavy);
}

.ph-explore__placecount {
	font-size: var(--t-xs);
	color: var(--ink-3);
}

.ph-explore__areas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s2);
}

.ph-explore__area {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink-2);
	font-size: var(--t-xs);
	font-weight: var(--w-bold);
	text-decoration: none;
}

.ph-explore__area span {
	opacity: 0.55;
}

.ph-explore__area:hover {
	border-color: var(--pink);
	color: var(--pink-press);
}

/* Curators. */
.ph-explore__curator {
	flex: 0 0 auto;
	width: 170px;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
}

.ph-explore__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--white);
	font-size: var(--t-sm);
	font-weight: var(--w-heavy);
}

.ph-explore__curatorname {
	display: block;
	margin-top: 6px;
	font-size: var(--t-sm);
	font-weight: var(--w-heavy);
}

.ph-explore__curatorbio {
	display: block;
	font-size: var(--t-xs);
	color: var(--ink-3);
}

.ph-explore__curatorcount {
	display: block;
	margin-top: 3px;
	font-size: var(--t-micro);
	font-weight: var(--w-heavy);
	color: var(--pink-press);
}

/* ── Wider surfaces ─────────────────────────────────────────────── */

@media (min-width: 700px) {
	.ph-explore__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ph-explore__types {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ph-explore__plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ph-explore__places {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ph-explore__title {
		font-size: var(--t-d1);
	}

	/* The section control is a control, not a full-width band, once there
	   is room for it to sit at its own size. */
	.ph-explore__segments {
		display: inline-flex;
		gap: var(--s2);
	}

	.ph-explore__segment {
		flex: 0 0 auto;
		padding: 0 var(--s4);
	}
}