/**
 * Budvocate v3: the strains front page and the filterable listing.
 */

.bud-hub h1,
.bud-list-head h1 {
	margin: 0;
	font-family: var(--bud-face);
	font-size: clamp(3.25rem, 6vw, 5rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

/* Front page: head --------------------------------------------------------- */

.bud-hub-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: clamp(1rem, 2vw, 1.5rem) 0;
}

.bud-hub-head h1 {
	margin-right: auto;
}

.bud-hub-search {
	display: flex;
	flex: 0 1 26rem;
	min-width: min(100%, 16rem);
}

.bud-hub-search input,
.bud-filter-search input {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--bud-line);
	border-radius: 8px;
	background: var(--bud-surface);
	font-size: 0.95rem;
	color: #fff;
}

.bud-hub-search input {
	border-radius: 8px 0 0 8px;
}

.bud-hub-search input:focus,
.bud-filter-search input:focus {
	border-color: var(--bud-lime);
	outline: none;
}

.bud-hub-search button {
	padding: 0.6rem 0.9rem;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: #2a332d;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

.bud-hub-search button:hover {
	background: #36423a;
}

.bud-hub-all,
.bud-hub-end {
	display: inline-block;
	padding: 0.65rem 1.1rem;
	border-radius: 8px;
	background: var(--bud-lime);
	font-size: 0.95rem;
	font-weight: 700;
	color: #0b0d0b;
	text-decoration: none;
}

.bud-hub-all:hover,
.bud-hub-end:hover {
	background: #fff;
	color: #0b0d0b;
}

/* Front page: one strain, then the types ------------------------------------ */

.bud-hub-top {
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	gap: 0.875rem;
}

.bud-hub-lead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	min-height: 400px;
	overflow: hidden;
	border-radius: 22px;
	border-bottom-right-radius: 0;
	background: var(--bud-surface);
	color: #fff;
	text-decoration: none;
}

.bud-hub-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.bud-hub-kicker {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bud-type);
}

.bud-hub-copy h2 {
	margin: 0 0 0.75rem;
	font-family: var(--bud-face);
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

.bud-hub-lead:hover h2 {
	color: var(--bud-type);
}

.bud-hub-dek {
	margin: 0 0 1.1rem;
	font-size: 1.1rem;
	line-height: 1.45;
	color: #dfe4df;
}

.bud-hub-effects {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

.bud-hub-effects li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.bud-hub-effects svg {
	width: 22px;
	height: 22px;
	color: var(--bud-type);
}

/* Fills the panel. A photo on a white ground just looks like a white panel. */
.bud-hub-art {
	position: relative;
	overflow: hidden;
	background: #fff;
}

.bud-hub-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bud-hub-lead:hover .bud-hub-art img {
	transform: scale(1.03);
}

.bud-hub-notch i {
	width: 128px;
	height: 104px;
}

.bud-hub-thc {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 104px;
	margin: 0;
	font-family: var(--bud-face);
	text-transform: uppercase;
}

.bud-hub-thc b {
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 0.95;
	white-space: nowrap;
	color: var(--bud-type);
}

.bud-hub-thc span {
	font-size: 1.1rem;
	line-height: 1;
	color: #fff;
}

.bud-hub-types {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 0.875rem;
}

.bud-hub-types a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 120px;
	padding: 1rem 1.1rem;
	border-radius: 16px;
	background: var(--bud-surface);
	color: #aeb7af;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bud-hub-types strong {
	font-family: var(--bud-face);
	font-size: clamp(2rem, 2.8vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--bud-type);
}

.bud-hub-types span {
	font-size: 0.86rem;
}

.bud-hub-types a:hover,
.bud-hub-types a:focus-visible {
	background: var(--bud-type);
	color: #0b0d0b;
}

.bud-hub-types a:hover strong,
.bud-hub-types a:focus-visible strong {
	color: #0b0d0b;
}

/* Front page: ways in ------------------------------------------------------- */

/* Effects are tiles in the page's lime. Aroma, further down, is a warm panel of
   its own, so the two never read as one block. */
.bud-hub-effect {
	margin-block: clamp(2rem, 4vw, 3rem);
}

.bud-hub-effect h2,
.bud-hub-aroma h2,
.bud-section-head h2 {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	font-family: var(--bud-face);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

.bud-hub-icons {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.5rem;
}

.bud-hub-icons a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 112px;
	padding: 0.75rem 0.25rem;
	border-radius: 12px;
	background: var(--bud-surface);
	font-size: 0.95rem;
	text-align: center;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bud-hub-icons svg {
	width: 36px;
	height: 36px;
	color: var(--bud-lime);
}

.bud-hub-icons a:hover,
.bud-hub-icons a:focus-visible {
	background: var(--bud-lime);
	color: #0b0d0b;
}

.bud-hub-icons a:hover svg,
.bud-hub-icons a:focus-visible svg {
	color: #0b0d0b;
}

.bud-hub-aroma {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr);
	gap: 1rem 2rem;
	align-items: center;
	margin-block: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 18px;
	background: #1b1610;
}

.bud-hub-aroma h2 {
	margin: 0;
	font-size: clamp(2.25rem, 3.5vw, 3rem);
	color: var(--bud-aroma);
}

.bud-hub-aromas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.15rem 1rem;
}

.bud-hub-aromas a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	font-size: 1rem;
	color: #fff;
	text-decoration: none;
}

.bud-hub-aromas svg {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--bud-aroma);
}

.bud-hub-aromas a:hover,
.bud-hub-aromas a:focus-visible {
	background: var(--bud-aroma);
	color: #0b0d0b;
}

.bud-hub-aromas a:hover svg,
.bud-hub-aromas a:focus-visible svg {
	color: #0b0d0b;
}

/* Front page: rows ---------------------------------------------------------- */

.bud-hub-shelf {
	margin-block: clamp(2rem, 4vw, 3rem);
}

.bud-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.bud-section-head h2 {
	margin: 0;
}

.bud-section-head a {
	flex: none;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--bud-lime);
	text-decoration: none;
}

.bud-section-head a:hover {
	text-decoration: underline;
}

.bud-hub-shelf .bud-poster-grid {
	--bud-cols: 6;
}

.bud-hub-end {
	display: block;
	margin-block: clamp(2rem, 4vw, 3rem);
	padding: 1rem;
	font-family: var(--bud-face);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* Listing: head ------------------------------------------------------------- */

.bud-list-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: clamp(1rem, 2vw, 1.5rem) 0;
}

.bud-list-count {
	margin: 0 auto 0 0;
	font-size: 1rem;
	color: #aeb7af;
}

.bud-list-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: #aeb7af;
}

.bud-list-sort select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--bud-line);
	border-radius: 8px;
	background: var(--bud-surface);
	font-size: 0.9rem;
	color: #fff;
}

/* Listing: sidebar ---------------------------------------------------------- */

.bud-list-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.bud-list-side {
	/* Moves with the page, so there's one scrollbar. A tall column stops once its end
	   is in view, set by strain-list.js. */
	position: sticky;
	top: var(--bud-side-top, 88px);
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

/* Bands take the color of the strain's type. A strain with no known type stays green. */
.bud-list-page .bud101-card.bud-type-indica,
.bud-list-page .bud101-card.bud-type-sativa,
.bud-list-page .bud101-card.bud-type-hybrid {
	border-top-color: var(--bud-type);
	border-bottom-color: var(--bud-type);
}

.bud-filter-panel > summary {
	display: none;
}

.bud-filter-search {
	margin-bottom: 0.5rem;
}

.bud-filter-group {
	border-top: 1px solid var(--bud-line);
}

.bud-filter-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 0;
	font-family: var(--bud-face);
	font-size: 1.35rem;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.bud-filter-group > summary::-webkit-details-marker {
	display: none;
}

.bud-filter-group > summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.2rem;
	border-right: 2px solid #aeb7af;
	border-bottom: 2px solid #aeb7af;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.bud-filter-group[open] > summary::after {
	transform: rotate(-135deg);
}

.bud-filter-group fieldset {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
}

.bud-filter-opt {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.28rem 0;
	font-size: 0.95rem;
	color: #dfe4df;
	cursor: pointer;
}

.bud-filter-opt:hover {
	color: var(--bud-lime);
}

.bud-filter-opt input {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--bud-lime);
}

.bud-filter-opt svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--bud-lime);
}

.bud-filter-opt span {
	flex: 1;
	min-width: 0;
}

.bud-filter-opt small {
	font-size: 0.82rem;
	color: #8b948c;
}

.bud-filter-opt.is-empty {
	opacity: 0.4;
}

.bud-filter-more > summary {
	padding: 0.3rem 0;
	font-size: 0.88rem;
	color: var(--bud-lime);
	cursor: pointer;
	list-style: none;
}

.bud-filter-more[open] > summary {
	display: none;
}

.bud-filter-apply {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.65rem;
	border: 0;
	border-radius: 8px;
	background: var(--bud-lime);
	font-weight: 700;
	color: #0b0d0b;
	cursor: pointer;
}

.bud-filter-form[data-live] .bud-filter-apply {
	display: none;
}

/* Listing: results ---------------------------------------------------------- */

.bud-list-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	margin-bottom: 1rem;
}

.bud-list-active[hidden] {
	display: none;
}

.bud-list-active button {
	padding: 0.25rem 0.6rem;
	border: 0;
	border-radius: 6px;
	background: #2a332d;
	font-size: 0.86rem;
	color: #fff;
	cursor: pointer;
}

.bud-list-active button::after {
	content: " ×";
	color: var(--bud-lime);
}

.bud-list-active button:hover {
	background: #36423a;
}

.bud-list-clear {
	margin-left: 0.25rem;
	font-size: 0.86rem;
	color: #aeb7af;
}

.bud-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.25rem 0.875rem;
}

.bud-list-card {
	container-type: inline-size;
	display: block;
	min-width: 0;
	border-radius: 6px;
	color: #dfe4df;
	text-decoration: none;
}

.bud-list-card[hidden] {
	display: none;
}

.bud-list-card .bud101-card {
	--bud101-w: 100cqw;
	box-shadow: none;
	transition: transform 0.2s ease;
}

.bud-list-card:hover .bud101-card,
.bud-list-card:focus-visible .bud101-card {
	transform: translateY(-4px);
}

.bud-list-card:focus-visible {
	outline: 2px solid var(--bud-lime);
	outline-offset: 3px;
}

.bud-list-meta {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #aeb7af;
}

.bud-list-meta b {
	display: block;
	font-weight: 700;
	color: #fff;
}

.bud-list-grid .bud-ad {
	grid-column: 1 / -1;
	margin-block: 0.25rem;
}

.bud-list-grid .bud-ad[hidden] {
	display: none;
}

.bud-list-empty {
	padding: 3rem 1rem;
	text-align: center;
	color: #aeb7af;
}

.bud-list-empty h2 {
	font-family: var(--bud-face);
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
}

.bud-list-empty a {
	color: var(--bud-lime);
}

/* Narrower ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.bud-hub-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.bud-hub-types {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bud-hub-types a {
		min-height: 96px;
	}
}

@media (max-width: 980px) {
	.bud-list-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.bud-list-side {
		position: static;
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.bud-filter-panel > summary {
		display: block;
		padding: 0.65rem 1rem;
		border-radius: 8px;
		background: var(--bud-surface);
		font-weight: 700;
		color: #fff;
		cursor: pointer;
	}

	.bud-filter-panel[open] > summary {
		margin-bottom: 0.75rem;
	}

	/* Filters first on a phone; the side ad would only push the strains down. */
	.bud-list-side > .bud-ad {
		display: none;
	}
}

@media (max-width: 760px) {
	.bud-hub-lead {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 18px;
	}

	.bud-hub-art {
		order: -1;
		padding-bottom: 2rem;
	}

	.bud-hub-notch {
		--notch-color: var(--bud-surface);
	}

	.bud-hub-notch i,
	.bud-hub-thc {
		width: 104px;
		height: 88px;
	}

	.bud-hub-thc b {
		font-size: 2.1rem;
	}

	.bud-hub-types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bud-hub-all {
		width: 100%;
		text-align: center;
	}

	.bud-hub-search {
		flex-basis: 100%;
	}
}

@media (max-width: 640px) {
	.bud-hub-icons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

/* The type options carry their colours into the sidebar. */
.bud-filter-opt[class*="bud-type-"] > span {
	color: var(--bud-type);
}

@media (max-width: 1180px) {
	.bud-hub-icons {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bud-hub-aroma {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.bud-hub-aromas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bud-hub-art {
		min-height: 240px;
	}
}