/*
 * WoW Hub — Layout Fit
 * Keeps the desktop layout (header rows, sidebar + main column) on narrow
 * desktop windows and tablets: 768–1365 px. Phones (< 768 px) are untouched;
 * they use the mobile menu and BeTheme's mobile layout.
 *
 * BeTheme switches to its "tablet" grid at 768–959 px: the homepage sidebar
 * becomes a narrow centred block above the main column and several desktop
 * blocks are hidden. Here we keep the two-column layout instead.
 */

/* ---------- Header (all pages) ---------- */
@media (min-width: 768px) and (max-width: 1365px) {
	/* Row 2: main menu + search + Стрімери/Ютубери */
	#mfn-header-template .mcb-section-8slucbtii .mcb-header-wrap,
	#mfn-header-template .mcb-section-bqgfobi2e .mcb-header-wrap {
		flex-wrap: nowrap !important;
	}
	#mfn-header-template .mcb-item-ly91iqt5m,
	#mfn-header-template .mcb-item-ztim2uw0gx {
		flex: 0 1 auto !important;
		min-width: 0;
	}
	#mfn-header-template .mcb-item-ly91iqt5m .mfn-header-menu,
	#mfn-header-template .mcb-item-ztim2uw0gx .mfn-header-menu {
		flex-wrap: nowrap !important;
	}
	#mfn-header-template .mcb-item-rrzsitw,
	#mfn-header-template .mcb-item-jbsvt2m {
		flex: 0 0 auto !important;
	}
	#mfn-header-template .mcb-item-jbsvt2m .social-actions {
		flex-wrap: nowrap;
	}

	/* Row 3: secondary menu + online streamers (the strip takes what is left) */
	#mfn-header-template .wh-streamers-col {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	#mfn-header-template .mcb-item-ly91iqt5m .mfn-header-menu > li > a {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
	#mfn-header-template .mcb-item-ly91iqt5m .mfn-header-menu > li > a .menu-label,
	#mfn-header-template .mcb-item-ztim2uw0gx .mfn-header-menu > li > a .menu-label {
		font-size: 14px !important;
	}
	#mfn-header-template .mcb-item-ztim2uw0gx .mfn-header-menu > li > a {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
	#mfn-header-template .mcb-item-jbsvt2m .social-btn {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (min-width: 768px) and (max-width: 959px) {
	/* Menu icons go first, labels stay */
	#mfn-header-template .mcb-item-ly91iqt5m .mfn-header-menu > li > a .menu-icon {
		display: none !important;
	}
	#mfn-header-template .mcb-item-ly91iqt5m .mfn-header-menu > li > a .menu-label,
	#mfn-header-template .mcb-item-ztim2uw0gx .mfn-header-menu > li > a .menu-label {
		font-size: 13px !important;
	}
	#mfn-header-template .mcb-item-jbsvt2m .social-btn {
		font-size: 13px !important;
		gap: 6px;
	}
}

/* ---------- Homepage: sidebar + main column ---------- */
@media (min-width: 768px) and (max-width: 1365px) {
	.mcb-section-c015c778a > .section_wrapper {
		flex-wrap: nowrap !important;
		align-items: flex-start;
	}
	/* BeTheme's clearfix ::after is a full-width flex item; with nowrap it eats the row */
	.mcb-section-c015c778a > .section_wrapper::after {
		content: none !important;
		display: none !important;
	}
	.mcb-section-c015c778a .mcb-wrap-cc59e5795 {
		flex: 0 0 clamp(250px, 27vw, 340px) !important;
		width: auto !important;
		max-width: none !important;
	}
	.mcb-section-c015c778a .mcb-wrap-656f0ef31 {
		flex: 1 1 0 !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
	}
}

/* Sidebar widgets: fixes that also help on wide screens */
@media (min-width: 768px) {
	/* Podcast teaser: the title and the «Слухати» button overlapped */
	.wh-podcast-teaser-head {
		flex-wrap: wrap;
		gap: 8px;
	}
	.wh-podcast-teaser-head .wh-podcast-teaser-title {
		white-space: nowrap;
	}

	/* LFG ticker: «Анкети гравців» title ran into «+ Створити анкету» */
	.whlfg-ticker-column > header {
		flex-wrap: wrap;
		row-gap: 4px;
	}
	.whlfg-ticker-column > header > span:first-child {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Podcast teaser in a narrow sidebar: smaller cover, badge text may wrap */
@media (min-width: 768px) and (max-width: 1365px) {
	.wh-podcast-teaser-cover {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		gap: 10px !important;
	}
	.wh-podcast-teaser-cover img {
		width: 48px !important;
		height: auto !important;
	}
	.wh-podcast-teaser-latest {
		white-space: normal !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
}

/* Race to Ukrainian First: guild chips under each boss overlapped their neighbours */
@media (min-width: 768px) and (max-width: 1365px) {
	.r-node .r-node-labels {
		width: calc(100% - 6px) !important;
		max-width: calc(100% - 6px) !important;
	}
	.r-node .r-node-label {
		max-width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.r-node .r-node-label > span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Forever banner in a narrow main column: button drops under the text */
@media (min-width: 768px) and (max-width: 1023px) {
	.whp-forever {
		flex-wrap: wrap;
		row-gap: 12px !important;
	}
	.whp-forever .whp-forever__logo {
		width: 104px !important;
		height: auto !important;
	}
	.whp-forever .whp-forever__text {
		flex: 1 1 220px;
		min-width: 0;
	}
	.whp-forever .whp-forever__btn {
		margin-left: auto;
	}
}

/* Desktop-only blocks that BeTheme hides on its tablet grid */
@media (min-width: 768px) and (max-width: 959px) {
	.mcb-item-a86aabd44.hide-tablet,
	.mcb-item-f42a645d9.hide-tablet,
	.mcb-item-7x94dic.hide-tablet {
		display: block !important;
	}
}