/* Edgekink Explore — poster mosaic + layout toggle for home ?view=grid.
 *
 * Two layouts switched by a body class (set in js/explore.js):
 *   .ek-ex-masonry  CSS columns, natural heights (IG-Reels-explore feel) — default
 *   .ek-ex-grid     uniform tiles, capped at 3 columns, slightly tall
 * Dark aesthetic + accent shared with app-chrome.css. */

/* The parent's vids/pics tab grid is always replaced by our mosaic on Explore. */
body.ek-ex-masonry .tab-wrapper,
body.ek-ex-masonry .content-wrapper,
body.ek-ex-grid .tab-wrapper,
body.ek-ex-grid .content-wrapper {
	display: none !important;
}

/* ---- Layout toggle (floating icon pill, top-right) ---------------------- */

.ek-explore-toggle {
	position: sticky;
	top: 8px;
	z-index: 6;
	width: max-content;
	margin: 8px 8px 0 auto; /* hug the right edge */
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(12, 12, 15, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ek-explore-tab {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}
.ek-explore-tab svg {
	width: 21px;
	height: 21px;
	display: block;
	fill: currentColor;
}
.ek-explore-tab:hover {
	color: #fff;
}
.ek-explore-tab.is-active {
	background: var(--ek-accent, #ff2b5e);
	color: #fff;
}

/* ---- Mosaic ------------------------------------------------------------- */

.ek-explore {
	padding: 6px 4px 96px; /* bottom room for the fixed nav */
}

.ek-explore-list {
	margin: 0;
}

.ek-tile {
	display: block;
	margin: 0;
	line-height: 0;
	text-decoration: none;
}
.ek-tile img {
	width: 100%;
	display: block;
	border-radius: 7px;
	background: #15151a;
}

/* Masonry — natural heights packed in columns (2 on phones, 3 on wider). */
body.ek-ex-masonry .ek-explore-list {
	column-count: 2;
	column-gap: 4px;
}
body.ek-ex-masonry .ek-tile {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 4px;
}

/* Grid — uniform tiles, ~20% taller than square, never more than 3 columns. */
body.ek-ex-grid .ek-explore-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
body.ek-ex-grid .ek-tile img {
	aspect-ratio: 1 / 1.2;
	object-fit: cover;
	border-radius: 4px;
}

/* Wider screens: masonry gains a third column; grid stays capped at three so the
   tiles read bigger (a deliberate cap — some phones will still show them smaller). */
@media (min-width: 560px) {
	body.ek-ex-masonry .ek-explore-list { column-count: 3; }
}

.ek-explore-empty {
	padding: 64px 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 15px;
}
.ek-explore-sentinel {
	height: 1px;
}